{"id":67278,"date":"2021-10-09T22:49:38","date_gmt":"2021-10-10T02:49:38","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67278"},"modified":"2021-10-09T22:49:38","modified_gmt":"2021-10-10T02:49:38","slug":"project-6","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/09\/project-6\/","title":{"rendered":"Project 6"},"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>I used the rotation of the hexagons and pointer to represent second hand; smallest circles also represent second hand, middle size circles represent minute hand, and largest circles represent hour hand. The background changes from dark to white every 24 hours representing a day. It is fun to think of various representations of time.<\/p>\n\n\n\n<div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"480\" data-height=\"480\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-47.js\">sketch<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-47.js\" class=\"wp-block-file__button\" download>Download<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/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\">function setup() {\n    createCanvas(480, 480);\n    background(220);\n    text(\"p5.js vers 0.9.0 test.\", 10, 15);\n    frameRate(1)\n    angleMode(DEGREES)\n    rectMode(CENTER)\n}\nvar s = [100,20,100]\nvar angles = 0\nvar angles1 = 150\nvar angles2 = 150\nvar radius = 0\nvar colorBackground = 0\nvar angleEllipse1 = 0\nvar angleEllipse2 = 0\nvar angleEllipse3 = 0\n\nfunction draw() {\n    background(colorBackground)\n    \/\/background color changes from black to white and resets every day\n    if(colorBackground &lt;= 255){\n        colorBackground += 255\/24\/3600\n    }\n    if(colorBackground &gt;= 255){\n        colorBackground = 0\n    }\n    \/\/background strings\n    stroke(200,200,220);\n    strokeWeight(.4)\n    for (var x = 0; x &lt;= 50; x += .3) {\n        line(480, 50, 480\/50 * x - 3, 0); \/\/right upwards lines\n    }\n    for (var x = 20; x &lt;= 80; x += .3) {\n        line(480, 50, 480\/40 * x, 480); \/\/right downwards lines\n    }\n    for (var x = 0; x &lt;= 30; x += .3) {\n        line(0, 430, 480\/60 * x, 0); \/\/left upwards lines\n    }\n    for (var x = 0; x &lt;= 30; x += .3) {\n        line(0, 430, 480\/30 * x, 480); \/\/left downwards lines\n    }\n    \/\/draw bottom hexagon and rotates clockwise\n    push()\n    translate(240,320)\n    rotate(angles2)\n    noStroke()\n    fill(255)\n    hexagon(s[2])\n    angles2 +=10\n    pop()\n    \/\/draw second hand and rotates anticlockwise\n    push()\n    translate(240,320)\n    fill(102,91,169)\n    noStroke()\n    rotate(angles)\n    hexagon(s[1])\n    strokeWeight(7)\n    stroke(200,200,220)\n    line(0,0,0,-50)\n    pop()\n    \/\/draw upper hexagon and rotates anticlockwise\n    push()\n    translate(240,150)\n    noStroke()\n    fill(0)\n    rotate(angles1)\n    hexagon(s[0])\n    angles1 -= 10\n    pop()   \n    \/\/draw second hand and rotates clockwise\n    push()\n    translate(240,150)\n    fill(102,91,169)\n    noStroke()\n    rotate(angles)\n    hexagon(s[1])\n    strokeWeight(7)\n    stroke(200,200,220)\n    line(0,0,0,-50)\n    angles += 6\n    pop()\n    \/\/draw circles that rotate once every minute, hour, and day\n    push()\n    \/\/rotate once every minute\n    translate(240,240)\n    fill(100,200,220)\n    rotate(angleEllipse1)\n    ellipse(0,-180,10,10)\n    ellipse(0,180,10,10)\n    ellipse(180,0,10,10)\n    ellipse(-180,0,10,10)\n    angleEllipse1 += 6\n    pop()\n    push()\n    \/\/rotate once every hour\n    translate(240,240)\n    fill(50,100,110)\n    rotate(angleEllipse2)\n    ellipse(0,-200,15,15)\n    ellipse(0,200,15,15)\n    ellipse(200,0,15,15)\n    ellipse(-200,0,15,15)\n    angleEllipse2 += 0.1\n    pop()\n    push()\n    \/\/rotate once every day\n    translate(240,240)\n    fill(10,50,55)\n    rotate(angleEllipse3)\n    ellipse(0,-220,20,20)\n    ellipse(0,220,20,20)\n    ellipse(220,0,20,20)\n    ellipse(-220,0,20,20)\n    angleEllipse3 += 0.1\/24\n    pop()\n    print(colorBackground)\n}\n    \/\/set up hexagon\nfunction hexagon(s){\n    beginShape()\n    vertex(s,0)\n    vertex(s\/2,s*sqrt(3)\/2)\n    vertex(-s\/2,s*sqrt(3)\/2)\n    vertex(-s,0)\n    vertex(-s\/2,-s*sqrt(3)\/2)\n    vertex(s\/2,-s*sqrt(3)\/2)\n    endShape(CLOSE)\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I used the rotation of the hexagons and pointer to represent second hand; smallest circles also represent second hand, middle size circles represent minute hand, and largest circles represent hour hand. The background changes from dark to white every 24 hours representing a day. It is fun to think of various representations of time.<\/p>\n","protected":false},"author":667,"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\/f2021\/wp-json\/wp\/v2\/posts\/67278"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/users\/667"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67278"}],"version-history":[{"count":6,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67278\/revisions"}],"predecessor-version":[{"id":67290,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67278\/revisions\/67290"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}