Skip to content

Instantly share code, notes, and snippets.

@shanerbaner82
Created January 30, 2022 18:50
Show Gist options
  • Save shanerbaner82/c35f53564b7cb6198820c41dab5e9106 to your computer and use it in GitHub Desktop.
Save shanerbaner82/c35f53564b7cb6198820c41dab5e9106 to your computer and use it in GitHub Desktop.
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]));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment