Inicio Apuntes FPApuntes DAW Crear un fondo dinámico de una web con 1’s y 0’s

Crear un fondo dinámico de una web con 1’s y 0’s

Una cosa que posiblemente solo me sirva a mi XD

Publicado por entreunosyceros

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

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

crear el 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.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.