Lanna Lang – Project 03 – Dynamic Drawing

lanna_project3_sketch

//Lanna Lang
//Section D
//lannal@andrew.cmu.edu
//Project 03 Dyanamic Drawing

var circW;
var angle1 = 0;
var angle2 = 0;

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

function draw() {
    background(0);
   
//rotating white rectangle
    push();
    translate(200, 200);
    rotate(radians(angle2));
    noStroke();
    fill(255);
    rectMode(CENTER);
    //the size will increase/decrease as the mouse moves
    rect(0, 0, mouseX + 200, mouseY + 150);
    pop();
    //rotating counter clockwise
    angle2 = angle2 - 5;
  
//rotating colorful rectangle
    push();
    translate(200, 200);
    rotate(radians(angle1));
    noStroke();
    //as the mouse moves around, the color of the rect changes
    fill(170, mouseX, mouseY);
    rectMode(CENTER);
    //the size of the rect will increase/decrease as the mouse moves
    rect(0, 0, mouseX, mouseY + 50);
    pop();
    //rotating clockwise
    angle1 = angle1 + 5;

//as the mouse goes right, the size of the circle increases  
    if (mouseX > width/2) {
      circW = (width/2 + 50);
    } else {
      circW = (mouseX);
    }
 
//as the mouse moves around, the color of the circles change 
    stroke(0);
    fill(mouseX, 170, mouseY);
    circle(mouseX, mouseY, circW);
    
}

I really wanted to play around with gradient colors and seeing the after-effects of each shape’s fast movements. At first, I wanted to experiment with having my background(…); line of code in my function setup() and how that would change my drawing, but it wouldn’t work with my rotating rectangles, so maybe I’ll experiment in a future project.