// fun w sin and cos colors! Click to change the shape / direction

​

let rectanglesOut = [];

let rectanglesIn = [];

let index = 0;

let lightMode = 2;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  createCanvas(windowWidth, windowWidth);

  angleMode(DEGREES);

  rectMode(CENTER);

  background(0);

  mousePressed();

}

​

function mousePressed() {

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

    //frameRate(30)

    rectanglesOut[i] = new Rects(0 + i * 3, 0 + i * 3, 0 + i);

    rectanglesIn[i] = new Rects(600 - i * 3, 600 - i * 3, 200 - i);

  }

  lightMode = (lightMode + 1) % 3;

}

​

function draw() {

  noFill();

  stroke(255);

  translate(width / 2, height / 2);

  if (lightMode == 0) {

    modeOne();

  } else if (lightMode == 1) {

    modeTwo();

  } else if (lightMode == 2) {

    modeThree();

  }

}

​

class Rects {

  constructor(newW, newH, newtl) {

    this.w = newW;

    this.h = newH;

    this.tl = newtl;

  }

  show(r, g, b, w) {

    stroke(r, g, b);

    strokeWeight(w);

    rect(0, 0, this.w, this.h, this.tl);

  }

}

​

function modeOne() {

  background(0);

  colorTwo();

  if (index < rectanglesIn.length) {

    rotate(sin(frameCount) * 100);

    rectanglesOut[index].show(100 + index, index, index, 5);

    index += 1;

  } else {

    index = 0;

  }

}

​

function modeTwo() {

  colorThree();

  for (i = 0; i < 200; i++) {

    rotate(sin(frameCount + 1) * 100);

  }

  if (index < rectanglesOut.length) {

    rectanglesOut[index].show(100 + index, index, index, 5);

    index += 1;

  } else {

    index = 0;

  }

}

​

function modeThree() {

  background(0);

  strokeWeight(1);

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

    push();

    rotate(sin(frameCount + i) * 100);

    colorOne();

    rect(0, 0, 600 - i * 3, 600 - i * 3, 200 - i);

    pop();

  }

}

​

function colorOne() {

  var r = map(sin(frameCount), -PI, 1, 50, 255);

  var g = map(cos(frameCount / 2), -1, 1, 50, 255);

  var b = map(sin(frameCount / 4), -1, 1, 50, 255);

  stroke(r, g, b);

}

function colorTwo() {

  var r = map(sin(frameCount), -PI, 1, 50, 255);

  var g = map(cos(frameCount / 2), -1, 1, 50, 255);

  var b = map(sin(frameCount / 4), -1, 1, 50, 255);

  fill(r, g, b);

}

function colorThree() {

  var r = map(sin(frameCount), -PI, 1, 50, 255);

  var g = map(cos(frameCount / 2), -1, 1, 50, 255);

  var b = map(sin(frameCount / 4), -1, 1, 50, 255);

  background(r, g, b);

}

​