constructor() {

    this.dice = [];

    for(var i = 1; i <= 5; i++)

      {

        let die = new Die(50+i*50,200)

        this.dice.push(die)

      }

  }

  //draws all the die

  draw(){

    this.dice.forEach ( (die) => die.draw())

  }

}

​

// this is our ball class file

// using p5js to visually make(see) the die

​

class Die {

  // first thing is the constructor

  // this is a special function used to initially create the die

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.width = 50;

    this.height = 50;

    // set the color to the right

    this.color = color(255,255,255);

    this.face = floor(random(1, 7));

    this.oldColor = this.color;

    this.selected = false;

  }

  draw() {

    stroke(0);

    // the fill color

    fill(this.color);

    strokeWeight(2);

    rectMode(CENTER);

    rect(this.x, this.y, this.width, this.height);

    this.drawFace();

    this.clicked();

  }

​

  // clicked function it will return true if the mouse is on the ball

  // and mouse pressed

  clicked() {

    if (mouseX >= this.x - this.width / 2 && mouseX <= this.x + this.width / 2 &&

      mouseY >= this.y - this.height / 2 && mouseY <= this.y + this.height / 2 &&

      mouseIsPressed) {

      if (this.color == this.oldColor) {

        this.color = color(0, 0, 255);

        this.selected = true;

      } else {

        this.color = this.oldColor;

        this.selected = false;

      }

      return true;

    } else {

      return false;

    }

  }

​

  drawFace() {

    strokeWeight(0);

    if (this.face == 1) {

      fill(0);

      ellipse(this.x, this.y, 10, 10);

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

      fill(0);

      ellipse(this.x - 10, this.y - 10, 10, 10);

      ellipse(this.x + 10, this.y + 10, 10, 10);

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

      fill(0);

      ellipse(this.x - 12, this.y - 12, 10, 10);

      ellipse(this.x, this.y, 10, 10);

      ellipse(this.x + 12, this.y + 12, 10, 10);

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

      fill(0);

      ellipse(this.x - 12, this.y - 12, 10, 10);

      ellipse(this.x + 12, this.y + 12, 10, 10);

      ellipse(this.x + 12, this.y - 12, 10, 10);

      ellipse(this.x - 12, this.y + 12, 10, 10);

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

      fill(0);

      ellipse(this.x - 12, this.y - 12, 10, 10);

      ellipse(this.x + 12, this.y + 12, 10, 10);

      ellipse(this.x, this.y, 10, 10);

      ellipse(this.x + 12, this.y - 12, 10, 10);

      ellipse(this.x - 12, this.y + 12, 10, 10);

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

      fill(0);

      ellipse(this.x - 12, this.y - 14, 10, 10);

       ellipse(this.x+12,this.y+14,10,10)

      ellipse(this.x-12,this.y,10,10)

      ellipse(this.x+12,this.y,10,10)

      ellipse(this.x+12,this.y-14,10,10)

      ellipse(this.x-12,this.y+14,10,10)

    }

  }

}