var list;

let photo;

let stranger;

let imagesLoaded = false;

var strangerImg;

​

var mysterious;

var fireworks = [];

var gravity;

var sparkle1,sparkle2,sparkle3;

function preload(){

    mysterious = loadImage("mysterious.png");

    sparkle1 = loadSound("sparkle1.wav");

  sparkle2 = loadSound("sparkle2.mp3");

  sparkle3 = loadSound("sparkle3.wav");

  let apiKey = "558b95e8e5f4ae0efd1e1199fdff21"

  let url = "https://uifaces.co/api?random";

  // url +='?'+'X-API-KEY:' + apiKey + '&' + "?random";

  // url +="?random";

  // data = httpDo(url);

  httpDo(

    url, {

      method: 'GET',

      // Other Request options, like special headers for apis

      headers: {

        'X-API-KEY': '558b95e8e5f4ae0efd1e1199fdff21'

      }

    },

    function(data) {

      imagesLoaded = true

      list = JSON.parse(data);

      // print(list[0]);

    }

  );

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  textAlign(CENTER);

  gravity = createVector(0, 0.2);

  colorMode(HSB);

  stroke(255);

  strokeWeight(4);

}

​

function mousePressed() {

  getPhoto();

  // image(stranger,mouseX,mouseY);

   console.log(stranger);

​

}

​

function draw() {

  fill(255);

  image(mysterious,0,0,width,height);

  text("mysterious background", width/2, 60);

  textSize(80);

  colorMode(RGB);

  if (mouseIsPressed) {

    fireworks.push(new Firework());

    sparkle1.play();

      strangerImg = createImg(stranger);

    strangerImg.position(mouseX, mouseY);

  strangerImg.size(70,70);

  }

​

  for (var i = fireworks.length-1; i >= 0; i--) {

    fireworks[i].update();

    fireworks[i].show();

    if (fireworks[i].done())

      fireworks.splice(i, 1);

  }

}

​

function getPhoto() {

  if (imagesLoaded == true) {

    stranger = list[floor(random(list.length))].photo;

  }

   // strangerImg = loadImage('stranger');

}

​

​

function Firework() {

  this.hu = random(255);

  this.firework = new Particle(mouseX, mouseY, this.hu, true);

  this.exploded = false;

  this.particles = [];

  this.done = function() {

    if (this.exploded && this.particles.length === 0){

  return true;

  }else {

    return false;

  }

  }

  this.update = function() { //firstUpdate

    if (!this.exploded) {

      this.firework.applyForce(gravity);

      this.firework.update();

      if (this.firework.vel.y >= 0) {

        this.exploded = true;

        this.explode();

      }

    }

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

      this.particles[i].applyForce(gravity);

      this.particles[i].update();

   if (this.particles[i].done()){

     this.particles.splice(i, 1);

   }

    }

  }

  this.explode = function() {

    for (var i = 0; i < 100; i++) {

      var p = new Particle(this.firework.pos.x, this.firework.pos.y, this.hu, false);

      this.particles.push(p);

    }     

  }

  this.show = function() {

    if (!this.exploded) {

      this.firework.show();

    }

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

      this.particles[i].show();

    }

  }

}

​

​

function Particle(x, y, hu, firework) {

    this.pos = createVector(x, y);

    this.firework = firework;

    this.lifespan = 255;

    this.hu = hu;

​

  if (this.firework){

   this.vel = createVector(0, 0);

 }else {

   this.vel = p5.Vector.random2D();

   this.vel.mult(random(2, 10));

 }

  this.acc = createVector(0, 0);

  this.applyForce = function(force) {

    this.acc.add(force);

  }

​

  this.update = function() { //second update

    if (!this.firework) {

      this.vel.mult(0.9);

      this.lifespan -= 4;

    }

    this.vel.add(this.acc);

    this.pos.add(this.vel);

    this.acc.mult(0);

  }

  this.done = function(){

    if(this.lifespan < 0){

      return true;

    }else {

      return false;

    }

  }

  this.show = function() {

   colorMode(HSB);

    if (!this.firework) {

     strokeWeight(2);

     stroke(hu, 255, 255, this.lifespan);

   }else {

     strokeWeight(4);

     stroke(hu, 255, 255);

   }

    point(this.pos.x, this.pos.y);

  }

}