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
 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;
 }

html css and js on the grid animation

Grepper

Documentation

Social

Legal

Contact