Computational Approaches to Typogrpahy

Concrete Poetry

demo gif

Click here to go to project.

For this assignment, I was going to try to make concrete poems from the text messages sent between me and my contacts, but it kind of felt a violation of privacy. Anyways, I took a short sentence from Maggie Nelson’s Bluets and added my own take on it. Here’s the snippet from Bluets.

I don’t have blue eyes, unlike the author, so I thought about what it would be like to look at the world through blue eyes. I generated a grid of blue i’s. They’re kind of like bars.

All of the code is available on my github here.


Understanding Networks

RESTful Control Surface Design - Specification

Alden and I are working on a control interface for people to VJ. We surveyed a couple ITPers on the floor about what makes a good VJ set. People liked when:

  • Visuals reflect the mood and emotional content of the music
  • Timing matches the music
  • You warn people if you’re gonna do a strobe effect
  • There is a dynamic arc or storyline to the visuals

Features and System Diagram

Given our restraints, we knew that timing might be an issue since using REST might not provide instantaneous feedback needed for syncing up with music. Either way, we’re still doing it. In our spec, we would like to have the following options for the controller that will output to visuals (in a browser) that can be projected or shown on a screen. These are the user inputs we’d like to have on the controller.

  • gif mode (on/off)
    • keyword (text input)
  • abstract visual mode (on/off)
    • movement speed (range)
    • foreground color (HSL range)
    • background color (HSL range)
    • shapes/patterns (set of options)
      • rect, circle, triangle, squiggle, arc

We want the clients to communicate according to this system diagram. We are planning on using the Giphy API to pull content for the “gif mode”.

img of system diagram

Either a physical or digital interface will work for the controller (:

Update: Alden and I will be designing the control interface for the VJ visuals. Ellen and Ridwan will be designing the output visuals. The documentation for our RESTful API is available below. Here are the GET or POST requests that can be made by the clients.

POST Requests

Visualization Mode

POST /mode/{value}

value: 0 to turn off, 1 for gif mode, 2 for abstract visual mode

Gif Mode Keyword

POST /gifword/{string}

string: keyword that describes desired gif

Abstract Visual Movement Speed

POST /speed/{value}

value: choose from range 40-180 bpm to match music speed

Abstract Visual Foreground and Background Colors

POST /foreground?h={range}&s={range}&l={range}
POST /background?h={range}&s={range}&l={range}

“h” value: choose from range 0-360 for hue “s” value: choose from range 0-100 for saturation “l” value: choose from range 0-100 for lightness

Abstract Visual Shapes

POST /shapes?triangle={bool}&circle={bool}&square={bool}&squiggle={bool}&arc={bool}

bool: 0 to turn off or 1 to turn on shape visibility. Bool values for each shape are independent of each other.

GET Requests

Current State

Use this to request the current status of the system.

GET /state/

will return the following:

{
  "mode": {0, 1, 2},
  "gifword": {string},
  "gifurl": {URL},
  "speed": {40-180},
  "foreground": {
    "h": {0-360},
    "s": {0-100},
    "l": {0-100}
  },
  "background": {
    "h": {0-360},
    "s": {0-100},
    "l": {0-100}
  },
  "shapes": {
    "triangle": {bool},
    "ellipse": {bool},
    "square": {bool},
    "squiggle": {bool},
    "arc": {bool}
  }
  "errors":{err}
}

Giphy URL

Use this to request the current gif URL so the control interface can display the gif that comes back from the Giphy server.

GET /gifurl/

will return the following:

{
  "gifurl": {URL},
  "errors": {err}
}


Computational Approaches to Typogrpahy

Asemic Writing

demo gif

Click here to go to project.

The asemic writing I created is based on more western languages where it appears to go left to right and has distinct separate words. It is clearly my bias to do something western-looking as someone who is a native English speaker. I was influenced by Vera Molnar’s Lettres de ma mére. Here is one of the pieces in this series.

vera molnar

I liked the layering of different colors and the erratic-ness of the lines. I tried to imitate it by using the random function to continually change the amplitude and angle of a sine wave. I plotted these at varying lengths to create different words and then tried to have it start a new line when it hit the margin of the canvas.

All of the code is available on my github here.


Live Web

Video Swap Camera

demo gif

I modified my midterm project so that it can record videos instead of taking photos. I used the mediaRecorder API to accomplish this. So now when you take a short video, it’ll return with a video clip randomly selected the database of video clips collected from people using the site. The API is only supported by Firefox and Chrome right now, so unfortunately this doesn’t work on Safari or mobile.

Read more...


Haptics

Final Haptics Project - Petting A Cat

gif of haptic motor

For our final project, we decided to make an improved version of our previous project where you pet a cat which causes it to purr. To make the experience more realistic we made the cat to purr only when petting in one direction and improve the purring vibration feeling from the haptic motors.

Read more...


Computational Approaches to Typogrpahy

ANSI Terminal Text

demo gif

Click here to go to project.

I liked the visuals of the old school ANSI games, and so I wanted to play with the word “snake” and allow someone to control it using the arrow keys on their keyboard. It’s pretty simple and there’s no game rules. It’s sort of zen and you can just be the snake in the terminal.

All of the code is available on my github here.


Temporary Expert

Interventions in Air Space

This post is in progress (need to add images, reformat, add context to what this is), but I’m posting it so it’s visible. Click for more.

Every day this week, I devised a situation in different spaces (indoor, outdoor, and intangible spaces) to intervene in the typical role of air ownership and negative space. These are thought experiments that I had since not all of them were feasible to execute.

Read more...


Understanding Networks

Packet Sniffing a Google Home

picture of my google home mini

I decided to packet sniff a Google Home Mini that my sister gave me last year for Christmas. When I told her I didn’t want to use it because Google was probably collecting all our data, she was pretty upset that I didn’t appreciate her gift. I briefly used it out of guilt, but eventually it creeped me out too much so I quietly stopped using it (sorry, Ann). Now using Wireshark, I hope to report that my concerns are completely valid.

Read more...