let b1;

let b2;

let b3;

let b4;

let b5;

let b6;

let b7;

let b8;

let b9;

let b10;

let b11;

let b12;

let b13;

let b14;

let b15;

let b16;

let b17;

let b18;

let b19;

let b20;

let b21;

let b22;

let b23;

let b24;

let b25;

let b26;

let b27;

​

​

​

​

function preload() {

  title = loadImage('A-1.png');

  b1 = loadImage('B-1.png');

  b2 = loadImage('B-2.png');

  b3 = loadImage('B-3.png');

  b4 = loadImage('B-4.png');

  b5 = loadImage('B-5.png');

  b6 = loadImage('B-6.png');

  b7 = loadImage('B-7.png');

  b8 = loadImage('B-8.png');

  b9 = loadImage('B-9.png');

  b10 = loadImage('B-10.png');

  b11 = loadImage('B-11.png');

  b12 = loadImage('B-12.png');

  b13 = loadImage('B-13.png');

  b14 = loadImage('B-14.png');

  b15 = loadImage('B-15.png');

  b16 = loadImage('B-16.png');

  b17 = loadImage('B-17.png');

  b18 = loadImage('B-18.png');

  b19 = loadImage('B-19.png');

  b20 = loadImage('B-20.png');

  b21 = loadImage('B-21.png');

  b22 = loadImage('B-22.png');

  b23 = loadImage('B-23.png');

  b24 = loadImage('B-24.png');

  b25 = loadImage('B-25.png');

  b26 = loadImage('B-26.png');

  b27 = loadImage('B-27.png');

}

​

​

​

var heights = [40, 40, 50, 50, 40, 30, 20, 20, 20, 20, 30, 40, 50, 20, 50, 30, 50, 40, 40, 40, 30, 20, 30, 40, 20, 20];

var yOff = 0;

​

var ingredients = [];

​

function setup() {

    createCanvas(windowWidth, windowHeight);

    ingredients.push(new Thing(0));

​

}

​

function draw() {

    background("#F8C8BC")

  //#F79E99" #fba5a1

   image(title, 10, 10, 400, 300);

    //background("#f79e99");

    for (var i = 0; i < ingredients.length; i++) {

        ingredients[i].run();

    }

    if (mouseIsPressed) {

        ingredients.push(new Thing(floor(random(0, 26))));

    }

}

​

class Thing {

    constructor(_name) {

        this.name = _name;

        yOff += heights[this.name];

        this.yOff = yOff;

        this.pos = createVector(width / 2 + random(-25, 25), -heights[_name]);

        this.vel = createVector();

        this.acc = createVector();

    }

    run() {

        this.update();

        this.show();

    }

    show() {

        noStroke();

        if (this.name == 0) {

            rectMode(CORNER);

            image(b1,this.pos.x, this.pos.y);

        } else if (this.name == 1) {

            rectMode(CORNER);

            image(b2,this.pos.x, this.pos.y);

        } else if (this.name == 2) {

            rectMode(CORNER);

            image(b3,this.pos.x, this.pos.y);        

        } else if (this.name == 3) {

            rectMode(CORNER);

            image(b4,this.pos.x, this.pos.y);

        } else if (this.name == 4) {

            rectMode(CORNER);

            image(b5,this.pos.x, this.pos.y);

            // 75, 15, 5

        } else if (this.name == 5) {

            rectMode(CORNER);

            image(b6,this.pos.x, this.pos.y);

        } else if (this.name == 6) {

            rectMode(CENTER);

            image(b7,this.pos.x, this.pos.y);

        } else if (this.name == 7) {

            rectMode(CENTER);

            image(b8,this.pos.x, this.pos.y);

        } else if (this.name == 8) {

            rectMode(CORNER);

            image(b9,this.pos.x, this.pos.y);

        } else if (this.name == 9) {

            rectMode(CORNER);

            image(b10,this.pos.x, this.pos.y);

        } else if (this.name == 10) {

            rectMode(CORNER);

            image(b11,this.pos.x, this.pos.y);        

        } else if (this.name == 11) {

            rectMode(CORNER);

            image(b12,this.pos.x, this.pos.y);

        } else if (this.name == 12) {

            rectMode(CORNER);

            image(b13,this.pos.x, this.pos.y);

            // 75, 15, 5

        } else if (this.name == 13) {

            rectMode(CORNER);

            image(b14,this.pos.x, this.pos.y);

        } else if (this.name == 14) {

            rectMode(CENTER);

            image(b15,this.pos.x, this.pos.y);

        } else if (this.name == 15) {

            rectMode(CENTER);

            image(b16,this.pos.x, this.pos.y);

           } else if (this.name == 16) {

            rectMode(CENTER);

            image(b17,this.pos.x, this.pos.y);

        } else if (this.name == 17) {

            rectMode(CENTER);

            image(b18,this.pos.x, this.pos.y);

        } else if (this.name == 18) {

            rectMode(CENTER);

            image(b19,this.pos.x, this.pos.y);

        } else if (this.name == 19) {

            rectMode(CENTER);

            image(b20,this.pos.x, this.pos.y);

        } else if (this.name == 20) {

            rectMode(CENTER);

            image(b21,this.pos.x, this.pos.y);

        } else if (this.name == 21) {

            rectMode(CENTER);

            image(b22,this.pos.x, this.pos.y);

        } else if (this.name == 22) {

            rectMode(CENTER);

            image(b23,this.pos.x, this.pos.y);

        } else if (this.name == 23) {

            rectMode(CENTER);

            image(b24,this.pos.x, this.pos.y);

        } else if (this.name == 24) {

            rectMode(CENTER);

            image(b25,this.pos.x, this.pos.y);

        } else if (this.name == 25) {

            rectMode(CENTER);

            image(b26,this.pos.x, this.pos.y);

        } else if (this.name == 26) {

            rectMode(CENTER);

            image(b27,this.pos.x, this.pos.y);

        }

    }

    update() {

        this.acc.y++;

        this.vel.add(this.acc);

        this.acc.mult(0);

        if (yOff > height / 2) {

            for (var n = 0; n < ingredients.length; n++) {

                ingredients[n].yOff -= 1;

            }

            yOff -= 1;

        }

        if (this.pos.y >= height - this.yOff) {

            this.pos.y = height - this.yOff;

            this.vel.mult(0);

            this.acc.mult(0);

        } else {

            this.pos.add(this.vel);

        }

    }

}