AI Particle Fountain - Physics Particle System Click to spawn beautiful particle fountains! Particl

function setup() {
  const cnv = createCanvas(windowWidth, windowHeight);
  cnv.id('p5canvas');

  // Only spawn fountains when clicking the canvas, not UI
  cnv.mousePressed(spawnFountainAtMouse);

  // Use HSB for easier color control
  // https://p5js.org/reference/#/p5/colorMode
  colorMode(HSB, 360, 100, 100, 100);

  groundY = height * 0.9;

  setupUI();

  // Start with one fountain near the "ground"
  fountains.push(new Fountain(width / 2, groundY));
}

function draw() {
  // Motion-blur / trail effect: semi-transparent background
  // https://p5js.org/reference/#/p5/background
  background(0, 0, 0, 20);

  // Update parameters from sliders
  gravity = gravitySlider.value();
  baseInitialSpeed = speedSlider.value();
  gravityValueSpan.html(gravity.toFixed(2));
  speedValueSpan.html(baseInitialSpeed.toFixed(1));

  const gravityForce = createVector(0, gravity);

  drawGround();

  // Emit particles from all active fountains
  for (let i = fountains.length - 1; i >= 0; i--) {
    const f = fountains[i];
    f.emit();
    if (f.isDead()) {
      fountains.splice(i, 1);
    }
  }

  // Additive blending for glowing particles
  // https://p5js.org/reference/#/p5/blendMode
  blendMode(ADD);

  // Main fountain particles
  for (let i = particles.length - 1; i >= 0; i--) {
    const p = particles[i];

    p.applyForce(gravityForce);
    p.update();

    // Collision with ground -> create splash particles
    if (p.pos.y >= groundY && p.vel.y > 0) {
      createSplash(p);
      particles.splice(i, 1);
      continue;
    }

    p.display();

    if (p.isDead()) {
      particles.splice(i, 1);
    }
  }

  // Splash (secondary) particles
  for (let i = splashes.length - 1; i >= 0; i--) {
    const s = splashes[i];

    s.applyForce(gravityForce);
    s.update();
    s.display();

    // Let splash particles bounce very slightly off the ground
    if (s.pos.y >= groundY && s.vel.y > 0) {
      s.pos.y = groundY;
      s.vel.y *= -0.3; // small bounce
    }

    if (s.isDead()) {
      splashes.splice(i, 1);
    }
  }

  // Return to normal blending (for anything else that might be drawn)
  blendMode(BLEND);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  groundY = height * 0.9;
}

function setupUI() {
  // Using p5 DOM functions (bundled in core)
  // https://p5js.org/reference/#/p5/createDiv
  const ui = createDiv();
  ui.id('ui');
  ui.style('position', 'fixed');
  ui.style('top', '16px');
  ui.style('left', '16px');
  ui.style('padding', '10px 12px');
  ui.style('border-radius', '8px');
  ui.style('background', 'rgba(0, 0, 0, 0.45)');
  ui.style('color', '#fff');
  ui.style('font-family', 'system-ui, sans-serif');
  ui.style('font-size', '13px');
  ui.style('backdrop-filter', 'blur(8px)');
  ui.style('-webkit-backdrop-filter', 'blur(8px)');
  ui.style('z-index', '10');
  ui.style('user-select', 'none');

  // Gravity row
  const gRow = createDiv();
  gRow.parent(ui);
  gRow.style('margin-bottom', '6px');

  const gLabel = createSpan('Gravity:');
  gLabel.parent(gRow);
  gLabel.style('margin-right', '6px');

  // https://p5js.org/reference/#/p5/createSlider
  gravitySlider = createSlider(0, 0.6, gravity, 0.01);
  gravitySlider.parent(gRow);
  gravitySlider.style('width', '120px');
  gravitySlider.style('vertical-align', 'middle');

  gravityValueSpan = createSpan(gravity.toFixed(2));
  gravityValueSpan.parent(gRow);
  gravityValueSpan.style('margin-left', '6px');
  gravityValueSpan.style('opacity', '0.8');

  // Speed / initial velocity row
  const sRow = createDiv();
  sRow.parent(ui);

  const sLabel = createSpan('Initial speed:');
  sLabel.parent(sRow);
  sLabel.style('margin-right', '6px');

  speedSlider = createSlider(2, 20, baseInitialSpeed, 0.1);
  speedSlider.parent(sRow);
  speedSlider.style('width', '120px');
  speedSlider.style('vertical-align', 'middle');

  speedValueSpan = createSpan(baseInitialSpeed.toFixed(1));
  speedValueSpan.parent(sRow);
  speedValueSpan.style('margin-left', '6px');
  speedValueSpan.style('opacity', '0.8');
}

function drawGround() {
  // Soft ground area
  noStroke();
  fill(210, 20, 15, 40);
  rect(0, groundY, width, height - groundY);

  // Ground line
  stroke(210, 10, 60, 70);
  strokeWeight(2);
  line(0, groundY, width, groundY);
}

function createSplash(particle) {
  const count = floor(random(8, 16));
  const impactSpeed = particle.vel.mag();

  for (let i = 0; i < count; i++) {
    // Splash angles mostly upwards & sideways
    const angle = random(-PI, 0);
    const speed = impactSpeed * random(0.2, 0.7);

    const vx = cos(angle) * speed;
    const vy = sin(angle) * speed * 0.7;

    splashes.push(
      new Particle(
        particle.pos.x,
        groundY - 1, // slightly above ground
        vx,
        vy,
        true
      )
    );
  }
}

function spawnFountainAtMouse() {
  fountains.push(new Fountain(mouseX, mouseY));
}

class Fountain {
  constructor(x, y) {
    this.origin = createVector(x, y);
    this.emissionRate = 6;        // particles per frame
    this.lifeFrames = 60 * 4;     // fountain emits for ~4 seconds
  }

  emit() {
    if (this.lifeFrames <= 0) return;

    for (let i = 0; i < this.emissionRate; i++) {
      // Random angle in upward hemisphere
      const angle = random(-PI, 0);
      const speed = baseInitialSpeed * random(0.6, 1.2);

      // Narrow cone: reduce horizontal component slightly
      const vx = cos(angle) * speed * 0.5;
      const vy = sin(angle) * speed;

      particles.push(new Particle(this.origin.x, this.origin.y, vx, vy, false));
    }

    this.lifeFrames--;
  }

  isDead() {
    return this.lifeFrames <= 0;
  }
}

class Particle {
  constructor(x, y, vx, vy, isSplash) {
    // https://p5js.org/reference/#/p5.Vector
    this.pos = createVector(x, y);
    this.vel = createVector(vx, vy);
    this.acc = createVector(0, 0);
    this.isSplash = isSplash;

    this.size = isSplash ? random(2, 5) : random(4, 8);
    this.lifespan = isSplash ? 180 : 255; // frames
  }

  applyForce(force) {
    this.acc.add(force);
  }

  update() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.mult(0);

    this.lifespan -= this.isSplash ? 5 : 3;
  }

  isDead() {
    return this.lifespan <= 0 ||
           this.pos.y < -50 ||
           this.pos.x < -50 ||
           this.pos.x > width + 50;
  }

  display() {
    const speed = this.vel.mag();
    const maxSpeed = 18;

    // Map speed to color (slow = blue, fast = pink/white)
    const hue = map(speed, 0, maxSpeed, 180, 330, true);
    const brightness = map(speed, 0, maxSpeed, 60, 100, true);
    const baseAlpha = map(this.lifespan, 0, 255, 0, 100, true);

    noStroke();

    // Draw multiple circles for a soft glow
    // https://p5js.org/reference/#/p5/circle
    for (let i = 3; i >= 1; i--) {
      const r = this.size * i;
      const a = baseAlpha / (i * i); // fade outer halos
      fill(hue, 80, brightness, a);
      circle(this.pos.x, this.pos.y, r);
    }
  }
}