Tutorial de Processing (II)

Cómo se trabaja con Processing

En esta entrada vamos a ver cómo se trabaja con Processing desde lo más básico: las instrucciones, los comentarios en el código, el tamaño del lienzo o superficie de dibujo, coordenadas y dibujo de diversas formas básicas (punto, línea, rectángulo y elipse).

Instrucciones

Son los elementos estructurales del programa. Todas las instrucciones deben finalizar con “;”

Ejemplo:

point (100,100);

 

Comentarios

Son usados para hacer notas (apuntes) entre las líneas de código, que por lo general facilitan la comprensión del programa. Para hacer comentarios de una línea se debe iniciar el comentario con “//”

Ejemplo:

//int v ‐ velocidad de desplazamiento.

Para hacer comentarios que requieren más de una línea, se debe iniciar el comentario con “/*” y finalizarlo con “*/”

Ejemplo:

/* Esta instrucción dibuja 20 líneas y modifica
el color según con la posición en el eje y */

 

Tamaño del lienzo o superficie de dibujo



Para establecer el tamaño del lienzo es necesario definir el ancho (eje x) y el alto (eje y) de la superficie con size(ancho,alto);

Ejemplo

size(400,400);

 

Coordenada

Posición (punto) en el espacio.

 

Formas básicas

• point: point (x,y); en donde x = posición en el eje x e y = posición en el eje y.

Ejemplo:

point (20,20);

 

• line: line (x,y,x2,y2); donde x,y = posición en los ejes x e y donde inicia la línea, x2,y2 = posición en los ejes x e y donde acaba la línea.

Ejemplo:

line (20,20,20,60);

 

• rect: rect (x,y,ancho,alto); en donde x,y = posición inicial en los ejes x e y;  ancho = ancho del rectángulo; alto = alto del rectángulo

Ejemplo:

rect (20,20,60,35);

 

• ellipse: ellipse (x,y,ancho,alto); en donde x,y = posición en los ejes x,y donde inicia la elipse; ancho = ancho de la elipse; alto = alto de la elipse

Ejemplo:

ellipse (50,50,90,60);

 

 

 

Ejercicio 1 - Dibuja tres puntos.

Ejercicio 2 - Dibuja tres líneas: una vertical, una horizontal y una diagonal.

Ejercicio 3 - Dibuja un rectángulo.

Ejercicio 4 - Dibuja cinco círculos.

 

 

Tutorial de Processing (III)