{"id":538,"date":"2023-11-06T06:54:58","date_gmt":"2023-11-06T06:54:58","guid":{"rendered":"https:\/\/golancourses.net\/fall23\/?page_id=538"},"modified":"2023-11-15T03:43:01","modified_gmt":"2023-11-15T03:43:01","slug":"09-telematic-environment","status":"publish","type":"page","link":"https:\/\/golancourses.net\/fall23\/09-telematic-environment\/","title":{"rendered":"09. Telematic Environment"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-569\" src=\"https:\/\/golancourses.net\/fall23\/wp-content\/uploads\/2023\/11\/horvitz_space_between_us_quarter_282x210-1024x762.png\" alt=\"\" width=\"840\" height=\"625\" srcset=\"https:\/\/golancourses.net\/fall23\/wp-content\/uploads\/2023\/11\/horvitz_space_between_us_quarter_282x210-1024x762.png 1024w, https:\/\/golancourses.net\/fall23\/wp-content\/uploads\/2023\/11\/horvitz_space_between_us_quarter_282x210-300x223.png 300w, https:\/\/golancourses.net\/fall23\/wp-content\/uploads\/2023\/11\/horvitz_space_between_us_quarter_282x210-768x572.png 768w, https:\/\/golancourses.net\/fall23\/wp-content\/uploads\/2023\/11\/horvitz_space_between_us_quarter_282x210-1536x1143.png 1536w, https:\/\/golancourses.net\/fall23\/wp-content\/uploads\/2023\/11\/horvitz_space_between_us_quarter_282x210-1200x893.png 1200w, https:\/\/golancourses.net\/fall23\/wp-content\/uploads\/2023\/11\/horvitz_space_between_us_quarter_282x210.png 1800w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/p>\n<p><strong><em>This project is due Monday, 11\/20 at the beginning of class. I estimate it will take 15-20 hours.\u00a0<\/em><\/strong><\/p>\n<p>A significant thread in creative coding practices involves inventing a new modality of communication, as the core proposition of a creative work. In other words, certain artworks exist to ask the question: \u201cWhat would it be like if people could communicate (or sense one another) in such-and-such new way?\u201d For example:<\/p>\n<ul>\n<li>Rafael Lozano-Hemmer\u2019s installation <em>The Trace<\/em> (1995) asks, \u201cwhat if people in different locations could feel each others\u2019 presence, by means of intersecting beams of light?\u201d<\/li>\n<li>Jingwen Zhu\u2019s experiment <em>Real Me<\/em> (2015) asks, \u201cwhat if text-based chat could also communicate physiological indicators of a user\u2019s emotional stress, such as leg jiggling?\u201d<\/li>\n<li>CMU School of Art student Maddy Varner\u2019s experimental chatroom, <em>Pasties<\/em> (2015, created for 60-212), asks, \u201cwhat if people exclusively communicated by copy-pasting?,\u201d and her expressive Poopchat Pro (2015, also for 60-212) creates a world in which people communicate by leaving virtual poops.<\/li>\n<\/ul>\n<p>These systems not only ask a question, but provide a provisional answer in the form of working, open-ended prototypes that people can actually experience and \u201cuse\u201d for themselves. In so doing, these works question and expand the nature of communication itself.<\/p>\n<hr \/>\n<h3>Assignment<\/h3>\n<p><strong>Develop a networked environment that allows two or more people to communicate or collaborate with each other in an interesting way.<\/strong><\/p>\n<p>Your system might allow people to creatively collaborate through a novel drawing or construction activity. It could facilitate language-based interactions with spoken or typed words. It could convey nonverbal aspects of co-presence, such as gestures, in order to explore what Heidegger called <em>Dasein<\/em>, or \u201cbeing there together\u201d. A networked game could also be a totally legitimate response to the assignment; note, however, that the emphasis of the challenge in this project is on communication and\/or creative collaboration.<\/p>\n<hr \/>\n<h3>Considerations<\/h3>\n<p>You should be able to answer questions about how your project supports a new mode of communication, collaboration, or other interpersonal social experience. Think about design choices like:<\/p>\n<ul>\n<li><strong>Passive or active:<\/strong> Are the users aware that they are participating? How much attention is required?<\/li>\n<li><strong>Asynchronous vs. synchronous:<\/strong> Do the two people collaborate simultaneously, or at different times?<\/li>\n<li><strong>Equal vs. complementary roles:<\/strong> Are both participants equal? Or do they have different roles?<\/li>\n<li><strong>Anonymity and\/or intimacy:<\/strong> Are the participants identified, or anonymous? Do they know each other?<\/li>\n<li><strong>Local vs. remote:<\/strong> Is your project for people in the same room, or for people far away from each other?<\/li>\n<li><strong>Half-duplex vs. full duplex:<\/strong> Do your users take turns? Or can they communicate simultaneously?<\/li>\n<li><strong>Feedback:<\/strong> are new actions constrained or shaped by the users&#8217; previous choices?<\/li>\n<\/ul>\n<hr \/>\n<h3>Requirements<\/h3>\n<p>This project is due in several phases:<\/p>\n<ol>\n<li><strong>By Wednesday, 11\/8: Get a Buddy.<\/strong> Identify a \u201cBuddy\u201d in the course, and make at least one appointment to work together outside of class. You and your Buddy may choose to work on the same project together, or you may work on your own individual projects\u2014either is fine. The purpose of your Buddy is to have someone to discuss your concept with, to have someone to help test your project, and to have someone to provide honest feedback about your project before it\u2019s finished.<\/li>\n<li><strong>By Monday, 11\/13.<\/strong>\u00a0<strong>Check out Glitch.<\/strong>\u00a0Make an account on\u00a0<a href=\"https:\/\/glitch.com\/\">Glitch.com<\/a>. Browse the \u201c<a href=\"https:\/\/glitch.com\/@glitch\/building-blocks\">building blocks<\/a>\u201d that Glitch offers for easily building web applications. Check out one of the Telematic Code Templates below (at the bottom of this page); Explore their file structure. Try forking a project and making some trivial modifications to it. Make sure you understand how to edit a project\u2019s code and how to view it running live. If you would like to watch some brief \u201cGetting Started with Glitch\u201d videos, you can try <a href=\"https:\/\/www.youtube.com\/watch?v=BFN_h5bK_oc\">this<\/a>\u00a0or\u00a0<a href=\"https:\/\/www.youtube.com\/watch?v=Rz886HkV1j4&amp;t=50s\">this<\/a>.<\/li>\n<li><strong>For Wednesday, 11\/15:<\/strong> <strong>Check-In! Have something ready for user-testing.<\/strong> Share it with your Buddy for their feedback.<\/li>\n<li><strong>For Monday, 11\/20:<\/strong>\u00a0<strong>Deliverable due<\/strong> for critique &amp; group discussion.<\/li>\n<\/ol>\n<hr \/>\n<h3>Deliverables<\/h3>\n<p>I estimate this project will take you 15-20 hours.<\/p>\n<ul>\n<li><strong>Sketch<\/strong> first on paper. Keep your concept simple. Now make it simpler.<\/li>\n<li><strong>Develop<\/strong> your project at Glitch.com. Feel free to study\/adapt one of the templates below.<\/li>\n<li><strong>Test<\/strong> your project with a Buddy. Collect their feedback.<\/li>\n<li><strong>Create<\/strong> a post in the #telematic channel of Discord, to document your project.<\/li>\n<li><strong>Summarize<\/strong> your project in a single brief sentence. How would you describe it in just a few words?<\/li>\n<li><strong>Write<\/strong> a paragraph or two (~100-150 words), reflecting on your process, and evaluating your product.<\/li>\n<li>Also in your Discord post, using the list of &#8220;considerations&#8221; above, write a couple of sentences to <strong>Categorize<\/strong> your project. (Is it asynchronous, half-duplex, passive, anonymous, etc.?)<\/li>\n<li><strong>Document<\/strong> your project with a well-considered <strong>video<\/strong>, perhaps 20-40 seconds long. <strong>Narrate<\/strong> your video to explain what your project is, and how it\u2019s operated, and\/or what it does. Your video should show a person (or someone\u2019s hands) using your app, and should concisely and legibly demonstrate the user experience of your project. You seriously need practice documenting your work, people. Think about how your (working) software can be used as a prop for compelling video storytelling. Where does your video take place \u2014 are your two participants in their beds at night? Are they waiting at a bus stop? <strong>Embed<\/strong> this video in your post.<\/li>\n<li><strong>Embed<\/strong> an animated GIF or screenshot image of your project (in addition to the video) showing what the interaction is like.<\/li>\n<li><strong>Link<\/strong> to your project URL on Glitch.com, in your Discord post.<\/li>\n<\/ul>\n<p><strong>What&#8217;s up with this Android Phone?\u00a0<\/strong><\/p>\n<ul>\n<li>You&#8217;ve been loaned an Android Pixel 4 from the STUDIO for Creative Inquiry. The password is 1234.<\/li>\n<li>The Android phone allows you to the opportunity to make <em>mobile<\/em> software that (for example) knows your location, uses multitouch, uses the tilt accelerometer or other sensors, etcetera.<\/li>\n<li>You aren&#8217;t REQUIRED to use this phone. If you prefer to make software for laptops or tablets, that&#8217;s up to you. That could make sense if you&#8217;re making a chat app that uses a keyboard, for example.<\/li>\n<li>The phones must be returned by 11\/30.<\/li>\n<\/ul>\n<p><strong>Hey, are you stuck for ideas?<\/strong> <em>Relax<\/em>, it\u2019s OK. Here are some starter concepts:<\/p>\n<ul>\n<li><em>make a collaborative drawing program with a \u201ctwist\u201d<\/em><\/li>\n<li><em>make a simple two person-game (e.g. tic-tac-toe)<\/em><\/li>\n<li><em>make a shared construction toy, like an exquisite corpse<\/em><\/li>\n<li><em>make an emoji-based chat tool<\/em><\/li>\n<\/ul>\n<hr \/>\n<h3>Official Class Templates on Glitch.com<\/h3>\n<p><em>These templates are tested and updated as of November 2023:<\/em><\/p>\n<ul>\n<li><em>p5-empty-template<\/em> (2023; no networking): <a href=\"https:\/\/glitch.com\/~p5-empty-template\">main<\/a> \u2022 <a href=\"https:\/\/glitch.com\/edit\/#!\/p5-empty-template?path=README.md%3A1%3A0\">code<\/a> \u2022 <a href=\"https:\/\/p5-empty-template.glitch.me\/\">app<\/a><\/li>\n<li><em>networked-touches<\/em> (2-person, 2023): <a href=\"https:\/\/glitch.com\/~networked-touches\">main<\/a> \u2022 <a href=\"https:\/\/glitch.com\/edit\/#!\/networked-touches?path=README.md%3A1%3A0\">code<\/a> \u2022 <a href=\"https:\/\/networked-touches.glitch.me\/\">app<\/a><\/li>\n<li><em>networked-touches-rooms<\/em> (2023): <a href=\"https:\/\/glitch.com\/~networked-touches-rooms\">main<\/a> \u2022 <a href=\"https:\/\/glitch.com\/edit\/#!\/networked-touches-rooms?path=public%2Fsketch.js%3A86%3A0\">code<\/a> \u2022 <a href=\"https:\/\/networked-touches-rooms.glitch.me\/?piff\">app<\/a><\/li>\n<li><em>p5-collaborative-sentence-2023<\/em>: <a href=\"https:\/\/glitch.com\/edit\/#!\/p5-collaborative-sentence-2023?path=public%2Fsketch.js%3A61%3A19\">code<\/a> \u2022 <a href=\"https:\/\/p5-collaborative-sentence-2023.glitch.me\/\">app<\/a><\/li>\n<li><em>sensors-duo-2023<\/em>: <a href=\"https:\/\/glitch.com\/~sensors-duo-2023\">main<\/a> \u2022 <a href=\"https:\/\/glitch.com\/edit\/#!\/sensors-duo-2023?path=public%2Fsketch.js%3A308%3A1\">code<\/a> \u2022 <a href=\"https:\/\/sensors-duo-2023.glitch.me\/\">app<\/a><\/li>\n<li><em>silly-click-highscore<\/em> (2023): <a href=\"https:\/\/glitch.com\/~silly-click-highscore\">main<\/a> \u2022 <a href=\"https:\/\/glitch.com\/edit\/#!\/silly-click-highscore?path=public%2Fsketch.js%3A44%3A0\">code<\/a> \u2022 <a href=\"https:\/\/silly-click-highscore.glitch.me\/\">app<\/a><\/li>\n<li><em>persistent-highscore<\/em> (2023): <a href=\"https:\/\/glitch.com\/edit\/#!\/persistent-highscore?path=public%2Fsketch.js%3A44%3A0\">code<\/a> \u2022 <a href=\"https:\/\/persistent-highscore.glitch.me\/\">app<\/a><\/li>\n<li><em>p5js-multiplayer-drawing-2023<\/em>: <a href=\"https:\/\/glitch.com\/~p5js-multiplayer-drawing-2023\">main<\/a> \u2022 <a href=\"https:\/\/glitch.com\/edit\/#!\/p5js-multiplayer-drawing-2023?path=public%2Fsketch.js%3A66%3A16\">code<\/a> \u2022 <a href=\"https:\/\/p5js-multiplayer-drawing-2023.glitch.me\/\">app<\/a><\/li>\n<li><em>networked-ml5-hands-2023<\/em> (not mobile-friendly): <a href=\"https:\/\/glitch.com\/~networked-ml5-hands-2023\">main<\/a> \u2022 <a href=\"https:\/\/glitch.com\/edit\/#!\/networked-ml5-hands-2023?path=public%2Fsketch.js%3A15%3A16\">code<\/a> \u2022 <a href=\"https:\/\/networked-ml5-hands-2023.glitch.me\/\">app<\/a><\/li>\n<\/ul>\n<hr \/>\n<p><em>Your mileage may vary with the code below.\u00a0<\/em><\/p>\n<h5>Char Stiles\u2019 Telematic Glitch Templates:<\/h5>\n<p><em>These templates are known to be working as of 2022, but may use older libraries.\u00a0<\/em><\/p>\n<ul>\n<li><strong>Bare socket.io demo:<\/strong><em> <a href=\"https:\/\/glitch.com\/edit\/#!\/cmuems-bare-socketio\">code<\/a><\/em>\u00a0\u2705<\/li>\n<li><strong>Simple DOM Text Chatroom<\/strong>:\u00a0<a href=\"https:\/\/simple-p5dom-chatroom-2023.glitch.me\/\">app<\/a>\u00a0\u2022\u00a0<a href=\"https:\/\/glitch.com\/edit\/#!\/simple-p5dom-chatroom-2023?path=public%2Fsketch.js%3A80%3A19\">code<\/a>\u00a0\u2705<\/li>\n<li><strong>Simple Agar.io Game<\/strong>:\u00a0<a href=\"http:\/\/cmuems-agario.glitch.me\/\">app<\/a>\u00a0\u2022\u00a0<a href=\"https:\/\/glitch.com\/edit\/#!\/cmuems-agario\">code<\/a>\u00a0\u2705<\/li>\n<li><strong>Persistent High Score<\/strong>\u00a0(lowdb):\u00a0<a href=\"https:\/\/iacd-highscore.glitch.me\/\">app<\/a>\u00a0\u2022\u00a0<a href=\"https:\/\/glitch.com\/edit\/#!\/iacd-highscore\">code<\/a>\u00a0\u2705<\/li>\n<li><strong>Persistent Drawing Canvas<\/strong>\u00a0(SQLite3):\u00a0<a href=\"https:\/\/persistent-drawing-canvas-p5-sqlite-2022.glitch.me\/\">app<\/a>\u00a0\u2022\u00a0<a href=\"https:\/\/glitch.com\/edit\/#!\/persistent-drawing-canvas-p5-sqlite-2022\">code<\/a>\u00a0\u2705<\/li>\n<li><strong>Centroid Drawing App<\/strong>:\u00a0<a href=\"https:\/\/collective-centroid-drawing-app-2022.glitch.me\/\">app<\/a>\u00a0\u2022\u00a0<a href=\"https:\/\/glitch.com\/edit\/#!\/collective-centroid-drawing-app-2022\">code<\/a>\u00a0\u2705<\/li>\n<\/ul>\n<h5>Lingdong Huang\u2019s Telematic\u00a0<em>Mobile<\/em>\u00a0Glitch Templates:<\/h5>\n<p><em>These templates are known to be working as of 2022, but may use older libraries.<\/em><\/p>\n<ul>\n<li><strong>sensors-duo<\/strong>: Sharing sensor data between 2 mobile devices visiting the page.\u00a0<a href=\"https:\/\/glitch.com\/edit\/#!\/sensors-duo\" rel=\"nofollow\">Code<\/a>\u00a0\u2022\u00a0<a href=\"https:\/\/sensors-duo.glitch.me\/\" rel=\"nofollow\">App<\/a>\u00a0\u2022\u00a0<a href=\"https:\/\/sensors-duo.glitch.me\/\">https:\/\/sensors-duo.glitch.me\/<\/a>\u00a0\u2705<\/li>\n<li><strong>sensors-chorus<\/strong>: Sharing sensor data between all mobile devices visiting the page.\u00a0<a href=\"https:\/\/glitch.com\/edit\/#!\/sensors-chorus\" rel=\"nofollow\">Code<\/a>\u00a0\u2022\u00a0<a href=\"https:\/\/sensors-chorus.glitch.me\/\" rel=\"nofollow\">App<\/a>\u00a0\u2022\u00a0<a href=\"https:\/\/sensors-chorus.glitch.me\/\">https:\/\/sensors-chorus.glitch.me\/<\/a>\u00a0\u2705<\/li>\n<li><strong>sensors-rooms<\/strong>: Sharing sensor data between mobile devices in the same virtual \u201croom\u201d, distinguished by the URL query.\u00a0<a href=\"https:\/\/glitch.com\/edit\/#!\/sensors-rooms\" rel=\"nofollow\">Code<\/a>\u00a0\u2022\u00a0<a href=\"https:\/\/sensors-rooms.glitch.me\/\" rel=\"nofollow\">App<\/a>\u00a0\u2022\u00a0<a href=\"https:\/\/sensors-rooms.glitch.me\/\">https:\/\/sensors-rooms.glitch.me\/<\/a>\u00a0\u2705<\/li>\n<\/ul>\n<h5><a id=\"user-content-server-data-templates\" class=\"anchor\" href=\"https:\/\/github.com\/CreativeInquiry\/LingdongProjectIndex#server-data-templates\" aria-hidden=\"true\"><\/a>Lingdong\u2019s Glitch Server Data Templates and other Reusable Backends<\/h5>\n<p><em>These templates are known to be working as of 2022, but may use older libraries.<\/em><\/p>\n<ul>\n<li><strong>Handpose-Facemesh Demos<\/strong>:\u00a0<a href=\"https:\/\/github.com\/LingDong-\/handpose-facemesh-demos\">networked interactions with hands and faces<\/a>. \u2705<\/li>\n<li><strong>2d-chat<\/strong>: A public chatroom where users can add text anywhere on a canvas.\u00a0<a href=\"https:\/\/glitch.com\/edit\/#!\/2d-chat\" rel=\"nofollow\">Code<\/a>\u00a0\u2022\u00a0<a href=\"https:\/\/2d-chat.glitch.me\/\" rel=\"nofollow\">App<\/a>\u00a0\u2705<\/li>\n<li><strong>piano-rooms<\/strong>: A multiplayer multitouch piano using Tone.js.\u00a0<a href=\"https:\/\/glitch.com\/edit\/#!\/piano-rooms\" rel=\"nofollow\">Code<\/a>\u00a0\u2022\u00a0<a href=\"https:\/\/piano-rooms.glitch.me\/\" rel=\"nofollow\">App<\/a>\u00a0\u2705<\/li>\n<li><strong>postnget<\/strong>: SQLite database responding HTML POST and GET methods allowing user to store, share and retrieve an arbitrary piece of data with a short hash as the key.\u00a0<a href=\"https:\/\/glitch.com\/edit\/#!\/postnget\" rel=\"nofollow\">Code<\/a>\u00a0\u2022\u00a0<a href=\"https:\/\/postnget.glitch.me\/\" rel=\"nofollow\">App<\/a><\/li>\n<li><strong>hiscore<\/strong>: A shared highscore server for arbitrary games using a SQLite database responding to URL queries.\u00a0<a href=\"https:\/\/glitch.com\/edit\/#!\/hiscore\" rel=\"nofollow\">Code<\/a>\u00a0\u2022\u00a0<a href=\"https:\/\/hiscore.glitch.me\/\" rel=\"nofollow\">App<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This project is due Monday, 11\/20 at the beginning of class. I estimate it will take 15-20 hours.\u00a0 A significant thread in creative coding practices involves inventing a new modality of communication, as the core proposition of a creative work. In other words, certain artworks exist to ask the question: \u201cWhat would it be like &hellip; <a href=\"https:\/\/golancourses.net\/fall23\/09-telematic-environment\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;09. Telematic Environment&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-538","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/golancourses.net\/fall23\/wp-json\/wp\/v2\/pages\/538","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/golancourses.net\/fall23\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/golancourses.net\/fall23\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/golancourses.net\/fall23\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/golancourses.net\/fall23\/wp-json\/wp\/v2\/comments?post=538"}],"version-history":[{"count":22,"href":"https:\/\/golancourses.net\/fall23\/wp-json\/wp\/v2\/pages\/538\/revisions"}],"predecessor-version":[{"id":617,"href":"https:\/\/golancourses.net\/fall23\/wp-json\/wp\/v2\/pages\/538\/revisions\/617"}],"wp:attachment":[{"href":"https:\/\/golancourses.net\/fall23\/wp-json\/wp\/v2\/media?parent=538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}