︎

SUNY Purchase ︎ (DES3800) Design for Web & Screens

Project #2: Observational Coding


Objective

Take a “physical” “space”, and translate it into a virtual one

Background

Hunter S. Thompson used to type out The Great Gatsby word for word to “get the feeling of a masterpiece.”

Learning to draw historically, often involves drawing from life or observation.

This piece is an exercise in translation, which is different than copying. In semiotics (the study of signs), in moving from the signified to the signifier to the sign there is a slippage. This slippage is the movement from one form to another. 

This project is meant to examine the limits and possibilities of this observational methodology as applied to a virtual space.

Technically, the piece is meant to introduce Javascript to you and allow you to use more complex libraries if you are already aquainted with Javascript.

Considerations

  • How do you want to translate space from real to virtual?︎What can be lost in that slippage of translation? What can be gained? What happened in the space? What will happen? What can’t be translated (i.e. smell/touch)? What colors are in the space? How big is it in relation to a body? How does light interact with the space? How does time function in the space?
  • How real is it?︎Is the space a real one or based on a fictional idea? Is it in the future? Is it from a dream?

“No Shuriken Mode” Challenges

  • Use three.js to describe your space in a more explicitly three dimensional way.
  • Use an alternative input system to navigate the virtual space you create. The Leap Motion Sensor, or a Makey Makey (or a cheaper clone) are a couple of relatively easy options.
  • Create something in VR (you can technically do this with three.js).
  • Install your piece somewhere and relate your installation’s concept to how you project it.
  • Create an alternative experience for mobile users.

Requirements (updated!) 

  • The final form of this project will be a presentation. 
  • You can either minimally describe a piece which is as close to fully functioning as possible (i.e. a coded website) or provide a “pitch” in which you make the concept visceral. 

  • The latter option must include a proof of concept of some kind (XD or Figma prototype, video of site elements animating as intended). 
  • You must be able to answer questions about the underlying technology (currently existing) that will be used to achieve your concept if you’re not coding it. For example you could provide a 3D animation and say it should be achievable in three.js, though the final product might have a lower polygon count (you should research the performance issues related to that). You could not, conversely, present an example of a hologram and say it’ll get figured out at some point.

  • If your project is fully coded, you must have a website that is ready to present for class on 03/12/2020
  • If your project is fully coded, you must have your code uploaded and accessible for review via your repl repository.

  • For either option, you must provide some documentation of the original space your project is translating (.png, photograph, poem).

  • If your project features some installation, or alternative interface you must document it by photography or video. 

Relevant Dates (5 weeks)

  • 02/06/2020︎

    • Introduction to project. 

  • 02/20/2020︎

    In-class presentation on current state of your project and possible technical hurdles

  • 03/12/2020︎ Critique!


Examples

  • http://rio2016interactivemap.com/ (here’s a “literal” mapping example. Note the  distorting scale and simplifying   reality for clarity and aesthetic)

  • https://libraryofbabel.info/ (this website is a virtual representation of the short story The Library of Babel by Borges. This recreates and essentializes a visceral, but fictional space in a virtual form)
  • Facebook’s Timeline
    (this was new not that long ago, and alien enough that facebook needed to make a video to visually explain it. Think of this as how temporal information is mapped and emphasized) (here’s an old profile for reference)

Further Reading/Viewing

Flâneur︎The Flaneur is the 19th Century manifestation of the then contemporary city dweller. Including this here in relation to the reading we’ll be doing, and also meant to draw a relationship between the inhabitants of a city, and inhabitants of the “space” of the web

I am sitting in a room by Alvin Lucier︎ This is an “important” sound art piece, pretty relevant to this project. Lucier reads a piece of text and records it, he then plays it back repeatedly; over time, the recording “becomes” the resonant frequency of the room he is sitting in. Effectively describing it.

Dan Graham Performer/Audience/Mirror︎ This is a performance piece in which Dan Graham describes very minute observations and his experience of simply standing in a room. This is partially in the range “stuff I like I feel like the class will not be into” but meant to provide some context for the possibility of how language relates to “presentness” 

Eye of the Beholder︎ Before the technological advancement of games like Doom or Quake, games of this style simulated three dimensionality with a relatively simple visual trope of a dungeon. They could re-arrange a pretty small subset of elements to create the sense of a complex underground labyrinth. This is here if maybe you want to do something “3D” but have trouble working with the libraries

Rafael Rozendaal︎ We talked about these previously, but presenting here again, because some of the pieces obviously look like rooms and also because the code may be a viable resource for you.

Library of Babel︎This is a short story by Borges. In it, he describes a near-infinite library in terms of architecture and the contents of the books inside. This is meant to show a fictional space and how writing “deals” with this idea  made manifest. (we’ll be reading this officially later fwiw)