// CLICK AGAIN TO PAUSE

​

var song;

var fft;

let particles = [];

let maxRadius = 250;

let minRadius = 10;

let font;

​

function preload() {

  song = loadSound('giveup.mp3.mp3');

  font = loadFont('DancingScript-VariableFont_wght.ttf');

}

​

function setup() {

  createCanvas(540, 540);

  angleMode(DEGREES);

  rectMode(CENTER);

  fft = new p5.FFT();

}

​

function draw() {

  background(242, 203, 5);

  strokeWeight(5)

  stroke(242, 127, 61);

  fill(242, 203, 5);

  push()

  fill(217, 90, 78);

   noStroke();

  circle(270,270,210*sin(frameCount*0.5))

  pop()

  translate(width/2, height/2);

  fft.analyze();

  amp = fft.getEnergy(20, 200);

  var wave = fft.waveform();

  for (var t = -1; t <= 1; t += 2) {

    // beginShape();

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

      let index = floor(map(i, 0, 180, 0, wave.length - 1));

      let r = map(wave[index], -1, 1, minRadius, maxRadius);

      let x = r * sin(i) * t;

      let y = r * cos(i);

      point(x, y);

      vertex(x, y);

    }

    // endShape();

  }

  var p = new Particle();

  particles.push(p);

  for (let i = particles.length - 1; i >= 0; i--) {

    if (!particles[i].edges()) {

      particles[i].update(amp > 200);

      particles[i].show();

    } else {

      particles.splice(i, 3);

    }

  }

}

​

function mouseClicked() {

  if (song.isPlaying()) {

    song.pause();

    noLoop();

  } else {

    song.play();

    loop();

  }

}

​

class Particle {

  constructor() {

    this.pos = p5.Vector.random2D().mult(180);

    this.vel = createVector(0, 0);

    this.acc = this.pos.copy().mult(random(0.0001, 0.00001));

    this.size = random(10, 30);

    this.c = random(50, 255);

  }

  show() {

    noStroke();

    fill(88, 107, 166);

    textFont(font);

    textSize(this.size+sin(frameCount*0.5));

    text('give up', this.pos.x, this.pos.y);

  }

  update(condition) {

    this.vel.add(this.acc);

    this.pos.add(this.vel);

    if (condition) {

      this.pos.add(this.vel);

      this.pos.add(this.vel);

      this.pos.add(this.vel);

    }

  }

  edges() {

    if (this.pos.x < -width / 2 || this.pos > width / 2 || this.pos.y < -height / 2 || this.pos.y > height / 2) {

      return true;

    } else {

      return false;

    }

  }

}

​

​