{"id":74105,"date":"2022-10-09T01:21:50","date_gmt":"2022-10-09T05:21:50","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=74105"},"modified":"2022-10-09T01:25:45","modified_gmt":"2022-10-09T05:25:45","slug":"project-06-abstract-clock-12","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/09\/project-06-abstract-clock-12\/","title":{"rendered":"Project 06 – Abstract Clock"},"content":{"rendered":"\n

Explanation for this abstract clock:<\/strong><\/p>\n\n\n\n

The sun\/moon is the HOUR HAND<\/li>
The duck is the MINUTE HAND<\/li>
The clouds’ circle is the SECOND HAND<\/li><\/ol>
$\"\"$
Clock diagram<\/figcaption><\/figure>
<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/*\n * Andrew J Wang\n * ajw2@andrew.cmu.edu\n * Section A\n * Project-05\n *\n * This program draws clock\n *\/\n\n\/\/set randam numbers for the wavy lines of reflection of the sun\nvar rando = 0;\n\/\/set sin values for waving reed\nvar drR=0;\n\nfunction setup() {\n createCanvas(480,480);\n background(255);\n}\n\nfunction draw() {\n\/\/get dates for hours, minutes, seconds,and miliseconds\nvar dt = new Date();\n\/\/get location for ducks (MINUTES)\nvar dx=480-dt.getMinutes()*8-dt.getSeconds()*8\/60;\n\/\/get location for the sun (HOURS)\nvar dy=(18-dt.getHours()-dt.getMinutes()*1\/60-dt.getSeconds()*1\/3600)*300\/12;\n\n\/\/background\nbackground(80,50,180);\n\n\/\/create reflection of the sun\nif (dy>-125 & dy<425)\n{\n sunReflection (dy);\n push();\n \/\/hiding the additional parts above sea level\n fill (80,50,180);\n rect(100,200,280,100);\n pop();\n}\n\n\/\/show moon between 6PM to 6AM\nif (dy<62)\n{\n moon (300+dy,125);\n}\n\nelse if (dy>238)\n{\n moon ((dy-300),125);\n}\n\n\/\/create moutains and their reflections\nmoutain(-50,300,150,100);\nmoutainReflection(-50,300,150,75);\n\nmoutain(50,300,110,50);\nmoutainReflection(50,300,110,37.5);\n\nmoutain(350,300,250,50);\nmoutainReflection(350,300,250,37.5);\n\n\/\/gradiant sky and sea\ngradiantScreen (0,300);\ngradiantScreenReverse (300,600);\n\n\/\/draw horizon\nstroke(255);\nstrokeWeight(1);\nline (0,300,width,300);\n\n\/\/set sun between 6AM to 6PM\nif (dy>-125 & dy<425)\n{\n sun(dy,125);\n}\n\n\/\/creating lands\nland2(-100,480,500,50);\nland(-200,480,400,75);\n\n\/\/creating clouds (SECONDS)\nclouds();\n\n\/\/creating ducks\nduck(dx,350);\nduck(dx+480,350);\nduck(dx-480,350);\n\n\/\/creating reeds\nreed2();\nreed();\n\n}\n\n\/\/gradiant sky\nfunction gradiantScreen (y1,y2)\n{ \n \/\/for loop changing alpha values for small rectangles\n for (var k=0; k<(y2-y1); k++)\n { \n noStroke();\n fill (255,220,220,150\/(y2-y1)*k);\n rect (0,y1+k,width,1);\n }\n}\n\n\/\/gradiant sea but the same as gradiant sky but in reverse\nfunction gradiantScreenReverse (y1,y2)\n{\n for (var k=0; k<(y2-y1); k++)\n { \n noStroke();\n fill (255,220,220,180\/(y2-y1)*k);\n rect (0,y2-k,width,1);\n }\n}\n\n\/\/creating sun\nfunction sun (y,r)\n{ \n fill(255,255,180);\n \/\/outline of the sun\n strokeWeight(5);\n stroke(255,255,230,50);\n var angle = acos((300-y)\/(r\/2));\n \/\/make arc if parts of the sun is below horizon\n if (300-y<=r\/2)\n {\n arc (width\/2,y,r,r,-(Math.PI\/2-angle)+Math.PI ,2*Math.PI + (Math.PI\/2-angle),OPEN);\n }\n \/\/dont make arc if it is not\n else\n {\n circle(width\/2,y,r);\n }\n}\n\/\/creating moon same as sun but having a different arc\/circle for the missing piece\nfunction moon (y,r)\n{\n fill(255,255,180);\n strokeWeight(0);\n stroke(255,255,230,50);\n var anglem1 = acos((300-y)\/(r\/2));\n var anglem2 = acos((300-y+20\/Math.sqrt(2))\/(r\/2-20));\n if (Math.abs(300-y)<r\/2)\n {\n arc (width\/2,y,r,r,-(Math.PI\/2-anglem1)+Math.PI ,2*Math.PI + (Math.PI\/2-anglem1),OPEN);\n \/\/the missing piece\n if (300-y+20\/Math.sqrt(2)<=(r\/2-20))\n { \n push();\n fill(80,50,180);\n arc (width\/2+20\/Math.sqrt(2),y-20\/Math.sqrt(2),r-40,r-40,-(Math.PI\/2-anglem2)+Math.PI ,2*Math.PI + (Math.PI\/2-anglem2),OPEN);\n pop();\n }\n else\n {\n push();\n fill(80,50,180);\n circle(width\/2+20\/Math.sqrt(2),y-20\/Math.sqrt(2),r-40);\n pop();\n }\n }\n else\n {\n circle(width\/2,y,r);\n push();\n fill(80,50,180);\n \/\/the missing piece\n circle(width\/2+20\/Math.sqrt(2),y-20\/Math.sqrt(2),r-40);\n pop();\n }\n\n}\n\n\/\/mountain reflection using bezier\nfunction moutainReflection(mx,y,w,h)\n{ \n fill(0,0,255);\n strokeWeight(0);\n bezier(mx,y,mx,y+h,mx+w,y+h*2,mx+w,y);\n}\n\n\/\/mountaini using benzier\nfunction moutain(mx,y,w,h)\n{ \n fill(0,0,255);\n stroke(255,255,230,50);\n strokeWeight(2);\n bezier(mx,y,mx,y-h,mx+w,y-h*2,mx+w,y);\n}\n\n\/\/making clouds\nfunction clouds()\n{\n fill(255,255,255,75);\n \/\/getting seconds and milliseconds\n var dt = new Date();\n var x=dt.getSeconds()*8+dt.getMilliseconds()*0.008;;\n var y=480;\n push()\n translate (0,30);\n \/\/original moving clouds\n rect(-50+x,120,200,30,15);\n rect(-70+x,155,150,20,10);\n rect(-100+x,100,150,16,8);\n \/\/clones to make the animation look smooth\n rect(-50+x+y,120,200,30,15);\n rect(-70+x+y,155,150,20,10);\n rect(-100+x+y,100,150,16,8);\n\n rect(-50+x-y,120,200,30,15);\n rect(-70+x-y,155,150,20,10);\n rect(-100+x-y,100,150,16,8);\n \/\/original moving clouds\n rect(200+x,20,250,30,15);\n rect(350+x,50,150,20,10);\n \/\/clones to make the animation look smooth\n rect(200+x-2*y,20,250,30,15);\n rect(350+x-2*y,50,150,20,10);\n\n rect(200+x-y,20,250,30,15);\n rect(350+x-y,50,150,20,10);\n\n \/\/seconds indicator circles\n fill(255);\n circle(0+x,120,20);\n circle(0+x-y,120,20);\n circle(0+x+y,120,20);\n\n pop();\n}\n\n\/\/create reflection of the sun using noice function to make it expand\nfunction sunReflection (y)\n{ \n rando+=0.01;\n push()\n fill (255,255,255,180);\n strokeWeight(0);\n stroke (255,255,255,180);\n rectMode(CENTER);\n rect(width\/2,300+(300-y)\/2,noise(rando)*50+125,4,2);\n rect(width\/2,300+(300-y)\/2+8,noise(rando*2)*50+75,4,2);\n rect(width\/2,300+(300-y)\/2-8,noise(rando-1)*50+75,4,2);\n rect(width\/2,300+(300-y)\/2+16,noise(rando-0.5)*50+40,4,2);\n rect(width\/2,300+(300-y)\/2-16,noise(rando+0.5)*50+40,4,2);\n pop()\n}\n\/\/land darker\nfunction land(mx,y,w,h)\n{\n fill(30,30,130);\n noStroke();\n bezier(mx,y,mx,y-h*2,mx+w,y-h,mx+w,y);\n}\n\/\/land lighter\nfunction land2(mx,y,w,h)\n{\n fill(75,75,190);\n noStroke();\n bezier(mx,y,mx,y-h*2,mx+w,y-h,mx+w,y);\n}\n\/\/duck\nfunction duck(x,y)\n{ \n\n\n fill(30,30,130,180);\n triangle (x-5,y,x-10,y+5,x-5,y+5);\n triangle (x+5,y+5,x+5,y+10,x+35,y+10);\n arc (x,y,10,10,Math.PI,2*Math.PI);\n rect (x-5,y,10,10);\n arc (x+15,y+10,40,25,0,PI,OPEN);\n}\n\/\/reed\nfunction reed()\n{ \n \/\/moving based on sin function\n var dr = Math.sin(Math.PI*drR);\n drR+=0.002;\n push();\n translate(100,500);\n rotate(dr\/20);\n\n fill(180,120,30);\n rect(-0,-200,10,80,5);\n rect(3,-120,4,120);\n\n fill(190,130,60);\n rect(-40,-190,10,80,5);\n rect(-37,-110,4,120);\n\n fill(210,110,80);\n rect(-20,-160,10,80,5);\n rect(-17,-80,4,120);\n pop();\n\n}\n\/\/second types of reed (blue)\nfunction reed2()\n{ \n \n var dr = Math.sin(Math.PI*drR);\n drR+=0.002;\n push();\n translate(50,500);\n rotate(-dr\/20);\n\n fill(50,60,100);\n rect(-0,-200,10,80,5);\n rect(3,-120,4,120);\n\n fill(30,70,100);\n rect(-40,-190,10,80,5);\n rect(-37,-110,4,120);\n pop();\n}<\/code><\/pre><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Explanation for this abstract clock: The sun\/moon is the HOUR HAND The duck is the MINUTE HAND The clouds’ circle is the SECOND HAND \/* * Andrew J Wang * ajw2@andrew.cmu.edu * Section A * Project-05 * * This program draws clock *\/ \/\/set randam numbers for the wavy lines of reflection of the sun … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/09\/project-06-abstract-clock-12\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 06 – Abstract Clock”<\/span><\/a><\/p>\n","protected":false},"author":768,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[106,55],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74105"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/users\/768"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=74105"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74105\/revisions"}],"predecessor-version":[{"id":74115,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74105\/revisions\/74115"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=74105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=74105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=74105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}