let assets = [];

let checks = [];

let mono;

​

​

function preload(){

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

    assets[i] = loadImage('img'+ i + '.png');

        mono = loadFont('robotoMono.ttf');

​

  }

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

    checks[i] = loadImage('img_'+ i + '.png');

  }

}

function setup() {

  createCanvas(600, 600);

  // frameRate(24);

}

​

​

function draw() {

  background(255);

  let dog = random(assets);

//   let number = floor(random(0,3));

​

//   if (number==1){

  let a = new particle(150,150,dog);

    particles.push(a);

​

​

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

    particles[i].update();

    particles[i].show();

    if (particles[i].finished() ) {

      particles.splice(i,1);

    }

    if (particles[i].overlap()){

            particles.splice(i+1,1);

    }

  }

  textFont(mono);

  textSize(22);

  fill(0);

  noStroke();

  rect(25,25, 220,50);

    fill(255);

​

  text('Dog or non-dog?', 40, 33, 220,100); 

}

function mousePressed(){

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

    particles[i].clicked(mouseX,mouseY);

  }

}

class particle {

  constructor(w,h,img){

    this.y = height+height/10;  

    this.vy = -5;

    this.vx = -0.1;

    this.w = w;

    this.h = h;

    this.asset = img;

    this.x = random(width-this.w);

​

  }

  clicked(px,py){

    if (px > this.x && px < this.x+this.w && py > this.y && py < this.y+this.h && 

        this.asset==assets[0]){

        this.asset = checks[0];

    } else if ((px > this.x && px < this.x+this.w && py > this.y && py < this.y+this.h && 

        this.asset==assets[1])){

            this.asset = checks[1];

​

       } else if ((px > this.x && px < this.x+this.w && py > this.y && py < this.y+this.h && 

        this.asset==assets[2])){

            this.asset = checks[2];

          } else if ((px > this.x && px < this.x+this.w && py > this.y && py < this.y+this.h && 

        this.asset==assets[3])){

            this.asset = checks[3];

             } else if ((px > this.x && px < this.x+this.w && py > this.y && py < this.y+this.h && 

        this.asset==assets[4])){

            this.asset = checks[4];

                } else if ((px > this.x && px < this.x+this.w && py > this.y && py < this.y+this.h && 

        this.asset==assets[5])){

            this.asset = checks[5];

                   } else if ((px > this.x && px < this.x+this.w && py > this.y && py < this.y+this.h && 

        this.asset==assets[6])){

            this.asset = checks[6];

                      } else if ((px > this.x && px < this.x+this.w && py > this.y && py < this.y+this.h && 

        this.asset==assets[7])){

            this.asset = checks[7];

                         } else if ((px > this.x && px < this.x+this.w && py > this.y && py < this.y+this.h && 

        this.asset==assets[8])){

            this.asset = checks[8];

                          } else if ((px > this.x && px < this.x+this.w && py > this.y && py < this.y+this.h && 

        this.asset==assets[9])){

            this.asset = checks[9]; 

                         } else if ((px > this.x && px < this.x+this.w && py > this.y && py < this.y+this.h && 

        this.asset==assets[10])){

            this.asset = checks[10];  

                      } else if ((px > this.x && px < this.x+this.w && py > this.y && py < this.y+this.h && 

        this.asset==assets[11])){

            this.asset = checks[11] ;    

    }

  }

  update(){

    this.y +=this.vy;

    // this.y +=this.vy;

  }

  show(){

    image(this.asset,this.x,this.y,this.w,this.h);

     // print(this.y);

  }

  overlap(){

    return    this.y > height-this.h;

    // ((this.y+this.h) < other.y);

  }

  finished(){

    return this.y < -this.w;

  }

}