{"id":73996,"date":"2022-10-08T20:13:15","date_gmt":"2022-10-09T00:13:15","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=73996"},"modified":"2022-10-08T20:13:15","modified_gmt":"2022-10-09T00:13:15","slug":"project-06-abstract-clock-6","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/08\/project-06-abstract-clock-6\/","title":{"rendered":"Project 06: Abstract Clock"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><div class=\"wp-block-file\"><a id=\"wp-block-file--media-04914cfe-c4c3-4006-9b50-cc55bc799890\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-77.js\">sketch<\/a><\/div>\n\n\n<div><a class=\"p5_sketch_link\" data-width=\"480\" data-height=\"300\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-77.js\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"480\" height=\"300\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var x=[]\nvar y=[]\nvar w=[] \/\/height of rects at background\nvar a=[-50,0,150,250,300]\nvar b=[]\nvar l=[100,200,100,250,100]\nvar dx=[]\nvar dy=[]\nvar r\nvar spd\nvar theta\nvar sunposX\nvar sunposY\n\nfunction setup(){\n    createCanvas(480,300);\n    background(220);\n    for(var i=0;i&lt;20;i++){          \/\/setting up array for background gradiant\n        y[i]=7.5*i;\n        w[i]=height-15*i;\n    }\n    for(var n=0;n&lt;5;n++){           \/\/setting up the changes in x,y for reflection\n        dx[n]=l[n]\/20;          \/\/the change in x\n        dy[n]=l[n]\/3*20;            \/\/the change in y\n        b[n]=200; \n    }\n    r=height\/2-20;\n    \/\/spd=1;\n    \/\/theta=90;\n\n\n\n}\n\nfunction draw(){\n    BackColor();                                \/\/draw backgrounds\n\n    let Sec = map(second(), 0, 60, 0, radians(360)) - radians(90);\n    let Min = map(minute() + norm(second(), 0, 60), 0, 60, 0, radians(360)) - radians(90);\n    let Hour= map(hour(),0,24,0,radians(360))-radians(90);       \/\/ inspired by code here: https:\/\/p5js.org\/examples\/input-clock.html\n\n    push();\n    translate(width\/2,height\/2);\n    drawingContext.shadowBlur=40;        \n    drawingContext.shadowColor=color(251,114,39);       \/\/glowing effect\n    sunposX=r*cos(Hour);\n    sunposY=r*sin(Hour);                           \/\/polar coordinates\n    fill(244,116,95);\n    Sun(sunposX,sunposY); \n                          \/\/draw sun\n    drawingContext.shadowBlur=40;        \n    drawingContext.shadowColor=color(255); \n    fill(238,243,196);\n    Moon(sunposX,sunposY);                      \/\/draw moon\n    pop();\n\n\n\n    Mountain();                                 \/\/draw mountains\n    WaterColor();\n\n    ReflectionMount();\n    \n\n}\n\nfunction Mountain(){            \/\/draw mountain\n    noStroke();\n    fill(40);                   \/\/color dark grey \n    for (var n=0;n&lt;5;n++){\n        triangle(a[n],b[n],a[n]+l[n]\/2,b[n]-l[n]\/3,a[n]+l[n],b[n]);\n    }                   \n}\n\nfunction ReflectionMount(){\n    noStroke();\n    fill(140);                   \/\/color dark grey\n    for (var n=0;n&lt;5;n++){\n        triangle(a[n],b[n],a[n]+l[n]\/2,b[n]+l[n]\/6,a[n]+l[n],b[n]);\n    }\n    \n}\n\n\n\nfunction Sun(x,y){\n    ellipse(-x,-y,40,40);\n}\n\nfunction Moon(x,y){\n    ellipse(x,y,40,40);\n}\n\n\nfunction BackColor(){\n    noStroke();\n    let h=hour()\n    if (h&gt;=6 & h<8){                           \/\/6am-8am sunrise\n        for(var i=0;i&lt;20;i++){\n            fill(178+i*3,206-i*5\/2,245-i*6);\n            rect(0,y[i],width,w[i]);\n        }\n    }else if(h&gt;=8 & h<18){                     \/\/8am-6pm day time\n        for(var i=0;i&lt;20;i++){\n            fill(120+i*5,200+i*3\/2,239-i*0.5);\n            rect(0,y[i],width,w[i]);\n        }\n    }else if(h&gt;=18 & h<20){                    \/\/6pm-8pm sunset\n        for(var i=0;i&lt;20;i++){\n            fill(178+i*3,206-i*5\/2,245-i*6);\n            rect(0,y[i],width,w[i]);\n        }\n    }else if(h&gt;=20 || h&lt;6){                     \/\/8pm-6am night time\n        for(var i=0;i&lt;20;i++){\n            fill(44-i*3\/2,46-i*3\/2,88-i*5\/2);\n            rect(0,y[i],width,w[i]);\n        }\n    }\n\n}\n\nfunction WaterColor(){\n    noStroke();\n    let h=hour()\n    if (h&gt;=6 & h<8){                           \/\/6am-8am sunrise\n        for(var i=0;i&lt;20;i++){\n            fill(178+i*3,206-i*5\/2,245-i*6);\n            rect(0,200,width,w[i]\/2);\n        }\n    }else if(h&gt;=8 & h<18){                     \/\/8am-6pm day time\n        for(var i=0;i&lt;20;i++){\n            fill(120+i*5,200+i*3\/2,239-i*0.5);\n            rect(0,200,width,w[i]\/2);\n        }\n    }else if(h&gt;=18 & h<20){                    \/\/6pm-8pm sunset\n        for(var i=0;i&lt;20;i++){\n            fill(178+i*3,206-i*5\/2,245-i*6);\n            rect(0,200,width,w[i]\/2);\n        }\n    }else if(h&gt;=20 || h&lt;6){                     \/\/8pm-6am night time\n        for(var i=0;i&lt;20;i++){\n            fill(44-i*3\/2,46-i*3\/2,88-i*5\/2);\n            rect(0,200,width,w[i]\/2);\n        }\n    }\n\n}<\/code><\/pre><\/div>\n\n\n<p>The abstract I created has four different scenes: sunrise, daytime, sunset, and night time; I want to create a reflection of the mountain and the sky; and the sun and moon goes with the current time, rising from left and falls from right.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch var x=[] var y=[] var w=[] \/\/height of rects at background var a=[-50,0,150,250,300] var b=[] var l=[100,200,100,250,100] var dx=[] var dy=[] var r var spd var theta var sunposX var sunposY function setup(){ createCanvas(480,300); background(220); for(var i=0;i&lt;20;i++){ \/\/setting up array for background gradiant y[i]=7.5*i; w[i]=height-15*i; } for(var n=0;n&lt;5;n++){ \/\/setting up the changes in x,y &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/08\/project-06-abstract-clock-6\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 06: Abstract Clock&#8221;<\/span><\/a><\/p>\n","protected":false},"author":770,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73996"}],"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\/770"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=73996"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73996\/revisions"}],"predecessor-version":[{"id":74006,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73996\/revisions\/74006"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=73996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=73996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=73996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}