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();
}