Dibujando con el código

Ya has instalado Processing. Ejecútalo y entiende las partes simples de la interfaz.

Ahora, este primer ejercicio te dará una idea inicial de lo que es programar. Abre Processing y en el menú, bajo la categoría Help oprime Reference. Esto abrirá tu navegador con la pagina de Referencia del Leguaje, instalada con el programa. La Referencia es un listado de palabras del lenguaje (sentencias, funciones, etc.), categorizadas según el tipo de operación que realizan. Vamos a concentrarnos únicamente en la secciones Shape (Forma) y Color. De la primera empezemos sólo con 2D Primitives (Figuras básicas 2D) y de la segunda sólo con Setting (Ajustando color):

Shape

2D Primitives
triangle()
line()
arc()
point()
quad()
ellipse()
rect()

Color

Setting
background()
colorMode()
stroke()
noFill()
noStroke()
fill()

Cada una de esas palabras es una función del lenguaje y cada enlace te llevará a una página con las instrucciones específicas para usar esa función. Por ejemplo, la función ellipse() sirve para dibujar un círculo y su manera de operar es descrita así:

	Name	ellipse()
	Examples	ellipse(56, 46, 55, 55);
	Description	Draws an ellipse (oval) in the display window. An ellipse with an equal width and height is a circle. The first two parameters set the location, the third sets the width, and the fourth sets the height. The origin may be changed with the ellipseMode() function.
	Syntax	ellipse(x, y, width, height)
	Parameters	x ………… int or float: x-coordinate of the ellipse y ………… int or float: y-coordinate of the ellipse width … int or float: width of the ellipse height .. int or float: height of the ellipse
	Usage	Web & Application
	Related	ellipseMode()

Si, está escrito en inglés pero eso no será ningún obstáculo importante si logras identificar las diferentes partes de esta referencia.

La más importante es el Ejemplo (Examples). Puedes copiar la(s) línea(s) de código frente a la imagen y pegarlas en Processing. Luego corre el programa y verás como se ejecuta. Saldrá una pantalla idéntica a la imagen aquí mostrada.

En principio podrías intentar cambiar alguno de los parametros de la función (los números entre paréntesis) y volver a correrlo. Puedes deducir qué es lo que hace cada numero o referirte a la Sintaxis y la definición de los Parametros para entender el uso correcto de la función. En este caso:

 ellipse(56, 46, 55, 55);

Los valores de los primeros dos parametros, 56 y 46, corresponden a las coordenadas x y y del círculo. Los dos siguientes parametros valen igualmente 55 y corresponden al ancho (width) y al alto (height) del círculo. Como te darás cuenta al cambiar estos valores el tamaño de la pantalla es 100 por 100 y el eje de coordenadas, el punto (0,0), está en la esquina superior izquierda. Todas estas condiciones pueden cambiarse con instrucciones como size() y translate(), cuya descripción encontraras en la referencia. Por ahora experimenta con estas sencillas instrucciones hasta el punto en que puedas hacer un dibujo combinando varias de ellas.

Processing /Dibujando