Isolate color of single character

Question

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://i.stack.imgur.com/DiFeM.jpg I think the issue must be because it's adding c twice right?

jjroley · Accepted Answer · 2022-10-15T12:27:58.523

1

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

edited Oct 15 '22 at 12:27

answered Oct 15 '22 at 02:26

jjroley

157
10

Thank you, that's a great answer. I'm getting a strange result though: https://imgur.com/a/zcD0GXe – ssarkar Oct 15 '22 at 03:22
sorry I unmarked the answer. any further help is appreciated – ssarkar Oct 15 '22 at 04:08
@ssarkar could you add how you've added this code into the code in your actual question as It seems a bit strange that it isn't working. – A Haworth Oct 15 '22 at 05:50
Yes, the problem is because you are adding c twice. I edited my answer above with the correct code. – jjroley Oct 15 '22 at 12:29

Isolate color of single character

1 Answers1