Pixel Art programático

 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

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

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

Objetos básicos en JavaScript

  1. Objetos en JavaScript Un objeto es como un contenedor que guarda datos (propiedades) y acciones (métodos/funciones). javascript // Creando un objeto vacío const miObjeto = {}; // Objeto con propiedades const persona = {      nombre : 'Juan' ,       // propiedad con valor string      edad : 30 ,           // propiedad con valor número      casado : false       // propiedad con valor boolean }; console . log ( persona . nombre );   // "Juan" console . log ( persona . edad );     // 30 2. Acceder a elementos de un objeto Hay dos formas de acceder: javascript const productoController = {      nombre : 'Controlador de Productos' ,      version : '1.0' }; // Forma 1: Notación de punto (la más común) console . log ( productoController . nombre );   // "Controlador de Productos" // Forma 2: Notación ...
Leer más