Isolate color of single character-CodePudding

I have a piece of code in p5.js that acts 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  = '&nbsp;'
  else asciiImage  = c;
}
asciiImage  = '<br/>'
  //console.log(row);
}
asciiDiv.html(asciiImage)
}

and CSS that looks like:

 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; 
}

Which looks like this I apologize for all the comments.

My question is - if I use the color property in CSS, it will change the colors of all the characters. Is it possible to change the color of just one character, let's say I'm using the rightmost darkest character in const density, can I make that character alone blue for example?

Thank you.

EDIT: After the answer given below, I have added in the code like so:

const darkest = density[density.length-1]
  const c = density.charAt(charIndex)
  if (c == ' ') {
    asciiImage  = '&nbsp;'
  
  } else {
    asciiImage  = c;
  }
  if (c === darkest) {
    asciiImage  = `<span class='blue'>${c}</span>`
  }

which now looks like this: https://imgur.com/a/dbqgCCa I think the issue must be because it's adding c twice right?

CodePudding user response：

Technically no, you can't change the color of a specific character, but you can wrap individual characters with an element (preferrably a span) that can be targeted with css.

// references the darkest character in the list
const darkest = density[density.length - 1]
// if the current character is the darkest character, wrap it in a span with a class of 'blue.'
if(c === ' ') {
  asciiImage  = '&nsbc;'
}
else if (c === darkest) {
  asciiImage  = `<span class='blue'>${c}</span>`
}
else {
  asciiImage  = c
}

And in your css, just color the characters blue

.blue {
  color: blue;
}