Pixel Art programático

 Esa imagen está hecha con una técnica llamada Pixel Art programático. La idea es representar una imagen como una matriz (array bidimensional) donde cada número corresponde a un color.

Por ejemplo:

const pixelArt = [
  [0,0,1,1,0],
  [0,1,2,1,0],
  [1,1,1,1,1],
  [0,1,1,1,0],
  [0,1,0,1,0]
];

Y una paleta de colores:

const PALETTE = {
  0: null,       // Transparente
  1: "#FFFFFF",  // Blanco
  2: "#FF0000"   // Rojo
};

Luego recorres la matriz y dibujas cada píxel en un <canvas>.

Ejemplo básico con Canvas

<canvas id="canvas"></canvas>

<script>
const pixelArt = [
  [0,0,1,1,0],
  [0,1,2,1,0],
  [1,1,1,1,1],
  [0,1,1,1,0],
  [0,1,0,1,0]
];

const PALETTE = {
  1: "#FFFFFF",
  2: "#FF0000"
};

const PIXEL_SIZE = 20;

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

canvas.width = pixelArt[0].length * PIXEL_SIZE;
canvas.height = pixelArt.length * PIXEL_SIZE;

pixelArt.forEach((row, y) => {
  row.forEach((pixel, x) => {
    if (pixel !== 0) {
      ctx.fillStyle = PALETTE[pixel];
      ctx.fillRect(
        x * PIXEL_SIZE,
        y * PIXEL_SIZE,
        PIXEL_SIZE,
        PIXEL_SIZE
      );

      // Borde opcional
      ctx.strokeStyle = "#333";
      ctx.strokeRect(
        x * PIXEL_SIZE,
        y * PIXEL_SIZE,
        PIXEL_SIZE,
        PIXEL_SIZE
      );
    }
  });
});
</script>

Resultado:

  ██
 █▄█
█████
 ███
 █ █

Cómo hacer imágenes más complejas

Normalmente se usan herramientas como:

Estas herramientas permiten dibujar el pixel art y luego exportarlo a una matriz de colores para JavaScript.

Efecto brillante como en tu imagen

Después de dibujar cada píxel puedes agregar sombras:

ctx.shadowBlur = 15;
ctx.shadowColor = "white";

ctx.fillRect(
  x * PIXEL_SIZE,
  y * PIXEL_SIZE,
  PIXEL_SIZE,
  PIXEL_SIZE
);

O usando CSS:

canvas {
  filter: drop-shadow(0 0 10px white);
}

Versión moderna usando DIVs

También puedes generar cada píxel como un <div>:

pixelArt.forEach((row) => {
  row.forEach((pixel) => {
    const div = document.createElement("div");

    div.style.width = "20px";
    div.style.height = "20px";
    div.style.background = PALETTE[pixel] || "transparent";

    container.appendChild(div);
  });
});

Pero para imágenes grandes es mucho más eficiente usar Canvas, que es precisamente como suelen hacerse los ejemplos que muestra Bluuweb y otros cursos de JavaScript.

Si quieres, puedo crear un ejemplo completo que convierta automáticamente una imagen PNG en una matriz como la de la foto y luego la dibuje con JavaScript.

Es para alumnos de preparatoria, por favor dame el codigo completo de la manera mas secilla y clara. Tambien explicamelo de la manera mas sencilla y clara

Si es para alumnos de preparatoria, lo mejor es comenzar con algo muy visual y sencillo, sin funciones avanzadas ni conceptos complicados. La idea es que entiendan que:

  1. Una imagen puede guardarse como una tabla de números.
  2. Cada número representa un color.
  3. JavaScript recorre la tabla y dibuja cuadritos.

¿Cómo funciona?

Imagina que quieres dibujar una carita feliz:

⬜ ⬜ 🟨 🟨 ⬜
⬜ 🟨 🟨 🟨 ⬜
🟨 🟨 ⬛ 🟨 🟨
⬜ 🟨 🟨 🟨 ⬜
⬜ 🟨 ⬜ 🟨 ⬜

Podemos representarla con números:

const dibujo = [
  [0,0,1,1,0],
  [0,1,1,1,0],
  [1,1,2,1,1],
  [0,1,1,1,0],
  [0,1,0,1,0]
];

Donde:

  • 0 = transparente
  • 1 = amarillo
  • 2 = negro

Código completo

Guarda este código como index.html y ábrelo en el navegador.

<!DOCTYPE html>
<html>
<head>
    <title>Pixel Art con JavaScript</title>
</head>
<body>

<h2>Mi primer Pixel Art</h2>

<canvas id="lienzo"></canvas>

<script>

// MATRIZ DEL DIBUJO
const dibujo = [
    [0,0,1,1,0],
    [0,1,1,1,0],
    [1,1,2,1,1],
    [0,1,1,1,0],
    [0,1,0,1,0]
];

// TAMAÑO DE CADA PIXEL
const tamPixel = 40;

// COLORES
const colores = {
    1: "yellow",
    2: "black"
};

// OBTENER EL CANVAS
const canvas = document.getElementById("lienzo");
const ctx = canvas.getContext("2d");

// TAMAÑO DEL CANVAS
canvas.width = dibujo[0].length * tamPixel;
canvas.height = dibujo.length * tamPixel;

// RECORRER FILAS
for(let fila = 0; fila < dibujo.length; fila++){

    // RECORRER COLUMNAS
    for(let columna = 0; columna < dibujo[fila].length; columna++){

        let valor = dibujo[fila][columna];

        // SI NO ES 0, DIBUJAR
        if(valor !== 0){

            ctx.fillStyle = colores[valor];

            ctx.fillRect(
                columna * tamPixel,
                fila * tamPixel,
                tamPixel,
                tamPixel
            );

            // BORDE
            ctx.strokeRect(
                columna * tamPixel,
                fila * tamPixel,
                tamPixel,
                tamPixel
            );
        }
    }
}

</script>

</body>
</html>

Explicación paso a paso

1. La matriz

const dibujo = [
    [0,0,1,1,0],
    [0,1,1,1,0]
];

Es como una hoja cuadriculada.

Cada número indica qué color usar.

2. Los colores

const colores = {
    1: "yellow",
    2: "black"
};

Le decimos a JavaScript:

NúmeroColor
1Amarillo
2Negro

3. Los ciclos

for(let fila = 0; fila < dibujo.length; fila++)

Recorre cada fila.

Luego:

for(let columna = 0; columna < dibujo[fila].length; columna++)

Recorre cada columna.

Es como leer una tabla:

(0,0) (0,1) (0,2)

(1,0) (1,1) (1,2)

(2,0) (2,1) (2,2)

4. Obtener el valor

let valor = dibujo[fila][columna];

Ejemplo:

dibujo[0][2]

vale:

1

Entonces se dibuja amarillo.

5. Dibujar el cuadrado

ctx.fillRect(
    columna * tamPixel,
    fila * tamPixel,
    tamPixel,
    tamPixel
);

Si el pixel mide 40:

columna 0 → x = 0
columna 1 → x = 40
columna 2 → x = 80
columna 3 → x = 120

Así cada cuadrado queda en su lugar.

Ejercicio para los alumnos

Pedirles que cambien la matriz para formar una letra.

Por ejemplo la letra "T":

const dibujo = [
 [1,1,1,1,1],
 [0,0,1,0,0],
 [0,0,1,0,0],
 [0,0,1,0,0],
 [0,0,1,0,0]
];

O un corazón:

const dibujo = [
 [1,0,0,0,1],
 [1,1,0,1,1],
 [1,1,1,1,1],
 [0,1,1,1,0],
 [0,0,1,0,0]
];

Así entienden de manera muy visual cómo los arreglos bidimensionales y los ciclos pueden convertirse en imágenes, que es exactamente la idea detrás del Pixel Art que aparece en tu ejemplo.

Comentarios

Publicar un comentario

Entradas más populares de este blog

n-funcion - el botón-n

  En el botón: ¿QUIÉN ejecuta la función? javascript // TÚ escribes esto: const saludar = () => {     console . log ( "🔥 EJECUTANDO" ); }; // Le DICES al botón: "aquí tienes la función, tú ejecútala cuando hagan click" boton . addEventListener ( "click" , saludar ); //                           ↑ //                     Sin () - solo pasas la función // ¿QUIÉN ejecuta saludar() después? // ¡EL NAVEGADOR! Cuando el usuario hace click El navegador ejecuta por ti (como Express) javascript // Simulación de cómo funciona addEventListener internamente class Boton {      constructor () {          this . eventos = {};   // Donde guarda las funciones      }           // Este es addEventListener      cli...
Leer más

1-valores duplicados en un arreglo

 Debes encontrar valores duplicados en un arreglo de números enteros y  regresar un arreglo con los números que se repitan exactamente 2 veces. Prueba tu algoritmo para los siguientes casos: [4,3,2,7,8,3,1]=[32] [1,1,2] = [1] [1]=[] ¿Qué es un arreglo? Un   arreglo   (o array) es una estructura de datos que almacena una colección de elementos en un orden específico. Piensa en él como una   lista ordenada   donde cada elemento tiene una posición numerada. Características principales: Elementos : Pueden ser números, texto, objetos, etc. Índices : Cada elemento tiene una posición (empezando desde 0) Orden : Los elementos mantienen el orden en que fueron agregados Ejemplo visual: javascript // Arreglo de números let numeros = [ 4 , 3 , 2 , 7 , 8 , 3 , 1 ] ; // Posiciones (índices): // índice: 0 1 2 3 4 5 6 // valor: 4 3 2 7 8 3 1 Acceso a elementos: javascript console . log ( numeros [ 0 ] ) ; // 4 (primer elemento) console . log (...
Leer más

analogías aún más simples this

  Analogía 1: El niño y su mamá en el supermercado Imagina que eres un niño pequeño (tú eres el this del exterior) en un supermercado con tu mamá (la función exterior). Situación con función NORMAL (la que PIERDE el contexto): La mamá te dice: "Ve a pedir ayuda al dependiente" (el dependiente = la función callback) Tú (el contexto exterior): Tienes tu carrito, tu lista de compras Le dices al dependiente: "Necesito ayuda" El dependiente responde: "Claro, pero YO soy el dependiente , uso MI uniforme, MI nombre, MI carrito" ¡Problema! El dependiente olvidó que tú existes . No sabe quién eres, qué necesitas, ni qué tenías en tu carrito. Resultado: El dependiente actúa como si fuera él quien necesita ayuda, no tú. Situación con función FLECHA (la que CONSERVA el contexto): La mamá te dice: "Ve a pedir ayuda al dependiente, pero dile que use tu carrito y tu lista " Tú (el contexto exterior): Tienes tu carrito, tu lista de compras Le dices al dep...
Leer más