clase-15

clase-15

Examen

Para el examen final decidí trabajar con la herrammienta de ASCII

• Comencé a investigar cómo funcionaba y de qué manera podía aplicar esta herramienta, utilizando el video tutorial de The Coding Train llegando a las siguientes pruebas:

• ASCII Imagen Flor

• ASCII Imagen Flor 2

Para luego hacer lo que realmente me interesaba lograr, generar un video a través de cámara con ASCII, que explicaba como hacerlo en el mismo video tutorial de The Coding Train.

• Primero se genera la selección de caracteres que generarán una densidad que se traspasará a la densidad de rgb que hay por pixel.
• Luego se permite al video y al asciiDiv funcionar para luego llamarlos, let; y function setup(), se crea captura de video y se le dan medidas.

// Video Cámara ASCII
//
// Sketch basado en el video tutorial de The Coding Train  https://youtu.be/55iwMYv8tGI?si=JPM8JiAxjQ4Ufuz7

//Densidad a través de caracteres

const density = "Ñ@#W$9876543210?!abc;:+=-,._  ";

let video;
let asciiDiv;

// Agregar función para utilizar video cámara

function setup() {
  asciiDiv = createDiv();
  noCanvas();
  video = createCapture(VIDEO);
  video.size(64, 48);
}

• Dentro de funtion draw() se llama a loadPixels lo cual permite realizar un mapeo del video pixel a pixel.
• Generar una función que permita separar los canales rgb para que estos se traduzcan en densidades luego.
• Hacer un promedio de estos canales con avg.

function draw() {
 
// Hacer mapeo de pixel por pixel para que cada uno dentro del rgb tenga un caracter asignado
// Llamar a loadPixels(); 

  video.loadPixels();
  let asciiImage = "";
  for (let j = 0; j < video.height; j++) {
    for (let i = 0; i < video.width; i++) {
      const pixelIndex = (i + j * video.width) * 4;
      const r = video.pixels[pixelIndex + 0];
      const g = video.pixels[pixelIndex + 1];
      const b = video.pixels[pixelIndex + 2];   
      
      // Hacer un promedio del brillo basandose en los valores rgb
      
      const avg = (r + g + b) / 3;

      
// Mapear el valor de brillo para pasarlo a los caracteres dentro del rango
// Agregar la función floor para que los números no sean intermedios decimales, para que sean enteros
      
      const len = density.length;
      const charIndex = floor(map(avg, 0, 255, 0, len));
      
      const c = density.charAt(charIndex);
      if (c == " ") asciiImage += " ";
      else asciiImage += c;
      
      //textSize(w);
      //textAlign(CENTER, CENTER);
      //text(density.charAt(charIndex), i * w + w * 0.5, j * h + h * 0.5);
      
    }
    asciiImage += '<br/>';
  }
  asciiDiv.html(asciiImage);
}

• Finalmente en el espacio de style.css agregar el color de fondo,la tipografía, su color espaciado y tamaño.

html, body {
  margin: 0;
  padding: 0;
  background-color: #001ADB;
  font-family: 'Courier';
  color: #FFF;
  font-size: 12pt;
  line-height: 10pt;
}

canvas {
  display: block;
}

• Dando este resultado final:

doc-5.mov

Sketch - ASCII Video Cámara

Aquí están los enlaces a los 3 códigos que desarrollé:

ASCII_Imagen_Flor_2024_06_24_19_18_26

ASCII_Imagen_Flor_2_2024_06_24_19_18_17

ASCII_Video_Camara_2024_06_24_19_16_45