#7: Telematic Environment

A Telematic Environment

This assignment has several parts:

  1. By Wednesday, 3/16: Get a Buddy. Identify a “Buddy” in the course, and make at least one appointment to work together outside of class before next Wednesday. 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, 3/21. Check out Glitch. Make an account on Glitch.com. Browse the “building blocks” that Glitch offers for easily building web applications. Test out some of the code templates 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. By Monday, 3/21: Looking Outwards #4 on Net Art. Browse the authoritative Rhizome Net Art Anthology, and/or Angela Washko’s List of Networked Performances, to identify a project that you find intriguing. In a blog post, briefly summarize what the project is and why you found it interesting. Title your blog post nickname-LookingOutwards04 and Categorize it LookingOutwards-04.
  4. Wednesday, 3/23: Have something ready. Share it with your Buddy for their feedback.
  5. Wednesday, 3/30: Deliverable due for group discussion.

When two people’s phones are connected in David Horvitz’s mobile artwork, the space between us (2015), the app displays the distance to and direction of the other person.

A significant thread in new-media 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 could perceive 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 (2018, created for 60-212), asks, “what if people exclusively communicated by copy-pasting?,” and her expressive Poopchat Pro (2018, 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 the nature of digital communication itself. For more examples of telematic artworks, see my lecture on telematic art, and don’t miss the links at the end.

Brief

Develop a multi-user, 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 calls Dasein, or “being there together”. A networked game could also be a totally legitimate response to the assignment; note, however, that the emphasis in this project is on communication and/or creative collaboration. 

You should be able to answer questions as to how your project supports a new mode of communication, collaboration, or other interpersonal social experience. Carefully consider the agency of participants in your system, and the timing and directionality of their messages. Think about design choices like:

  1. Passive or active: Are the users aware that they are participating? How much attention is required?
  2. Asynchronous vs. synchronous: Do the two people collaborate simultaneously, or at different times?
  3. Equal roles vs. complementary roles. Are both participants equal? Or do they have different roles?
  4. Anonymity and/or intimacy. Are the participants identified, or anonymous? Do they know each other?
  5. Local vs. remote: Is your project for people in the same room, vs. people far away?
  6. Self-reflexivity: To what extent is your project a critical reflection “about” communication, vs. being an activity people do together?

Requirements:

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

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

Now:

  • Sketch first on paper, as always, and KEEP YOUR CONCEPT SIMPLE.
  • Develop your project at Glitch.com.
  • Test your project with a Buddy. Collect their feedback.
  • Create a blog post on this web site, 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.
  • Document your project with a well-considered video, perhaps 20-60 seconds long. Include subtitles that 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 blog post.
  • Link to your project on Glitch.com, in your blog post.
  • Embed an animated GIF (or screenshot image) of your project, showing what the interaction is like.
  • Document your process by embedding images of paper sketches from your notebook. These images could be as simple as photos of your sketches, captured with your phone.
  • Label your project’s blog post with the WordPress category, 07-Telematic.
  • Title your project’s blog post with the title, nickname-telematic.

Code Templates


We will be using p5.js JavaScript and Glitch.com as our platform for creating networked web applications. BCSA alumni, Charlotte Stiles and Lingdong Huang, have made a number of helpful “starter” projects for you, below.

Recommended Starter Template for Telematic on Mobile Devices:

I’ve made a simplified template for you that is simpler than the other code templates below. This template only transmits real-time multi-touch fingertips between two phones, and it’s just 140 lines of code. This also contains a hack for restarting the socket.io server if necessary. ✅ apps are working as of 3/2022.

    • Shared networked multitouch points: app • code ✅
Char Stiles’ Telematic Glitch Templates:
  • Simple Glitch+p5.js starter (no networking): app • code ✅
  • Bare socket.io demo: code ✅
  • Simple Shared Drawing Canvas: app • code ✅
  • Simple Text Chatroom: app • code ✅
  • Simple Agar.io Game: app • code ✅
  • Persistent High Score (lowdb): app • code ✅
  • Persistent Drawing Canvas (SQLite3): app • code ✅
  • Collaborative Sentence: app • code ✅
  • Centroid Drawing App: app • code ✅
Lingdong Huang’s Telematic Mobile Glitch Templates:
Lingdong’s Glitch Server Data Templates and other Reusable Backends
  • Handpose-Facemesh Demos: networked interactions with hands and faces. ✅
  • networked-bodypix: Sharing body outlines; uses ml5.js. Code • App ✅
  • 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