09. Telematic Environment

This project is due Monday, 11/20 at the beginning of class. I estimate it will take 15-20 hours. 

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: “What would it be like if people could communicate (or sense one another) in such-and-such new way?” For example:

  • Rafael Lozano-Hemmer’s installation The Trace (1995) asks, “what if people in different locations could feel each others’ presence, by means of intersecting beams of light?”
  • Jingwen Zhu’s experiment Real Me (2015) asks, “what if text-based chat could also communicate physiological indicators of a user’s emotional stress, such as leg jiggling?”
  • CMU School of Art student Maddy Varner’s experimental chatroom, Pasties (2015, created for 60-212), asks, “what if people exclusively communicated by copy-pasting?,” and her expressive Poopchat Pro (2015, also for 60-212) creates a world in which people communicate by leaving virtual poops.

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 “use” for themselves. In so doing, these works question and expand the nature of communication itself.

Assignment

Develop a networked environment that allows two or more people to communicate or collaborate with each other in an interesting way.

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 Dasein, or “being there together”. 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.

Considerations

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:

  • Passive or active: Are the users aware that they are participating? How much attention is required?
  • Asynchronous vs. synchronous: Do the two people collaborate simultaneously, or at different times?
  • Equal vs. complementary roles: Are both participants equal? Or do they have different roles?
  • Anonymity and/or intimacy: Are the participants identified, or anonymous? Do they know each other?
  • Local vs. remote: Is your project for people in the same room, or for people far away from each other?
  • Half-duplex vs. full duplex: Do your users take turns? Or can they communicate simultaneously?
  • Feedback: are new actions constrained or shaped by the users’ previous choices?

Requirements

This project is due in several phases:

  1. By Wednesday, 11/8: Get a Buddy. Identify a “Buddy” 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—either 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’s finished.
  2. By Monday, 11/13. Check out Glitch. Make an account on Glitch.com. Browse the “building blocks” 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’s code and how to view it running live. If you would like to watch some brief “Getting Started with Glitch” videos, you can try this or this.
  3. For Wednesday, 11/15: Check-In! Have something ready for user-testing. Share it with your Buddy for their feedback.
  4. For Monday, 11/20: Deliverable due for critique & group discussion.

Deliverables

I estimate this project will take you 15-20 hours.

  • Sketch first on paper. Keep your concept simple. Now make it simpler.
  • Develop your project at Glitch.com. Feel free to study/adapt one of the templates below.
  • Test your project with a Buddy. Collect their feedback.
  • Create a post in the #telematic channel of Discord, to document your project.
  • Summarize your project in a single brief sentence. How would you describe it in just a few words?
  • Write a paragraph or two (~100-150 words), reflecting on your process, and evaluating your product.
  • Also in your Discord post, using the list of “considerations” above, write a couple of sentences to Categorize your project. (Is it asynchronous, half-duplex, passive, anonymous, etc.?)
  • Document your project with a well-considered video, perhaps 20-40 seconds long. Narrate your video to explain what your project is, and how it’s operated, and/or what it does. Your video should show a person (or someone’s 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 — are your two participants in their beds at night? Are they waiting at a bus stop? Embed this video in your post.
  • Embed an animated GIF or screenshot image of your project (in addition to the video) showing what the interaction is like.
  • Link to your project URL on Glitch.com, in your Discord post.

What’s up with this Android Phone? 

  • You’ve been loaned an Android Pixel 4 from the STUDIO for Creative Inquiry. The password is 1234.
  • The Android phone allows you to the opportunity to make mobile software that (for example) knows your location, uses multitouch, uses the tilt accelerometer or other sensors, etcetera.
  • You aren’t REQUIRED to use this phone. If you prefer to make software for laptops or tablets, that’s up to you. That could make sense if you’re making a chat app that uses a keyboard, for example.
  • The phones must be returned by 11/30.

Hey, are you stuck for ideas? Relax, it’s OK. Here are some starter concepts:

  • make a collaborative drawing program with a “twist”
  • make a simple two person-game (e.g. tic-tac-toe)
  • make a shared construction toy, like an exquisite corpse
  • make an emoji-based chat tool

Official Class Templates on Glitch.com

These templates are tested and updated as of November 2023:

  • p5-empty-template (2023; no networking): main • code • app
  • networked-touches (2-person, 2023): main • code • app
  • networked-touches-rooms (2023): main • code • app
  • p5-collaborative-sentence-2023: code • app
  • sensors-duo-2023: main • code • app
  • silly-click-highscore (2023): main • code • app
  • persistent-highscore (2023): code • app
  • p5js-multiplayer-drawing-2023: main • code • app
  • networked-ml5-hands-2023 (not mobile-friendly): main • code • app

Your mileage may vary with the code below. 

Char Stiles’ Telematic Glitch Templates:

These templates are known to be working as of 2022, but may use older libraries. 

  • Bare socket.io demo: code ✅
  • Simple DOM Text Chatroom: app • code ✅
  • Simple Agar.io Game: app • code ✅
  • Persistent High Score (lowdb): app • code ✅
  • Persistent Drawing Canvas (SQLite3): app • code ✅
  • Centroid Drawing App: app • code ✅
Lingdong Huang’s Telematic Mobile Glitch Templates:

These templates are known to be working as of 2022, but may use older libraries.

Lingdong’s Glitch Server Data Templates and other Reusable Backends

These templates are known to be working as of 2022, but may use older libraries.

  • Handpose-Facemesh Demos: networked interactions with hands and faces. ✅
  • 2d-chat: A public chatroom where users can add text anywhere on a canvas. Code • App ✅
  • piano-rooms: A multiplayer multitouch piano using Tone.js. Code • App ✅
  • postnget: 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. Code • App
  • hiscore: A shared highscore server for arbitrary games using a SQLite database responding to URL queries. Code • App