let pixelsAsColors = [];

​

function preload() {

  img = loadImage('sufjan.jpg');

}

​

function sortColorsByBrightness(colorA, colorB) {

  // first extract the brightness from both colors

  let brightA = brightness(colorA);

  let brightB = brightness(colorB);

  // if colorA < colorB

  // return -1;

  // if colorA > colorB

  // return 1

  // otherwise, return 0

  if (brightA < brightB) return -1;

  if (brightA > brightB) return 1;

  else return 0;

}

​

function setup() {

  img.resize(img.width/2, img.height/2);

  createCanvas(windowWidth, windowHeight);

  background("red");

  img.loadPixels();

  for (let i = 0; i < img.pixels.length; i += 4) {

    let r = img.pixels[i]; 

    let g = img.pixels[i + 1]; 

    let b = img.pixels[i + 2];

    let c = color(r, g, b);

    pixelsAsColors.push(c);

  }

  pixelsAsColors.sort(sortColorsByBrightness);

  // now our array is sorted, based our sort function

  for (let x = 0; x < img.width; x += 1) {

    for (let y = 0; y < img.height; y += 1) {

      let index = x + y*img.width;

      stroke(pixelsAsColors[index]);

      point(x, y);

    }

  }

  // let's figure out how to sort the colors.

  // let's sort them by brightness

  noLoop();

}

​

function draw() {

  //image(img, 0, 0);

}

​

​

​

​

​

​

​

​

​

​

​