var popp;

var fft;

var r = 10;

let framenew = [];

let k;

var sadman;

let ty = 0;

let ty2 = 0;

let clicks = 0;

let s = 10;

let p = 0;

let q = 0;

var fft;

​

function preload() {

  sound = loadSound("gallant.mp3");

  popp = loadSound("pop.mp3");

  sadman = loadImage("sadman.png");

}

​

function setup() {

  createCanvas(1920, 1080);

  background(255);

  angleMode(DEGREES);

  amp = new p5.Amplitude();

  sound.play();

  fft = new p5.FFT();

  sound.setVolume(0.1);

​

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

  //let x=30+200*i;

  //framenew[i]= new frame(x,100,200);

}

​

function mousePressed() {

  let b = new frame(mouseX - 75, mouseY - 75, 100);

  framenew.push(b);

  console.log(mousePressed);

  clicks++;

  popp.play();

}

​

function draw() {

  background(220);

  let level = amp.getLevel();

  let size = map(level, 0, 1, 0, 200);

  // console.log(size);

​

  for (let i = 0; i < framenew.length; i++) {

    framenew[i].move();

    framenew[i].show();

  }

​

  image(sadman, 0, 0);

  //cryingman

  // push();

  //translate(width/2,height-300);

  //rectMode(CENTER);

  //rect(0,0,300,600);

  //pop();

​

  //tear 1

  if ((size = 20)) {

    ty = ty + 0.1;

  }

​

  if (clicks > 10) {

    r = 0;

    s = 0;

    p = 50;

    q = 40;

  }

  push();

  //translate(0,0);

  noStroke();

  // frameRate(60);

  ellipse(825, 685 + ty * 50, 15);

  pop();

  if (ty > r) {

    ty = 0;

  }

​

  //tear 2

  if ((size = 20)) {

    ty2 = ty2 + 0.1;

  }

  push();

  noStroke();

  // frameRate(60);

  ellipse(1000, 670 + ty2 * 50, 15);

  pop();

  if (ty2 > s) {

    ty2 = 0;

  }

​

  //smile

  push();

  fill(255);

  circle(925, 750, p);

  fill(0);

  ellipse(925, 735, 90, q);

  pop();

​

  dog();

}

class frame {

  constructor(x, y, r) {

    this.x = x;

    this.y = y;

    this.r = r;

    this.randoms = [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1];

    this.changeRate = int(random(2,20))

  }

  move() {

    this.x = this.x + random(-1, 1);

    this.y = this.y + random(-1, 1);

  }

​

  show() {

    push();

    strokeWeight(random(3, 5));

    noFill();

    if(frameCount%this.changeRate === 0 ){

      this.randoms[0] = random(0, 20);

      this.randoms[1] = random(0, 20);

      this.randoms[2] = random(130, 150);

      this.randoms[3] = random(130, 150);

      this.randoms[4] = random(180, 200);

      this.randoms[5] = random(180, 200);

      this.randoms[6] = random(0, 5);

      this.randoms[7] = random(40, 50);

      this.randoms[8] = random(90, 100)

      this.randoms[9] = random(90, 100);

      this.randoms[10] = random(90, 100);

      this.randoms[11] = random(0, 10);

    }

    beginShape();

    vertex(this.x + this.randoms[0], this.y + this.randoms[1]);

    vertex(this.x + this.randoms[2], this.y);

    vertex(this.x + this.randoms[3], this.y + this.randoms[4]);

    vertex(this.x, this.y + this.randoms[5]);

    endShape(CLOSE);

    fill(0);

    noStroke();

    k = this.randoms[11];

    circle(this.x + 50, this.y + 50, k);

    circle(this.x + 100, this.y + 50, k);

    pop();

    push();

    strokeWeight(this.randoms[6]);

    line(

      this.x + this.randoms[7],

      this.y + this.randoms[8],

      this.x + this.randoms[9],

      this.y + this.randoms[10]

    );

    pop();

  }

}

​

var dog = function () {

  strokeWeight(1);

​

  push();

  noFill();

  var wave = fft.waveform();

  translate(mouseX, mouseY);

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

    beginShape();

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

      var wavyshit = wave.length - 1;

      var index = floor(map(i, 0, 180, 0, wavyshit / 10));

      var a = 100;

      var b = 50;

      var r = map(wave[index], -1, 1, a, b);

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

      var y = r * cos(i);

      vertex(x, y);

      endShape();

    }

  }

  pop();

};

​