{"id":6747,"date":"2020-10-26T13:16:44","date_gmt":"2020-10-26T17:16:44","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/?p=6747"},"modified":"2020-10-27T09:13:22","modified_gmt":"2020-10-27T13:13:22","slug":"lampsauce-mobiletelematic","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/shivanapandrew-cmu-edu\/10\/26\/lampsauce-mobiletelematic\/","title":{"rendered":"lampsauce-mobiletelematic"},"content":{"rendered":"<h1 style=\"text-align: center\">TRON RACER<\/h1>\n<p><iframe title=\"TRON RACER\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/4Idj0JXZ530?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>TRON RACER is a networked game in which players can leave trails as obstacles which deduct opponents&#8217; lives. ( <a href=\"https:\/\/tron-racer.glitch.me\/\" target=\"_blank\" rel=\"noopener noreferrer\">APP<\/a> | <a href=\"https:\/\/glitch.com\/edit\/#!\/tron-racer\" target=\"_blank\" rel=\"noopener noreferrer\">CODE <\/a>)<\/p>\n<pre>TRON RACER was definitely a challenging project to complete. I was inspired by the light bikes (<a href=\"https:\/\/youtu.be\/-3ODe9mqoDE\" target=\"_blank\" rel=\"noopener noreferrer\">original<\/a>, <a href=\"https:\/\/youtu.be\/SqSuRdkglxM\" target=\"_blank\" rel=\"noopener noreferrer\">legacy<\/a>) from <a href=\"https:\/\/en.wikipedia.org\/wiki\/Tron\" target=\"_blank\" rel=\"noopener noreferrer\">TRON<\/a>. From getting the interaction of tilting to behave correctly, to making the global and client view's look aesthetic and accurate, there were plenty of programatic roadblocks. Since it is a game, the interaction is active and synchronous. However, establishing equal synchronicity was quite interesting because certain devices have higher frame rates, which allows more distance to be covered in the same amount of time as a device with a slower frame rate. To compensate this, I learned how to update the clients based on time rather than based on frame rates. As it is now, I enjoy the aesthetic of playing TRON RACER, but there are still some bugs with some client devices appearing too zoomed in.<\/pre>\n<h3 style=\"text-align: center\">Documentation<\/h3>\n<figure id=\"attachment_6751\" aria-describedby=\"caption-attachment-6751\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/IMG_E71EE380E525-1.jpeg\"><img loading=\"lazy\" class=\"wp-image-6751 size-medium\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/IMG_E71EE380E525-1-640x352.jpeg\" alt=\"\" width=\"640\" height=\"352\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/IMG_E71EE380E525-1-640x352.jpeg 640w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/IMG_E71EE380E525-1-1024x564.jpeg 1024w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/IMG_E71EE380E525-1-768x423.jpeg 768w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/IMG_E71EE380E525-1-1536x846.jpeg 1536w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/IMG_E71EE380E525-1-1200x661.jpeg 1200w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/IMG_E71EE380E525-1.jpeg 2041w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/a><figcaption id=\"caption-attachment-6751\" class=\"wp-caption-text\">Initial Sketches<\/figcaption><\/figure>\n<figure id=\"attachment_6748\" aria-describedby=\"caption-attachment-6748\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" class=\"wp-image-6748 size-full\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/Screen-Recording-2020-10-24-at-2.11.32-AM.gif\" alt=\"\" width=\"640\" height=\"568\" \/><figcaption id=\"caption-attachment-6748\" class=\"wp-caption-text\">Prototype of describing phone orientation as motion<\/figcaption><\/figure>\n<figure id=\"attachment_6749\" aria-describedby=\"caption-attachment-6749\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" class=\"wp-image-6749 size-full\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/Screen-Recording-2020-10-25-at-12.17.54-PM.gif\" alt=\"\" width=\"640\" height=\"568\" \/><figcaption id=\"caption-attachment-6749\" class=\"wp-caption-text\">Global View.<\/figcaption><\/figure>\n<figure id=\"attachment_6750\" aria-describedby=\"caption-attachment-6750\" style=\"width: 585px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" class=\"wp-image-6750\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/Untitled.gif\" alt=\"\" width=\"585\" height=\"329\" \/><figcaption id=\"caption-attachment-6750\" class=\"wp-caption-text\">Client View<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>TRON RACER TRON RACER is a networked game in which players can leave trails as obstacles which deduct opponents&#8217; lives. ( APP | CODE ) TRON RACER was definitely a challenging project to complete. I was inspired by the light bikes (original, legacy) from TRON. From getting the interaction of tilting to behave correctly, to &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/shivanapandrew-cmu-edu\/10\/26\/lampsauce-mobiletelematic\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;lampsauce-mobiletelematic&#8221;<\/span><\/a><\/p>\n","protected":false},"author":56,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[60],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/posts\/6747"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/users\/56"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/comments?post=6747"}],"version-history":[{"count":6,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/posts\/6747\/revisions"}],"predecessor-version":[{"id":6786,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/posts\/6747\/revisions\/6786"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/media?parent=6747"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/categories?post=6747"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/tags?post=6747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}