HTML CSS JS Result

clear();
ctx.globalAlpha = 1;
noLoop();
image(img, 0, 0, width, height);
loadPixels();
noStroke();
for (let y = 0; y < height; y+=detail) {
for (let x = 0; x < width; x+=detail) {
const r = pixels[(y * width + x) * 4];
const g = pixels[(y * width + x) * 4 + 1];
const b = pixels[(y * width + x) * 4 + 2];
const _color = color(r, g, b);
const _brightness = floor(brightness(_color) / 100 * 255);
fill(_brightness);
rect(x, y, detail, detail);
}
}
}
Loading...

Draw an image and divide it into a grid

Get the brightness of every cell
Draw particles moving from left to right
Update each particle's speed based on the
brightness of its position
Fade each particle based on its speed
Do not clear your scene on each frame, to
let the particles fade out

Wednesday Addams
Developer
1.0× Rahul
Fork Export
Share

Run
CodePen: Unlock all of CodePen

Draw an image and divide it into a grid

Get the brightness of every cell
:
: