let oneSquare= [];

let rotateRect = []; //this array holds the flying squares

let rectx = 20

let recty = 100

let a= 0;

​

let rectamount = 25;

let rectwidth = 0;

​

function setup() {

  rectMode(CENTER);

  createCanvas(windowWidth, windowHeight, HSB);

  colorMode(HSB, 360, 360, 360, 100);

  angleMode(DEGREES);

​

​

  rectwidth = width / rectamount; //RECTWIDTH IS CANVAS/ AMOUNT OF BARS YOU WANT 

​

  for (let i = 0; i < rectamount; i = i + 1) {

​

    rectwidth / 2 + i * rectwidth; //SPACES OUT THE BARS

    re.push(new customRect(rectwidth / 2 + i * rectwidth, height / 2, rectwidth / 2, recty));

  }

​

}

​

function draw() {

  background(150);

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

    re[i].update();

  }

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

    rotateRect[i].update();

  }

  /* if (mouseX>=width+1 || mouseX<=-1 ||mouseY >=height+5 || mouseY <=-1){

    rotateRect.push(new flyingSquares(a,height/2,5,0,3,0,0,0));

     a=a+5;

   }*/

​

  if ((mouseX>10  && mouseX < width-10) && (mouseY < height-10 && mouseY> 10) ){

      oneSquare.splice(0,1);

  }

  else {

    oneSquare.push(new aSquare(0,height/2, 5, 2, 0, 0));   

    oneSquare[0].update();

  }

​

​

}

​

​

​

​

//CREATE SQUARES UPON CLICK

function mouseClicked() {

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

    rotateRect.push(new flyingSquares(mouseX, mouseY, random(2, 15), 15, random(-5, 5), random(-8, 10), map(mouseX, 0, width, 0, 360), random(20, 100)));

  }

}

​

//CLEAR THE SQUARES

function keyPressed(RETURN) {

  rotateRect = [];

}

​

​

class aSquare {

  constructor(x,y,sizex,speed,color, opacity) {

   this.x = x;

    this.y = y;

    this.sizex = sizex;

    this.speed = speed;

    this.color = color;

    this.opacity = opacity;

  }

update () {

  this.x=this.x+2;

  noStroke();

  fill(255,255,0);

  rect(this.x, this.y, this.sizex);

  if (this.x >=width) {

   this.x = 0;

  }

}

}

​

//RISING BARS

class customRect {

  constructor(x, y, sizex, sizey, colors) {

    this.x = x;

    this.y = y;

    this.sizex = sizex;

    this.sizey = sizey;

    this.colors = colors;

  }

​

  update() {

    noStroke();

​

    //checks if mouse is in bar

    if (mouseX >= this.x - this.sizex / 2 && mouseX <= this.x + this.sizex / 2) {

      this.sizey = this.sizey + 25;

      //maps hue

      fill(map(this.x, 0, width, 0, 360), 255, 255);

    } else {

                  //reduce bars to normal size

      this.sizey = this.sizey - .5;

      //MAP HUE, MAP wherever this bar - where the mouse is, from the bars * distance

      //small abs value corresponds with large saturation value

      fill(map(this.x, 0, width, 0, 360), map(abs(this.x - mouseX), this.sizex * 8, 0, 0, 180), 255);

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

    if (rotateRect[i].x>=this.x-this.sizex/2 && rotateRect[i].x<=this.x+this.sizex/2) {

            if(rotateRect[i].y>=this.y-this.sizey/2 && rotateRect[i].y<=this.y+this.sizey/2)

            {

                this.sizey=this.sizey + 10;

        fill(map(this.x, 0, width, 0, 360), 255, 255);

                //fill(rotateRect[i].color, 255, 255);

            }

  }}

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

    if (oneSquare[i].x>=this.x-this.sizex*4 && oneSquare[i].x<=this.x+this.sizex*4) {

        if (oneSquare[i].x>=this.x-this.sizex/2 && oneSquare[i].x<=this.x+this.sizex/2)

                        this.sizey=this.sizey + 20;

        fill(map(this.x, 0, width, 0, 360), map(abs(this.x-oneSquare[i].x),this.sizex * 8, 0, 0, 180), 255);

  }}

        }

​

    //controlling the bars

    if (this.sizey <= 100) {

      this.sizey = 100;

    }

    //controlling the bars  

    if (this.sizey >= height) {

      this.sizey = height;

    }

    rect(this.x, this.y, this.sizex, this.sizey, 20);

​

  }

}

​

//FLYING SQUARES

class flyingSquares {

  constructor(x, y, xsize,rotation, speed, yspeed, color, opacity) {

    this.x = x;

    this.y = y;

    this.xsize = xsize;

    //this.ysize=ysize;

    this.rotation = 0;

    this.speed = speed;

    this.yspeed = yspeed;

    this.color = color;

    this.opacity = opacity;

  }

​

  update() {

    push();

    noStroke();

    strokeWeight(3);

    fill(this.color, 360, 360, this.opacity);

    translate(this.x, this.y);

    rotate(this.rotation);

    this.x = this.x + this.speed;

    this.y = this.y + this.yspeed;

    this.rotation = this.rotation + this.speed;

    rect(0, 0, this.xsize, this.xsize);

    pop();

​

    //monitoring the speed

    if (this.speed > -5 && this.speed < 5) {

      if (this.speed <= 0)

        this.speed = -5;

      else

        this.speed = 5;

    }

​

​

    //anything between -5 and 5 

    //-3,-2,-1,0,1,2,3,4

​

    //reversing the direction of the flying square

​

    if (this.x >= width - this.xsize || this.x <= 0 + this.xsize) {

      if (this.xsize>=3){

      rotateRect.push(new flyingSquares(this.x, this.y, this.xsize/2,15, this.speed*-1, random(-8, 10), this.color, this.opacity));

      rotateRect.push(new flyingSquares(this.x, this.y, this.xsize/2,15, this.speed*-1, random(-8, 10), this.color, this.opacity));

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

        if (rotateRect[i] == this){

       rotateRect.splice(i,1); }

      }}

​

    //  this.opacity = this.opacity - 5;

    }

    if (this.y >= height - this.xsize || this.y <= 0 + this.xsize || this.y < re.sizey) {

      if (this.xsize>=3){

      rotateRect.push(new flyingSquares(this.x, this.y, this.xsize/2,15, this.speed*-1, random(-8, 10), this.color, this.opacity));

      rotateRect.push(new flyingSquares(this.x, this.y, this.xsize/2,15, this.speed*-1, random(-8, 10), this.color, this.opacity));

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

        if (rotateRect[i] == this){

       rotateRect.splice(i,1); 

      }}

    }

      }

}}

​

// squares can hit the bars and bounce back

// push things out of the array

// original square needs to disappear

​

​

​