​

let animating = false;

let animatingIn = false;

​

let ejecting = false;

const ejectAmt = 50;

​

function setup() {

  createCanvas(600, 400);

}

​

function draw() {

  if(!animating && animatingIn) {

    background(255);

    fill(0);

    text("Loading...", width/2, height/2);

  } else {

    background(0); 

  }

  if(ejecting) {

    const pos = createVector(width/2, height/3);

    const vel = p5.Vector.fromAngle(PI/2 + random(-PI/6, PI/6)).mult(5);

​

    particles.push(new ExpandParticle(pos, vel, 10, width));  

​

    if(particles.length >= ejectAmt) {

      ejecting = false;

    }

  }

​

  particles = particles.filter(p => {

    const dead = p.update();

    p.draw();

    if(dead && animatingIn && p.stopR > width) {

      animating = false;

    }

    return !dead;

  });

  if(!animatingIn && animating && particles.length === 0) {

    animating = false;

  }

}

​

function mouseReleased() {

  if(animating) {

    return;

  }

  animating = true;

  animatingIn = !animatingIn;

  if(animatingIn) {

    ejecting = true;

    const pos = createVector(width/2, height/3);

    const vel = p5.Vector.fromAngle(PI/2 + random(-PI/6, PI/6)).mult(5);

​

    particles.push(new ExpandParticle(pos, vel, 10, width * 1.5));  

  } else {

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

      const x = random(width);

      const y = random(height);

      const pos = createVector(x, y);

      const r = dist(x, y, width/2, height/2) * width;

      particles.push(new ContractParticle(pos, r));

    }

  }

}

​

class ContractParticle {

  constructor(pos, r) {

    this.pos = pos;

    this.r = r;

  }

  update() {

    this.r *= 0.95;

    return this.r < 1;

  }  

  draw() {

    noStroke();

    fill(255);

    circle(this.pos.x, this.pos.y, this.r * 2);

  }

}

​

class ExpandParticle {

  constructor(pos, vel, r, maxR) {

    this.pos = pos;

    this.vel = vel;

    this.r = r;

    this.startR = r;

    this.stopR = maxR;

  }

  update() {

    this.vel.mult(0.98);

    this.pos.add(this.vel);    

    this.r *= 1.03;

    return this.r >= this.stopR;

  }  

  draw() {

    noStroke();

    fill(255);

    circle(this.pos.x, this.pos.y, this.r * 2);

  }

}