let scl = 10; // Scale of the grid

let w, h; // Width and height of the grid

let flowField = [];

let noiseScale = 0.1; // Controls the smoothness of the flow

let noiseStrength = 1; // Strength of the noise effect

let startColor, midColor, endColor;

let t = 0; // Interpolation parameter for color transition

​

function setup() {

  createCanvas(800, 800);

  w = width;

  h = height;

  cols = w / scl;

  rows = h / scl;

  // Define colors for transition

  startColor = color(0); // Black

  midColor = color(173, 216, 230); // Light blue (soothing soft blue)

  endColor = color(0, 0, 139); // Dark blue (sky and ocean color)

​

  flowField = Array.from({ length: cols * rows }, () => createVector());

  calculateFlowField();

​

  // Set initial background and draw the flow field

  background(255);

  drawFlowField();

}

​

function draw() {

  // Smoothly transition colors over time

  t = (t + 0.01) % 1; // Increment and wrap around between 0 and 1

  let currentColor;

  if (t < 0.5) {

    currentColor = lerpColor(startColor, midColor, map(t, 0, 0.5, 0, 1));

  } else {

    currentColor = lerpColor(midColor, endColor, map(t, 0.5, 1, 0, 1));

  }

​

  // Set background color and redraw the flow field

  background(currentColor);

  calculateFlowField();

  drawFlowField();

}

​

// Calculate the flow field based on Perlin noise

function calculateFlowField() {

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

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

      let index = x + y * cols;

      let angle = noise(x * noiseScale + millis() * 0.0001, y * noiseScale + millis() * 0.0001) * TWO_PI * noiseStrength;

      flowField[index] = p5.Vector.fromAngle(angle);

    }

  }

}

​

// Draw the flow field with lines

function drawFlowField() {

  strokeWeight(1);

  noFill();

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

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

      let index = x + y * cols;

      let posX = x * scl;

      let posY = y * scl;

      let v = flowField[index];

      let endX = posX + v.x * scl;

      let endY = posY + v.y * scl;

      stroke(0, 50); // Black with some transparency

      line(posX, posY, endX, endY);

    }

  }

}

​

// Update the flow field based on mouse position

function mouseMoved() {

  // Change noise scale and strength based on mouse position

  noiseScale = map(mouseX, 0, width, 0.01, 0.2);

  noiseStrength = map(mouseY, 0, height, 0.5, 2);

  // No need to clear the canvas here as color transition is handled in draw()

  calculateFlowField();

  drawFlowField();

}

​

// Optional: Regenerate the flow field on mouse click

function mousePressed() {

  // Clear the canvas and regenerate flow field

  background(255); 

  calculateFlowField();

  drawFlowField();

}

​