const ROWS = 10

var COLS = 10

var SCALE = 40

var color_choice = ['#fda01c','#03599c','#ea1a32']

var counter = -1

var cinc = 0.3

​

function setup() {

  createCanvas(400, 400);

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

    for(var j = 0; j < COLS; j++){

      shapes.push(new Shape(j*SCALE+SCALE/2,i*SCALE+SCALE/2,i*j))

    }

  }

}

​

function draw() {

  background(255);

  angleMode(DEGREES)

  counter+= cinc

  if(counter > ROWS*COLS || counter < -1){cinc *= -1}

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

    shapes[i].show()

    if(i < counter){shapes[i].choose = true}

    else{shapes[i].choose = false}

  }

}

​

​

class Shape{

  constructor(x,y,o){

    this.x = x

    this.y = y

    this.o = o

    this.inc = random(1,5)

    this.c = floor(random(0,3))

    this.choose = false

  }

  show(){

    this.ang = map(sin(this.o),-1,1,0,360)

    rectMode(CENTER)

    push()

    translate(this.x,this.y)

    if(this.choose){

    rotate(this.ang)

    fill(color_choice[this.c])

    }

    rect(0,0,SCALE/2,SCALE/2,20,0,20,0)

    this.o+=this.inc

    pop()

  }

}

​

​

​

​

​