​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(207,229,204, 50);//play w alpha here, the lower the alpha, the more trippy it is :)//

  noiseGrid(10, 40);//call noiseGrid function

  ripple(5, 15,20);//call ripple function

}

​

function ripple(disperseSpeed, disappearSpeed,rippleRadius) {

  if (mouseIsPressed) {//only appear when and where you press the mouse

    //feeding in the basic parameter for the ripple

    rippleX = mouseX;

    rippleY = mouseY;

    rippleR = rippleRadius;

    rippleA = 255;//always start off with max alpha

  }

​

  if (rippleA > 0) {

    stroke(250, 201, 44, rippleA);

    noFill();

    strokeWeight(5);

    circle(rippleX, rippleY, rippleR);

​

    rippleR += disperseSpeed;//ripple expand animation

    rippleA -= disappearSpeed;//ripple disappear animation

  }

}

​

function noiseGrid(r, count) {

  for (let j = 0; j <= count / 2; j++) {

    for (let i = 0; i <= count / 2; i++) {

      noStroke();

      fill(250, mouseX / 3, mouseY / 3);

​

      // make the grid move with noise

      let xOffset =noise(i * 0.5, j * 0.5, frameCount * 0.02) * 20;

      let yOffset =noise(i * 0.1, j * 0.1, frameCount * 0.02) * 20;

      let x = (i * width * 2) / count + xOffset;

      let y = (j * height * 2) / count + yOffset;

​

      // the code below is written w AI help:

      let d = dist(mouseX, mouseY, x, y);

      let dispersalRadius = 300; // Radius around mouse for the dispersal effect

​

      if (mouseIsPressed) {

        if (d < dispersalRadius) { // If the rectangle is within the dispersal radius, move it away from the mouse

          let angle = atan2(y - mouseY, x - mouseX);

          let disperseAmount = map(d, 0, dispersalRadius, 10, 0); 

          x += cos(angle) * disperseAmount;

          y += sin(angle) * disperseAmount;

        }

      }

      // the code above is written w AI help:

      circle(x, y, r);//draw individual cirle element

    }

  }

}

​