Introducción a la programación para artistas y principiantes

Dibujando figuras

Por fin ha llegado el momento que todos estábamos esperando, la hora de meter las manos en la masa y empezar a dibujar en ese lienzo que nos proporciona p5.

Tenemos multitud de instrucciones para dibujar en nuestro lienzo, vamos a ver algunas de ellas en la referencia de p5. Empecemos por algo tan sencillo como una línea con la función line().

En la documentación nos dan algunos ejempos sobre cómo utilizar esta instrucción, básicamente se tienen que indicar dos puntos dentro del eje de coordenadas del lienzo para dibujar una línea de un punto al otro... Pero un momento, ¿qué demonios es un eje de coordenadas? Tranquilos, que ahora os lo explico muy rápidamente.

El eje de coordenadas

Un eje de coordenadas es un sistema donde podemos determinar la posición de puntos y objetos geométricos. En nuestro caso tenemos un canvas con una anchura y altura de 400 píxeles que nos sirve como base, considerando que su esquina superior izquierda es el punto origen con coordenada (0, 0) haciendo referencia a los píxeles 0 y 0 en los ejes X (ancho) e Y (alto) respectivamente. Por otra parte sabiendo que el canvas hace 400x400, el punto en su esquina inferior derecha se encontraría ni más ni menos que en la coordenada (400, 400).

Sabiendo todo esto lo que nos está pidiendo la función line() son los valores de la coordenada X e Y del punto donde empezará la recta (x1, y1) y la coordenada donde finalizará (x2, y2):

03 - Figuras/sketch.js

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  line(0, 0, 400, 400);
  // line(0, 400, 400, 0);
  // line(0, 200, 400, 200);
  // line(200, 0, 200, 400);
}

Dibujando un rectángulo

Sabiendo cómo se dibujan rectas podríamos dibujar cualquier polígono, pero p5 nos proporciona funciones para ahorrarnos trabajo. Por ejemplo para dibujar un rectángulo podemos utilizar la función rect() que nos pide una coordenada inicial y luego una anchura y altura para el rectángulo:

function draw() {
  background(220);
  rect(0, 0, 200, 200);
}

Este rectángulo o más bien cuadrado ocupa una cuarta parte del lienzo. ¿Qué pasaría si luego dibujamos otro cuadrado que ocupe todo el lienzo?

function draw() {
  background(220);
  rect(0, 0, 200, 200);
  rect(0, 0, 400, 400);
}

Pues como véis se dibuja encima del pequeño haciéndolo desaparecer. Esto nos enseña que cuando dibujamos en el canvas, las formas van quedando abajo como por capas. Si queremos ver ambos cuadrados en el lienzo, entonces tendremos que dibujar primero el grande y luego el pequeño:

function draw() {
  background(220);
  rect(0, 0, 400, 400);
  rect(0, 0, 200, 200);
}

Con esto es suficiente para empezar, si queréis aprender más por vuestra cuenta recordad que en la referencia tenéis todo lo necesario.