Command Line + Node.js

Command Line

What is the Command Line?

Everything in a Unix computer is a file. Every program it runs, every little toolbar, every document you own, and every little nuance about the way it runs, is a file. The command line, simply put, is a place where you can navigate through that file system and read/run those files. Within it, you type commands instead of clicking on buttons in a GUI. The command line can be very powerful, complex, and dangerous, but should be lauded and admired, not feared.

In general, these tutorials will take place on a Mac, because of their ease-of-use and unix-like filesystem. Following along with Linux will be very similar, but Windows might cause some problems (use at your own risk).

Mac users — Open the Terminal using Spotlight, or by going into your /Applications/Utilities folder.

Linux users — You probably already know where your terminal is.

Windows users — Please download and open Babun.

Syntax

A command has three parts: the utility, the flags, and the arguments. The utility is required, and always comes first. The flags are usually optional, and can take both long (--flag) and short (-f) forms. The arguments are usually the last part of the command, and are generally required.

Try running this:

ls -l ~/Documents

In the above example, ls is the utility. It runs a program that lists directory contents. The -l is an optional flag that tells ls to display all the file list in long format. ~/Documents is the argument; it tells ls to list the directory contents at Users/<username>/Desktop (or equivalent on your OS).

You can learn how to use any command by typing man in front of it (man — for manual — is the utility, and the command you want to learn about is the argument. You can move up and down the documentation with your arrow keys, and exit by typing q. Often, but not always, you can also learn about a program by using the flag --help with no arguments, or even just by using the utility with no flags or arguments.

File systems

Every file on your computer is stored in a folder that is part of a larger tree. Let’s look at the following location:

/Users/<username>/Documents/helloWorld.txt

Replace <username> with your login’s username.

The first / is the root of that tree. It is where every file and folder on the computer is stored. Go ahead and see for yourself by typing the command cd / to change your directory to the root /, and see what’s there by using ls.

The next part, Users/, is a folder within /. Go ahead and cd into it.

On my computer, <username>/ is a folder within /Users, and Documents/ is a folder within <username>/.

Finally, a text file called helloWorld.txt is within my Documents/ folder.

You can cd back up a level by doing cd ../, and can go up multiple levels by chaining those ../s. Finally, the shortcut for /Users/<username>/ is ~/ — remember that; ~ (tilde) is your home (directory).

Basic Utilities

Below is a list of basic utilities that most people use regularly. Anything in caps with a $ in front of it is a variable that should be replaced with your specific needs.

man $UTIL displays the manual for the $UTIL.

ls $DIR lists the contents of the $DIR directory.

cd $DIR changes directories to $DIR.

pwd prints the location of the current (working) directory.

cat $FILE prints the contents of the $FILE to the terminal.

cp $FILE $LOCATION copies $FILE to $LOCATION.

mv $FILE $LOCATION moves $FILE to $LOCATION.

rm $FILE removes the $FILE (deletes it).

$CMD1 | $CMD2 pipes (|) the output of $CMD1 into the argument of #CMD2.

sudo $CMD runs the $CMD as the super user (super user do).

sudo can be dangerous, so only use it if you know what the command you’re elevating is going to do. You can delete the entirety of your computer’s hard drive by running sudo rm -rf at the root directory (WARNING: DO NOT DO THAT!!).

APIs

Application Program Interfaces are a set of rules dictating how applications should interact. When discussing APIs in the contet of the web, we are usually referring to the process we use to post information to a website or database or pull information from a website or database.

JSON

JavaScript Object Notation is a data format used extensively on the web. It was developed for easy parsing within JavaScipt. Many of the APIs we will be using will return their data in JSON format.

  • JSON is written in name|value pairs "name":"Jake"
  • Array:

  • Objects can have several sub-object:

  • An object with objects and an array:

Example JSON

Example

  • In your terminal, change to your home directory cd ~
  • Make a new directory called “test_api” mkdir test_api
  • Go into that directory cd test_api
  • Initialize Node Package Manager in that directory npm init
  • Follow the prompts to get it working
  • Open your text and save a new file called test_api.js in the test_api folder

  • paste this code into the new file:

  • We need to know what the JSON will look like before we know how to format it.
  • use the this jsonformatter site to check out your request

Exercise

  • Find a new API from this list of free, public APIs
  • Make a new node.js script that fetches data from the API and parses it

LightManager Processing Class

Overview

We will be using a small Processing class to translate our realtime animations into low-level commands for Phipps’ Color Kinetics lighting system. The diagram below outlines how our software and hardware system is organized.

Code

First, download the example from Github.

The code below shows how to use the LightManager and Light classes. As you can see, you only need to instantiate one LightManager object. In setup, you need to initialize that object and call the init function, which requires two parameters, the IP address and PORT of the OSC-Kinet translator (provided by Jake).

In the draw() loop, you can then choose to send the data to the lights and to draw the lights. You can also change the size of the light’s smoothing buffer. This will change the amount of time it takes the light to “smooth” into the desired color. This can help with smoothing our your animations.

Phipps Proposal: “Touch of Magic”

Ammani, MacKenzie, Sujay, Victoria


We would like to present, Touch of Magic. We took to heart the decor as well as whimsy of the room in order to bring the magic to life, we wanted the installation to fit into the theme naturally. While the guests wait, we want them to play a game along the wall. The guests will have a chance to work together and contribute to the space. As the guests touch the golden bricks which are strategically tucked into the existing gaps, the overhead lighting will come alive. Guests have to find bricks with matching symbols and touch both the bricks to animate lighting. Some bricks will need multiple guests to hold hands to create the link.  We wanted the placement of the bricks to encourage people to move ahead. The game of golden bricks will encourage them to go to the next set and try it out. We designed with an inclusive mindset, designing specifically for children and people who maybe in wheelchairs. We wanted to give them the power of magic and discovery. 

 

Execution:

We will place a mixture of active blocks (those marked by a holiday icon) and inactive blocks, so that we can fill both sides of the room and create a cohesive design that is inline with the decor. Visitors can then touch these bricks, which will affect the lighting in a section of the other side of the room. We wanted the interactions to be rather simple and make sure the room has active and passive settings. Keeping in mind what happens when no one interacts with the sensors.

Phipps being a popular destination, the Winter light show even more so, these bricks are designed to be robust and can be replaced easily. Our bricks are cheap and easy to build. The Gold leaf tiles will face a waterproof box that houses all of the electrical components needed. The gold leaf will be sealed and the boxes can be easily reproduced in case of wear and tear.

The design also allows for flexibility in placement of the bricks. We can experiment to see what works best for the flow of guests.

• Gold leaf brick tile faces
• Waterproof boxes
• Makey Makey 

Moving foward:

We wanted to design an interaction that not only fit the theme, but was also flexible enough to change to what would fit the requirements the best. Based on feedback from our presentation Sunday evening, we are beginning to think about next steps for this project. We are looking into how color and animation of the lights can also aid in moving people forward as well as some variations for the icons and bricks themselves. Some suggestions were larger icons or icons that are made of metal and affixed to the bricks, allowing for better discoverability as well as better accounting for the wear and tear of guests.

Phipps Installation (Updated)

Lisa, Morgan, Qiao, Willow

Theme

Inspired by the Family Feast theme of the plant life and decorations, we wanted to maintain an ambiance of warmth and comfort by creating a subtle firelight display with the lights.

Narrative

When the visitor first enters the room, she will see flickering firelight in shades of yellow, orange, and red along both main walls.

Every other light array will be controlled by a knob control reminiscent of a fireplace knob, strung on the columns on the brick walls The visitor will be able to turn the knob to control the intensity of the connected firelight (the height of the flame).

We believe that having a directly interactive installation will delight visitors, but also help disperse foot traffic away from the central flower bed towards the outer walls.

Design

Inputs:

6 knob potentiometers (one per light fixture)

Every other light fixture will be attached to a potentiometer directly underneath on the brick wall. By default the lights will be set to a low-level array of white to yellow to orange to red. The potentiometer will map to the intensity of the light.

Phipps Project

Brandon, Johnny, Nitesh, SooJin

Lighting Themes

  1. Candlelight (flow of the light: edges of arc to center)

Input Options

  1. 12 distance sensors (spaced with each arc, placed in the holes of the brick walls)
    1. each sensor controls the arc-lights on the opposite side of the room
  2. IR Break Beams – how far can the lasers travel?
  3. PIR Motion sensor

Narrative

When a person walks in front of a distance sensor, the arc light immediately associated with it lights up (from the bottom of the arc one by one), while the arc lights adjacent also light up but with less luminosity. The colors will also follow the order of the lights, with the lights that light up first taking on white hues, then yellow, then red. This effect resembles flickering candlelight, enhancing the holiday ambiance. 

Since the sensors will be placed in the spaces inside the brick wall, they should be reasonably obscured and out of the guest’s vision. This should help it to remain untouched. Additionally, since the lighting moves forward, it encourages guests to also move forward through the exhibit.

We wanted to keep things simpler, since any sort of “obvious” or direct interaction would most certainly cause the foot-traffic to slow down, congesting the exhibit. This is something that we really want to avoid, as overcrowding and long wait times, no matter how pretty the lights/features, will ruin the experience. This is especially true if there are children, since they are typically less patient.

Phipps – Jon, Alex, Leah, Shen, Lumi

In keeping with the theme Family Feast, we wanted to create feelings of togetherness and celebration for this installation. In order to evoke this sense of whimsy and wonder we decided to focus on two levels of interaction, a localized flowerbed experience between two people, and a wide spread experience with the rooms visitors.

When visitors enter the room, they have the opportunity to play with buttons on the edge of the flowerbed. Through experimentation the visitors will find that one button activates a set of golden “fireflies”, laid out to enhance the natural beauty of the plants, with soft organic light motion flowing around the bed. The other activates a similar effect, with crimson “fireflies” bringing life to the planter.  

Pressing the buttons together will trigger the lights in flowerbed send out a gradient of light projecting out into the direction of cove lights, and a ripple of white light will be sent across the room. it sends the two visitors experience out into the room, and shares the joy of their interaction with the other guests. This ripple reverberates across the room, alerting visitors to the presence of others and inspiring that feeling of warm fellowship

Our project encourages fluid movement through the room, the placement of the flowerbed interactions in either corner and motion of the ripple forward encourages visitors to move forward.

 

Project 01 : Phipps Conservatory Lights

Overview

The Winter Flower Show and Light Garden is Phipps Conservatory’s largest event of the year and draws over 120,000 visitors throughout its six week run. Phipps has recently installed a dynamic lighting installation in the Sunken Garden room and is seeking proposals for an interactive or reactive extension of the lighting system.
This project requires that groups design and build a fully-functioning prototype for the room and demo that prototype on site for the organization’s director. The director will select the most viable prototype to be further developed and temporarily installed in the Sunken Garden for the duration of the six week festival.

Details

Jordyn Melino, the Exhibit Coordinator and lead designer of the Light Garden, has provided us with two of the drawings they’ll be using to build the room. The first is the planting plan, which depicts all of the plants and locations for the room. Color is a major part of the show and the plants and decor will focus on reds and golds.

The second drawing depicts prop inspirations. The room’s theme will be one of a holiday feast, with props and plants that represent a holiday table setting.

Phipps Lighting Test from ULRStudio on Vimeo.

Goals

Because of the high visitor volume throughout the show, the Sunken Garden is prone to long lines. The goal of this project is two-fold:

  1. Enhance and augment the whimsical decorations of the room.
  2. Entertain visitors as they queue up to pass through the next room.

Requirements

  1. Groups of 4 or 5 will design and develop a functioning prototype to present on October 15th.
  2. Projects interact with the lights using our class’s custom API
  3. No screen-based projects
  4. At least one sensor input (this can be a microphone, a board of potentiometers, buttons, etc)

Selection Rubric

  1. Robustness: will a final version of this project be able to stand up to 120,000 people in six weeks?
  2. Integration: how well does this project mesh with the existing decor of the room (color, whimsy, fun, etc)
  3. Timing: is this something that won’t hinder the already slow-moving lines? Can visitors enjoy this without it clogging up the space?

Timeline

  1. Thursday, September 28: Class tour of Phipps, Q&A with Jordyn Melino
  2. Tuesday, October 3: Design proposal blog post due, review in class
  3. Tuesday, October 3: Introduce lighting API and simulator
  4. Thursday, October 5 – 12: In-class development
  5. Thursday, October 12: In-class demo with lighting simulation – prototype must be functional!
  6. Sunday, October 15: Evening demos at Phipps

Mini Design Exercise 02

Kinetic Data Sculpture

Overview

Using the technical skills we’ve developed over the past three weeks, design and prototype a kinetic, sculptural visualization of a remote data stream. Legibility is NOT a requirement for this project. The goal here is to play with form and consider alternative implementations of the physical->digital->physical communication pipeline.

Requirements

  1. Final project is due at the end of class.
  2. Using the simple materials at hand, design a kinetic sculpture that changes its motion based on a remote, external, physical input.
  3. System must use two computers that speak to each other over a network
  4. One computer must pull in sensor data (either through arduino or the computer’s microphone)
  5. The other computer must control the motion of your physical design.
  6. Take a short video of the sculpture and post it to the blog.