APUNTES
PROCESSING
Mara Arpa Recio
[email protected]
@Mara_Arpa
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
Contenido
INTRODUCCIÓN................................................................................................................................................... 2
NOCIONES BÁSICAS ............................................................................................................................................ 2
Partes del entorno de desarrollo (IDE)........................................................................................................... 2
Funciones principales: .................................................................................................................................... 3
Comentarios .................................................................................................................................................... 3
Coordenadas: .................................................................................................................................................. 3
Orden: ............................................................................................................................................................. 4
Formas básicas: ............................................................................................................................................... 4
Colores y acabados: ........................................................................................................................................ 8
Datos: ............................................................................................................................................................ 10
Operadores: .................................................................................................................................................. 10
Variables........................................................................................................................................................ 11
Texto:............................................................................................................................................................. 12
FUNCIONES........................................................................................................................................................ 14
Matemáticas: ................................................................................................................................................ 14
Aleatorio: ...................................................................................................................................................... 15
Imagen:.......................................................................................................................................................... 16
CREAR FUNCIONES ............................................................................................................................................ 20
ITERACIONES ..................................................................................................................................................... 21
For: ................................................................................................................................................................ 21
While: ............................................................................................................................................................ 22
CONDICIONALES................................................................................................................................................ 22
Si .................................................................................................................................................................... 22
En caso de...................................................................................................................................................... 23
EFECTOS............................................................................................................................................................. 24
Escalar: .......................................................................................................................................................... 24
Trasladar: ...................................................................................................................................................... 24
Rotación: ....................................................................................................................................................... 24
Reiniciar Efectos ............................................................................................................................................ 25
TIEMPO Y VELOCIDAD....................................................................................................................................... 26
FECHA Y HORA .................................................................................................................................................. 27
ARRAY................................................................................................................................................................ 28
MATRICES .......................................................................................................................................................... 29
GUARDAR IMÁGEN Y CICLOS............................................................................................................................ 29
FUENTES CONSULTADAS .................................................................................................................................. 31
1
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
INTRODUCCIÓN
Processing es un lenguaje de programación, derivado de java, dirigido a la creación de gráficos, compatible
con los principales sistemas operativos. Es de código abierto, y desde la página https://processing.org/
podemos descargar el entorno de desarrollo que nos permitirá escribir el código, ejecutar y visualizar los
programas creados.
Es un lenguaje fácil de empezar a usar, pero muy potente, permite usar distintos tipos de programación
como sentencia a sentencia, estructurada y orientada a objetos. Se puede combinar fácilmente con arduino
y html.
NOCIONES BÁSICAS
Para empezar a programar debemos conocer como es el entorno de desarrollo, cómo se incluyen
comentarios, cómo se usan las coordenadas, cuales son las funciones, órdenes, datos, y variables principales.
Partes del entorno de desarrollo (IDE)
1. Menú.
2. Botones para ejecutar y parar el programa.
3. Control de variables.
4. Modo (Java, R, Python...).
5. Nombre del archivo.
6. Números de líneas.
7. Zona de código.
8. Visor de mensajes.
9. Botones de consola y errores.
2
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
Funciones principales:
Un programa de processing está formado por dos funciones principales: void setup() donde se incluirán las
sentencias que se quieran ejecutar una sola vez, y void draw () que se ejecutará en bucle indefinidamente.
Comentarios
Para incluir comentarios en el código tenemos 2 formas según ocupen una o varias líneas.
// 1 línea.
/* */ varias líneas.
Coordenadas:
Muchas de las sentencias que usemos para crear nuestros diseños, utilizarán coordenadas. Lo primero que
debemos conocer es que el punto de origen es la esquina superior izquierda de la ventana.
Las coordenadas indicarán la posición de un punto, indicando su distancia en pixeles desde el eje x y la
distancia desde el eje y separados por una coma.
El tamaño del lienzo que vayamos a programar se indicará con la orden size(x,y), donde serán los pi eles
que ocupará a lo ancho e los ocupados a lo alto Este tamaño no limita los elementos si no la parte
visible, si un elemento es más grande que el lienzo se saldrá por los lados o incluso ni se verá, si su origen
está en los bordes.
3
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
Orden:
Las sentencias se ejecutan en orden descendente. Este orden también marca la posición de los elementos en
el lienzo, dibujándose unos sobre otros, quedando encima el último dibujado.
Formas básicas:
Punto: point(x,y);posición en el eje x y posición en el eje y.
Línea: line(x1,y1,x2,y2); Punto de inicio y punto de final.
Rectángulo: o cuadradado rect(x,y,ancho,alto); punto de inicio (x,y) ancho y alto.
o rectMode(); admite los parámetros CORNER, para tomar como punto de origen la esquina
superior izquierda en vez del centro que toma por defecto o con CENTER, y CORNERS, que
convierte los valores de ancho y alto en el punto de la esquina opuesta origen (esquina
inferior derecha)
Cuadrilátero quad(x1,y1,x2,y2,x3,y3, x4,y4) se indican los cuatro puntos que limitan el polígono.
4
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
Círculo: o elipse, ellipse(x,y,ancho,alto);
o ellipseMode(); RADIUS toma origen el centro de la elipse pero los valores 3 y 4 indican sus
radios no sus diámetros como CENTER o por defecto. Con CORNER cambia el origen de la
elipse del centro a la esquina superior izquierda del rectángulo que la contendría, CORNERS
toma el origen como CORNER y los valores 3 y 4 como la esquina opuesta.
Triángulo: triangle(x1,y1,x2,y2,x3,y3 )
Curva Bezier: bezier(x1,y1, cx1,cy1,cx2,cy2, x2,y2,) definida por los puntos de inicio y fin, y los puntos de
control.
Forma libre:
Processing permite crear figuras a partir de sus vértices. Para ello usaremos el método beginShape()
endShape(), entre los que indicaremos los vértices de la figura vertex(x,y);. Para que se muestre la forma
contenida en los vértices usamos el parámetro CLOSE en endShape();
5
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
Si usamos curveVertex();, en vez de vertex, usaremos líneas curvas para limitar la figura creada. También
podemos usar la opción bezierVertex(); para usar curvas tipo Bezier .
Este método beginShape() admite como parámetros:
POINTS, la forma está limitada por puntos.
LINES, la forma está limitada por líneas independientes (no comparten vértice).
6
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
TRIANGLES, los vértices se unen mediante triángulos independientes.
TRIANGLE_STRIP, los vértices se unen mediante una secuencia de triángulos unidos.
QUADS, agrupa cada cuaterna de vértices de forma independiente.
7
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
QUAD_STRIP, Limita la forma mediante rectándolos contiguos, aquí el orden de los puntos varía, no
los indicamos por como los dibujaríamos con líneas sin saltar ningún punto. Los ordenamos de
menor a mayor, primero por el valor de x y después por el de y.
POLYGON
Colores y acabados:
El color de los distintos componentes se puede indicar usando principalmente los códigos RGB (con y sin
transparencia) he adecimal El entorno de desarrollo inclu e la herramienta selector de color
8
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
Dependiendo de a qué queramos darle color usaremos las siguientes órdenes.
Fondo: background(código_color);
Relleno de formas: fill (código_color); antes de la forma o formas elegidas. Nofill() sin relleno.
Si superponemos figuras no opacas de diferentes colores podemos crear colores nuevos en las
intersecciones.
Borde: strokeWeight(grosor); antes de la formas o formas elegidas. Stroke(código_color);
noStroke(); sin contorno.
StrokeCap(); Acabado de los bordes, forma cuadrada (SQUARE), redondeada(ROUND) y termino medio
(PROJECT)
9
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
strokeJoin(); configura el acabado de los vertices de una figura para que aparezcan en esquina (MITER,
forma por defecto), corta recta la esquina (BEVEL), o esquina redondeada (ROUND)
Suavizar: noSmoth, muestra el contorno redondeado de las figuras como líneas y puntos, mientras que
smooth, opción por defecto, no hace falta especificarlo, suaviza los contornos, mostrando una sola línea
curva.
Datos:
En programación se usan distintos tipos de datos, que permiten ser usados en diferentes sentencias y
operaciones. Los principales tipos de datos son:
Entero: int
Reales: float
Carácter: char
Cadena de carácter: string
Lógicos: boolean
Operadores:
Asignación = Igualdad == distinto: !=
Mayor y menos que >, < Mayor o igual, menor o igual >=, <=
Suma + Incrementar en 1 ++ Resta reducir en 1 --
Multiplicación * División cociente :/ resto: %
Lógicos y: || o: && no: !
10
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
Variables
Processing permite utilizar variables locales, creadas dentro de una función que solo puede usarse en ella, o
globales, creada fuera y que puede ser usada por todas las funciones.
Las variables se crean indicando el tipo de dato y el nombre de la variable. En el mismo momento se pueden
iniciar asignándoles un valor.
Variables de sistema:
Anchura: width
Altura: height
Posición del ratón en el eje x: mouseX
Posición del ratón en el eje y: mouseY
De forma infinita se dibujará un cuadrado de 60x60 en la posición del ratón. En el segundo caso solo se ve el ultimo
dibujado, en cada repetición se pinta el fondo de Nuevo tapando los cuadrados anteriores.
11
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
Última letra pulsada: key
Código de letra: KeyCode Para conocer el código de las distintas teclas especiales (las letras y el
espacio tienen código 0)
Código de algunas teclas
Mayúscula: 16 Bloque mayúsculas: 20 Flecha izquierda:37
Control: 17 Alt:18 Flecha arriba:38
Inicio: 36 Fin: 35 Flecha derecha:39
Flecha abajo:40
Presionar tecla: KeyPressed (bolean)
Soltar una tecla: keyReleased (bolean)
Presionar el ratón: mousePressed (bolean)
Botón del ratón: mouseButton (bolean)
Soltar el ratón: mouseReleased (bolean)
Texto:
Mostrar texto en la consola: prin e o ); o prin ln e o ); inserta un salto de línea después del
texto.
Mostrar texto en la ventana: e e o e Si e pi eles antes del texto al que se le quiere
cambiar el tamaño.
12
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
Además del punto de origen del texto puedo indicar la anchura y altura del cuadro que contendrá el
texto.
Con textLeading(); puede configurar la distancia entre las líneas de un texto.
Con textAlign(LEFT, CENTER O RIGHT); Podemos alinear el texto dentro del cuadro de texto. Por
defecto se alinea a la izquierda.
Para el color, al texto le afecta la orden fill, usando el código RGB además del color podemos
configurar la transparencia con el último parámetro, desde trasparente (0), hasta opaco (255).
13
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
También podemos cambiar la fuente con la herramienta crear fuente, en el código crearé una
variable Pfont y usaremos el nombre del archivo.vlw con la ordenes variable =
loadFont nombrefuente vlw textFont(variable);
Se ha escrito el mismo texto con el mismo color, cada vez 10pixeles más abajo y con una transparencia menor.
FUNCIONES
Matemáticas:
Cuadrado sq();, devuelve el cuadrado de un número.
Raíz cuadrada sqrt();, devuelve el cuadrado de un número.
Exponente pow(x,n);, devuelva la potencia i del número x.
Número pi: PI, sus variantes (QUARTER_PI, HALF_PI, TWO_PI)
Trigonometría: seno: sen(), coseno: cos(),
Paso de grados radianes:(radians() y de radianes a grados degree();
Convertir valor a otro rango: map cambia un valor(valor 1) de un rango indicado(valores 2 y 3) a otro
(valores 4 y 5)
14
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
Arcos: arc(); tiene como valores, el centro (x,y), ancho, alto, ángulo inicial y ángulo final.
Aleatorio:
La función random permite crear número aleatorio dentro del rango marcado por los parámetros
random(n1, n2) o entre 0 y el parámetro marcado random(n);
Si en vez de escribir el bucle for, para repetir varias veces la creación de puntos con color, posición y tamaño
aleatorio, lo incluimos en la función draw(), crearemos una animación donde irán apareciendo puntos de
diversos colores, tamaños, y en distintas posiciones dentro de la pantalla.
Esta función tiene como variante randomSeed(); que repetirá en el mismo orden los números aleatorios
generados cada vez que se ejecute el programa.
15
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
Imagen:
Processing permite incluir imágenes. Para ello deben estar guardadas en la carpeta DATA del proyecto, y la
seleccionaremos desde el menú Sketch opción Añadir archivo
En el código debemos iniciar una variable de tipo PImage, en esta variable cargaremos la imagen
seleccionada con loadImage imagen jpg y después con la función img(variable,x,y); colocaremos al
imagen en el lienzo.
Podemos cambiar el tamaño de la imagen, añadiendo los valores al anchura y altura la función img();
16
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
Con la orden tint(); podemos tintar la imagen usando tonos de gris (un valor entre 0 y 255), gris con
trasparencia (valor de gris y valor de transparencia), con código RGB con y sin transparencia o con el código
hexadecimal. noTint(); devuelve el color original a la imagen.
17
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
Efectos de imágenes
En processing existen varias sentencias que aplican efectos a las imágenes.
Filter(MODO, NIVEL); aplica los siguientes modos en los que se podrá elegir con qué porcentaje se aplica.
THRESHOLD, convierte a blanco y negro según el nivel.
GRAY, convierte en escala de grises.
INVERT, invierte los colores de la imagen.
POSTERIZE, convierte la imagen al número de colores que especifique el nivel. (2 A 255)
18
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
BLUR, difumina la imagen con la intensidad que indique el nivel.
ERODE, reduce la luz.
DILATE, incremente la luz.
19
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
CREAR FUNCIONES
Además de las funciones principales void setup(); y void draw();, podemos crear funciones propias que
después llamaremos desde las funciones principales. Esto permitirá organizar las ordenes de forma más
sencilla de entender al reducir el número de líneas de código dentro de las funciones principales, y a reducir
las órdenes necesarias al reutilizar aquellas sentencias que suelan repetirse.
Para crear una función usaremos void y el nombre de la función. A las funciones podemos pasarle
parámetros cuyos valores indicaremos entre los paréntesis de las funciones, o no pasar nada como ocurre
con setup o void por lo que los paréntesis aparecen vacíos. Si las funciones van necesitar parámetros se
crearán dentro del paréntesis de la creación. El código de la función aparecerá limitado por llaves {}.
Para llamar a la función simplemente se escribirá en las funciones principales el nombre de la función
seguido de los paréntesis vacíos o con los valores de los parámetros.
Processing también permite crear funciones que devuelvan valores, En este caso la función no se creará
como void si no del tipo de dato que va a a devolver float int char string Puede pedir parámetros la
última línea de la función será return y el valor a devolver.
20
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
ITERACIONES
For:
El bucle for, permite repetir una serie de órdenes o funciones en función de unas condiciones relacionadas
con una variable. Al bucle for debemos indicarle desde y hasta que valores de la variable va a ejecutarse, así
como el incremento que sufrirá la variable en cada ciclo.
Hemos repetido la orden línea desde x= hasta x=50 incrementando en 10 el valor de x en cada iteración, por lo que se
van a dibujar 5 líneas. Estas líneas tendrán como valor x de inicio 50, y de final 80, mientras que la posición del eje y se
va desplazando en 10 cada iteración, por lo que las líneas resultantes serán paralelas y distanciadas por 10 pixeles.
Los bucles for se pueden anidar, y forma común de anidarlos, es crear un bucle for para la posición x y
dentro otro para controlar la posición y.
El primer bucle controla desde el origen del eje x (x=0) hasta la anchura máxima de la pantalla (x=100), incrementando
cada vez el valor de x en 10 pixeles, a su vez se ejecute el mismo bucle para y (desde el origen del eje y hasta la altura
máxima), dibujando en cada iteración una línea diagonal. Llenando así todo el lienzo de líneas diagonales paralelas
distanciadas 10 pixeles.
21
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
While:
El bucle while se repite mientras se cumplen una condición. A diferencia del for, la variable contador a usar
se declara fuera del bucle, y el incremento se realiza dentro, como parámetro del while solo se incluye la
condición.
CONDICIONALES
Si
La función if permite que se ejecute una parte del código si se cumple una condición.
Si se presiona el ratón el color del fondo cambia de forma aleatoria.
La función if puede tener una segunda parte, else , de forma que si se cumple una condición se ejecute un
código, y si no se ejecute otro.
Al código de crear puntos con tamaño, color y en sitio aleatorio, se incluimos la condición de que si el tamaño es menor
de 60 el punto sea opaco, y si no tenga transparencia de 50.
22
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
Los condicionales pueden anidarse.
Ahora si los puntos son menores de 60 serán opacos, si miden entre 60 y 100 tendrán una transparencia de 150, y si son
mayores de 100 de 50.
En caso de
Si una variable puede tomar varios valores podemos usar la función Switch. Necesitaremos una variable, en
función del valor de esa variable tendremos varios casos, case, que harán que se ejecute un determinado
código delimitado por un break. La función switch cuenta con la opción default, que se ejecutará si no la
variable no coincide con el valor de ningún case. La variable switch debe ser un entero o carácter, por lo que
su uso está limitado.
Al pulsar la r, se dibujan cuadrados con borde rojo de tamaño y posición aleatoria, con la t se dibujan triángulo de borde
azul, con la e elipses con borde verde, y con cualquier otra tecla se vuelve al fondo inicial.
23
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
EFECTOS
Escalar:
Scale(n); escala la forma a un tamaño n veces el original. Afecta a las formas dibujadas después.
Trasladar:
Translate(x,y); Traslada la forma dibujada después al punto indicado. Si al inicio del programa usamos
translate, estamos cambiando el origen del eje de coordeandas.
Rotación:
Con processing se pueden girar las formas con la orden rotate(n); donde n es el ángulo de giro, El giro se
produce respecto al eje de coordenadas. En el segundo ejemplo al ejecutar la rotación en el draw, se
repetirá creando una animación.
24
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
Para que un objeto gire sobre su centro, tendremos que cambiar el modo de la figura y trasladar el objeto al
centro del lienzo. Si no queremos que se vea la estela que dejan los cuadrados al sobrescribirse, podeos
cambiar el color del fondo en cada ciclo.
Reiniciar Efectos
Para que los efectos anteriores no se apliquen a todas las formas dibujadas después podemos usar
pushMatrix(); y popMatrix(); para limitar a quién afecta cada opción, o resetMatrix(); para resetear los
efectos aplicados antes.
25
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
TIEMPO Y VELOCIDAD
Processing permite modificar la velocidad a la que se muestran los frames, cada uno de los ciclos. Indicando
cuando se muestran por segundo, por defecto la velocidad es de 60 por segundo. La opción frameRate();
permite modificar esta velocidad.
Con frameRate(10);los puntos se dibujarán mucho más despacio que con frameRate(100);
La función millis(); almacena el tiempo en milisegundos desde que empezó la ejecución del programa. Esta
función permite controlar en qué momento se ejecuta una orden.
En el ejemplo, a los 4 segundos de empezar se dibujaría una circunferencia cuyo radio va creciendo.
26
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
FECHA Y HORA
En processing podemos incluir información sobre la fecha y hora actual con las siguientes funciones.
Día: day();
Mes: month();
Año: year();
Hora: hour();
Minuto: minute();
Segundo: second();
Guardando en variables el resultado de las funciones de hora, podemos crear un reloj digital, mostrando
como texto el contenido de las variables, al que podemos dar distinto formato.
Para que el valor de las horas, minutos, o segundos siempre se muestre en 2 dígitos, podemos usar
nf(variable,nºdígitos);
Usando el seno y el coseno de las funciones de hora podemos dibujar un reloj analógico. (código obtenido de
programaciónyrobotica.com).
27
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
ARRAY
Para guardar una serie de datos, existe un tipo de dato complejo, el array. Nos va a permitir guardar y leer
varios datos de una misma variable.
Para poder asignar y recuperar los datos usaremos nombre_array[n], donde n es la posición del array. Para
asignar todos los valores podemos usar {} que incluirá la lista de valores separados por comas. Los array
pueden contener valores de distintos tipos de datos, a la hora de crearlo deberemos indicar el tipo de dato
que contendrá. La orden nombre_array.lenght indica el tamaño total del array, el número de valores que
almacena.
En el ejemplo se dibujan puntos de color aleatorio en la diagonal en las posiciones 10,10 al 90,90, posiciones marcadas
por los valores del array.
28
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
MATRICES
Las matrices son arrays de dos filas, como valores se guardan parejas de datos (posición 1 de las filas 0 y 1) .
En el ejemplo hemos guardado en una matriz los puntos para crear una forma. Dentro de beginShape hemos recorrido
la matriz para que cada columna nos indique las coordenadas de cada vértice de la figura.
GUARDAR IMÁGEN Y CICLOS.
Processing tiene órdenes para guardar las imágenes generadas en la carpeta del proyecto.
Save nombre e t guarda la imagen generada en Processing con el nombre el formato indicado Debe
escribirse en Void setup(), si se escribe en drw, se sobrescribirá la imagen cada ciclo.
Saveframe nombre- e t guarda la imagen generada en cada ciclo el nombre será el indicado
sustituyendo las # por el número del ciclo.
29
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
La herramienta Creador de Películas, crea un archivo de vídeo con imágenes y audio. La herramienta nos
pedirá que le indiquemos donde están las imágenes a usar en la película y el audio que queremos incluir. El
resultado será un archivo .mov.
Esta opción combina a la perfección con la opción de saveFrame.
30
I.E.S Marqués de Lozoya Departamento de Tecnología TIC I y II
Mara Arpa Recio 2020/2021
FUENTES CONSULTADAS
Libro Processing A Programming Handbook for Visual Designers and Artists de Casey Reas y Ben Fry
http://www.programacionyrobotica.com/
https://programarfacil.com/
http://processingjs.org/
https://processing-spain.blogspot.com/
http://www.mywonderland.es/curso_js/processing/pro_procesar.html
31
