Tiny Code
Autor: José María Amusquívar Poppe
Para el desarrollo de esta práctica se ha solicitado la realización de un sketch de próposito libre, empleando para ello las herramientas que desee. A diferencia de las prácticas anteriores, las cuales fueron realizadas en Processing1, la práctica actual deberá ser realizada en P5.js2. Así pues, se ha decidido implementar un conjunto de péndulos con elongaciones distintas, con el objetivo de conseguir algunos patrones de movimiento (Figura 1).
- Introducción
- Propuesta de diseño
- Recursos empleados
- Desarrollo del código
- Resultados obtenidos
- Ejecución en vivo
- Descarga del código fuente
- Referencias
Introducción
El proyecto a realizar tiene como principal objetivo “programar con restricciones”, pues se ha establecido un límite caracteres, en este caso será de 1024 caracteres, o, para ser más específicos, un fichero de 1KB. Esta idea proviene de una campaña realizada en la ciudad de Madrid denomidada # #tinycode3, y promovida por la asociación creativecodingmadrid.
La aplicación implementada intenta simular los movimientos reales de un sistema de péndulos, colgados de un techo, los cuales tienen una posición inicial alta, lo que les propina una aceleración consiguiendo movimientos oscilatorios. Dado que la práctica consiste en realizar una escena, se ha considerado que los péndulos no pierden aceleración a causa de la gravedad, consiguiendo de este modo que los péndulos no frenen en ningún momento su movimiento, por lo que se trata de un movimiento inifinito.
Propuesta de diseño
Dado que que existe un límite de tamaño, el diseño elegido para este proyecto es simple, compuesto de un fondo monolocor gris y de un techo, el cual está representado por una línea horizontal blanca, desde el que cuelgan los distintos péndulos del sistema. Estos péndulos son esféricos, poseen un rango de colores de grises, y se encuentran colgados del techo a través de una cuerda blanca, cuya longitud es distinta para cada péndulo del sistema. La aplicación comienza su ejecución en un estado inicial en el que el sistema de péndulos está situdado en un ángulo de 45 grados respecto al eje vertical del sketch (PI/4), tal com se aprecia en la figura 2.
| Estado inicial |
|---|
 |
Finalmente, se ha establecido dos comandos disponibles durante la ejecución del skecth, los cuales permiten al usuario añadir más péndulos en movimiento o reiniciar la animación a su estado inicial. La ayuda de estos controles se ha especificado fuera el script, ya que ahora se encuentra dentro del código HTML de la aplicación, tal como se aprecia en la parte superior de la figura 2.
Controles
Los controles están disponibles en cualquier momento de la ejecución de la aplicación, estos controles son:
- Tecla ‘+’: Reinicia la animación a su estado inicial.
- Click Izquierdo/Derecho: Añade más péndulos a la animación.
Recursos empleados
El proyecto ha sido desarrollado totalmente en P5.js2, el cual se define como una librería JavaScript perteneciente al lado del cliente que posibilita la creación de experiencias interactivas y gráficas, basado en el núcleo de Processing.
Para obtener el GIF del videojuego se optó por la librería gifAnimation, sin embargo, debido a problemas de lentitud en la captura de frames, se optó por obtener el GIF grabando la pantalla y pasándolo a dicho formato final.
Desarrollo del código
El código de esta práctica se estructura en dos clases: la clase principal y la clase Péndulo. La primera alberga los métodos importantes del proyecto, además de la captura de interacción con el usuario; la segunda clase se encarga de representar el objeto Péndulo, junto a sus respectivas transformaciones.
A continuación se procederá a explicar el código realizado en P5.js, empezando con la clase principal:
Variables empleadas
Para conseguir que la aplicación funcione adecuadamente, se ha empleado una serie de variables con determinadas funciones, tal y como se puede apreciar en el siguiente fragmento de código:
//Variable gravedad, radio, péndulos a mostrar y array de péndulos
var g,r,s,pends=[];
Función setup()
En esta función se inicializan las variables de la aplicación, así como el tamaño del sketch.
//Inicialización de variables y de los péndulos
function setup(){
createCanvas(800,600, WEBGL);
g=0.5;r=12;s=8;init();
}
Función init()
Esta función inializa el array de Péndulos, creando diversos objetos con unos parámetros espcíficos.
//Empieza en 120 para dejar margen entre el techo y el primer péndulo
function init(){for(var i=120; i<=500; i+=5) pends.push(new Pend(i-80,i*1.5,PI/4));}
Función draw()
Esta función se encarga del dibujado de los distintos elementos del sketch, tanto del techo, las cuerdas de cada péndulo, así como el péndulo mismo, aplicando las respectivas traslaciones y actualizaciones de posición.
function draw(){
background(200);lights(); //Fondo y luces
translate(0,-2*height/5,0); //Traslación al techo
strokeWeight(0.4); //Grosor de las cuerdas
line(-width/2,0,width/2,0); //Dibujado del techo
stroke(0);
for(var i=0; i<76; i++) { //Dibujado de cada péndulo (76 como máximo)
var p=pends[i];
if (i<= s) {
push(); //Dibujado de la cuerda y el péndulo de cada uno
line(0,0,0,p.pos.x,p.pos.y,p.pos.z);translate(p.pos);fill(p.color);noStroke();sphere(r);
pop();
}
p.upd(); //Actualización de coordenadas
}
}
Funciones restantes
Las funciones restantes se corresponden con aquellas encargadas de recoger las pulsaciones de las teclas como keyPressed() o mousePressed(), elegidas para captura la interacción con el usuario.
Clase Pend
Esta clase se encarga de representar cada uno de los péndulos del sistema, donde cada uno posee una posición en tres dimensiones, un color en escala de grises, una longitud de cuerda, un ángulo determinado respecto al eje vertical del sketch, y una velocidad. Cada péndulo se mueve únicamente en dos dimensiones X e Y, por lo que será suficiente con actualizar estas coordeandas, obteniendo en cada momento la velocidad del péndulo así como su ángulo (afectado por la gravedad).
//Método upd(), que actualiza las posiciones de cada péndulo según las fuerzas que le afectan
upd(){
this.vel+=(-(g*sin(this.ang))/this.lon);
this.ang+=this.vel;
this.pos.x=this.lon*sin(this.ang);this.pos.y=this.lon*cos(this.ang);
}
Para consultar el código fuente de la aplicación, puede dirigirse al siguiente enlace:
Resultados obtenidos
A continuación se muestra la ejecución de la aplicación en Processing en formato de GIF (figura 3).
Ejecución en vivo
A continuación se presenta una prueba en vivo del sketch desarrollado.
Si el ejemplo anterior se visualiza mal, puede acceder al modo pantalla completa
Descarga del código fuente
Si desea descargar el código fuente, puede hacerlo desde el siguiente enlace: