​

function preload() {

  img = loadImage("starry-night.jpg"); // Ensure the image path is correct

}

​

function setup() {

  createCanvas(windowWidth, windowHeight); // Create a responsive canvas

}

​

function draw() {

  image(img, 0, 0, width, height);

​

  let swirlSize = 70; // Thickness of swirls

  let numSwirls = 15; // Number of swirls

  let baseSpeed = 0.0008; // Base speed for swirl movement

​

  // Function to draw swirls

  function drawSwirls(centerX, centerY, offsetYMultiplier) {

    for (let j = 0; j < numSwirls; j++) {

      let centerXAdjusted = centerX + random(-30, 30);

      let centerYAdjusted =

        centerY + random(-15 * offsetYMultiplier, 15 * offsetYMultiplier);

      let phaseOffset = frameCount * baseSpeed * (1 + j * 0.05);

​

      stroke(

        j % 3 === 0

          ? color(0, 102, 204, 180)

          : j % 3 === 1

          ? color(255, 255, 0, 180)

          : color(255, 255, 255, 180)

      );

      strokeWeight(3);

      noFill();

​

      beginShape();

      for (let r = 0; r < TWO_PI; r += PI / 12) {

        let offsetX = random(-5, 5);

        let offsetY = random(-5, 5);

        let x =

          centerXAdjusted +

          cos(r + phaseOffset) * swirlSize * (1 + j * 0.15) +

          offsetX;

        let y =

          centerYAdjusted +

          sin(r + phaseOffset) * swirlSize * (1 + j * 0.15) +

          offsetY;

        vertex(x, y);

      }

      endShape(CLOSE);

    }

  }

​

  // Draw the two sets of swirls

  drawSwirls(width * 0.4, height * 0.25, 1); // First set of swirls

  drawSwirls(width * 0.68, height * 0.5, 2); // Second set of swirls, positioned further down

}

​