Tabla de contenido
Una vez más aquí. Hoy vengo a dejar un pequeño artículo, por que hace unos días publiqué aquí un post llamado «Efecto matrix, crea el tuyo utilizando HTML, CSS y JavaScript» y pensándolo un poco, me dije, ¿por qué en lugar de caracteres aleatorios y letras, no creo un fondo dinámico de una web con 1’s y 0’s? El caso es que teniendo una web llamada entreunosyceros, tener una cosa así, me hace gracia.
Supongo que esto no le servirá a mucha gente, pero es una forma de practicar un poco el JavaScript y hacer algo un poco vistoso para mis cosas.
El código parar crear un fondo dinámico de una web
Para crear este fondo, en el que los unos y los ceros se van a ir mostrando de forma aleatoria por todo el fondo de la web, es necesario crear tres archivos. Uno HTML, otro CSS y el JavaScript (en este último, es donde está el meollo del asunto). Para crear la animación del fondo, se utiliza p5.min.js, que es una librería de código abierto, con la que se pueden crear imágenes y animaciones para el navegador.
Esta librería proporciona una forma sencilla de crear proyectos en 2D y 3D, en el lado del cliente utilizando JavaScript. La versión minificada que vamos a usar en este ejemplo, es una versión optimizada para producción. Esta se carga más rápido que la versión normal.
El archivo index.html
En este archivo HTML vamos a definir una página web que incluye dos archivos JavaScript externos. Uno de ellos desde una fuente en la nube (https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js) y el otro desde un archivo local (./script.js). También hay un archivo CSS local enlazado (./style.css) que estiliza la página. El idioma predeterminado para la página es el español.
El código a guardar en el archivo index.html, será el siguiente:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<title>entreunosyceros</title>
<link rel="stylesheet" href="./style.css"/>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
<script src="./script.js"></script>
</body>
</html>El archivo style.css
Vamos a establecer algunas reglas CSS básicas para este ejemplo. La primera línea establece los márgenes de relleno en 0 para todos los elementos de la página. La segunda va a establecer el ancho y el alto de la página en el 100% de la ventana del navegador. Además hará que el contenido fuera de la página no se muestre, y establece también el color de fondo en negro. La tercera regla va a indicar que canvas se muestre como un bloque, para ocupar todo el ancho disponible de su contenedor.
El código que vamos a guardar en style.css, será el siguiente código:
* { margin:0; padding:0; }
html, body { width:100%; height:100%; overflow: hidden; background:black;}
canvas { display:block; }El archivo script.js
Este archivo lo vamos a utilizar para crear un fondo animado con rectángulos que contienen números aleatorios de «1» y «0«. Además, en el centro de la pantalla se va a dibujar un texto que va a decir «entreunosyceros.net«, con un estilo específico.
La función «setup» establece la densidad de píxeles, crea un lienzo vacío y establece el modo de color a RGB. La función «init» establece las dimensiones de la gráfica y la alinea en RGB con un valor máximo de 255 para cada componente. La función «draw» dibuja los rectángulos con números aleatorios y crea una imagen animada. Y por último, la función «windowResized» redimensiona el tamaño de la ventana y llama nuevamente a «init«.
Dentro del archivo script.js, tan solo tendremos que añadir el siguiente código:
function setup() {
pixelDensity(1); // establece la densidad de píxeles en 1 píxel por píxel
createCanvas(); // crea un lienzo vacío con ancho y alto por defecto
colorMode(RGB, 255, 255, 255); // establece el modo de color a RGB con un valor máximo de 255 para cada componente
windowResized(); // redimensiona el lienzo cuando se redimensiona la ventana
}
let gw, gh, c, offset, updatesPerFrame, xSpan = 15, ySpan = xSpan * 1.5;
// se establece el fondo de la gráfica "c" con color negro (background(0)),
// se establece el tamaño de texto con xSpan * 1.5, y se inicializa la variable "offset" en 0
let init = () => {
// se establecen en el piso del ancho y alto divididos por xSpan y ySpan respectivamente, más 1
gw = floor(width / xSpan) + 1;
gh = floor(height / ySpan) + 1;
// se establece en gw * gh * 0.025
updatesPerFrame = gw * gh * 0.025;
// se establece un objeto gráfico creado con la función createGraphics()
c = createGraphics(gw * xSpan, gh * ySpan);
// c se establece en RGB con un valor máximo de 255 para cada componente
c.colorMode(RGB, 255, 255, 255);
// alineación de texto de c se establece en IZQUIERDA y ARRIBA
c.textAlign(LEFT, TOP);
c.background(0);
c.textSize(xSpan * 1.5);
offset = 0;
};
// Primero, se dibujan los rectángulos de color negro,
// luego se rellenan con un color aleatorio y se escribe un número aleatorio (1 o 0) en cada uno.
// Además, se está creando una imagen animada que se desplaza hacia abajo
function draw() {
c.noStroke();
for (let i = 0; i < updatesPerFrame; i++) {
let x = floor(random(gw));
let y = floor(random(gh));
c.fill(0);
c.rect(x * xSpan, y * ySpan, xSpan, ySpan);
c.fill(84 + random(-26, 26), 168 + random(-42, 42), random(127, 255));
c.text(floor(random(2)), x * xSpan, y * ySpan); // floor(random(2)) es lo que dibuja los unos y ceros
}
// se utiliza para dibujar una imagen repetitiva sobre el canvas
for (let i = 0; i < height; i++) {
let w = i;
image(c, 0, i, width, 1, 0, (i + offset) % (gh * ySpan), gw * xSpan, 1);
}
// Dibujamos el texto
fill( 0, 175, 68, 180);
textSize(64);
textAlign(CENTER, CENTER);
textStyle(BOLD);
stroke(0, 255, 255, 125);
strokeWeight(5);
text("entreunosyceros.net", width / 2, height / 2);
}
// se redimensiona el tamaño de la ventana y se vuelve a llamar a la función "init"
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
init();
}Y una vez guardados estos códigos dentro de sus correspondientes archivos, todos ellos dentro de la misma carpeta, bastará con ejecutar el archivo index.html. Si quieres ver funcionando este ejemplo, puedes seguir el siguiente link.