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 += ' '
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.