2. Primeros pasos: formas y colores

2.4. Formas básicas y coordenadas

Lo primero que debemos hacer para empezar a dibujar es crear nuestro canvas o lienzo. Para ello, dentro de la función setup() podemos utilizar el método createCanvas() de la siguiente manera:

createCanvas(400, 200);

El método createCanvas() entre sus paréntesis acepta dos parámetros: el tamaño del lienzo en la dimensión x y su tamaño en la dimensión y o, lo que es lo mismo, el ancho y el alto. En el caso del código anterior, el canvas tendrá 400 px de ancho y 200 px de alto.

Una vez que tenemos nuestro lienzo, podemos empezar a dibujar algunas formas dentro de este. P5.js cuenta con métodos para dibujar formas básicas como líneas, cuadrados, rectángulos o círculos. Podemos escribir estos métodos dentro del draw(). Dependiendo de la forma que queramos dibujar, tendremos que incluir unos parámetros u otros. Por ejemplo, para dibujar una línea necesitamos especificar las coordenadas de los dos puntos que la definen, mientras que para dibujar un rectángulo especificamos las coordenadas de su esquina superior izquierda, su ancho y su alto, en lugar de las coordenadas de sus cuatro puntos.

Cuando dibujamos en nuestro canvas, la coordenada x es la distancia desde el borde izquierdo del canvas y la coordenada y es la distancia desde la parte superior. Si definimos una coordenada como un punto (x, y) y nuestro canvas tiene 400 × 400 px, la esquina superior izquierda será la coordenada (0, 0), el centro del canvas será la coordenada (200, 200) y la esquina inferior derecha será la coordenada (399, 399). ¿Por qué no (400, 400)? Porque el punto (0, 0) es parte de nuestro canvas, empezamos a contar desde el cero, algo que programando es muy común.