Skip to content

Particles 2

This particle system is made of particles that switch between 4 states: growing, shrinking, turning-left, and turning-right. New particles preferentially spawn at the position of current particles.

Click to make a burst of new particles.

White particles leaving trails on a dark green background

class Particle {
  constructor(x, y) {
    if (x && y) {
      this.x = x
      this.y = y
      this.a = random(2 * PI)
    } else if (random() < 0.1 || particles.length == 0) {
      this.x = random(width)
      this.y = random(height)
      this.a = random(2 * PI)
    } else {
      let p = random(particles)
      this.x = p.x
      this.y = p.y
      this.a = p.a
    }
    this.s = random(0.7, 1.4)
    this.state = 1
  }
  
  draw() {
    noStroke()
    fill(255, 250, 240)
    circle(this.x, this.y, this.s)
    if (random() < noise(this.x / 50, this.y / 50) * 0.2) {
      this.state = random([1, 2, 3, 4])
    }
    this.x += cos(this.a)
    this.y += sin(this.a)
    if (this.state == 1) {
      this.s += 1 / this.s
    }
    if (this.state == 2) {
      this.s -= 1 / this.s
    }
    if (this.state == 3) {
      this.a -= 0.1 / this.s
    }
    if (this.state == 4) {
      this.a += 0.1 / this.s
    }
    
  }
  
  shouldRemove() {
    return this.s < 0.5 || this.x < -10-this.s || this.y < -10-this.s || this.x > width + 10 +this.s || this.y > height + 10+this.s
  }
}

let particles = []

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(30, 93, 40);
  
  for (let i = 0; i < 0; i ++) {
    particles.push(new Particle())
  }
}

var windowResized = setup

function mousePressed() {
  for (let i = 0; i < 30; i ++) {
    particles.push(new Particle(mouseX, mouseY))
  }
}

function draw() {
  background(30, 93, 40, 15);
  
  for (let i = 0; i < 1; i ++) {
    particles.push(new Particle())
  }
  
  let removedCount = 0
  for (let i = 0; i < particles.length - removedCount; i ++) {
    particles[i].draw()
    if (particles[i].shouldRemove()) {
      removedCount ++
      particles[i] = particles[particles.length - removedCount]
    }
  }
  particles.splice(-removedCount, removedCount)
}

(Originally seen at https://editor.p5js.org/bojidar-bg/sketches/krwjBc2H6)

Experiments tagged p5 (78/85)

Experiments tagged particles (3/3) →|

Experiments on this site (78/85)