Bloques Void

Todos los programas de processing tienen una estructura común que consta de dos grandes bloques o funciones:

• Definición de datos y variables
• void setup(){  }
• void draw(){  }

Cada bloque debe de tener una llave abierta, dentro tendrá todas las instrucciones que yo le indique y terminará cerrando la llave.
Por ejemplo:

Algunos conceptos importantes:

• El SETUP siempre debe preceder al DRAW
• El bloque setup se ejecuta una sola vez, mientras que el draw se ejecuta de forma indefinida.
• Si una línea de código empieza por // no es código del programa, son comentarios del programador.
• Con /* podemos hacer un comentario de varias líneas, cerrando la última línea con */.

Funciones de dibujo

Funciones de dibujo

Instrucción	Descripción
size (x,y);	la x es el ancho y la y es el alto. Esta instrucción define el tamaño de la ventana del programa.
point (x,y);	esta función crea un punto de un pixel.
line (x1,y1,x2,y2);	x1 y x2 son las dos coordenadas del punto inicial de la recta y, y1 e y2 es el punto final de la recta.
triangle (x1,y1,x2,y2,x3,y3);	triángulo con las coordenadas de los vértices
quad (x1,y1,x2,y2,x3,y3,x4,y4);	permite dibujar cuadriláteros, rombos y potros paralelogramos equiláteros.
rect (x,y,largo,alto,radius);	dibuja un rectángulo x e y es el vértice superior izquierdo del rectángulo. Radius no es obligatorio y permite añadir bordes redondeados.

rectMode() ;  modifica el modo en el que serán dibujados nuestros rectángulos. Podemos introducir tres valores en mayúsculas: CORNER, CORNERS, CENTER.

· CORNER: Es el modo por defecto, y el que hemos aprendido arriba. (x, y, width, height).
rectMode(CORNER);

· CORNERS: 1º y 2º parámetro = esquina superior izquierda. 3º y 4º parámetro = esquina inferior derecha.
rectMode(CORNERS);

· CENTER: Utiliza el primer y el segundo parámetro para establecer el centro del rectángulo, y el tercer y el cuarto parámetro como la anchura y la altura.
rectMode(CENTER);

Funciones de formato

Instrucción	Descripción
background (red,green,blue);	sirve para poner un fondo con color.
fill (red, green,blue);	rellena una figura del color indicado. Importante es que se debe escribir antes de escribir la función de la figura.
strokeWeight (x);	esta función lo que hace es dibujar con un borde más ancho y la anchura me la marca en un valor de X.
stroke (red,green,blue);	cambia el color del borde.

Ellipses y arcos

ellipse (x,y,ancho,alto); me dibuja una elipse con centro en el punto (x,y) de eje horizontal el ancho y de eje vertical el alto.

arc(x, y, width, height, arc_start, arc_end); Para dibujar un arco debemos utilizar seis parámetros. x e y para determinar el centro, el 3º parámetro para determinar el ancho y el 4º la altura. el 5º es el comienzo del arco y el 6º el final del mismo.

Processing por defecto mide los ángulos en radianes en la dirección de las agujas del reloj. El sistema de coordenadas polares utiliza una estructura diferente al sistema cartesiano.  

Processing nos proporciona las siguientes constantes: PI, TWO_PI, HALF_PI, y QUARTER_PI.

Ejemplo: arc( 50,50,50,50,-QUARTER_PI, QUARTER_PI);

Por ese motivo podemos utilizar grados para calcular el comienzo y el final de nuestros arcos, utilizando la función radians().

Ejemplo: arc( 50,50,50,50,radians(0), radians(270));