El código hermoso es una alegría para escribir, pero es difícil compartir esa alegría con otros programadores, por no mencionar los que no son programadores. En mi tiempo libre entre mi trabajo diario y mi tiempo familiar, he estado jugando con la idea de un poema de programación usando el elemento canvas para dibujar en el navegador. Hay una multitud de términos para describir experimentos visuales en la computadora como desarrollo de arte, bosquejo de código, demostración y arte interactivo, pero al final me decidí a programar poemas para describir este proceso. La idea detrás de un poema es una pieza de prosa pulida que se puede compartir fácilmente, conciso y estético. No es una idea a medio terminar en un cuaderno de bocetos, sino una pieza cohesiva presentada al espectador para su disfrute. Un poema no es una herramienta, sino que existe para evocar una emoción.
Para mi propio disfrute, he estado leyendo libros sobre matemáticas, computación, física y biología. Aprendí muy rápido que cuando uso una idea, aburre a la gente bastante rápido. Visualmente puedo tomar algunas de estas ideas que me parecen fascinantes, y rápidamente le doy a alguien una sensación de asombro, incluso si no entienden la teoría detrás del código y los conceptos que lo impulsan. No necesita manejar una filosofía o matemática difícil para escribir un poema de programación, solo el deseo de ver algo en vivo y respirar en la pantalla.
El código y los ejemplos que he reunido a continuación iniciarán una comprensión de cómo llevar a cabo este proceso rápido y altamente satisfactorio. Si desea seguir el código, puede descarga los archivos fuente aquí.
El truco principal cuando se crea un poema es mantenerlo ligero y simple. No pases tres meses construyendo una demo realmente genial. En cambio, crea 10 poemas que desarrollen una idea. Escriba código experimental que sea emocionante y no tenga miedo de fallar.
Para una visión general rápida, el lienzo es esencialmente un elemento de imagen de mapa de bits 2d que vive en DOM que se puede dibujar. El dibujo se puede hacer usando un contexto 2d o un contexto WebGL. El contexto es el objeto JavaScript que usa para acceder a las herramientas de dibujo. Los eventos de JavaScript que están disponibles para el lienzo son muy simples, a diferencia de los disponibles para SVG. Cualquier evento que se desencadena es para el elemento como un todo, no como algo dibujado en el lienzo, como un elemento de imagen normal. Aquí hay un ejemplo básico de lienzo:
var canvas = document.getElementById('example-canvas');var context = canvas.getContext('2d');//Draw a blue rectanglecontext.fillStyle = '#91C0FF';context.fillRect(100, // x100, // y400, // width200 // height);//Draw some textcontext.fillStyle = '#333';context.font = "18px Helvetica, Arial";context.textAlign = 'center';context.fillText("The wonderful world of canvas", // text300, // x200 // y);Es bastante sencillo comenzar. Lo único que podría ser un poco confuso es que el contexto debe configurarse con las configuraciones como fillStyle, lineWidth, font y strokeStyle antes de que se use la llamada real. Es fácil olvidarse de actualizar o restablecer esas configuraciones y obtener algunos resultados no deseados.
El primer ejemplo solo se ejecutó una vez y dibujó una imagen estática en el lienzo. Está bien, pero cuando realmente se divierte es cuando se actualiza a 60 cuadros por segundo. Los navegadores modernos tienen incorporada la función requestAnimationFrame que sincroniza el código de dibujo personalizado con los ciclos de dibujo del navegador. Esto ayuda en términos de eficiencia y suavidad. El objetivo de una visualización debe ser un código que vibre a 60 cuadros por segundo.
(Una nota sobre soporte: hay algunos polyfills simples disponibles si necesita admitir navegadores más antiguos).
var canvas = document.getElementById('example-canvas');var context = canvas.getContext('2d');var counter = 0;var rectWidth = 40;var rectHeight = 40;var xMovement;//Place rectangle in the middle of the screenvar y = ( canvas.height / 2 ) - ( rectHeight / 2 );context.fillStyle = '#91C0FF';function draw() {//There are smarter ways to increment time, but this is for demonstration purposescounter++;//Cool math below. More explanation in the text following the code.xMovement = Math.sin(counter / 25) * canvas.width * 0.4 + canvas.width / 2 - rectWidth / 2;//Clear the previous drawing resultscontext.clearRect(0, 0, canvas.width, canvas.height);//Actually draw on the canvascontext.fillRect(xMovement,y,rectWidth,rectHeight);//Request once a new animation frame is available to call this function againrequestAnimationFrame( draw );}draw();