gnumOfCubes=80;

gboxWidth = 10; 

gboxHeight = 10;

gboxDepth= 10;

tx=20; //translation along x axis

ty=10; //translation along y axis

​

//to draw a bunch of cubes

let gCubeArray =[];

​

function setup() {

  createCanvas(400, 400, WEBGL);

  background(20);

}

function rotateElement()

{

  rotateX(frameCount * 0.01);

  rotateY(frameCount * 0.01);

}

function draw() {

  //refresh background so that previously drawn cubes disappear

  background(20);

  //for rotation of the elements

  rotateElement();

  //when mouse pressed

  if (mouseIsPressed) {

    // a star appears and randomly moves across the screen 

    star = new shootingStar(mouseX,mouseY,50,50,4,7);

    star.update();

    star.display();

    //also, color and stroke should become shades of grey when mouse pressed

    fill(random(255));

    stroke(random(255));

  }

  else

    {

      //if not pressed, keep all colors and stroke is black

      stroke(0);

      fill(random(255),random(255),random(255));

    }

  //draw a sphere in the center

  sphere(30);

  //draw cubes that exude out of the center of the canvas and from a streak by repeatedly translating them 

  drawCubes(gCubeArray,-tx,-ty);

  //if mouse is pressed, choose random values for translation along x and y to create a chaotic effect and then draw cubes

 if (mouseIsPressed)

   {

     tx=random(-10,10);

     ty=random(-10,10);

     drawCubes(gCubeArray,-tx,-ty);

   }

  //draw a circle to accompany the tip of the streak of cubes

  fill('white');

  ellipse(0,0,50,50);

}

​

//class for cubes

class Cube{

   constructor(width, height, depth, size){

     this.width = width;

     this.height = height;

     this.depth = depth;

     this.size = size;

   }

  display(){

    rotateElement();

    if (mouseIsPressed)

    {

      fill(random(255));

    }

    else

    {

      fill(random(255),random(255),random(255));

    }

    //use box from WEBGL mode to create the cubes

    box(this.width, this.height, this.depth, this.size);

  }

}

​

//a shooting star that appears when mouse is pressed and randomly moves around

class shootingStar{

  constructor(x,y, width,height, xSpeed, ySpeed){

    this.x=x;

    this.y=y;

    this.width=width;

    this.height =height; 

    this.xSpeed=xSpeed;

    this.ySpeed=ySpeed;

  }

  display(){

    fill('white');

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

  }

  //update position of the store to create motion

  update(){

    this.x += this.xSpeed;

    this.y += this.ySpeed;

  }

}

​

//function to draw the streak of cubes by pushing cubes onto the cube array and translating them

function drawCubes(gCubeArray,tx,ty)

{

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

    gCubeArray.push(

    new Cube(gboxWidth,gboxHeight,gboxDepth,4)

    )

    gCubeArray[i].display();

    translate(tx,ty);

  }  

}