let particles = [];

let colors;

let palettes = [

  ["#FF6B6B", "#FFD93D", "#6BCB77", "#4D96FF", "#8E44AD"],

  ["#F72585", "#B5179E", "#7209B7", "#3A0CA3", "#4361EE"],

  ["#2176FF", "#33A1FD", "#FDCA40", "#F79824", "#F72585"],

  ["#FF9F1C", "#FFBF69", "#2EC4B6", "#1A535C", "#EDF2F4"],

  ["#06D6A0", "#118AB2", "#FFD166", "#EF476F", "#A70895"],

  ["#F2FD3A", "#5CC5F5", "#1625EB", "#EC1EAA", "#4E83CE"],

];

let mainGraphics;

let canvasTexture;

let paused = false;

let particleSizeModifier = 1; 

​

function setup() {

  createCanvas(800, 600);

  colors = random(palettes);

  mainGraphics = createGraphics(width, height);

  canvasTexture = createGraphics(width, height);

  createCanvasTexture();

​

  //  particles

  let gridSpan = 40;

  for (let x = 0; x <= width; x += gridSpan) {

    for (let y = 0; y <= height; y += gridSpan) {

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

    }

  }

}

​

function draw() {

  if (!paused) {

    background(20);

​

    // Update and draw particles

    particles.forEach((p) => {

      p.update();

      p.draw(mainGraphics);

    });

​

    // Remove small particles

    particles = particles.filter((p) => p.r > 0.5);

​

    // Display main graphics

    image(mainGraphics, 0, 0);

​

    // Add texture overlay

    blendMode(MULTIPLY);

    image(canvasTexture, 0, 0);

    blendMode(BLEND);

  }

}

​

// Add interaction with the keyboard

function keyPressed() {

  if (key === "P" || key === "p") {

    paused = !paused; // Toggle paused state

  }

  if (key === "C" || key === "c") {

    particles = []; // Clear all particles

    mainGraphics.clear();

  }

  if (key === "R" || key === "r") {

    setup(); // Reset everything

  }

}

​

// Create new particles when the mouse pressed

function mousePressed() {

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

    particles.push(new Particle(mouseX, mouseY));

  }

}

​

// Dragging a particle trail

function mouseDragged() {

  particles.push(new Particle(mouseX, mouseY));

}

​

// Simulate canvas texture

function createCanvasTexture() {

  canvasTexture.noFill();

  canvasTexture.stroke(255, 255, 255, 10); 

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

    let x = random(width);

    let y = random(height);

    canvasTexture.point(x, y);

  }

}

​

// Particle class

class Particle {

  constructor(x, y) {

    this.p = createVector(x, y);

    this.v = p5.Vector.random2D().mult(random(0.5, 1.5));

    this.a = createVector(0, 0);

    this.r = random(10, 50) * particleSizeModifier; // Adjust size dynamically

    this.color = color(random(colors));

    this.targetColor = color(random(colors));

    this.angle = random(TWO_PI); // Initial angle for rotation

    this.rot = random(-0.05, 0.05); // Speed of rotation

    this.noiseOffset = random(1000); // Offset for sin/cos motion

  }

​

  draw(pg) {

    pg.push();

    pg.translate(this.p.x, this.p.y);

    pg.rotate(this.angle); // Rotate the particle

​

    // Draw the particle with dynamic color

    pg.fill(this.color);

    pg.noStroke();

    pg.ellipse(0, 0, this.r, this.r);

​

    // Add smaller circles for texture

    if (random() < 0.7) {

      pg.fill(255, 150);

      pg.ellipse(

        cos(frameCount * 0.1) * this.r * 0.5,

        sin(frameCount * 0.1) * this.r * 0.5,

        this.r / 8

      );

    }

    pg.pop();

  }

​

  update() {

    // Attraction to mouse when pressed

    if (mouseIsPressed) {

      let attraction = createVector(mouseX, mouseY).sub(this.p).setMag(0.2);

      this.v.add(attraction);

    }

​

    // Update position with sin/cos oscillation

    this.p.x += sin(this.noiseOffset + frameCount * 0.02) * 2;

    this.p.y += cos(this.noiseOffset + frameCount * 0.02) * 2;

​

    // Rotate the particle

    this.angle += this.rot;

​

    // Gradually shrink the particle

    this.r *= 0.995;

​

    // Smoothly change color

    this.color = lerpColor(this.color, this.targetColor, 0.02);

​

    //  pick a new target color

    if (frameCount % 120 === 0) {

      this.targetColor = color(random(colors));

    }

  }

}

​