let step;

​

const density = '.;,/!`~゠ァィゥェォカガキギクグケゲコゴサザシジスズセゼソゾタ'

function setup() {

    createCanvas(windowWidth, windowHeight);

    fullscreen()

    cam = createCapture(VIDEO);

    cam.size(width, height);

    cam.hide();

    ellipseMode(CENTER);

    step = createSlider(5, 50, 7, 1);

    step.position(25, height + 20);

}

​

function draw() {

  background(0);

    let stepSlider = step.value();

    let w = width / cam.width;

    let h = height / cam.height;

    cam.loadPixels();

    for(let x = 0; x < cam.width; x+=stepSlider){

        for(let y = 0; y < cam.height; y+=stepSlider){

          let pixelIndex = (x + y * cam.width) * 4;

          let r = cam.pixels[pixelIndex + 0];

          let g = cam.pixels[pixelIndex + 1];

          let b = cam.pixels[pixelIndex + 2];

          let avgCol = (r + g + b) / 3;

          noStroke();

          fill(r, g, b);

          const len = density.length;

          const charIndex = floor(map(avgCol, 0, 255, 0, len));

          textSize(w * 10);

          textAlign(CENTER, CENTER);

          text(density.charAt(charIndex), 

               x * w + w * 0.5, 

               y * h + h * 0.5

              );

        }

​

    }

}