-
-
Save shanerbaner82/c35f53564b7cb6198820c41dab5e9106 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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