{"id":2338,"date":"2022-04-28T16:00:13","date_gmt":"2022-04-28T20:00:13","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/?p=2338"},"modified":"2022-04-28T16:00:13","modified_gmt":"2022-04-28T20:00:13","slug":"sneeze-finaldocumentation","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/sneeze\/04\/28\/sneeze-finaldocumentation\/","title":{"rendered":"Sneeze-FinalDocumentation"},"content":{"rendered":"<p>I spent my time catching up on past projects, and I worked on the telematic project and created a drawing website that has rooms. These rooms would be used as prompts for people around the world to draw together from a Twitter bot account that would present a new prompt everyday. The Twitter account is @CollabDrawABCs and you can view it\u00a0<a href=\"https:\/\/twitter.com\/CollabDrawABCs\">here<\/a>. Also, here is my <a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/sneeze\/04\/26\/sneeze-finalphase4\/\">blog post<\/a> about the deliverable.<\/p>\n<p>The way I achieved merging a drawing app with an app that has rooms was by looking at template code. I used the <a href=\"https:\/\/glitch.com\/edit\/#!\/persistent-drawing-canvas-p5-sqlite-2022\">Persistent drawing app code<\/a> as well as the <a href=\"https:\/\/glitch.com\/edit\/#!\/piano-rooms\">Piano rooms code<\/a> as the basis of my project.<\/p>\n<p>I had some trouble in the beginning for going about merging rooms into the drawing app because the drawing app used a database to store the drawings. This made creating rooms different from the Piano rooms code, and made me understand lowdb and socket.io better.<\/p>\n<p>I initially thought about having a roomID be passed as arguments into functions for the server to understand and have the server store the data separately, but that ended up not working. After doing a couple of other approaches, I finally understood what needed to be done to get this functioning.\u00a0\u00a0<img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-2340\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-28-at-3.44.37-PM-640x464.png\" alt=\"\" width=\"640\" height=\"464\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-28-at-3.44.37-PM-640x464.png 640w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-28-at-3.44.37-PM-1024x742.png 1024w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-28-at-3.44.37-PM-768x557.png 768w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-28-at-3.44.37-PM.png 1104w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/p>\n<p>This is where packages to the server get packaged. Each package has a roomID in the array and gets serialized and unserialized together with the line data and color data. This package then gets stored in the database by the server. <img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-2339\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-28-at-3.45.16-PM-640x325.png\" alt=\"\" width=\"640\" height=\"325\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-28-at-3.45.16-PM-640x325.png 640w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-28-at-3.45.16-PM-768x390.png 768w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-28-at-3.45.16-PM.png 996w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/p>\n<p>This is on the client end. It receives a package and removes the last two elements which are room and color before creating the lines.<\/p>\n<p>These are the two main things I changed. There were other things that needed tweaking like drawings that are not stored and are being drawn live and changing clients to store roomID as well.<\/p>\n<p>I also created a twitter bot to tweet out prompts each day. I used cheapbotsdonequick, which basically handles everything for me.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-2341\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-28-at-3.57.40-PM-640x353.png\" alt=\"\" width=\"640\" height=\"353\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-28-at-3.57.40-PM-640x353.png 640w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-28-at-3.57.40-PM-1024x565.png 1024w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-28-at-3.57.40-PM-768x424.png 768w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-28-at-3.57.40-PM-1536x848.png 1536w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-28-at-3.57.40-PM-2048x1130.png 2048w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-28-at-3.57.40-PM-1200x662.png 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/p>\n<p>It uses Tracery which basically allows you to replace a variable in a base line of text with random other pieces of text. After that I set it to tweet once everyday.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I spent my time catching up on past projects, and I worked on the telematic project and created a drawing website that has rooms. These rooms would be used as prompts for people around the world to draw together from a Twitter bot account that would present a new prompt everyday. The Twitter account is &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/sneeze\/04\/28\/sneeze-finaldocumentation\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Sneeze-FinalDocumentation&#8221;<\/span><\/a><\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[34],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/posts\/2338"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/comments?post=2338"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/posts\/2338\/revisions"}],"predecessor-version":[{"id":2342,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/posts\/2338\/revisions\/2342"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/media?parent=2338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/categories?post=2338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/tags?post=2338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}