Haciendo que llueva código - Estilo Matrix

Introducción a las animaciones de lienzo HTML 5

De todas las grandes cosas que nos trajo HTML 5, el elemento lienzo es el que más me encanta. Espero que una vez que vea lo poderoso que es, quiera dedicar tiempo para dominar las animaciones de lienzo.

¿Qué es un lienzo?

Un lienzo es exactamente lo que su nombre implica. Es un lienzo en blanco que puede pintar como desee y luego renderizar en su navegador como una imagen. La verdadera belleza es que no solo le permite crear imágenes, sino también redibujarlas y renderizarlas continuamente, creando así una animación.

El poder del lienzo está limitado solo por tu imaginación. He usado el elemento lienzo para crear de todo, desde imágenes estáticas sobre la marcha hasta juegos, interfaces gráficas de usuario. e incluso un creador de correo electrónico al estilo MailChimp. ¡Incluso puedes renderizar el lienzo en 3D!

Para mí, el elemento lienzo cambió todo. Ya no estaba limitado a usar las etiquetas HTML predeterminadas. Podría crear todo lo que quisiera en el navegador. Y será mejor que crea que esto llevó mis habilidades de JavaScript a un nivel completamente nuevo.

Empezando

En lugar de demostrar cómo dibujar en un lienzo, quiero darte una idea de lo que puedes crear con él. Si aún no has visto The Matrix, deja de leer ahora y ve a verlo. Si lo ha visto, reconocerá el famoso "código descendente" del título. ¡Creemos esto con lienzo!

En lugar de hacer un tutorial paso a paso, para ahorrar tiempo, publicaré el código a continuación y lo guiaré explicando lo que hace cada pieza a medida que avanzamos.

El HTML:

El CSS:

body{ background-color:#d2d2d2;}#canvas{ background-color:#000; display:block; margin:auto;}#logo{ display:none;}

El JavaScript:

var canvas = document.getElementById(‘canvas’);var ctx = canvas.getContext(‘2d’);var t = text();var logo = document.getElementById(‘logo’);var lines = [];window.setInterval(draw, 100);
function draw() { if (Math.floor(Math.random() * 2) === 0 && lines.length < 100) { lines.push(new textLine()); } ctx.clearRect(0, 0, canvas.width, canvas.height); lines.forEach(function(tl) {
 ctx.drawImage(tl.text, tl.posX, tl.animate(), 20, 1000); }); ctx.drawImage(logo, 100, 155, 400, 70);
}
function textLine() { this.text = t; this.posX = (function() { return Math.floor(Math.random() * canvas.width); })(); this.offsetY = -1000; this.animate = function() { if (this.offsetY >= 0) { this.offsetY = -1000; } this.offsetY += 10; return this.offsetY; };}
function text() { var offscreenCanvas = document.createElement(‘canvas’); offscreenCanvas.width = “30”; offscreenCanvas.height = “1000”; offscreenCanvas.style.display = “none”; document.body.appendChild(offscreenCanvas); var octx = offscreenCanvas.getContext(‘2d’); octx.textAlign = “center”; octx.shadowColor = “lightgreen”; octx.shadowOffsetX = 2; octx.shadowOffsetY = -5; octx.shadowBlur = 1; octx.fillStyle = ‘darkgreen’; octx.textAlign = “left”; var step = 10; for (i = 0; i < 100; i++) { var charCode = 0; while (charCode < 60) { charCode = Math.floor(Math.random() * 100); } octx.fillText(String.fromCharCode(charCode), 0, step); step += 10; } return offscreenCanvas;}

¿Como funciona?

En la línea # 1, tomamos el elemento canvas por su id. Cada elemento del lienzo tiene su propio contexto: una interfaz para manipular su contenido. Esto es a lo que se refiere la variable ctx de la línea 2.

Para crear el fondo animado, necesitaremos una línea vertical de texto aleatorio, que luego volveremos a dibujar varias veces sobre el eje X y animaremos de forma incremental en el eje Y para darnos el efecto final.

Dado que el texto siempre se representa horizontalmente, representaremos el texto en otro lienzo invisible y lo dibujaremos como una imagen en nuestro lienzo original.

En la línea # 3 establecemos la variable t como el resultado de la función text () que genera y devuelve nuestro elemento de lienzo invisible.

En esta función creamos un nuevo lienzo, establecemos su ancho y alto y establecemos su propiedad de visualización en none para ocultarlo y luego lo agregamos al cuerpo del documento. Luego configuramos el color, la sombra y el desplazamiento del texto que dibujaremos.

Para generar caracteres aleatorios verticales, hacemos un bucle y dibujamos un nuevo carácter aleatorio 100 veces y lo incrementamos en 10px en el eje Y en cada intervalo. Para generar un carácter aleatorio, uso Math.random () para obtener un número entre 60 y 100 y luego convertirlo en un carácter usando String.fromCharCode ().

Esto dibuja nuestro texto vertical con una sombra y devuelve el lienzo a la variable t.

El bucle de animación

En las siguientes 3 líneas de código, recupero el logotipo de FreeCodeCamp, declaro una matriz que contendrá las líneas separadas que forman el fondo y uso window.setInterval para ejecutar la función draw () cada 100 milisegundos.

Al animar un lienzo, es una buena práctica usar window.requestAnimationFrame (), pero sentí que esto es demasiado confuso para los principiantes, ya que es un poco complicado establecer la velocidad de fotogramas.

Lo primero que hace la función draw () es generar un número aleatorio entre 1 y 0.Si el número es 0 y hay menos de 100 líneas individuales de texto animadas en el fondo, inserta una nueva línea de texto () en la matriz de líneas. .

La función textLine () devuelve un objeto que contiene

  1. El texto vertical resultante se mantuvo en la variable t .
  2. La cantidad de compensación que se representará en el eje X (generado aleatoriamente en cada instancia del objeto).
  3. Un desplazamiento inicial de -1000px en el eje Y que lo coloca justo encima del lienzo.
  4. Un método animado que agrega 10px al eje Y cada vez que se llama y devuelve el resultado haciendo que el texto se mueva hacia abajo. Si el desplazamiento del eje Y llega a 0, se restablece a -1000px, lo que proporciona una animación continua.

El lienzo se limpia y luego la función draw () recorre cada línea de texto en la matriz de líneas y lo dibuja en el lienzo llamando a su método animado cada vez que se dibuja una línea para moverla hacia abajo.

Dado que cada línea tiene un desplazamiento aleatorio en el eje X y se agrega una nueva línea a intervalos aleatorios, las líneas de texto caen a diferentes velocidades a lo largo del lienzo creando el efecto de código de lluvia.

Por último, el logo de FreeCodeCamp se dibuja sobre el fondo, dándonos nuestra animación final.

¿Hacia dónde ahora?

Si el lienzo es algo que le interesa, puede obtener más información al respecto en Mozilla Docs.

Planeo crear una serie de tutoriales más básicos paso a paso que recorran las animaciones del lienzo a medida que encuentro el tiempo.

Si no encontró el código anterior demasiado difícil y le gustaría meterse con él, aquí hay algunas ideas interesantes:

  1. Haga que las dimensiones sean dinámicas para que el lienzo se amplíe y continúe animándose a medida que cambia el tamaño de su navegador.
  2. En lugar de generar caracteres aleatoriamente, tome un archivo de su propio código de GitHub y anímelo en su lugar.
  3. Render your name in place of the FreeCodeCamp logo, and make it look like the Matrix poster.
  4. Instead of generating each line at random, bind a click event to the canvas and render a new line at the X coordinates of your mouse click.

I hope you enjoyed this intro, if you did feel free to check out some of the other articles that I’ve written.

Turning code to cash — How to make money as a Web Developer and live to tell the tale.

So you just learnt to code. You’re eager and anyone who can’t code thinks you’re a genius, word gets out and all of a…medium.comHow to write a jQuery like library in 71 lines of code — Learn about the DOM

JavaScript frameworks are all the rage. Chances are that any JavaScript related news feed you open will be littered…medium.com5 Things to Remember When You’re Learning to Program

Learning to program is challenging. Aside from choosing a language or setting up a development environment that you…medium.comHow I Became a Programmer. And When I Started Calling Myself One

I’ve wanted to start blogging about programming for months now and like so many others before me I set off full of…medium.comPreventative Programming — how fix to bugs before they happen

…and why Sherlock Holmes would have been a brilliant programmermedium.com