let scl = 20; // Scale for grid spacing

let w, h;

let t = 0; // Time variable

let flowfield;

let isRipple = false; // Flag to control the ripple effect

​

function setup() {

  createCanvas(800, 800);

  cols = floor(width / scl);

  rows = floor(height / scl);

  w = width;

  h = height;

  flowfield = new Array(cols * rows);

​

  // Initialize the flow field with Perlin noise

  let yOffset = 0;

  for (let y = 0; y < rows; y++) {

    let xOffset = 0;

    for (let x = 0; x < cols; x++) {

      let index = x + y * cols;

      // Use Perlin noise to create a wave-like animation

      let angle = noise(xOffset, yOffset) * TWO_PI * 2;

      let v = p5.Vector.fromAngle(angle);

      v.mult(3); // Adjust the magnitude for gentle waves

      flowfield[index] = v;

      xOffset += 0.1; // Adjust this for the speed of the waves

    }

    yOffset += 0.1; // Adjust this for the speed of the waves

  }

}

​

function draw() {

  background(255);

​

  // Display and animate lines

  for (let y = 0; y < rows; y++) {

    for (let x = 0; x < cols; x++) {

      let index = x + y * cols;

      let angle = flowfield[index].heading();

      let x1 = x * scl;

      let y1 = y * scl;

      let x2 = x1 + cos(angle) * scl;

      let y2 = y1 + sin(angle) * scl;

      stroke(0, 50);

      line(x1, y1, x2, y2);

    }

  }

​

  if (isRipple) {

    // Create an animated ripple effect within the lines upon mouse click

    let yOffset = 0;

    for (let y = 0; y < rows; y++) {

      let xOffset = 0;

      for (let x = 0; x < cols; x++) {

        let index = x + y * cols;

        // Use Perlin noise with time variable and mouse click to animate the flow field

        let angle = noise(xOffset, yOffset, t) * TWO_PI * 2;

        let v = p5.Vector.fromAngle(angle);

        v.mult(3); // Adjust the magnitude for gentle waves

        flowfield[index] = v;

        xOffset += 0.1; // Adjust this for the speed of the waves

      }

      yOffset += 0.1; // Adjust this for the speed of the waves

    }

    // Gradually return to sea therapeutic animation

    t += 0.01;

    if (t > 1) {

      isRipple = false;

    }

  }

}

​

function mousePressed() {

  // Activate the ripple effect on mouse click

  isRipple = true;

  t = 0; // Reset the time variable

}

​

​

​

​

​

​