{"id":6728,"date":"2020-10-26T11:08:58","date_gmt":"2020-10-26T15:08:58","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/?p=6728"},"modified":"2020-10-28T09:48:33","modified_gmt":"2020-10-28T13:48:33","slug":"tale-mobiletelematic","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/ayk2andrew-cmu-edu\/10\/26\/tale-mobiletelematic\/","title":{"rendered":"tale-mobiletelematic"},"content":{"rendered":"<h3><strong>S<\/strong><strong>hake2Break\u00a0<\/strong><\/h3>\n<p>( <a href=\"https:\/\/glitch.com\/edit\/#!\/tale-shake2break?path=README.md%3A5%3A169\">code<\/a> | <a href=\"https:\/\/tale-shake2break.glitch.me\/\">app<\/a> )<\/p>\n<p>Shake2Break is a quick competitive phone shaking game that could be used to solve a minor dispute by deciding the rank\/order of people. (2 players required to play)<\/p>\n<p><span style=\"text-decoration: underline\">Project Reflection:<\/span><\/p>\n<p>This project was a nice opportunity for me to learn how to implement client data \/ server data in server.js, as well as how to utilize sensor data from a mobile device. Although I was initially intimidated by the idea of using server.js and mobile sensor data (as I&#8217;ve never used nor seen a code for either of them before), I found implementing server.js and manipulating mobile sensor data very interesting and fun to play with. Since it&#8217;s my first time using those, I wanted to begin with a project that is simple yet to the point: an active synchronous shaking game. The server requires two players synchronously present to begin the game. Once there are two players, the competition begins, where each player can shake their mobile device back and forth to engage with the accelerometer inside the device, specifically the accelerometer data along the z-axis.<\/p>\n<p><span style=\"text-decoration: underline\">Demo Video:<\/span><\/p>\n<p><iframe title=\"Shake2Break\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/SlGx4suct6A?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><span style=\"text-decoration: underline\">Demo Video with Animation Intro:<\/span><\/p>\n<p><iframe title=\"Shake2Break\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/HMAuIB1QjF8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><span style=\"text-decoration: underline\">Game Start:<\/span><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium\" src=\"https:\/\/media.giphy.com\/media\/S5mOlad8NbBbb5sULW\/giphy.gif\" width=\"222\" height=\"480\" \/><\/p>\n<p>Each shake is counted only when the player shook the phone &#8220;hard enough&#8221; (i.e. the acceleration in the z-axis is greater than 70). The circle&#8217;s radius is drawn in the intention of helping the player visualize the acceleration of the phone.<\/p>\n<p>There are 10 rounds of 10 counts to fulfill (hence total of 100 shakes), and the progress of the player is both numerically and visually (filling up the square) represented.<\/p>\n<p>As a player, you could see both your progress (indicated as &#8220;ME&#8221; on the top left corner), as well as that of the opponent&#8217;s.<\/p>\n<p><span style=\"text-decoration: underline\">Mid-game:<\/span><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium\" src=\"https:\/\/media.giphy.com\/media\/0PAuogwNhwBlejEq1E\/giphy.gif\" width=\"222\" height=\"480\" \/><\/p>\n<p>(Shaking each phone very hard&#8230;)<\/p>\n<p><span style=\"text-decoration: underline\">Game End:<\/span><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium\" src=\"https:\/\/media.giphy.com\/media\/PALlJxDDB7kQsc9UEx\/giphy.gif\" width=\"222\" height=\"480\" \/><\/p>\n<p>Once the player reaches 100 shakes, the rank is assigned and shown based on who has reached 100 counts first.<\/p>\n<p><u>Sketches:<\/u><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-6729\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/IMG_3687-310x480.jpg\" alt=\"\" width=\"310\" height=\"480\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/IMG_3687-310x480.jpg 310w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/IMG_3687-661x1024.jpg 661w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/IMG_3687-768x1190.jpg 768w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/IMG_3687-992x1536.jpg 992w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/IMG_3687-1322x2048.jpg 1322w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/IMG_3687-1200x1859.jpg 1200w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/IMG_3687-scaled.jpg 1653w\" sizes=\"(max-width: 310px) 85vw, 310px\" \/><\/p>\n<p>^(initial ideation of the project)<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-6730\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/IMG_3686-336x480.jpg\" alt=\"\" width=\"336\" height=\"480\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/IMG_3686-336x480.jpg 336w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/IMG_3686-716x1024.jpg 716w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/IMG_3686-768x1099.jpg 768w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/IMG_3686-1074x1536.jpg 1074w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/IMG_3686-1432x2048.jpg 1432w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/IMG_3686-1200x1717.jpg 1200w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/10\/IMG_3686-scaled.jpg 1790w\" sizes=\"(max-width: 336px) 85vw, 336px\" \/><\/p>\n<p>^(project sketch)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Shake2Break\u00a0 ( code | app ) Shake2Break is a quick competitive phone shaking game that could be used to solve a minor dispute by deciding the rank\/order of people. (2 players required to play) Project Reflection: This project was a nice opportunity for me to learn how to implement client data \/ server data in &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/ayk2andrew-cmu-edu\/10\/26\/tale-mobiletelematic\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;tale-mobiletelematic&#8221;<\/span><\/a><\/p>\n","protected":false},"author":44,"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\/6728"}],"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\/44"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/comments?post=6728"}],"version-history":[{"count":6,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/posts\/6728\/revisions"}],"predecessor-version":[{"id":6838,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/posts\/6728\/revisions\/6838"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/media?parent=6728"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/categories?post=6728"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/tags?post=6728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}