Processing. Primeros pasos. Funciones básicas de dibujo #tecnoprograbótica #3ESO

En este artículo voy a intentar explicar las funcionas más básicas para dibujar con processing, en principio sin movimiento, interaciones con teclado/ratón, ni parámetros, para demostrar que en pocos minutos de aprendizaje puedes dibujar con sencillas líneas de código directo.

Las funciones más sencillas de dibujo son puntos, líneas, rectángulos, elipses y círculos, arcos, triángulos, formas rellenas y vacías, dibujos de contornos por vértices, curvas de Bezier...

Como decía en el artículo anterior, lo primero de todo  en un 'sketch' es dar estructura al programa a través de los apartado setup() -se ejecuta una vez y se definen aspectos generales y variables- y draw() -que se ejecuta iterativamente en un bucle infinito, -.  Para estos primeros ejemplos los vamos a obviar, ya que no son necesarios.


Unas consideraciones iniciales:

• hay que definir el tamaño en pixeles del lienzo 'size()', en ancho 'width' y alto 'height'
• el color de fondo 'background()', 
• tener en cuenta que la coordenada (0,0) en 2D está en la esquina superior izquierda, aumentando hacia la derecha y hacia abajo. 
• la instrucción 'fill()' nos dará el color de relleno,
• 'stroke()' el color del contorno/línea. y 'strokeWeight()' el grosor de ese contorno
• detrás de cada comando es necesario escribir punto y coma ';'. 
• podemos poner comentarios al código añadiendo una doble barra inclinada ' // ' para hacerlo más comprensible.
• processing es 'casesensitive', es decir, sensible a mayúsculas/minúsculas. Entiende la instrucción 'noFill()' y no existe para él 'nofill()'
• los ángulos se cuentan desde cero grados, en el sentido de las agujas del reloj y en radianes.

Este será nuestro primer sketch. Dibujando un ejemplo de cada uno de los elementos nombrados más arriba. A continuación os muestro dos recortes del código.

Y este es el resultado.

El fichero de texto con el código en este enlace primeros_pasos.txt. El código completo en primeros_pasos.zip

Espero que mis alumnos vayan haciendo sus primeras pruebas con este código aquí compartido.

Actualmente estoy haciendo un curso en CODEMadrid en el que estoy aprendiendo más sobre Processing

En la siguiente carpeta de Dropbox comparto los vídeos con lo aprendido para que los alumnos puedan avanzar más. Tristemente, tengo que poner una contraseña, ya que aunque los vídeos son públicos, CodeMadrid no muestra los mismos en su canal Youtube, lo cual me hace sospechar que no son del todo Creative Commons, y los compartiré, de momento, solamente con mis alumnos.

Este es el enlace para acceder a los mismos.

Lo que sí puedo compartir es esta estupenda guía paso a paso para aprender Processing, en inglés, y con muchos ejemplos.
LearningProcessing Exercises

Habrá que idear actividades para los chicos. Y en seguida incorporar variables, arrays, operadores, movimiento, estructuras condicionales y de repetición (if...else, while, for, etc), funciones, interacción con teclado y ratón, conectividad con dispositivos, gestión de imágenes, con filtros, reflejos, transparencias, transformaciones... Mil cosas!