​

let particles1 = []; // exploding particles

let particles = []; // perlin noise flow field particles

const numParticles1 = 100; // exploding particles number

const numParticles = 800; // exploding particles number

const expansionLimit = 360; // Set your desired expansion limit

​

const num = 150; // flow field particles

const noiseScale = 0.01 / 2;

​

function preload() {

  backgroundImg = loadImage("hand.png");

}

​

function setup() {

  createCanvas(842, 1191);

  background(0);

  background(backgroundImg);

  noFill();

  stroke(0);

  // colorMode(HSB,255);

  ellipse(width / 2, height / 2, 200, 200); // draw the middle circle

​

  //perlin noise loop

  perlinShape = new PerlinShape();

​

  //particles exploding in a circle form

  noStroke();

  generateParticles1(); // Generate the initial set of particles

​

  //flow field

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

    particles.push(createVector(random(width), random(height)));

  }

  stroke(255, 60); // adjust the last number for the transparency of the strokes

  strokeWeight(7); // adjust the thickness of the strokes

  clear();

​

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

    let x = width / 2 + random(-10, 10); // Add random offset to x

    let y = height / 2 + random(-10, 10); // Add random offset to y

    particles.push(new Particle(x, y));

  }

}

​

function generateParticles1() {

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

    let particle1 = new Particle1(width / 2, height / 2); // Set initial position of the explosion WITHIN the circle boundary

    particles1.push(particle1);

  }

}

​

function draw() {

  background(0, 5); //the smaller the last number is, the longer the strokes stay visible + the slower the background color switches.

​

  //    for (let particle of particles) {

  //   particle.update();

  //   particle.display();

  // }

​

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

    let p = particles[i];

    point(p.x, p.y);

    let n = noise(

      p.x * noiseScale,

      p.y * noiseScale,

      frameCount * noiseScale * noiseScale

    );

    let a = TAU * n;

    p.x += cos(a);

    p.y += sin(a);

    if (!onScreen(p)) {

      p.x = random(width);

      p.y = random(height);

    }

  }

​

  //circle

  let centerX = width / 2;

  let centerY = height / 2;

  let radius = 100;

​

  // loop through each pixel inside the circle

  for (let x = centerX - radius; x < centerX + radius; x++) {

    for (let y = centerY - radius; y < centerY + radius; y++) {

      let d = dist(x, y, centerX, centerY);

​

      // check if the pixel = inside the circle

      if (d < radius) {

        // calculate Perlin noise value based on pixel's position

        let noiseValue = noise(x * 0.01, y * 0.01);

​

        // map the noise value to control the grayscale color

        let gray = map(noiseValue, 0, 0.2, 50, 120);

​

        stroke(gray); // stroke color

        point(x, y); // draw a pixel at calculated position

      }

    }

  }

  // noLoop(); // stop the draw loop after one frame

  // end of circle

​

  //particles explosion

  for (let particle1 of particles1) {

    particle1.update();

    particle1.display();

  }

​

  // Remove particles that exceed the expansion limit

  particles1 = particles1.filter((particle1) => !particle1.isDead());

​

  // Check if all particles have died

  if (particles1.length === 0) {

    generateParticles1(); // Generate a new set of particles

  }

  //end of particles explosion

​

  //perlin loop

  perlinShape.display();

  perlinShape.update(0.8); // change the waves/shape of the perlin loop

}

​

function mouseReleased() {

  noiseSeed(millis());

}

​

function onScreen(v) {

  return v.x >= 0 && v.x <= width && v.y >= 0 && v.y <= height;

}

​