// https://www.rand-on.com/projects/2018_edge_detection/edge_detection.html var xKernel = [ [-1, 0, 1], [-1, 0, 1], [-1, 0, 1], ]; var yKernel = [ [-1, -1, -1], [0, 0, 0], [1, 1, 1], ]; // Sobel // var xKernel = [ // [1, 0, -1], // [2, 0, -2], // [1, 0, -1] // ]; // var yKernel = [ // [1, 2, 1], // [0, 0, 0], // [-1, -2, -1] // ]; function apply_sobel_filter(img) { img.loadPixels(); var n = img.width * img.height; var sobel_array = new Uint32Array(n); // compute the gradient in soble_array var index; var x, y; var xk, yk; var xGradient, xMultiplier; var yGradient, yMultiplier; var pixelValue; for (x = 1; x < img.width - 1; x++) { for (y = 1; y < img.height - 1; y++) { i = x + y * img.width; xGradient = 0; yGradient = 0; for (xk = -1; xk <= 1; xk++) { for (yk = -1; yk <= 1; yk++) { pixelValue = img.pixels[4 * (x + xk + (y + yk) * img.width)]; xGradient += pixelValue * xKernel[yk + 1][xk + 1]; yGradient += pixelValue * yKernel[yk + 1][xk + 1]; } } sobel_array[i] = Math.sqrt( Math.pow(xGradient, 2) + Math.pow(yGradient, 2) ); } } // copy sobel_array to image pixels; for (x = 0; x < img.width; x++) { for (y = 0; y < img.height; y++) { i = x + y * img.width; img.pixels[4 * i] = sobel_array[i]; img.pixels[4 * i + 1] = sobel_array[i]; img.pixels[4 * i + 2] = sobel_array[i]; } } img.updatePixels(); } // --- let photoIndex; let s = 4; let originalPhoto = []; let linePhoto = []; let linePg = []; let colorPg = []; const timeline = [ [0, 5], [1, 1], [2, 1], [1, 1], [0, 7], [1, 1], [2, 1], [1, 1], [0, 2], [1, 1], [2, 1], [1, 1], [0, 10], ]; let timelineIndexes = []; let timelineIndex = 0; const shapesNum = 50; let shapes = []; const palette = ["#CE9DD4", "#EFD26C", "#E2B6B7", "#71C3DF", "#9FD4DD"]; function preload() { photoIndex = 0; originalPhoto[0] = loadImage("https://stat.neort.io/externalResource/cintsosn70rgtg5oql90.png"); originalPhoto[1] = loadImage("https://stat.neort.io/externalResource/cintspkn70rgtg5oqla0.png"); originalPhoto[2] = loadImage("https://stat.neort.io/externalResource/cintsqcn70rgtg5oqlb0.png"); } function setup() { createCanvas(originalPhoto[0].width, originalPhoto[0].height); linePhoto[0] = originalPhoto[0].get(); linePhoto[1] = originalPhoto[1].get(); linePhoto[2] = originalPhoto[2].get(); angleMode(DEGREES); for (let p = 0; p < timeline.length; p++) { for (let q = 0; q < timeline[p][1]; q++) { timelineIndexes.push(timeline[p][0]); } } for (let i = 0; i < originalPhoto.length; i++) { apply_sobel_filter(linePhoto[i]); linePg[i] = createGraphics(width, height); linePg[i].clear(); linePg[i].rectMode(CENTER); linePg[i].noStroke(); for (let x = 0; x <= linePg[i].width; x += s) { for (let y = 0; y <= linePg[i].height; y += s) { let c = linePhoto[i].get(x, y); if (brightness(c) > 40) { linePg[i].fill(100); linePg[i].square(x, y, s); } } } colorPg[i] = createGraphics(width, height); colorPg[i].image(originalPhoto[i], 0, 0); colorPg[i].filter(POSTERIZE, 11); colorPg[i].rectMode(CENTER); colorPg[i].noStroke(); for (let x = 0; x <= colorPg[i].width; x += s) { for (let y = 0; y <= colorPg[i].height; y += s) { let c = colorPg[i].get(x, y); colorPg[i].fill(c); colorPg[i].square(x, y, s); } } } for (let i = 0; i < shapesNum; i++) { shapes.push(new Shape()); } } function draw() { background(255); for (let i = 0; i < shapes.length; i++) { shapes[i].move(); shapes[i].display(); } noStroke(); for (let x = 0; x <= width / 2; x += s * 2) { for (let y = 0; y <= height; y += s * 2) { let c = get(x, y); fill(c); square(x, y, s * 2); } } image(colorPg[timelineIndexes[timelineIndex % timelineIndexes.length]], 0, 0); image(linePg[timelineIndexes[timelineIndex % timelineIndexes.length]], 0, 0); if (frameCount % 5 == 0) { timelineIndex++; } } class Shape { constructor() { this.init(); this.r = random(width); } init() { this.x = width / 2; this.y = height / 2; this.d = random(20, 60); this.r = 0; this.t = random(90, 90 + 180); this.speed = random(3, 6); this.c = color(random(palette)); this.isFill = random([true, false]); } move() { this.x = this.r * cos(this.t) + width / 2; this.y = this.r * sin(this.t) + height * 0.375; this.r += this.speed; if (this.r > width) { this.init(); } } display() { if (this.isFill) { noStroke(); fill(this.c); } else { stroke(this.c); strokeWeight(10); noFill(); } circle(this.x, this.y, this.d); } }

Game-like effect