#7 (Telematic, Due 10/16)

This Deliverable is due at the beginning of class on Wednesday, October 16. There is only one part, but you should have some sketches or working prototypes to share in-class on Wednesday October 9.

1. A Telematic Environment

A significant thread in new-media practices involves inventing a new modality of communication, as the core proposition of an artwork. In other words, certain artworks exist to ask the question: "What if people could communicate (or sense each other) in such-and-such new way?" For example, Rafael Lozano-Hemmer's The Trace (1995) asks, "what if people could sense each others' presence, through intersecting beams of light?", while Jingwen Zhu's Real Me (2015) asks, "what if text-based chat could also communicate physiological indicators of emotional stress, such as leg jiggling?" Some works use this approach to question the nature of digital communication itself. For example, Maddy Varner's experimental chatroom, Pasties (2018), asks, "what if people exclusively communicated by copy-pasting?" These systems not only ask a question, but provide a provisional answer in the form of working, open-ended prototypes.

In this assignment, you are asked to develop a multi-user, networked environment that allows people to communicate or collaborate with each other in a new way.

Your system could facilitate language-based interactions like typing, speaking or reading. It might allow people to creatively collaborate, visually, through a novel drawing or construction activity. Or, it could convey nonverbal aspects of presence, such as gestures, in order to explore what Heidegger calls Dasein, or "being there together".

Note that while a game could be a legitimate response to the assignment, 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 or collaboration.

We will be using JavaScript and Glitch.com as our platform for creating networked web applications. A former TA of this course, BCSA alumna and STUDIO Fellow, Char Stiles, created an account on Glitch, and (using socket.io and p5.js) she also made a number of helpful "starter" projects for you:

  • Very simple Glitch+p5.js starter (no networking): app+code
  • Simple Shared Drawing Canvas: app • code
  • Simple Text Chatroom: app • code
  • Simple Agar.io Game: app • code
  • Bare socket.io demo: code
  • Persistent High Score (lowdb): app • code
  • Persistent Drawing Canvas (SQLite3): app • code
  • Collaborative Sentence: code
  • Centroid Drawing App: code

Now:

  • Browse: Spend at least 5 minutes browsing the blocks that Glitch offers for building apps, and also spend five minutes learning about available packages for Node.js (which can be used in your Glitch apps) -- see lists like this, this, THIS, etc.
  • Sketch first on paper, as always.
  • Stuck for ideas? Relax, it's OK: make a demented drawing program, a weirded chatroom, or a shared construction toy. Examples:
    1. What if you made a chat space in which people could only communicate using a limited set of emojis?
    2. What if your participants constructed an exquisite-corpse monster by assembling body parts?
    3. What if your users could collaborate to construct towers of physically simulated objects?
  • Make a new account for yourself on Glitch.com.
  • Develop your project at Glitch.com.
  • Test your project with a friend! Even better, watch two or more people use your system. Make some observations.
  • Limit your design to a canvas which is no larger than 800 x 800 pixels, please. Within this limitation, your project may have any aspect ratio you please.
  • Create a blog post on this web site, to document your project.
  • In your blog post, embed an animated GIF (or screenshot image) of your project, showing what the interaction is like.
  • Embed your live project in the browser, using an iFrame. Here's an example of what that HTML might look like (in the WordPress "Text" editing mode):

or better, use the following format to make a tidy frame in the browser:

  • 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. In writing about your project, please discuss your approach to at least one of the following design issues:
    1. What's your network model? Is your project: One to many / many to one / many to many / one to one
    2. Asynchronous vs. synchronous: Do people collaborate simultaneously, or at different times?
    3. Equal roles vs. complementary roles. Is one person special? Or is everyone equal/equivalent?
    4. Anonymity and/or intimacy. Are participants known/identified, or anonymous?
    5. Local vs. remote collaboration (i.e. is your project for people in same room, vs. people far away?)
    6. Criticality and/or self-reflexive awareness of the nature of networked communication. To what extent is your project "about" communication, vs. just being an activity people do together?
  • 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.

Here you can see one of Charlotte's demos, a simplified Agar.io clone, embedded below:

.

.

.

.

.

Hey! Still looking for ideas? What if your networked environment used Matter.js, a 2d physics engine for the web? The great Dan Shiffman provides some helpful bootstrapping for this useful JavaScript library: