Change color of ASCII code from live input according to sound frequency

193 Views Asked by At

I am new to coding and I'm trying to make an ascii code from a live input (my video camera) that changes color depending on sound frequency (using FFT, still not gotten into that part). I am using a pixel array in order to get the brightness of my image and convert it into ascii using a density. I have not been able to change the color inside my sketch code, but I could change it writing some code in my html file (which is not what I want since I need to get some sound frequencies in order to change the color of the pixel array I have created for my density).

Could someone please help me out on this?

let capture; //to manipulate the video I'm getting
const density = "Ñ@#W$9876543210?!abc;:+=-,._                            "; //string to use as     image for video
let asciiDiv;


function setup() {
  createCanvas();
  background(0);
  capture = createCapture(VIDEO); //input webcam video
  capture.size(192,96);
  asciiDiv = createDiv();
  //capture.hide(); //hide the video outside the canvas
}

function draw() {
  capture.loadPixels();
  let asciiImage = '';
  //let co = color(202, 102, 232);
for (let j = 0; j < capture.height; j++) {
  for (let i = 0; i < capture.width; i++) {
  const pixelIndex = (i + j * capture.width) * 4;
  const r = capture.pixels[pixelIndex + 0];
  const g = capture.pixels[pixelIndex + 1];
  const b = capture.pixels[pixelIndex + 2];
  const avg = (r + g + b) / 3;
  const len = density.length;
  //noStroke();
  
  
  
  fill(202, 102, 232);
  const charIndex = floor(map(avg, 0, 255, len, 0));
  
  
  const c = density.charAt(charIndex);
  if (c == ' ') asciiImage += '&nbsp;'
  else asciiImage += c;

}
asciiImage += '<br/>';
}
asciiDiv.html(asciiImage);

  }
html, body {
  margin: 0;
  padding: 0;
  background-color: #000;
  color: #d9b3ff; //the color I want to put inside the pixel array and change with sound frequency
  font-family: 'Courier';
  font-size: 24pt;
  line-height: 20pt;
}
canvas {
  display: block;
}

I have tried to declare fill(); before my pixel array, I have tried to declare fill(); before the constant I created and nothing seems to work! This only to change the color inside my sketch and not do it on the html file.

0

There are 0 best solutions below