Project 3: Dynamic Drawing

/*
Bon Bhakdibhumi
bbhakdib
Section d
*/
var r = 37;
var g = 51;
var b = 70;
var rTriangle = 225;
var gTriangle = 210;
var bTriangle = 232;
var rCircle = 171;
var gCircle = 237;
var bCircle = 255;
var rRect = 101; 
var gRect = 249; 
var bRect = 183;
var rmidRect = 253; 
var gmidRect = 173; 
var bmidRect = 113;
var rOutertri = 255;
var gOutertri = 255;
var bOutertri = 255;
function setup() {
    createCanvas(450, 600);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(r, g, b);
  if (mouseX > width/2) {
     r = 211;
     g = 185;
     b = 159;
  }else {
    r = 37;
    g = 51;
    b = 70;
  }
    translate(width/2, height/2);
    rectMode(CENTER); 
  // inner triangles rotate to the left with mouseX increases
  fill( rTriangle, gTriangle, bTriangle);
  if (mouseX > width/2) {
     rTriangle = 129;
     gTriangle = 13;
     bTriangle = 98;
  }else {
    rTriangle = 225;
    gTriangle = 210;
    bTriangle = 232;
  }
  noStroke();
    for (var i = 0; i < 6; i += 1) {
        push();
        scale(mouseY / 500);
        rotate((-mouseX / 400) + radians(360 * i / 6));
        triangle(50, 0, 25, 25, 75, 25);
        pop();
    }
  // mid squares expand when rotating to the left
  var m = max(min(mouseX, 400), 0);
  var sSize = -m * 40 / 400 + 60;
   fill( rRect, gRect, bRect, 230);
  if (mouseX > width/2) {
    rRect = 49
    gRect = 84
    bRect = 55
  }else {
     rRect = 101;
     gRect = 249;
     bRect = 183;
  }
  noStroke();
    for (var s = 0; s < 8; s += 1) {
      push();
      scale(mouseY / 400);
      rotate( mouseX/350 + radians(360 * s / 8));
      rect (130, 0, sSize, sSize);
      pop();
    }
  // outer circles expand when rotating to the right
  var m = max(min(mouseX, 400), 0);
  var size = m * 50 / 400 + 30;
  noStroke();
  fill(rCircle, gCircle, bCircle, 230);
  if (mouseX > width/2) {
    rCircle = 109;
    gCircle = 152;
    bCircle = 186;
  }else {
    rCircle = 171;
    gCircle = 237;
    bCircle = 255;
  }
  for (var c = 0; c < 10; c += 1) {
    push();
    scale(mouseY / 400);
    rotate((-mouseX / 300) + radians(360 * c / 10));
    ellipse(200, 0, size, size);
    pop();
  }
  // outermost triangles rotate to the right with mouseX increases
  fill( rOutertri, gOutertri, bOutertri);
  if (mouseX > width/2) {
     rOutertri = 199;
     gOutertri = 82;
     bOutertri = 156;
  }else {
    rOutertri = 225;
    gOutertri = 225;
    bOutertri = 225;
  }
  noStroke();
    for (var i = 0; i < 10; i += 1) {
        push();
        scale(mouseY / 350);
        rotate((mouseX / 250) + radians(360 * i / 10));
        triangle(275, 0, 225, 50, 325, 50);
        pop();
    }
 // middle square rotates to the right when mouseX increase
  var m = max(min(mouseX, 400), 0);
  var squareSize = -m * 50 / 400 + 10;
  scale(mouseY / 600);
  rotate(radians(mouseX / 5));
  fill(rmidRect, gmidRect, bmidRect);
  if (mouseX > width/2) {
    rmidRect = 107;
    gmidRect = 94;
    bmidRect = 98;
  }else {
    rmidRect = 253;
    gmidRect = 173;
    bmidRect = 113;
  }
  noStroke();
    rect(0, 0, squareSize, squareSize);

 }