Formas básicas

La función point(x, y) nos permite dibujar un punto, sólo es necesario indicar los valores de las coordenadas x, y.

Imagen extraída del tutorial "Coordinate System and Shapes" de Daniel Shiffman.

La función line(x1, y1, x2, y2) nos permite dibujar una línea,  sólo es necesario indicar los valores de las coordenadas de dos puntos  x1, y1 y  x2, y2.

Imagen extraída del tutorial "Coordinate System and Shapes" de Daniel Shiffman.

La función rect() nos permite dibujar un rectángulo,  existen tres formas diferentes de utilizarla.

1) Indicando la esquina superior izquierda, el ancho y el alto.

rect(x, y, width, height)

En este caso tendremos que indicar los valores de las coordenadas de la esquina superior izquierda  x, y, el ancho  width y el alto  height.

Imagen extraída del tutorial "Coordinate System and Shapes" de Daniel Shiffman.

2) Indicando las coordenadas del centro del rectángulo.

rectMode(CENTER)
rect(x, y, width, height)

En este caso antes de utilizar la función rect tenemos que utilizar la función rectMode(CENTER) para indicar que las coordenandas x, y  se corresponden al punto central de rectángulo.

3) Indicando las coordenadas de dos esquinas del rectángulo.

rectMode(CORNERS)
rect(x1, y1, x2, y2)

En este caso antes de utilizar la función rect tenemos que utilizar la función rectMode(CORNERS) para indicar que vamos a utilizar las coordenandas de la esquina izquierda superior x1, y1  y las coordenadas de la esquina inferior derecha x2, y2.

Imagen extraída del tutorial "Coordinate System and Shapes" de Daniel Shiffman.

La función ellipse() nos permite dibujar una elipse,  existen tres formas diferentes de utilizarla.

1) Indicando las coordenadas del centro de la elipse.

ellipseMode(CENTER)
ellipse(x, y, width, height)

En este caso antes de utilizar la función ellipse tenemos que utilizar la función ellipseMode(CENTER) para indicar que las coordenandas x, y  se corresponden al punto central de la elipse.

2) Indicando la esquina superior izquierda, el ancho y el alto, del rectángulo que encierra a la elipse.

ellipseMode(CORNER)
ellipse(x, y, width, height)

En este caso tendremos que indicar los valores de las coordenadas de la esquina superior izquierda  x, y, el ancho  width y el alto  height.

Imagen extraída del tutorial "Coordinate System and Shapes" de Daniel Shiffman.

3) Indicando las coordenadas de dos esquinas del rectángulo que encierra a la elipse.

ellipseMode(CORNERS)
ellipse(x1, y1, x2, y2)

En este caso antes de utilizar la función ellipse tenemos que utilizar la función ellipseMode(CORNERS) para indicar que vamos a utilizar las coordenandas de la esquina izquierda superior x1, y1  y las coordenadas de la esquina inferior derecha x2, y2, del rectángulo que encierra a la elipse.

Imagen extraída del tutorial "Coordinate System and Shapes" de Daniel Shiffman.