let shouldDrawPixels = false;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  pixelDensity(1);

  video = createCapture(VIDEO);

  video.size(width, height);

  video.hide();

  drawPixels();

}

​

function draw() {

  if (shouldDrawPixels) {

    drawPixels();

    shouldDrawPixels = false;

  }

}

​

function drawPixels() {

  background(0); 

  video.loadPixels();

​

  let pixelArray = [];

​

  for (let y = 0; y < video.height; y += 8) {

    for (let x = 0; x < video.width; x += 8) {

      let index = (x + y * video.width) * 4;

      let r = video.pixels[index + 0];

      let g = video.pixels[index + 1];

      let b = video.pixels[index + 2];

      // A potential metric for sorting: prioritize red, then green, then blue

      let sortValue = r - b; // This simplistic metric needs adjustment

      pixelArray.push({color: color(r, g, b), sortValue});

    }

  }

​

  // Adjust the sorting logic here

  // This is a simplistic approach and might need fine-tuning

  pixelArray.sort((a, b) => {

    // Calculate the "distance" of each color from being purely green

    let greenDistanceA = Math.abs(a.color.levels[1] - ((a.color.levels[0] + a.color.levels[2]) / 2));

    let greenDistanceB = Math.abs(b.color.levels[1] - ((b.color.levels[0] + b.color.levels[2]) / 2));

    return greenDistanceA - greenDistanceB;

  });

​

  let pixelSize = min(width, height) / sqrt(pixelArray.length);

  let cols = width / pixelSize;

​

  // Draw the sorted pixels

  noStroke();

  for (let i = 0; i < pixelArray.length; i++) {

    let px = floor(i % cols) * pixelSize;

    let py = floor(i / cols) * pixelSize;

    fill(pixelArray[i].color);

    rect(px, py, pixelSize, pixelSize);

  }

}

​

​

function mouseClicked() {

  shouldDrawPixels = true; 

}