Ankitha Vasudev – Project 03- Dynamic Drawing

For this project I wanted to experiment with rotation and changes in color. I tried to create contrasting changes such as the sun color changing as its size decreases and the buildings rising and becoming brighter as the sky gets darker. The most challenging part was getting the rotation of the sun rays.

sketch

// Ankitha Vasudev
// Section B, 10:30 - 11:50
// ankithav@andrew.cmu.edu
// Assignment-03-b

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

function draw() {
	// Changes background color based on mouse position 
	background(0, 200 - mouseX, 500 - mouseY);
	noStroke();

    //Local variables
    var x = 700; //triangle x coordinate
    var y = 700; //triangle y coordinate 
    var circleW = 30; //sun width
    var circleH = 30; //sun height
    var bwidth = 50; //building width

    //rotating sun rays (triangles)
	push();
	translate(mouseX, mouseY);
	fill(255, 225, 0);
	rotate(mouseY);
	triangle(0, 0, -x/2, y, -x, y+200);
	triangle(0, 0, x/2, -y, x, -y-200);
	triangle(0, 0, x+50, y, y, x+50);
	triangle(0, 0, -x-50, -y, -y, -x-50);
    pop();

    //sun - circle changes size based on mouse position 
    if (mouseX < width/2) {
    circleW = width/2 - mouseX;
    circleH = width/2 - mouseX;
    } else { 
    circleH = 5
    circleW = 5;
    }
    
    //changes sun color and size
    fill(255, 225, mouseX);
    ellipse(mouseX, mouseY, circleW, circleH);

    //building heights based on mouse position 
    fill(mouseX);
    rect(200, 530, bwidth+10, (-mouseY/ 5));
    fill(220);
    rect(160, 570, bwidth-10, (-mouseY / 5));
    fill(150);
    rect(70, 600, bwidth, (-mouseY/5));
    fill(mouseX);
    rect(380, 620, bwidth, (-mouseY/5));
    fill(180);
    rect(355, 550, bwidth/2, (-mouseY/5));
    fill(mouseX);
    rect(20, 660, bwidth/3, (-mouseY/5));

    //green ground - stationary
    fill(0, 220, 70);
    ellipse(width/2, 870, 700, 700);
}