Kyle Lee Project 3

For this project, the hardest part was coding efficiently. Given the amount of little coding experience I drew objects individually as I knew how which ended up taking up many lines of code.

kdlee-project-03-a

var redX = 0;
var redY = 0;
var redW = 32;
var redH = 480;
var redModifier = 64;
var blueX = 0;
var blueY = 16;
var blueW = 64;
var blueH = 32;
var blueModifier = 64;
var whiteX = 0;
var whiteY = 0;
var whiteW = 64;
var whiteH = 32;
var whiteModifier = 64;
var dotX = 8;
var dotY = 16;
var dotD = 32;
var dotModifier = 32;
var rectTurn = 180;
var coloryYellow ="#FAFCFC";//"#18192E";// "#CEDEE6";//"#FEEEDD"; //"#FFCC39";
var colorRed = "#6393B6";//"#D54E21";// "#2A3C4F";//"#30C9A3";//"#FC4E4D";
var colorBlue = "#DDDADC";//"#F3CB2F"; //"#F37A70";//"#FE8D7B";//"#6B7FE0";

function setup() {
    createCanvas(640, 480);
}

function draw() {
    noStroke();
    background(coloryYellow);//YELLOW

    var redW = map(mouseX, 0, width, 0, redModifier);
    rectMode(CORNER);
    fill(colorRed);//RED
    rect(redX, redY, redW, redH);//Repeated 10 RED rectangles
    rect(redX + 1 * redModifier, redY, redW, redH);
    rect(redX + 2 * redModifier, redY, redW, redH);
    rect(redX + 3 * redModifier, redY, redW, redH);
    rect(redX + 4 * redModifier, redY, redW, redH);
    rect(redX + 5 * redModifier, redY, redW, redH);
    rect(redX + 6 * redModifier, redY, redW, redH);
    rect(redX + 7 * redModifier, redY, redW, redH);
    rect(redX + 8 * redModifier, redY, redW, redH);
    rect(redX + 9 * redModifier, redY, redW, redH);
//    if (mouseX < 0){
//      var redW = 0;
//    }
    push();//ALL Blue Rectangles
    rectMode(CENTER);
    var blueW = map(mouseY, 0, height, 0, blueModifier) * 2;
    var redW = map(mouseX, 0, width, 0, redModifier);
    fill(colorBlue);//BLUE

    push();//Repeated 4 BLUE bars 0th Column
    translate(blueX + redW / 2 - blueModifier, blueY + 1 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + redW / 2 - blueModifier, blueY + 3 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + redW / 2 - blueModifier, blueY + 5 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + redW / 2 - blueModifier, blueY + 7 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 1st Column
    translate(blueX + redW / 2, blueY);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + redW / 2, blueY + 2 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + redW / 2, blueY + 4 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + redW / 2, blueY + 6 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 2nd Column
    translate(blueX + blueModifier + redW / 2, blueY + 1 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + blueModifier + redW / 2, blueY + 3 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + blueModifier + redW / 2, blueY + 5 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + blueModifier + redW / 2, blueY + 7 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 3rd Column
    translate(blueX + 2 * blueModifier + redW / 2, blueY);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 2 * blueModifier + redW / 2, blueY + 2 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 2 * blueModifier + redW / 2, blueY + 4 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 2 * blueModifier + redW / 2, blueY + 6 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 4th Column
    translate(blueX + 3 * blueModifier + redW / 2, blueY + 1 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 3 * blueModifier + redW / 2, blueY + 3 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 3 * blueModifier + redW / 2, blueY + 5 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 3 * blueModifier + redW / 2, blueY + 7 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 5th Column
    translate(blueX + 4 * blueModifier + redW / 2, blueY);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 4 * blueModifier + redW / 2, blueY + 2 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 4 * blueModifier + redW / 2, blueY + 4 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 4 * blueModifier + redW / 2, blueY + 6 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 6th Column
    translate(blueX + 5 * blueModifier + redW / 2, blueY + 1 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 5 * blueModifier + redW / 2, blueY + 3 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 5 * blueModifier + redW / 2, blueY + 5 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 5 * blueModifier + redW / 2, blueY + 7 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 6th Column
    translate(blueX + 6 * blueModifier + redW / 2, blueY);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 6 * blueModifier + redW / 2, blueY + 2 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 6 * blueModifier + redW / 2, blueY + 4 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 6 * blueModifier + redW / 2, blueY + 6 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 7th Column
    translate(blueX + 7 * blueModifier + redW / 2, blueY + 1 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 7 * blueModifier + redW / 2, blueY + 3 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 7 * blueModifier + redW / 2, blueY + 5 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 7 * blueModifier + redW / 2, blueY + 7 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 8th Column
    translate(blueX + 8 * blueModifier + redW / 2, blueY);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 8 * blueModifier + redW / 2, blueY + 2 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 8 * blueModifier + redW / 2, blueY + 4 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 8 * blueModifier + redW / 2, blueY + 6 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 9th Column
    translate(blueX + 9 * blueModifier + redW / 2, blueY + 1 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 9 * blueModifier + redW / 2, blueY + 3 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 9 * blueModifier + redW / 2, blueY + 5 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 9 * blueModifier + redW / 2, blueY + 7 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 10th Column
    translate(blueX + 10 * blueModifier + redW / 2, blueY);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 10 * blueModifier + redW / 2, blueY + 2 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 10 * blueModifier + redW / 2, blueY + 4 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 10 * blueModifier + redW / 2, blueY + 6 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    pop();
}