Abstract Clock

index

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>p5.js vers 0.5.2, Edit index.html to Change This Title</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>

    <!-- Uncomment the lines below to include extra p5 libraries, or 
         use template-all or template-all-min:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.js"></script>
    -->

    <script src="sketch.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>

sketch

//Arula Ratnakar
//Section C
//aratnaka@andrew.cmu.edu
//Abstract Clock




function setup() {
    createCanvas(600, 600);
}

//--------------------------
function draw() {
	background ('lightpink')
	
	var H = hour ()
	var M = minute()
	var S = second ()

	fill (96, 139, 209)
	triangle (M, 10, H, height/2,S*5, width/2)
	fill (90, 168, 89)
	triangle (width/2, S*5, height/2, H, 10, M) 
	push()
	translate (50,50)
	fill (90, 168, 89)
	triangle (M, 10, H, height/2,S*5, width/2)
	fill (96, 139, 209)
	triangle (width/2, S*5, height/2, H, 10, M) 
	push ()
	translate (50, 50)
	fill (96, 139, 209)
	triangle (M, 10, H, height/2,S*5, width/2)
	fill (90, 168, 89)
	triangle (width/2, S*5, height/2, H, 10, M) 
	push ()
	translate (50, 50)
	fill (90, 168, 89)
	triangle (M, 10, H, height/2,S*5, width/2)
	fill (96, 139, 209)
	triangle (width/2, S*5, height/2, H, 10, M)
	push ()
	translate (50, 50)
	fill (96, 139, 209)
	triangle (M, 10, H, height/2,S*5, width/2)
	fill (90, 168, 89)
	triangle (width/2, S*5, height/2, H, 10, M)
	push ()
	translate (50, 50)
	fill (90, 168, 89)
	triangle (M, 10, H, height/2,S*5, width/2)
	fill (96, 139, 209)
	triangle (width/2, S*5, height/2, H, 10, M)
	pop ()

}

 

Leave a Reply