Project-03-Dynamic-Drawing

sketch

//Hanna Jang 
//Section B 
//hannajan@andrew.cmu.edu 
//Project-03

var clocksize=300; 
var shorthand= 40; 
var textSze=20; 
var textszeadd= 100
var SunX= 600; 
var SunY= 130; 
var SunSize= 50; 
var SunRim=60; 
var MoonX= 40; 
var MoonY= 130; 

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

function draw() { 
	background(204, 232, 247);
	
	//Clock Color Changes  to Mouse Location 
	var point1 =mouseX; 
	var point2 =mouseY; 
	
	var Rx = map(point2, 0, height, 162, 218); 
	var Gx= map(point2, 0, height, 231, 218); 
	var Bx= map(point2, 0, height, 199, 231); 
	
		//clock 
	ellipse(width/2, height/2, clocksize, clocksize); 
	fill(Rx, Gx, Bx); 
	
	//clock numbers 
	//number 12 
	textSize(textSze); 
	text("12", width/2, height/2-textszeadd); 
	
	//number 3 
	textSize(textSze); 
	text("3", width/2+textszeadd, height/2); 
	
	//number 6 
	textSize(textSze); 
	text("6", width/2, height/2+textszeadd); 
	
	//number 6 
	textSize(textSze); 
	text("9", width/2-textszeadd, height/2); 
	
	
	//clock 
	strokeWeight(5); 
	stroke(0); 
	
	//White Hand
	if (dist(mouseX, mouseY, width/2, height/2)<clocksize/2) {
	//white hand	
	line(width/2, height/2, mouseX-shorthand, mouseY-shorthand);
	stroke(0); 
	//black hand
	var mx = width-mouseX; 
	var my = height-mouseY; 
	line(width/2, height/2, mx, my); 
	}
		//text of clock 
	if (dist(mouseX, mouseY, width/2, height/2)>clocksize/2) {
	text("Move Mouse Inside Clock", width/2+0.7*textszeadd, height/2-1.5*textszeadd); 
	 
	fill(245, 210, 242);
	
	//morning sun 
	if (mouseX>470) {
	noStroke(); 
	fill(252, 141, 0); 
	ellipse(SunX, SunY, SunRim, SunRim);
	fill(253, 230, 0); 
	ellipse(SunX, SunY, SunSize, SunSize); 
	}
	
	//evening moon
	if (mouseY< 170); 
	noStroke(); 
	fill(253, 215, 58); 
	ellipse(MoonX, MoonY, SunSize, SunSize); 
	}
	
	
	

}

I had a basic idea of making an interactive clock, but I think it was a bit hard to change the different features like the way I wanted them to. The hardest thing was to mix the hands together so that they would be pointing in different directions, and had to play around with some numbers to get the exact formula. I eventually got the hands to move the way I wanted them to after I tested them over and over again with different numbers. I also like how the colors came out to look like for the interactive color portion of the clock.