Breaking News: Grepper is joining
You.com.
Read the official announcement!
Check it out
SEARCH
COMMUNITY
API
DOCS
INSTALL GREPPER
Log In
Signup
Mizanur Rahaman
May 05, 2022
Twitter
Facebook
Reddit
Hacker News
LinkedIn
html css and js on the grid animation
body { margin: 0; padding: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; background: black; }
//press space to mix and click to pause //learned noise from p5.js resource pages and this: https://openprocessing.org/sketch/1254827 let c; let sp = []; let cnt = 0; let nf, nf2; let t = 0; let playB = true; function setup() { a = random(0.01, 0.2); b = random(0.2, 0.9); c = min(windowWidth, windowHeight) * 0.9; cnv = createCanvas(c, c); initP(int(random(100,500))); r1 = random(50, 120); g1 = random(50, 150); b1 = random(80, 220); strokeWeight(0.5); frameRate(30); } function draw() { if (playB) { cnt++; t = sin(cnt / 500); translate(c / 2, c / 2); background(r1, g1, b1, 15 - t); for (let j = 0; j < 1; j++) { for (let p = 0; p < sp.length; p++) { let n = noise(sp[p].x * a, sp[p].y * a) * TWO_PI; sp[p].add(cos(n * b/(t%5+1)), sin(n * b/(t%5+1))); px = constrain(sp[p].x, -c / 2.5, c / 2.5); py = constrain(sp[p].y, -c / 2.5, c / 2.5); if (abs(px) === c / 2.5 || abs(py) === c / 2.5) { x = random(-c / 2, c / 2); y = random(-c / 2, c / 2); sp[p] = createVector(x, y); if (frameCount === 20) { a = random(0.01, 0.2); b = random(0.2, 0.9); } } pxr = round(px / 10) * 10; pyr = round(py); stroke( 225 - r1 * sin(p + t / 4), 285 - g1 * sin(p + t / 4), 355 - b1 * sin(p + t / 4) ); point(pxr, -pyr); point(-pxr, -pyr); point(pyr, pxr); point(-pyr, pxr); point(px, -py); point(-px, -py); point(py, px); point(-py, px); } } } } function initP(n2) { for (let i = 0; i < n2; i++) { x = random(-c / 2, c / 2); y = random(-c / 2, c / 2); sp[i] = createVector(x, y); } } function keyPressed() { if (keyCode === 32) { sp = []; background(0); setup(); draw(); } } function mousePressed() { playB = !playB; }