Usando un poquito de Javascript
Ya aprendimos un poco de HTML para crear documentos Web, algunos Estilos CSS para darle color y formato a éstos documentos, e incluso vimos un uso básico de Javascript, pero ya es hora de empezar con P5*js.
P5*Js es el lenguaje llamado "Processing" que ha sido portado a librerías que pueden cargarse en la web por JAVASCRIPT (Javascript no es JAVA) que es cargado por un archivo web (html).
Para empezar a usar P5*Js, sólo necesitamos:
Lo primero que haremos es crear un LIENZO donde poder trabajar con nuestros objetos interactivos en la función SETUP():
Para eso agregué:
Para crear una elipse usamos la función ellipse() con 4 números separados con coma dentro del paréntesis en el área de la función draw():
usaremos los parámetros que cambian para ver como el círculo es dibujado en diferentes posiciones.
Reemplazaremos el primer valor del ellipse por mouseX, que contiene la distancia entre el margen izquierdo hasta el puntero del mouse, y el segundo valor por mouseY que es la distancia desde la parte superior del canvas hasta el puntero del mouse. Al guardarlo y ejecutarlo, veremos que la función draw() dibuja constantemente al elipse pero podemos mover con el mouse la nueva posición del mismo de forma interactiva como si se tratara de un pincel.
P5*Js es el lenguaje llamado "Processing" que ha sido portado a librerías que pueden cargarse en la web por JAVASCRIPT (Javascript no es JAVA) que es cargado por un archivo web (html).
ANTES DE EMPEZAR
Para empezar a usar P5*Js, sólo necesitamos:
Luego lo descomprimirlo en donde queramos usarlo como vemos en la imagen de abajo con click del botón derecho del mouse, luego a la opción EXTRAER TODO del menú contextual y luego en el dialogo usar el BOTON EXTRAER.
Obtendremos así una carpeta llamada P5-EjemploVacio que es TODO LO QUE NECESITAREMOS para empezar a trabajar. 
Preparando el Lienzo
A continuación abrimos la carpeta completa en Brackets, simplemente arrojándola sobre el entorno, y veremos que tiene una carpeta con 3 librerías: P5.js, P5.dom.js y P5.sound.js que son las que hacen posibles que podamos agregar comandos del lenguaje Processing al archivo Sketch.js que es a su vez cargado por el documento web index.html, que por el momento está vacío.
Simplificando: LAS LIBRERIAS NO SE TOCAN y cuando trabajemos en P5 trabajaremos siempre el archivo SKETCH.js.
Programando en el sketch.js
Lo primero que haremos es crear un LIENZO donde poder trabajar con nuestros objetos interactivos en la función SETUP():
- createCanvas(600,300)
Para eso agregué:
- background()
- color(255,0,0)
Primer Elipse
Para crear una elipse usamos la función ellipse() con 4 números separados con coma dentro del paréntesis en el área de la función draw():
- Primer Valor es distancia desde la izquierda del lienzo hasta el centro la forma. Un valor menor lo posicionará a la izquierda, un valor mayor a la derecha.
- Segundo Valor es distancia desde la parte superior del lienzo hasta la forma. Un valor menor lo posicionará más arriba, un valor mayor, más abajo.
- Tercer Valor, es el ancho de la elipse.
- Cuarto Valor, es al alto de la elipse. Si usamos el mismo valor entre éste y el anterior obtenemos un círculo.
función draw()
usaremos los parámetros que cambian para ver como el círculo es dibujado en diferentes posiciones.
Reemplazaremos el primer valor del ellipse por mouseX, que contiene la distancia entre el margen izquierdo hasta el puntero del mouse, y el segundo valor por mouseY que es la distancia desde la parte superior del canvas hasta el puntero del mouse. Al guardarlo y ejecutarlo, veremos que la función draw() dibuja constantemente al elipse pero podemos mover con el mouse la nueva posición del mismo de forma interactiva como si se tratara de un pincel.
Segundo Círculo
El segundo círculo, es una copia del anterior, pero tiene invertido los dos primeros valores: en primer lugar, mouseY y el segundo número lo ocupa mouseX. Esto genera que ambos círculos parezcan "ESPEJADOS" el uno del otro.
Crecimiento
Si reemplazamos los valores de tamaño por mouseX, lograremos que al mover el mouse a la derecha, el círculo crezca pero evitar que crezca demasiado, usamos mouseX/3.
Hagamos Algo de Magia Negra
Cuando digo "vamos a hacer algo de magia negra", saben que vamos a hacer algo loco, a "jugar" con los valores. Para este caso la línea 10 es un comentario, P5 ignora todo lo que está marcado con // al principio.
En la línea 11 y 12 agregué una copia de los 2 círculos que ya hicimos (en las linea 7 y 8), pero en las posiciones resté los valores de createCanvas a los valores de mouseX o mouseY.
Si ustedes eligieron valores diferentes, por ejemplo: 1024 y 800, entonces cada vez que vemos el valor mouseX debemos reemplazarlo por 1024-mouseX y cada mouseY por 800-mouseY. En mi casi ambos valores son 600 así que usé ése valor para todo.
Resulta evidente el poder de éste lenguaje, ya que con subir algunos archivos a una web puedo proveerles links a las prácticas para que las usemos en tiempo real: 1 círculo , 2 Círculos y 4 Círculos. Utilizaremos P5*Js para diferentes cosas, en particular para enriquecer los documentos webs y crear pequeñas piezas interactivas para ver temas del diseño curricular como geometría, cálculo y mucho más.
Si desean descargar algún archivo que hemos usado en algunas de las clases, tenemos una guía con links de todos los recursos que usamos en cada clase:
...One more thing
Para los que les va gustando la programación mas que a otros (y tengo en claro quienes van por ese camino), les comento que con los chicos de cuarto grado usamos un lenguaje de programación llamado Basic256, actualmente estamos creando algo muy similar, una aplicación de pintura (aunque ese lenguaje no permite hacer Web) y no tenemos funcion DRAW que redibuja constantemente lo mismo todo el tiempo; por lo tanto debemos crear un loop con while-endwhile para que repita el código de dibujo constantemente.
Por otra parte Con los chicos de TERCER GRADO, usamos una aplicación de programación llamada SCRATCH 1.4 hicimos algo muy similar usando los sensores del ratón(cajón CELESTE) para posicionar al gato y SELLAR del cajón LAPIZ para que vaya dejando un trazado.