Processing/JS

Processing

Processing es un lenguaje de programación específico como medio de expresión en las artes visuales. Refurza el vínculo que existe entre diseño y tecnología y estimular el desarrollo de la creatividad mediante la programación.

Processing, crea un interés por la programación aplicada a las artes visuales y la participación en una comunidad donde los alumnos puedan compartir este interés.

Hay que bajarse el programa de desarrollo en: http://processing.org/download/

Para poder ver el trabajo en el canvas de una página HTML5, necesitaremos descargar processing.js para el desarrollo y processing.min.js para producción en: http://processingjs.org/download/

Interfaz

Interfaz

Los dos primeros botones de las herramientas son para ejecutar y parar el programa.

Interfaz

Los siguientes resumen las funciones principales, nuevo, abrir, salvar y exportar.

Sintaxis

Sintaxis del código en processing.

Sintaxis

 

size(50, 50);
background(162, 216, 0);

El origen de coordenadas.

Ejes de coordenadas

Primitivas

Puntos
El punto es el elemento visual más simple que se dibuja con la function punto: point()

point(x, y);

Ejemplo:

size(50, 50);
background(162, 216, 0);
smooth();
stroke(0, 84, 216);
strokeWeight(10) ;
point(25, 25);
strokeWeight(2);
stroke(255);
point(25, 25);

La línea es una consecución de puntos, es la forma más simple de dibujo y se hace con la función línea:  line(). Esta function tiene 4 parámetros, dos para indicar las coordenadas de los dos puntos finales:

line(x1, y1, x2, y2);

La function triangulo dibuja triangulos triangle(). Tiene 6 parámetros, dos coordenadas para cada punto.

triangle(x1, y1, x2, y2, x3, y3);

La función Quad dibuja un polígono de 4 lados.

quad(x1, y1, x2, y2, x3, y3, x4, y4);

Rectángulo, dibuja con 4 valores, las coordenadas del margen superior izquierdo el ancho y el alto. Un cuadrado es cuando son iguales ancho y alto.

rect(x, y, width, height);

Elipse, se dibuja con 4 valores, las coordenadas del centro el ancho y el alto. Un círculo es cuando son iguales ancho y alto.

ellipse(x, y, width, height);

Las curvas de bezier() pueden dibujar líneas curvas.
Un curva de Bezier está dibujada por 4 puntos, dos de inicio y fin (primero y cuarto) de la curva y dos puntos de control (segundo y tercero).

bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2);

Orden de dibujo

El orden en que se dibujan las superficies,es de arriba abajo en las líneas del programa.

Color

El color se define con valores RGB de 0 a 255, el gris se representa con tres valores iguales que se puede reducir a un solo valor.

El relleno de los objetos con fill () y la línea con stroke (), el valor por defecto en el relleno es 255 (white) y en la línea el valor por defecto es 0 (negro).

Para dibujar superficies sin relleno ponemos: noFill() y para no dibujar superficies sin líneas noStroke().

El suavizado se define con: smooth() y noSmooth() para activar o desactivar el suavizado a antialiasing.

Los atributos de la línea se controlan con las funciones: strokeWeight(), grosor de la línea, strokeCap(), que puede ser ROUND, redondeados  SQUARE, cuadrados o PROJECT que es una mezcla de ambos y strokeJoin(), en las lineas cerradas que puede ser BEVEL, esquinas biseladas, MITER, esquinas cuadradas o ROUND curvadas.

Para la elipse los parámetros de dibujo, por defecto los valores para dibujar una elipse son ls coordenadas del centro el ancho y el alto. La función de ellipseMode(). Cambia la manera de dibujar elipses, requiere los parámetros de: CENTER, RADIUS, CORNER, o CORNERS.

El modo por defecto es CENTER. El RADIUS usa el primer y Segundo valor para el centro el tercer valor es la mitad del ancho y el cuarto la mitad del alto. El CORNER dibuja la elipse como los rectángulos, el primer y segundo punto es el punto de la esquina superior izquierda y el tercero y cuarto el ancho y alto de un rectángulo donde se circunscribe la elipse. CORNERS es similar al anterior pero los segundos valores son la esquina inferior derecha del rectángulo.

La función rectMode() afecta a la forma en que se dibujan los rectángulos. Requiere  parámetros que pueden ser: CORNER, CORNERS o ENTER. El valor por defecto es CORNER, CORMERS es para definir el rectángulo por las coordenadas de la esquina superior izquierda y la esquina inferior derecha. El CENTER usa el valor central del rectángulo y su ancho y alto.

Ejemplo:

Ejemplo 1

noStroke();
size(150,150);
rectMode(CORNER);
fill(126);
rect(40, 40, 60, 60); // Gray rect
rectMode(CENTER);
fill(255);
rect(40, 40, 60, 60); // White rect
rectMode(CORNERS);
fill(0);
rect(40, 40, 60, 60); // Black rect