​

let speed;

​

//function to upload the picture

function preload() {

  img = loadImage("bees.png");

}

​

function setup() {

  createCanvas(700, 600);

  let centerX;

  let centerY;

​

  //loop to generate bees

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

    bees[i] = new Bee();

  }

}

​

function draw() {

  //variable to control the speed while moving a mouse

  speed = map(mouseX, 0, width, 0, 50);

  background(52, 137, 235);

  centerX = width / 2;

  centerY = height / 2;

​

  //drawing the hive

  fill(245, 186, 24);

  rect(centerX - 40, centerY - 80, 60, 220, 30);

  rect(centerX - 50, centerY - 70, 80, 200, 30);

  rect(centerX - 60, centerY - 60, 100, 180, 30);

  rect(centerX - 70, centerY - 50, 120, 160, 30);

  fill(0);

  ellipse(centerX - 10, centerY + 30, 80, 120);

  stroke(0)

​

  //to generate bees from the centre

  translate(width /2, height / 2);

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

    bees[i].update();

    bees[i].show();

  }

}

​

class Bee {

  constructor() {

    this.x = width / 2;

    this.y = height / 2;

    this.z = random(width);

  }

​

  update() {

    //this variable allows to move the mouse at a certain speed

    this.z = this.z - speed;

    if (this.z < -0.1) {

      this.z = width;

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

      this.y = random(-height, height);

    }

  }

​

  show() {

    fill(240, 209, 72);

    noStroke();

​

    var sx = map(this.x / this.z, 0, 1, 0, width);

    var sy = map(this.y / this.z, 0, 1, 0, height);

    //bees are bigger, when they are closer and vice versa

    //this is to create a "depth"

    var r = map(this.z, 0, width * 2, 80, 0);

    image(img, sx, sy, r, r);

    stroke(255);

  }

}

​