https://github.com/thetornadotitan/QuickSort-Pixel-Sorting/blob/master/Pixel_Sorting.pde

​

 ASDF Pixel Sort

 Kim Asendorf | 2010 | kimasendorf.com

 [recoded in p5.js by Antonio Belluscio]

​

 sorting modes

​

 0 = black

 1 = brightness

 2 = white

​

 */

​

// dithering - https://editor.p5js.org/codingtrain/sketches/-YkMaf9Ea

function imageIndex( x, y) {

  return 4 * (x + y * width);

}

​

function getColorAtindex( x, y) {

  let idx = imageIndex( x, y);

  let pix = pixels;

  let red = pix[idx];

  let green = pix[idx + 1];

  let blue = pix[idx + 2];

  let alpha = pix[idx + 3];

  return color(red, green, blue, alpha);

}

​

function setColorAtIndex( x, y, clr) {

  let idx = imageIndex( x, y);

​

  let pix = pixels;

  pix[idx] = red(clr);

  pix[idx + 1] = green(clr);

  pix[idx + 2] = blue(clr);

  pix[idx + 3] = alpha(clr);

}

​

// Finds the closest step for a given value

// The step 0 is always included, so the number of steps

// is actually steps + 1

function closestStep(max, steps, value) {

  return round(steps * value / 255) * floor(255 / steps);

}

​

function makeDithered( steps) {

  loadPixels();

​

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

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

      let clr = getColorAtindex( x, y);

      let oldR = red(clr);

      let oldG = green(clr);

      let oldB = blue(clr);

      let newR = closestStep(255, steps, oldR);

      let newG = closestStep(255, steps, oldG);

      let newB = closestStep(255, steps, oldB);

​

      let newClr = color(newR, newG, newB);

      setColorAtIndex( x, y, newClr);

​

      let errR = oldR - newR;

      let errG = oldG - newG;

      let errB = oldB - newB;

​

      distributeError( x, y, errR, errG, errB);

    }

  }

​

  updatePixels();

}

​

function distributeError( x, y, errR, errG, errB) {

  addError( 7 / 16.0, x + 1, y, errR, errG, errB);

  addError( 3 / 16.0, x - 1, y + 1, errR, errG, errB);

  addError( 5 / 16.0, x, y + 1, errR, errG, errB);

  addError( 1 / 16.0, x + 1, y + 1, errR, errG, errB);

}

​

function addError( factor, x, y, errR, errG, errB) {

  if (x < 0 || x >= width || y < 0 || y >=height) return;

  let clr = getColorAtindex(x, y);

  let r = red(clr);

  let g = green(clr);

  let b = blue(clr);

  clr.setRed(r + errR * factor);

  clr.setGreen(g + errG * factor);

  clr.setBlue(b + errB * factor);

​

  setColorAtIndex(x, y, clr);

}

​

var mode = 0;

​

var imgSrcFileName = "gh.jpg";

var imgSrc;            // source image  

var imgSrcPixels = []; // packed RGB of source image

var imgPixels = [];    // packed RGB of sorted image

​

// threshold values to determine sorting start and end pixels

var blackValue;

var brightnessValue;

var whiteValue;

​

var row = 0;

var column = 0;

​

var paramsDiv;

​

​

function preload() 

{

    imgSrc = loadImage( imgSrcFileName );

}

​

​

function setup() 

{

    createCanvas( imgSrc.width, imgSrc.height );

  // cursor( HAND );

​

  // paramsDiv = createDiv('...');

  // paramsDiv.style("position", "absolute");

  // paramsDiv.style("width", "100%");

  // paramsDiv.style("bottom", 0);

  // paramsDiv.style("font-family", "Verdana");

  // paramsDiv.style("font-size", 12);

  // paramsDiv.style("color", "#fff");

  // paramsDiv.style("text-shadow", "1px 1px 0 #000");

  // paramsDiv.style("text-align", "center");

​

    imgSrc.loadPixels();

    for (var i = 0; i < 4*(imgSrc.width*imgSrc.height); i+=4) {

      imgSrcPixels[int(i/4)] = (255 << 24) | (imgSrc.pixels[i] << 16) | (imgSrc.pixels[i+1] << 8) | (imgSrc.pixels[i+2]);

    }

    imgSrc.updatePixels();

​

    loadPixels();

  updateParams();

}

​

​

function draw() 

{

  imgPixels = imgSrcPixels.slice();

​

    row = 0;

    column = 0;

​

    // loop through rows

    while (row < height - 1) {

        sortRow();

        row++;

    }

​

    // loop through columns

    while (column < width - 1) {

        sortColumn();

        column++;

    }

​

    var imageBytes = 4*(imgSrc.width*imgSrc.height);

​

  var i = 0;

    while (i < imageBytes) {

        var col = imgPixels[int(i/4)];

    pixels[i++] = col >> 16 & 255;

        pixels[i++] = col >> 8 & 255;

        pixels[i++] = col & 255;

    pixels[i++] = 255;

  }

​

    updatePixels();

  makeDithered(1);

  // image(imgSrcPixels, 0, 0);

  noLoop();

}

​

​

function mouseClicked() 

{

    if (mode < 2) {

        ++mode;

    } else {

        mode = 0;

    }

    updateParams();

}

​

​

function mouseMoved() 

{

    //updateParams();

}

​

​

function updateParams() 

{

  let _x = random(width);

  console.log(_x);

    if (mode === 0) {

        blackValue = int(map(_x, 0, width - 1, -16777216, 0));

    } else if (mode == 1) {

        brightnessValue = int(map(_x, 0, width - 1, 0, 255));

    } else if (mode == 2) {

        whiteValue = int(map(_x, 0, width - 1, -16777216, 0));

    }

  var params = "";

    if (mode === 0) {

        params = "mode: 0 - blackValue: " + blackValue;

    } else if (mode == 1) {

        params = "mode: 1 - brightnessValue: " + brightnessValue;

    } else if (mode == 2) {

        params = "mode: 2 - whiteValue: " + whiteValue;

    }

​

  if (paramsDiv) {

    paramsDiv.html( params );

  }

}

​

​

function sortRow() 

{

    // current row

    var y = row;

    var iRow = y * imgSrc.width;

​

    // where to start sorting

    var x = 0;

​

    // where to stop sorting

    var xend = 0;

​

    while (xend < width - 1) {

        switch (mode) {

            case 0:

                x = getFirstNotBlackX(x, y);

                xend = getNextBlackX(x, y);

                break;

            case 1:

                x = getFirstBrightX(x, y);

                xend = getNextDarkX(x, y);

                break;

            case 2:

                x = getFirstNotWhiteX(x, y);

                xend = getNextWhiteX(x, y);

                break;

            default:

                break;

        }

​

        if (x < 0) break;

​

        var sortLength = xend - x;

​

        var unsorted = [];

        var sorted = [];

​

        for (var i = 0; i < sortLength; i++) {

            unsorted[i] = imgPixels[x + i + iRow];

        }

​

        sorted = sort(unsorted);

​

        for (var i = 0; i < sortLength; i++) {

            imgPixels[x + i + iRow] = sorted[i];

        }

​

        x = xend + 1;

    }

}

​

​

function sortColumn() 

{

    // current column

    var x = column;

​

    // where to start sorting

    var y = 0;

​

    // where to stop sorting

    var yend = 0;

​

    while (yend < height - 1) {

        switch (mode) {

            case 0:

                y = getFirstNotBlackY(x, y);

                yend = getNextBlackY(x, y);

                break;

            case 1:

                y = getFirstBrightY(x, y);

                yend = getNextDarkY(x, y);

                break;

            case 2:

                y = getFirstNotWhiteY(x, y);

                yend = getNextWhiteY(x, y);

                break;

            default:

                break;

        }

​

        if (y < 0) break;

​

        var sortLength = yend - y;

​

        var unsorted = [];

        var sorted = [];

​

        for (var i = 0; i < sortLength; i++) {

            unsorted[i] = imgPixels[x + (y + i) * imgSrc.width];

        }

​

        sorted = sort(unsorted);

​

        for (var i = 0; i < sortLength; i++) {

            imgPixels[x + (y + i) * imgSrc.width] = sorted[i];

        }

​

        y = yend + 1;

    }

}

​

​

// black x

function getFirstNotBlackX( x, y )

{

    var iRow = y * imgSrc.width;

    while (imgPixels[x + iRow] < blackValue) {

        x++;

        if (x >= width)

            return -1;

    }

    return x;

}

​

​

function getNextBlackX( x, y )

{

    x++;

    var iRow = y * imgSrc.width;

    while (imgPixels[x + iRow] > blackValue) {

        x++;

        if (x >= width)

            return width - 1;

    }

    return x - 1;

}

​

​

// brightness x

function getFirstBrightX( x, y )

{

    var iRow = y * imgSrc.width;

    while (brightness2(imgPixels[x + iRow]) < brightnessValue) {

        x++;

        if (x >= width)

            return -1;

    }

    return x;

}

​

​

function getNextDarkX( _x, _y )

{

    var x = _x + 1;

    var y = _y;

​

    var iRow = y * imgSrc.width;

    while (brightness2(imgPixels[x + iRow]) > brightnessValue) {

        x++;

        if (x >= width) return width - 1;

    }

    return x - 1;

}

​

​

// white x

function getFirstNotWhiteX( x, y )

{

    var iRow = y * imgSrc.width;

    while (imgPixels[x + iRow] > whiteValue) {

        x++;

        if (x >= width)

            return -1;

    }

    return x;

}

​

​

function getNextWhiteX( x, y )

{

    x++;

    var iRow = y * imgSrc.width;

    while (imgPixels[x + iRow] < whiteValue) {

        x++;

        if (x >= width)

            return width - 1;

    }

    return x - 1;

}

​

​

// black y

function getFirstNotBlackY( x, y )

{

    if (y < height) {

        while (imgPixels[x + y * imgSrc.width] < blackValue) {

            y++;

            if (y >= height)

                return -1;

        }

    }

    return y;

}

​

​

function getNextBlackY( x, y )

{

    y++;

    if (y < height) {

        while (imgPixels[x + y * imgSrc.width] > blackValue) {

            y++;

            if (y >= height)

                return height - 1;

        }

    }

    return y - 1;

}

​

​

// brightness y

function getFirstBrightY( x, y )

{

    if (y < height) {

        while (brightness2(imgPixels[x + y * imgSrc.width]) < brightnessValue) {

            y++;

            if (y >= height)

                return -1;

        }

    }

    return y;

}

​

​

function getNextDarkY( x, y )

{

    y++;

    if (y < height) {

        while (brightness2(imgPixels[x + y * imgSrc.width]) > brightnessValue) {

            y++;

            if (y >= height)

                return height - 1;

        }

    }

    return y - 1;

}

​

​

// white y

function getFirstNotWhiteY( x, y )

{

    if (y < height) {

        while (imgPixels[x + y * imgSrc.width] > whiteValue) {

            y++;

            if (y >= height)

                return -1;

        }

    }

    return y;

}

​

​

function getNextWhiteY( x, y )

{

    y++;

    if (y < height) {

        while (imgPixels[x + y * imgSrc.width] < whiteValue) {

            y++;

            if (y >= height)

                return height - 1;

        }

    }

    return y - 1;

}

​

​

function brightness2( col ) {

    return ( ((col >> 16) & 255) + ((col >> 8) & 255) + (col & 255) ) / 3;

}

​