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.

Resumen de privacidad
cookies entreunosyceros

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible.

La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudarnos a comprender qué secciones de la web encuentras más interesantes y útiles.

Nunca almacenamos información personal de ningún tipo.

Tienes toda la información sobre privacidad, derechos legales y cookies en nuestra página sobre la política de privacidad o en la página sobre nuestra política de cookies.

Cookies necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza las siguientes cookies adicionales:

- Mailchimp: Recordar si ya estás suscrito al boletín de noticias y sino ofrecértelo al salir.

- Accesibilidad: Para saber tus ajustes de accesibilidad en cada visita.

- Comentarios: Saber si has leído y aceptado nuestra política de privacidad a la hora de dejar un comentario en la web.

- Google Analytics: Localización para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

- Goggle Adsense: Anuncios personalizados según tu geolocalización y preferencias.

Dejar estas cookies activadas nos permite mejorar nuestra web.

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.