Tanvi Harkare – Project 03 – Dynamic Drawing

tharkare project 3

/* Tanvi Harkare
Section B
tharkare@andrew.cmu.edu
Project-03-Dynamic Drawing */ 

var r = 1.9;
/*taking the canvas height and width and divided by 255,
the max number allowed in an RGB value. This ensure that no matter
where mouseX or Y is, the colors will continue changing*/

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

function draw() {
    noStroke();
    background(255 - mouseX/1.9); //fades background out from black to white
    var i = 0; //keeps count of how many rectangles are created
    var posX = 10; //starting x point for rectangle
    var posY = 5; //starting y point for rectangle
    while(i < 130){
        push();
        translate(mouseX, mouseY);
        rotate(radians(mouseX));
        fill(10, mouseX/r, mouseY/r);
        rect(posX, posY, mouseX/12.8, mouseY/12.8); //range for rectangle size is 10 to 50 pixels. 
        i++;
        posX += 50;
        if(posX >= width){ //creates a new row of rectangles
            posX = 10;
            posY += 50;
        }
    }
    pop();
}

I had a lot of fun with this project, especially in experimenting with the while loop. An example of this is analyzing what happens when certain functions are included inside the loop. My push() function is included in the while loop, while the pop() function is called after the while loop ends. Doing vice versa also creates a similar drawing. Depending on the location of the mouse in the x and y direction, the color, size, position, and angle of the rectangles change. Additionally as the mouse moves across the canvas, the background fades from black to white. I was inspired by simple geometric shapes to create a drawing that catches the eye.