* This code is not very organized and I deeply

 * apologize for that. 

 */ 

​

let srcImg;

let img;

let colorPixels = [];

let status;

let sortFuncText;

let sortStyleText;

// brightness || hue || saturation

let sortType = 'brightness';

// row || column || whole

let sortStyle = 'whole';

​

let sortTypeMap = {

  brightness: sortColorByBrightness,

  hue: sortColorByHue,

  saturation: sortColorBySaturation

};

​

let sortStyleMap = {

  row: sortByRow,

  column: sortByColumn,

  whole: sortWhole

};

​

// ways to sort

// hue, saturation, brightness, grayscale/luminance

// sort entire canvas, just column, just row

​

function preload() {

  srcImg = loadImage('sufjan.jpg');

  img = loadImage('sufjan.jpg'); 

}

​

function setup() {

  // it's rly slow so let's speed this up

  let newWidth = srcImg.width/2;

  let newHeight = srcImg.height/2;

  srcImg.resize(newWidth, newHeight);

  img.resize(newWidth, newHeight);

  status = createP('Not currently sorting.');

  createP('Press "s" to sort!');

  createP('Press 1, 2, or 3 to change what you\'re sorting by.');

  createP('Press q, w, or e to change what you\'re sorting.')

  sortFuncText = createP('Sort by: ' + sortType);

  sortStyleText = createP('Sorting: ' + sortStyle);

  createCanvas(img.width, img.height);

  // noLoop();

}

​

function colorToInt(c) {

  return parseInt(c.toString('#rrggbb').substr(1), 16);

}

​

function copyPixelsToColors() {

  srcImg.loadPixels();

  img.copy(srcImg, 0, 0, srcImg.width, srcImg.height, 0, 0, srcImg.width, srcImg.height);

  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 a = img.pixels[i+3];

    let index = int(i/4);

    colorPixels[index] = color(r,g,b,a); 

  }

}

​

function copyColorsToPixels() {

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

    img.pixels[4*i] = red(colorPixels[i]);

    img.pixels[4*i+1] = green(colorPixels[i]);

    img.pixels[4*i+2] = blue(colorPixels[i]);

    img.pixels[4*i+3] = alpha(colorPixels[i]);

  }

  img.updatePixels();

}

​

function sortColorAsInt(a,b) {

    let ac = colorToInt(a);

    let bc = colorToInt(b);

    if (a < b) return -1;

    if (a > b) return 1;

    if (a === b) return 0;

}

​

function sortColorByBrightness(a,b) {

  let brightA = brightness(a);

  let brightB = brightness(b);

  if (brightA < brightB) return -1;

  if (brightA > brightB) return 1;

  else return 0;

}

​

function sortColorByHue(a,b) {

  let hueA = hue(a);

  let hueB = hue(b);

  if (hueA < hueB) return -1;

  if (hueA > hueB) return 1;

  else return 0;

}

​

function sortColorBySaturation(a,b) {

  let saturationA = saturation(a);

  let saturationB = saturation(b);

  if (saturationA < saturationB) return -1;

  if (saturationA > saturationB) return 1;

  else return 0;

}

​

function draw() {

  // background(220);

  // img.loadPixels();

  // copyPixelsToColors();

  // colorPixels.sort(sortColorByBrightness);

  // copyColorsToPixels();

  // img.updatePixels();

  // image(img, 0, 0);

}

​

function keyTyped() {

  if (key === '1') {

    sortType = 'brightness';

  } else if (key === '2') {

    sortType = 'hue';

  } else if (key === '3') {

    sortType = 'saturation';

  } else if (key === 'q') {

    sortStyle = 'row';

  } else if (key === 'w') {

    sortStyle = 'column';

  } else if (key === 'e') {

    sortStyle = 'whole';

  }

  sortFuncText.html('Sort by: ' + sortType);

  sortStyleText.html('Sorting: ' + sortStyle);

  if (key === 's') {

    status.html('sorting...');

    // if it isn't working, put a setTimeout on it

    // because setTimeout is synchronous, it locks up

    // javascript and the status doesn't get set, so

    // wait a moment until the sorting starts

    setTimeout(doSort,100); 

  }

  // for debugging, just making sure my img is intact

  // if (key === 'r') {

  //   img.copy(srcImg, 0, 0, srcImg.width, srcImg.height, 0, 0, srcImg.width, srcImg.height);

  //   image(srcImg, 0, 0); 

  // }

}

​

function doSort() {

  let sortFunc = sortTypeMap[sortType];

  let sortStyleFunc = sortStyleMap[sortStyle];

  copyPixelsToColors();

  sortStyleFunc(sortFunc);

  copyColorsToPixels();

  image(img, 0, 0);

  status.html('done :)');

}

​

function sortWhole(sortFunc) {

  colorPixels.sort(sortFunc);

}

​

function sortByRow(sortFunc) {

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

     let sortArray = colorPixels.slice(y*width,(y+1)*width-1);

    // print('sorting row: ' + y);

    sortArray.sort(sortFunc);

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

      colorPixels[y*width + i] = sortArray[i]; 

    }

  }

}

​

function sortByColumn(sortFunc) {

  let sortArray = [];

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

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

      sortArray[y] = colorPixels[y+width + x];

    }

    sortArray.sort(sortFunc);

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

      colorPixels[i*width + x] = sortArray[i]; 

    }

  }

}

​