There is a code snippet in JavaScript using p5.js that functions as a video filter:
const density = ' .:░▒▓█'
//const density = ' .tiITesgESG'
//let geist;
let video
let asciiDiv
let playing = false
let button
function preload() {
video = createVideo('assets/ripple.mp4', vidLoad)
}
function vidLoad() {
video.loop()
video.volume(0)
}
function setup() {
noCanvas()
//video = createCapture(VIDEO)
//video = createVideo('assets/01.mp4');
button = createButton('play');
button.mousePressed(toggleVid);
video.size(256, 160)
//video.size(160, 160);
asciiDiv = createDiv();
}
function toggleVid() {
if (playing) {
video.pause();
button.html('play');
} else {
video.loop();
button.html('pause');
}
playing = !playing;
}
function draw() {
background(0);
video.loadPixels();
let asciiImage = '';
//pixelarray
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];
const avg = (r + g + b) / 3;
const len = density.length;
const charIndex = floor(map(avg, 0, 255, len, 0));
const c = density.charAt(charIndex);
if (c == ' ') asciiImage += ' '
else asciiImage += c;
}
asciiImage += '<br/>'
//console.log(row);
}
asciiDiv.html(asciiImage)
}
In addition, there is CSS code that appears like this:
html, body {
margin: 0;
padding: 0;
border: 10px solid black;
background-color: #fff;
/*
//#fcbf45;
//aaaaaa;
*/
color: #000;
//#ffd & #00b0aa;
font-family: 'Courier Bold';
line-height: 4pt;
font-size: 5pt;
}
canvas {
display: block;
}
You can see the result here. I apologize for all the comments included.
Now, my inquiry revolves around whether it's feasible to alter the color of a specific character within the text. For instance, if I choose the rightmost darkest character from the 'density' constant, could I make just that character appear in blue?
Thank you for your help.
UPDATE: Following the advice provided below, I have implemented the following changes in the code:
const darkest = density[density.length-1]
const c = density.charAt(charIndex)
if (c == ' ') {
asciiImage += ' '
} else {
asciiImage += c;
}
if (c === darkest) {
asciiImage += `<span class='blue'>${c}</span>`
}
The updated result can be viewed here: https://i.stack.imgur.com/DiFeM.jpg. It seems the issue arises due to appending 'c' twice, correct?