Ek33

const palettes = [

["#3761d4","#f1ece7","#e1749a","#c74b51","#ebcc45","#5d8edf","#2f3379","#6f782b"],
["#577b88","#dd7c48","#f1dabf","#614379"],
["#d7d6d5","#bb4b41","#5a433d","#448db8"],

]

let size = 1000;
let pg, pixelImage, mask;
let bigSize;
let modes;
let palette;

let threshold = 68;
let pixelDistance = 2;
let angle = 0;

let alwaysAdapt = false;

function setup() {
	modes = [OVERLAY,ADD,LIGHTEST,DIFFERENCE,EXCLUSION,MULTIPLY,
			SCREEN,REPLACE,REMOVE,OVERLAY,HARD_LIGHT,SOFT_LIGHT,
			DODGE,BURN,SUBTRACT];

	pixelDensity(1);
	createCanvas(size, size);
	colorMode(HSB);
	noLoop();

	pg = createGraphics(size,size);


	drawBaseImage();
	drawOverlay();


	bigSize = floor(size*sqrt(2));
	pixelImage = createGraphics(bigSize, bigSize);
	pixelImage.translate(pixelImage.width/2, pixelImage.height/2);
	pixelImage.rotate(radians(angle));
	pixelImage.translate(-pixelImage.width/2, -pixelImage.height/2);
	pixelImage.image(pg, bigSize/2-size/2, bigSize/2-size/2, pg.width, pg.height);

	mask = createGraphics(bigSize, bigSize);
	mask.translate(mask.width/2, mask.height/2);
	mask.rotate(radians(angle));
	mask.translate(-mask.width/2, -mask.height/2);
	mask.background(255);
	mask.fill(0);
	mask.rectMode(CENTER);
	mask.rect(mask.width/2, mask.height/2, size, size);

	applyPixelSort(pixelImage);
}

function draw() {

	translate(width/2, height/2);
	rotate(radians(-angle));
	translate(-width/2, -height/2);
	imageMode(CENTER);
	if (alwaysAdapt) {
		resizeCanvas(windowHeight, windowHeight);
	}
	bigSize = floor(height*sqrt(2));
	image(pixelImage, height/2, height/2, bigSize, bigSize);
}

function windowResized(){
  resizeCanvas(windowHeight, windowHeight);
}

function drawBaseImage(){

	pg.blendMode(modes[9]);
	palette = shuffle(random(palettes));

	for (let i = 0; i < 60; i++) {

		let x = random(pg.width);
		let y = random(pg.height);
		let w = random(pg.width);
		let h = random(pg.height);
		let angle = int(random(18)) * PI * 0.25;
		pg.push();
		pg.noStroke();
		pg.translate(x, y);
		pg.rotate(angle);

		let c = randomColor(0.1,0.5);
		pg.fill(c);

		for (let i = 0; i < 30; ++i) {

			pg.rect(x+i, y+i, w+i*10, h+i*50);
			pg.blendMode(modes[8]);
		}
		pg.pop();

	}

	pg.blendMode(modes[9]);


	for (let i = 0; i < 400; ++i) {

		let x = random(-0.2, 1.2) * pg.width;
		let y = random(-0.2, 1.2) * pg.height;
		let s = random(5, 400);
		concentricCircle(random(x,x+10), random(y,y+10), s);

		pg.strokeWeight(random(0.15));
		pg.rect(random(x,x+10), random(y,y+10), s, s);

	}
}

function concentricCircle(x, y, d) {
	let c = randomColor(0.1,0.5);
	pg.fill(c);
	pg.push();
	pg.translate(x, y);

	pg.strokeWeight(0.015);
	pg.circle(0, 0, d);

	while (d > 0) {
		d -= random(230);

		pg.strokeWeight(0.015);
		pg.ellipse(0, 0, d * random(0.9, 1), d * random(0.9, 1));
		pg.blendMode(modes[10]);
	}
	pg.pop();
}

function randomColor(minAlpha,maxAlpha) {
	let c = color(random(palette));
	c.setAlpha(random(minAlpha,maxAlpha));
	return c;
}

function drawOverlay(){
	palette = shuffle(random(palettes));
	for (let i = 0; i < 200; i++) {
		pg.strokeWeight(0.15);
		let c = randomColor(0.1,0.3);
		pg.fill(c);
		pg.rect(0+i*30,random(i*20),400,400);
		if (random() < 0.5) {
			pg.blendMode(modes[8]);
		}
	}
}

function applyPixelSort(img) {

	img.loadPixels();
	mask.loadPixels();
	let pixelSelection = edgeDetection(img, threshold, pixelDistance);
	for (let i = 0; i < pixelSelection.length; ++i) {
		if (i === pixelSelection.length - 1) {
			pixelSort(img, pixelSelection[i].x, pixelSelection[i].y);
		} else {
			pixelSort(img, pixelSelection[i].x, pixelSelection[i].y, pixelSelection[i + 1].x, pixelSelection[i + 1].y);
		}
	}
	img.updatePixels();
}

function edgeDetection(img, threshold,	distance, dir) {
	let selection = [];
	for (let y = 0; y < img.height; ++y) {
		for (let x = 0; x < img.width; ++x) {
			let mask_color = getPixel(mask, x, y - distance);
			if (mask_color[0] !== 0) {
				continue;
			}
			mask_color = getPixel(mask, x, y);
			if (mask_color[0] !== 0) {
				continue;
			}

			let shiftedCol = getPixel(img, x, y - distance);
			let col = getPixel(img, x, y);
			let d = dist(shiftedCol[0],	shiftedCol[1], shiftedCol[2], col[0], col[1], col[2]);
			if (d > threshold) {
				selection.push(createVector(x, y));
			}
		}
	}
	return selection;
}

function pixelSort(img, x1, y1, x2 = null, y2 = null) {
	let pix = [];

	let start = y1;
	let end = img.height;
	for (let i = start; i < end; ++i) {
		let x = x1;
		let y = i;
		if (x == x2 && y == y2) {
			break;
		}
		let mask_color = getPixel(mask, x, y);
		if (mask_color[0] !== 0) {
			break;
		}
		pix.push(getPixel(img, x, y));
	}

	pix.sort(sortFunction);

	for (let i = 0; i < pix.length; ++i) {
		setPixel(img, x1, y1 + i, pix[i][0], pix[i][1], pix[i][2]);
	}
}

function getPixel(img, x, y) {
	let d = pixelDensity();
	let off = (y * img.width + x) * d * 4;
	let components = [
		img.pixels[off + 0],
		img.pixels[off + 1],
		img.pixels[off + 2],
		img.pixels[off + 3]
	];
	return components;
}

function setPixel(img, x, y, r, g, b, a = 255) {
	let d = pixelDensity();
	for (let i = 0; i < d; ++i) {
		for (let j = 0; j < d; ++j) {

			let index = 4 * ((y * d + j) * img.width * d + (x * d + i));
			img.pixels[index + 0] = r;
			img.pixels[index + 1] = g;
			img.pixels[index + 2] = b;
			img.pixels[index + 3] = a;
		}
	}
}

function sortFunction(a, b) {

	return -(b[2] - a[0] + random(b[1]) - a[1] + b[2] - random(a[2]));
}