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;

var tearcolour = 0;

let gap=70;

let cirNum=50;

let cirSize=50;

let angle=0;

let ww=255;

let bb=0;

let t=3;

​

​

function preload() {

  sound = loadSound("gallant old.mp3");

  popp = loadSound("pop.mp3");

  sadman = loadImage("sadman.png");

  happyman = loadImage("happyman.png");

}

​

​

​

function setup() {

  createCanvas(1920, 1080);

  background(255);

  angleMode(DEGREES);

  amp = new p5.Amplitude();

  sound.play();

  fft = new p5.FFT();

  sound.setVolume(0.5);

}

​

​

​

​

​

function mousePressed() {

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

  framenew.push(b);

  clicks++;

  popp.play();

}

​

​

​

​

​

function draw() {

background(0);

​

​

  let level = amp.getLevel();

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

  if (clicks > 10) {

  size=0;

  t=50;

  }

    push();

  translate(width/2,height+100);

  rotate(angle);

  angle = map(size*0.01,0,width,-360,180);

  noFill();

  stroke(255);

  strokeWeight(t);

  for (let hi=0; hi < cirNum; hi++){

  arc (0, 0, cirSize+gap*hi, cirSize+gap*hi,hi*size,360-angle);

  }

  pop();

​

​

​

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

    framenew[i].move();

    framenew[i].show();

  }

   dog();

​

  image(sadman, 0, 0);

​

  //tear 1

    ty = ty + random(0.1,0.2);

  push();

  //translate(0,0);

  noStroke();

  fill(tearcolour);

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

  pop();

  if (ty > r) {

    ty = 0;

  }

​

  //tear 2

  if ((size = 20)) {

    ty2 = ty2 + random(0.1,0.2);

  }

  push();

  noStroke();

  fill(tearcolour);

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

  pop();

  if (ty2 > s) {

    ty2 = 0;

  }

​

  if (clicks > 10) {

    r = 0;

    s = 0;

    p = 50;

    q = 40;

    //show happyman

    image(happyman,0,0);

    //hide sadman

    image(sadman,1700,0);

    //change tear colour

  }

​

}

​

 var dog = function() {

    strokeWeight(1);

  smooth(fft);

push();

   fill(255);

  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();

 }

class frame {

  constructor(x, y, r) {

    this.x = x;

    this.y = y;

    this.r = r;

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

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

  }

  move() {

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

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

  }

​

  show() {

    push();

    strokeWeight(random(7, 10));

    fill(255);

    noStroke(0);

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

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

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

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

      this.randoms[3] = random(140, 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, 30);

    }

    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];

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

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

    pop();

    push();

    strokeWeight(3);

​

      line(

      this.x + this.randoms[7],

      this.y + this.randoms[8],

      this.x + this.randoms[9],

      this.y + this.randoms[10]

    );

    pop();

  }

}

​

​

​

​

​