{"id":74238,"date":"2022-10-10T09:30:28","date_gmt":"2022-10-10T13:30:28","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=74238"},"modified":"2022-10-10T09:30:28","modified_gmt":"2022-10-10T13:30:28","slug":"project-6-abstract-clock-5","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/10\/project-6-abstract-clock-5\/","title":{"rendered":"Project 6 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><p>This is my abstract clock: The candles&rsquo; fire represents the passing of each second, the height of the candle represents the hour of the day and the sheets of paper represent the minutes remaining in the hour.<\/p>\n\n\n\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-104.js\" data-width=\"480\" data-height=\"480\">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=\"480\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Michael Li\n\/\/Section C \n\nfunction setup() {\n    createCanvas(480, 480);\n    background(220);\n    text(\"p5.js vers 0.9.0 test.\", 10, 15);\n    background (220)\n\n    \n}\n    \/\/write object for candle dimensions\n    var candle = {xPos: 130, yPos: 120, w: 50,  h: 280}\n    \/\/establish variables for the timer\n    var timerS;\n    var timerM; \n    var timerH;\n    \/\/Pen x position\n    var penX = 370;\n    \/\/pen movement indedx\n    var moveP = 0.3;\n\nfunction draw() {\n    background(62, 35, 16); \/\/dark brown\n    timerM = minute(); \/\/assign minute function for variable\n    \/\/pages\n    fill(76, 135, 74); \/\/green book cover\n    rect(190, 420, 230, 20); \/\/draw bottom cover\n    \/\/alternate the page color between white and grey for distinction\n    \/\/use for loop to draw number of pages depending on the minute\n    for (var i = 0; i&lt;=60-timerM; i++){\n        noStroke();\n        if (i%2==0){\n            fill(255);\n        } else {\n            fill(200);\n        }\n        \/\/draw pages\n        rect(190, 420-(3*i), 230, 3);\n\n    }\n    \/\/draw pen function\n    drawPen(penX, 235+3*timerM);\n    \/\/pen moves left and right\n    penX +=moveP;\n        \/\/constrain pen in a range\n        if (penX&gt;= 380 || penX &lt;= 350){\n            moveP = -moveP;\n        } \n    \/\/draw the panel with the hour carvings\n    drawBackPanel(80, 100);\n\n    \/\/draw the table\n    fill(154, 121, 102);\n    rect(0, height*9\/10, width, height*9\/10);\n\n    \/\/draw hour carvings behind the candle\n    \/\/for loop to draw the larger lines\n    for (var i = 0; i &lt;=12; i++){\n        strokeWeight(3);\n        stroke(161, 158, 75);\n        line(100, 350.4-(9.6*2*i), 215, 350.4-(9.6*2*i));\n    \/\/drawing the shorter lines\n    } for (var i = 0; i &lt;=12; i++){\n        strokeWeight(2);\n        stroke(161, 158, 75);\n        line(120, 360-(9.6*2*i), 195, 360-(9.6*2*i));\n    }\n    \/\/drawing the body of the candle\n    drawCandleB(candle.xPos, candle.yPos, candle.w, candle.h);\n    \/\/drawing the base of the candle\n    drawBase(candle.xPos-10, 360);\n\n    \/\/assign hour to variable timerH\n    timerH = hour();\n    \/\/map the hour to fit the candle length\n    var hourMap = map(timerH\/2, 0, 12, 240, 10);\n    \/\/candle length changes depending on the hour\n    candle.yPos = 120 + 240 - hourMap;\n    candle.h = hourMap + 30;\n\n}\n\/\/function for drawing the candle's body\nfunction drawCandleB (x, y, w, h){\n    \/\/establish remapped value for hour\n    var hourMap = map(timerH\/2, 0, 12, 240, 30);\n\n    fill(250, 244, 192); \/\/light yellow\n    noStroke()\n    rect(x, y, w, h); \/\/candle  body\n    \/\/function for drawing the fire\n    drawCandleFire(x, y, w, h);\n    \/\/function for drawing the wax dripping\n    drawCanldeT(x, y, w);\n    \/\/function for drawing the halo of light\n    drawLight(x, y, w, h, hourMap);\n\n}\n\/\/function for drawing the wax\nfunction drawCanldeT (x, y, w){\n    \/\/set lineweight\n    strokeWeight(8);\n    stroke(220, 213, 142); \/\/darker yellow\n\n    line(x+2, y, x+w-2, y);\/\/horizontal line\n    \/\/two drips\n    line(x+w*3\/5, y, x+w*3\/5, y+w\/2); \n    line(x+w*4\/5, y, x+w*4\/5, y+w*3\/4);\n}\n\/\/function for drawing the fire\nfunction drawCandleFire (x, y, w, h){\n    \/\/establish variable for the tip of the fire\n    \/\/fire positions\n    var fTipy; \n    var fTipx;\n    \/\/variable for seconds for fire flicker\n    timerS = second();\n    \/\/fire flickers each second\n    if (timerS %2 == 0){\n        fTipy = y-w*4\/5;\n        fTipx = x+w\/2;\n   \n    } else {\n        fTipy = y-w*4\/5;\n        fTipx = x+w\/2 - 10;\n    }\n    noStroke();\n    \/\/draws the fire\n        fill(246, 74, 22); \/\/red\n        ellipse(x+w\/2, y-w\/5, w\/4, w\/3);\n        triangle(fTipx, fTipy, x+w*5\/8, y-w\/5, x+3*w\/8, y-w\/5);\n    \n}\n\/\/halo of light\nfunction drawLight (x, y, w, h, hour){\n\n    timerS = second();\/\/establish the second variable\n    \/\/halo grows and shrinks each second\n    if (timerS %2 == 0){\n        hourMap = hour+10;\n    } else {\n        hourMap = hour-5;\n    }\n\n    noStroke();\n    fill(249, 246, 152, 20);\/\/yellow with light transparency\n    ellipse(x+w\/2, y-w*2\/5, hourMap*2, hourMap*2); \/\/draws light\n\n}\n\/\/function drawing the back panel\nfunction drawBackPanel (x, y){\n    \n    strokeWeight(9);\n    stroke(225, 176, 104); \/\/ light brown\n    \/\/outer framing\n    line(x, y, x, y+350);\n    line(x+155, y, x+155, y+350);\n    arc(x+77, y, x+75, y+55, PI, 0);\n\n    \/\/inner board\n    noStroke();\n    fill(186, 167, 135);\n\n    ellipse(x+77, y, x+75, y+55);\n    rect(x, y, x+75, y+250);\n}\n\/\/candle base\nfunction drawBase (x, y){\n    fill(100); \/\/grey\n    \/\/top and bottom qadralateral\n    quad(x, y, x+70, y, x+60, y+20, x+10, y+20);\n    quad(x+10, 420, x+60, y+60, x+70, y+73, x, y+73);\n    \/\/middle rectangle\n    fill(150);\n    rect(x+10, y+20, 50, 40);\n}\n\/\/pen\nfunction drawPen (x, y){\n    push();\n        translate(x, y); \/\/move to the right\n        rotate(radians(315)); \/\/rotate for pen mvement\n        noStroke();\n        fill(200); \/\/grey\n        \/\/draws pen\n        rect(0, 0, 100, 5);\n        fill(255); \/\/white\n        triangle(0, 0, 0, 5, -5, 2.5);\n    pop();\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>This is my abstract clock: The candles&rsquo; fire represents the passing of each second, the height of the candle represents the hour of the day and the sheets of paper represent the minutes remaining in the hour. sketch \/\/Michael Li \/\/Section C function setup() { createCanvas(480, 480); background(220); text(&#8220;p5.js vers 0.9.0 test.&#8221;, 10, 15); background &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/10\/project-6-abstract-clock-5\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 6 Abstract Clock&#8221;<\/span><\/a><\/p>\n","protected":false},"author":739,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[106,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74238"}],"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\/739"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=74238"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74238\/revisions"}],"predecessor-version":[{"id":74239,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74238\/revisions\/74239"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=74238"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=74238"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=74238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}