{"id":74214,"date":"2022-10-09T23:21:06","date_gmt":"2022-10-10T03:21:06","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=74214"},"modified":"2022-10-09T23:26:20","modified_gmt":"2022-10-10T03:26:20","slug":"pacman-clock","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/09\/pacman-clock\/","title":{"rendered":"Pacman 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>For this assignment, I thought it would be cool to build off last week&rsquo;s wallpaper and make my Pacman a dynamic clock. It is supposed to be read left to right, then down. So the two horizontal Pacmans are the hour and minute (top and bottom) and the vertical Pacman is the seconds.  <\/p>\n\n\n\n<p><a class=\"p5_sketch_link\" data-width=\"450\" data-height=\"590\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-101.js\">clock_asu<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"450\" height=\"590\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ Your name: Ashley Su\n\/\/ Your andrew ID: ashleysu\n\/\/ Your section (C):  \n\nfunction setup() {\n  createCanvas(450,590);\n}\n\nfunction dotGrid() {\n  var PADDING = 20;\n  var ROWS =19;\n  var COLUMNS =13;\n  var CELL_COLOR = 'Blue'\n\n\n  for (var col=0;col&lt;COLUMNS;col++) {\n    for (var row=0;row&lt;ROWS;row++) {\n      var left = PADDING+(col*34);\n      var top = PADDING+(row*34.3);\n      fill(random(255),random(255),random(255))\n      circle(left,top,10);\n    }\n  }\n}\n\nfunction blueBaracades() {\n\n  var PADDING = 40;\n  var ROWS = 4;\n  var COLUMNS = 3;\n  var CELL_SIZE = 140;\n  var CELL_COLOR = 'Blue'\n\n\n  fill(0);\n  stroke('Blue')\n  strokeWeight(3);\n\n\n  for (var col=0;col&lt;COLUMNS;col++) {\n    for (var row=0;row&lt;ROWS;row++) {\n      var left = PADDING+(col*CELL_SIZE);\n      var top = PADDING+(row*CELL_SIZE);\n      var size = CELL_SIZE - 50;\n      rect(left,top,size,size);\n    }\n  }\n}\n\nfunction pacmanH(h){\n  \n  fill('yellow');\n  noStroke();\n\n    push()                                                \/\/hour\n    translate(10,height\/3.2);\n    rotate(radians(310));\n    arc(h*10,h*10,35,35,radians(80),radians(35)\/2);        \/\/ increments by *10 pixels to the right\n    pop();\n}\n\nfunction pacmanM(m){\n\n  fill('yellow');\n  noStroke();\n\n    push();                                              \/\/ minute\n    translate(width,height\/1.33);\n    rotate(radians(140));\n    arc(m*4,m*4,35,35,radians(80),radians(20)\/2);        \/\/ increments by *4 pixels to the left\n    pop();\n}\n\nfunction pacmanS(s){\n\n  fill('yellow');\n  noStroke();\n\n    push();                                                \/\/ second \n    translate(2*width\/3-7,height\/26);\n    rotate(radians(45));\n    arc(s*6,s*6,35,35,radians(80),radians(20)\/2);           \/\/ increments by *6 pixels down\n    pop();\n\n}\n\n\n\nfunction draw(){\n  background('Black');\n  dotGrid();\n  blueBaracades();\n\nvar s = second();\nvar h = hour();\nvar m = minute();\n\n  pacmanH(h);\n  pacmanM(m);\n  pacmanS(s);\n\n\n}<\/code><\/pre><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>For this assignment, I thought it would be cool to build off last week&rsquo;s wallpaper and make my Pacman a dynamic clock. It is supposed to be read left to right, then down. So the two horizontal Pacmans are the hour and minute (top and bottom) and the vertical Pacman is the seconds. clock_asu \/\/ &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/09\/pacman-clock\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Pacman Clock&#8221;<\/span><\/a><\/p>\n","protected":false},"author":761,"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\/74214"}],"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\/761"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=74214"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74214\/revisions"}],"predecessor-version":[{"id":74225,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/74214\/revisions\/74225"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=74214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=74214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=74214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}