let n = 5000; // number of particles

let vortexSpacing = 120; // noise scale;

let noiseImg, sound;

let region1 = [];

let region2 = [];

​

function preload() {

  sound = loadSound('https://raw.githubusercontent.com/khatirak/midterm/main/wind.mp3');

}

​

function setup() {

  createCanvas(600, 800);

  noiseDetail(1, 0);

  sound.loop()

​

  // Generate noise image

  createShape1(); // Create the first region shape

  createShape2(); // Create the second region shape

​

  // Generate noise image

  genNoiseImg();

  image(noiseImg, 0, 0);

​

  // initialise particles

  for (let i = 0; i < n; i++) {

    let particle = { pos: createVector(random(width), random(height)) };

    particles.push(particle);

  }

}

​

function draw() {

  background(0, 0, 255, 4);

  tint(0, 255, 0, 7);

  image(noiseImg, 0, 0);

​

  strokeWeight(2);

​

  for (let i = 0; i < particles.length; i++) {

    let p = particles[i];

    p.pos.add(curl(p.pos.x / vortexSpacing, p.pos.y / vortexSpacing));

    // Check if the particle in regions

    let inRegion1 = pointInShape(p.pos, region1);

    let inRegion2 = pointInShape(p.pos, region2);

    if (inRegion1 || inRegion2) {

      // stroke(255); // White 

      stroke(110, 245, 137);      //pastel green

    } else {

      stroke(8, 196, 252);

      // stroke(139, 222, 247); // Pastel blue 

    }

    point(p.pos.x, p.pos.y);      //actual images

  }

}

​

function curl(x, y) {

  const EPSILON = 0.0001;        //if less than 1, move inwards

  let n1 = noise(x + EPSILON, y);          //perlin nosie generator 

  let n2 = noise(x - EPSILON, y);

  let cx = (n1 - n2) / (0.7 * EPSILON);

​

  n1 = noise(x, y + EPSILON);

  n2 = noise(x, y - EPSILON);

  let cy = (n1 - n2) / (0.7 * EPSILON);

​

  return createVector(cy, -cx);

  // return createVector(cy, cx);

  // return createVector(cx, -cy);

  // return createVector(cx, cy);

  // return createVector(-cx, cy);

}

​

function createShape1() {

  region1.push({ x: 60, y: 380 });

  region1.push({ x: 200, y: 300 });

  region1.push({ x: 260, y: 360 });

  region1.push({ x: 220, y: 540 });

  region1.push({ x: 80, y: 580 });

  region1.push({ x: 40, y: 540 });

  region1.push({ x: 20, y: 520 });

  region1.push({ x: 100, y: 460 });

}

​

function createShape2() {

  region2.push({ x: 300, y: 80 });

  region2.push({ x: 380, y: 70 });

  region2.push({ x: 320, y: 140 });

  region2.push({ x: 440, y: 160 });

  region2.push({ x: 360, y: 260 });

  region2.push({ x: 550, y: 480 });

  region2.push({ x: 540, y: 640 });

  region2.push({ x: 220, y: 700 });

  region2.push({ x: 360, y: 600 });

  region2.push({ x: 260, y: 560 });

  region2.push({ x: 300, y: 460 });

  region2.push({ x: 380, y: 400 });

  region2.push({ x: 280, y: 300 });

  region2.push({ x: 220, y: 160 });

}

​

function pointInShape(point, shape) {

  // Check if point inside shape d

  let oddNodes = false;

  let x = point.x;

  let y = point.y;

​

  for (let i = 0, j = shape.length - 1; i < shape.length; j = i++) {

    let xi = shape[i].x;

    let yi = shape[i].y;

    let xj = shape[j].x;

    let yj = shape[j].y;

​

    if ((yi < y && yj >= y) || (yj < y && yi >= y)) {

      if (xi + ((y - yi) / (yj - yi)) * (xj - xi) < x) {

        oddNodes = !oddNodes;

      }

    }

  }

​

  return oddNodes;

}

​

function genNoiseImg() {

  noiseImg = createGraphics(width, height);

  noiseImg.loadPixels();

  let widthd = width * pixelDensity();

  let heightd = height * pixelDensity();

​

  for (let i = 0; i < widthd; i++) {

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

      let x = i / pixelDensity();

      let y = j / pixelDensity();

​

      // Check if the pixel is inside either of the regions

      let inRegion1 = pointInShape({ x, y }, region1);

      let inRegion2 = pointInShape({ x, y }, region2);

​

      // Calculate the brightness based on the regions

      let bright = inRegion1 || inRegion2 ? 255 : 0;

​

      noiseImg.pixels[(i + j * widthd) * 4] = bright;

      noiseImg.pixels[(i + j * widthd) * 4 + 1] = bright;

      noiseImg.pixels[(i + j * widthd) * 4 + 2] = bright;

      noiseImg.pixels[(i + j * widthd) * 4 + 3] = 255;

    }

  }

  noiseImg.updatePixels();

}

​