{"id":73931,"date":"2022-10-08T17:40:10","date_gmt":"2022-10-08T21:40:10","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=73931"},"modified":"2022-10-08T17:40:10","modified_gmt":"2022-10-08T21:40:10","slug":"project-06-abstract-clock-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/08\/project-06-abstract-clock-3\/","title":{"rendered":"Project: 06 – Abstract Clock"},"content":{"rendered":"\n

Crop Circles<\/strong><\/p>\n\n\n\n

I was inspired by crop circles for my clock. Each node is one hour in a day. The crops in the background grow with the mouse.<\/p>\n\n\n\n

\"\" — Sketch<\/figcaption><\/figure>
sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/* Evan Stuhlfire\n** estuhlfi@andrew.cmu.edu, section B\n** Project 06: Abstract Clock *\/\n\nvar r = 90; \/\/ radius of center circle, noon\nvar deg = 360; \/\/ degrees in a circle\nvar nodeCount = 24; \/\/ 24 hours, each node is one hour\nvar c = []; \/\/ color array\nvar x = []; \/\/ x position of circle\nvar theta = []; \/\/angle\nvar size = []; \/\/ diam of the circles\nvar defaultColor;\nvar tempSize = 0; \/\/ allows the nodes to grow with time\nvar pSize = 25;\n\nfunction setup() {\n createCanvas(480, 480);\n background(127, 198, 164);\n fillArray(); \/\/ fill arrays with start values\n\n}\n\nfunction draw() {\n var thetaRotate = 40; \/\/ canvas rotation\n\n background(127, 198, 164);\n drawCrops();\n\n \/\/ build color array\n buildColorArray();\n\n stroke(93, 115, 126);\n \/\/ settings to draw circles (nodes)\n push(); \/\/ save settings\n translate(width\/2, height\/2); \/\/ reset origin to center\n rotate(radians(thetaRotate)); \/\/ rotate canvas to draw at an angle\n\n \/\/ call function to draw the nodes\n drawNodes();\n pop(); \/\/ restore settings\n\n \/\/ make crops reactive to mouse location and time\n pSize = mouseX\/hour();\n}\n\nfunction drawCrops() {\n var rows = width\/30;\n var cols = height\/30;\n var incr = width\/16;\n \n var s1 = width\/16;\n var s2 = height\/16;\n var len = pSize;\n var a = len\/4; \n\n \/\/ loop over double for loop to add colums and rows of crops\n for(var i = 0; i < rows; i++) {\n for(var j = 0; j < cols; j++) {\n push();\n translate(s1\/2, s2\/2);\n drawOne(len, a); \n pop();\n s2 += 2 * incr;\n }\n s1 += 2 * incr;\n s2 = incr;\n }\n}\n\nfunction drawOne(len, a) {\n \/\/ function to draw on plant for crops\n stroke(93, 115, 126, 60);\n line(0, -a, 0, len);\n line(-a, -a, 0, len\/2);\n line(a, -a, 0, len\/2);\n}\n\nfunction buildColorArray() {\n \/\/ set the default color\n defaultColor = color(242, 245, 234);\n\n \/\/ fill array with colors\n for(var i = 0; i < x.length; i++){\n if(i < 3) {\n c[i] = color(93, 115, 126); \n } else if(i < 6) {\n c[i] = color(118, 129, 179);\n } else if(i < 9) {\n c[i] = color(214, 248, 214);\n } else if(i < 11) {\n c[i] = color(163, 213, 255);\n } else if(i < 14) {\n c[i] = color(250, 243, 62);\n } else if (i < 16) {\n c[i] = color(163, 213, 255);\n } else if (i < 19) {\n c[i] = color(214, 248, 214);\n } else if (i < 22) {\n c[i] = color(118, 129, 179);\n } else if (i < 25) {\n c[i] = color(93, 115, 126)\n }\n }\n}\n\nfunction fillArray() {\n var angle = 30; \/\/ nodes are positioned 30 degrees apart\n var angle2 = 150; \/\/ starting point for second set of nodes\n var dist = 65; \/\/ nodes begin at dist from center\n var offset = 1.2 \/\/ distance offset \n var offset2 = .8 \n var minSize = 15; \/\/ can be no smaller than minSize\n\n \/\/ fill arrays with start values\n x.push((-deg\/2) + 10);\n theta.push(180);\n size.push(r * offset2); \/\/ 80% size of center\n\n \/\/ fill array with first 12 nodes\n for(var i = 1; i < nodeCount\/2; i++) {\n x[i] = dist;\n theta[i] = angle * i;\n size[i] = max(r * i\/18, minSize);\n\n dist = dist + i * offset;\n }\n\n \/\/ push center circle into array\n x.push(deg\/2 - 10);\n theta.push(0);\n size.push(r);\n\n dist = dist - i * offset; \/\/ undo last dist calc\n \/\/ fill array with last 12 nodes\n \/\/ loop backward so that decreasing i can be used to decrease size\n for(i = x.length; i > 2; i--) {\n x.push(dist);\n theta.push(angle2);\n size.push(max(r * i\/22, minSize));\n\n dist = dist - i * offset2;\n angle2 -= angle;\n }\n\n \/\/ push last circle into array, midnight\n x.push(0);\n theta.push(0);\n size.push(r * offset2); \/\/ 80% size of center\n}\n\nfunction drawNodes() {\n var h = hour();\n \n stroke(93, 115, 126);\n \/\/ draw line behind center node so that it is behind\n line(0, 0, deg\/2, 0);\n\n \/\/ draw the satellite nodes\n push();\n\n translate(x[0], 0); \/\/ reset origin to top circle\n loopAndDraw(0, x.length\/2, h);\n\n \/\/ draw top midnight circle\n fill(c[0]);\n circle(0, 0, r * .8);\n pop();\n\n push();\n translate((deg\/2) -10, 0);\n loopAndDraw(int(x.length\/2) + 1, x.length, h);\n\n pop();\n}\n\nfunction loopAndDraw(start, end, h) {\n var dx;\n var dy;\n var current = false; \/\/ identify the current node\n\n \/\/ iterate over arrays\n for(var i = start; i < end; i++) {\n dx = x[i] * cos(radians(theta[i]));\n dy = x[i] * sin(radians(theta[i]));\n\n \/\/ midnight\n if(h == 0) {\n h = 24;\n }\n \/\/ if the hour has passed or is the current hour use fill\n if(i < h){\n fill(c[i]);\n } else if (i == h) {\n current = true;\n fill(c[i]);\n } else {\n fill(defaultColor);\n }\n\n stroke(93, 115, 126);\n line(0, 0, dx, dy);\n circle(dx, dy, size[i]);\n\n if(current) {\n currentHour(i, dx, dy);\n }\n\n current = false;\n }\n}\n\nfunction currentHour(i, dx, dy) {\n \/\/ add time elements to nodes to track time\n \/\/ subtract to adjust for rotation of canvas\n var s = second() * 6 - 140;\n var m = minute() * 6 - 140;\n var h = hour() * 30 + minute()\/2 - 140; \n\n fill(c[i]); \/\/ use the color stored in the array\n push();\n translate(dx, dy);\n \/\/ make current circle bigger\n tempSize = size[i] * 1.32;\n circle(0, 0, tempSize);\n\n \/\/ have a second hand orbit the current hour\n if(i > 3 & i < 23) {\n fill(c[i - 3]); \/\/use previous color.\n } else {\n fill(defaultColor);\n }\n \/\/ mark hours\n var hx = size[i] * .6 * cos(radians(h));\n var hy = size[i] * .6 * sin(radians(h));\n circle(hx, hy, tempSize * .25);\n\n \/\/ mark minutes\n var mx = size[i] * .3 * cos(radians(m));\n var my = size[i] * .3 * sin(radians(m));\n \n circle(mx, my, tempSize * .2);\n\n \/\/ mark seconds\n var armX = size[i] * .55 * cos(radians(s));\n var armY = size[i] * .55 * sin(radians(s));\n strokeWeight(1);\n circle(armX, armY, tempSize * .15);\n pop();\n}\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Crop Circles I was inspired by crop circles for my clock. Each node is one hour in a day. The crops in the background grow with the mouse.<\/p>\n","protected":false},"author":760,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[106,56,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73931"}],"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\/760"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=73931"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73931\/revisions"}],"predecessor-version":[{"id":73934,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73931\/revisions\/73934"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=73931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=73931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=73931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}