Para dibujar una línea debemos utilizar el comando "line", luego entre paréntesis se agregan los números que corresponderían a la ubicación de los 2 puntos que queremos unir para dibujar una línea; este es un gráfico explicativo de los puntos:
El punto 1 se conforma de las coordenadas x1, y1, y el punto 2 esta conformado con las coordenadas x2, y2.
Los primeros 2 números después del comando line son las coordenadas del punto 1, los otros 2 números son las coordenadas del punto 2
Para dibujar un triángulo, se usa la siguiente función:
triangle(x1, y1, x2, y2, x3, y3)
Es decir, hay que poner las coordenadas de los tres puntos del triángulo.
Para dibujar rectángulos no hace falta hacerlo por líneas
Se utiliza el comando "rect", que tiene cuatro parámetros:
rect(x, y, ancho, altura)
Por ejemplo, el siguiente código dibuja un rectángulo en las coordenadas (60, 120), con un ancho de 60 pixeles y una altura de 120 pixeles
Para dibujar un cuadrilátero cualquiera, sin necesidad de que sea un rectángulo, se utiliza la siguiente función:
quad(x1, y1, x2, y2, x3, y3, x4, y4)
Es decir, hay que poner las coordenadas de los cuatro puntos del cuadrilátero.
Para dibujar una elipse se utiliza el comando "ellipse" y se escriben 4 números, que en orden serían: la coordanada x del centro de la elipse, la coordenada y de su centro, el ancho y la altura. La función es:
ellipse(x, y, ancho, altura)
Por ejemplo, el siguiente código dibuja una elipse con centro en las coordenadas (80, 80), ancho de 80 pixeles y altura de 80 pixeles.
Obs.: una elipse de igual ancho y altura es un círculo.
arc(x, y, ancho, altura, inicio, final)
El primer y el segundo parámetro definen la ubicación, mientras que el tercero y el cuarto definen el ancho y la altura. El quinto parámetro define el ángulo inicial del arco y el sexto el ángulo final. Los ángulos están definidos en radianes, en vez de grados. Los radianes son medidas de ángulo basadas en el valor de pi (3.14159).
Como se ve en este ejemplo, cuatro valores de radianes son usados tan frecuentemente que fueron agregados con nombres especiales como parte de p5.js. Los valores PI, QUARTER_PI, HALF_PI y TWO_PI (por PI, un cuarto de PI, un medio de PI, y dos PI) pueden ser usados para reemplazar los valores en radianes de 180°, 45°, 90°, y 360°.
Para este ejemplo, se dibujan medias elipses usando la función radians().
Control de orden del dibujo
Para que una figura se pueda dibujar encima de otra, el código de la figura que se quiera sobreponer debe estar después de la figura que va a estar abajo
Ahora intenta resolver estas actividades: