Readings

Please read the following articles for next class
1. Survey of Alternative Displays by Blair Neal
2. After Urban Screens by Dave Colangelo
3. Too Much Information Keiichi Matsuda

Looking Out Assignment

1. Find one example of a public facing installation that encompasses some of the ideals set forth in Colangelo’s interview about massive media.
2. Write a blog post here with an image and video of the project.
3. Include a small description of the project and how it might be assessed based on Colangelo’s framework

The final project will take the form of a full-scale site-specific installation. The content and concept of each project is open, although each project must be site-specific

Groups of four or five will design, develop and install a site-specific installation on an off-campus building or natural site. Installations must be either interactive/reactive or data-driven. The goal of the final project is to put to use all of the techniques and concepts developed over the last semester.

Details

Through the course of a week-long design phase, groups will need to research their selected site and determine a relevant concept and form for their project. This process includes understanding the history and current usage of the site, the specific demographic that will be viewing their work and the environmental and physical constraints of the site.
Once designed, groups will have $500 to spend on materials and equipment. Fully-functioning projects must be installed on site and documented by December 18. Groups are free to install their work any time before that date.

Requirements

1. Must be interactive or reactive using local sensor data OR data-driven using a historical data set or live data source
2. Projects must be robust enough to last outside for at least three days.
3. Installations may not harm or modify existing structures unless permission was explicitly granted by location owner.

Timeline

• November 30 : Mid-Review Blog Post and Crit
  • Site/Community analysis
  • Conceptual drawings
  • Diagrams outlining technical architecture of project
  • Proof of concept prototype (to prove that your tech/data is viable)
• December 11 – 15 : Installation on Site
  • Projects must be installed on site, in coordination with the site owner
  • Fully functioning, no “wizard of oz”
• December 18, Midnight : Final Documentation Due
  • Blog post
  • High quality, edited video with voice over or text describing project
  • At least four high-resolution images of the work. Must include people viewing/interacting with work
  • Final diagram of technical setup (including hardware and software)
  • Final write-up of the project… how did it work? What would you do differently?

Previous Projects

1. Audio Window
2. Ghost Pier
3. Emoto Pod
4. Flight To Freedom

Sites

We have pre-selected three possible sites for groups to design around. Groups are free to find different sites, in which case they will be required to obtain any necessary permission and will be responsible for communicating with the site owner.

3577 Bigelow Blvd

Located at a high-traffic intersection, this location once housed a multi-level auto body shop, but now houses a recording studio, art studios and a fabrication shop. Groups would have access to the roof to hang installations over the facade (which will soon be refinished).

Row House Cinema

Located in the heart of Lawrenceville. From their website: “Row House Cinema is a single screen theater in the historic Lawrenceville neighborhood of Pittsburgh. Each week we choose a new movie theme.” This site has been used twice in two previous iterations of RSMA to great success. Groups would have access to both the inside of the theater (for sensing and data gathering) and would be able to install their works on the side or rear of the building.

Arsenal Bank Building

Located across the street from Row House Cinema, the Arsenal Bank Building is a recently renovated bank that now houses three floors of apartments and was home to the recently-closed Tender Bar and Kitchen. The corner of the building faces Butler Street and sees a large amount pedestrian and vehicular traffic. Groups would be able to install their work in front of the building or on the side.

Team Questionnaire

Link to Form

Johhny-Five is a well-documented javascript library that leverages Arduino’s StandardFirmataPlus to allow for direct control of an Arduino, Raspberry Pi or other microcontroller straight forward and accessible. In this tutorial will walk through how to use it to control a physical output via an Arduino Uno.

Materials

1. Arduino Uno board
2. Arduino IDE
3. node.js
4. Johnny-Five module (npm install --save johnny-five)

Setup

1. Create and initialize a new directory for this node.js system
   1. mkdir j5_test
   2. cd j5_test
   3. npm init
2. Install and save the Johnny-Five package
   1. npm install --save johnny-five
3. Upload the StandardFirmataPlus firmware to your Arduino
   1. Open Arduino application and plug in your Arduino
   2. Open File>Examples>Firmata>StandardFirmataPlus
   3. Upload to your Arduino and close the Arduino application
4. Use a text editor to open a new file and call it j5_test.js
5. Copy and paste this code:

var five = require("johnny-five");
var board = new five.Board();

// The board's pins will not be accessible until
// the board has reported that it is ready
board.on("ready", function() {
  console.log("Ready!");

  var led = new five.Led(13);
  led.blink(500);
});

Twitter Example

var five = require("johnny-five");
var board = new five.Board();
var Twitter = require('twitter');

//use a flag to know when the arduino is ready
var boardIsReady = false;

var client = new Twitter({
    consumer_key: 'your_consumer_key',
    consumer_secret: 'your_consumer_secret',
    access_token_key: 'your_token',
    access_token_secret: 'your_token_secret',
});

// The board's pins will not be accessible until
// the board has reported that it is ready
board.on("ready", function() {
  console.log("Ready!");
  //set the flag to true
  boardIsReady = true;
});

//set up the twitter stream filter.  here we are tracking the #trump hashtag
var stream01 = client.stream('statuses/filter', {track: '#trump'});

//this is the event listener.
stream01.on('data', function(tweet) {

    //we want to print the number of favorites for this tweek
    if(tweet.user.favourites_count != null){
        console.log(tweet.user.favourites_count);
    }
    
    //if the board is ready, we want to blink the led with each tweet
    if(boardIsReady){
    //blnk the LED HERE
        var led = new five.Led(11);
        led.fadeIn(100, function(){
            led.off();
        })
    }
});

The Pittsburgh International Airport is looking for proposals for a data-driven, informational sculpture to occupy the main atrium of the Airmall. This space currently houses an Alexander Calder hanging mobile, which will be replaced.

Details

In an effort to attract more business to the shops and restaurants within the air-side terminal, the airport has modified their policies to allow non-traveling visitors to enter the air-side terminal. To celebrate this change and attract more visitors, the Airport Authority wants to install a data-driven, informative sculpture that celebrate’s the city’s new focus on technology and culture.
The proposal does not state what type of information they want displayed or to what degree of legibility they require. The sculpture can be floor-mounted or hanging within the atrium. The Airport explicitly wants to visualize information from external APIs and the information should be relative to visitors within the atrium.

Goals

Design and build a functional model of your proposed sculpture. This model will need to use real data, either from an external API or from a historical dataset. The project can be as legible or abstract as you want, but be conscious about how your are affected the existing architecture.

Requirements

1. Groups of 2 or 3 will develop a small, functional model of the proposal.
2. Your project must access a web-based API or historical dataset.
3. Each group must write a blog post at the end of the project that visualizes the project and shows video and photo documentation of the model

Timeline

• Tues Oct 31 : Initial concept due
• Thurs Nov 9: Crit.

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:

{
"employees":[ "John", "Anna", "Peter" ]
}

• Objects can have several sub-object:

{
"employee":{ "name":"John", "age":30, "city":"New York" }
}

• An object with objects and an array:

{
  "name":"jake",
  "age" : 34,
  "friends" : [ "jim", "eric", "katie"],
  "day" : "wed"
}

Example JSON

{ created_at: 'Wed Feb 08 21:37:22 +0000 2017',
  id: 829444033101586400,
  id_str: '829444033101586440',
  text: 'In a Rare Zoo Escape, Sunny the Red Panda Is Still at Large https://t.co/mhOT4z8NIu https://t.co/8vHtTlqbmQ',
  display_text_range: [ 0, 83 ],
  source: '<a href="http://publicize.wp.com/" rel="nofollow">WordPress.com</a>',
  user:
   { id: 972385555,
     id_str: '972385555',
     name: 'Walkileaks',
     screen_name: 'walkileaks',
     location: 'United States',
     url: 'http://www.walkileaks.com',
     protected: false,
     utc_offset: -28800,
     is_translator: false,
     notifications: null },
  geo: null,
  coordinates: null,
  place: null,
  contributors: null,
  is_quote_status: false,
  retweet_count: 0,
  favorite_count: 0,
  entities:
   { hashtags: [],
     urls: [ [Object] ],
     user_mentions: [],
     symbols: [],
     media: [ [Object] ] },
  extended_entities: { media: [ [Object] ] },
  timestamp_ms: '1486589842473' }

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:

//https://github.com/toddmotto/public-apis

var request = require("request");


var url = "http://api.icndb.com/jokes/random/"

request(url, function(error, response, body) {
        
        //turn the response into something we can use
        var info = JSON.parse(body);

        //extract the joke
        var joke = info["value"]["joke"];

        //print the joke
        console.log("the joke: " +  joke);
})

• 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

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.

int roomWidth = 30;
int roomLength = 100;

int lightActualLength = 4;
PImage room;

// Color of the brush to increment through hue.
int col;

boolean sending;
boolean bDrawLights;
LightManager lightManager;


void setup() {
  // 1 pixel = 1 inch (technically)
  size(1200, 360);
  background(0);


  lightManager = new LightManager();
  lightManager.init("192.168.1.101", 12345);
  
  // Set up variables
  room = loadImage("roomimage.png");
  
}


void draw() {
  background(0);
  
  colorMode(HSB);
  ellipseMode(CENTER);
  fill(col%255, 255, 255);
  ellipse(mouseX, mouseY, 200, 200);
  colorMode(RGB);
  col++;
  
  if (sending) lightManager.sendMessages();
  if (bDrawLights) lightManager.display();
}

void keyPressed() {
  if (key == 's') {
    sending = !sending;
  }
  
  if(key == 'd'){
    bDrawLights = !bDrawLights;
  }
 
}

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

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.

The OSI model.

The layers of our common networking system are dense, complicated and not worth digging into at this time.

Addressing

IP Address

Each connected computer or microcontroller in a given network is considered a “device” or “host“. Each device in a given network will have an IP address. The IP address can be assigned by the device itself (setting a Static IP) or the address can be given to the device by a router using a process called DHCP. DHCP is most common in large wifi networks and is probably what your laptop is using now. We call this “dynamic.”

When communicating with an application on a different computer, you’ll need to know that computer’s IP address. If both computers are on the same network (same router or same large institutional network like CMU), connecting shouldn’t be a problem.

Networks almost always regulate how their devices access the internet. This means that directly communicating with a device outside of your immediate network can be tricky.

For most applications in this class, you’ll be working with devices on the same router. To make sure you have a clear communication path between devices, check the IP address on each. You can check this by typing ifconfig in the command line. Look for an inet address that is not 127.0.0.1 (which is your ‘localhost’ address, used for talking to other applications on the same device). The inet address may have an adddress such as 10.0.0.104 or 192.168.1.56. Communication shouldn’t be a problem if both devices are on the same subnet, which means the first 4 numbers of the IP address. Keep in mind, this only holds true if both devices are on the same network; so if Kim is in Indiana and his router gives him an IP of 192.168.1.56 and Pat is in Oregon and her router gives her an IP of 192.168.1.26, that doesn’t mean they can communicate, since their routers are on different networks (assuming no VPN, etc).

Ports

If you imagine that and IP address is like a device’s street address, the Port is like a given application’s apartment number within the device. When setting up a networking path on two applications, the listening application will need to declare which port it is listening to. This is usually a 4 or 5 digit number 12345 or 5555, etc. The sending application will also need to declare, along with the IP address, which port in the destination device its packets are intended to reach.

Port numbers less than 1000 are generally reserved and should not be used in your application. You should be aware of some specific ports, like 80 (which is the default port for HTTP) and 22 (which is reserved for SSH).

Protocols

UDP

User Datagram Protocol is a “transport level” protocol we often use for streaming continuous data. UDP is low latency and it does not require that the sender of UDP receive confirmation of receipt from the receiver. This means that UDP messages can get lost and nobody will know. We use UDP for streaming continuous information (people tracking, continuous sensor data, etc) because we want to get that information as soon as possible and we don’t care if packets are lost along the way because another packet will be coming right behind it.

UDP Drop Example

OSC

Open Sound Control is an “application level” protocol that sits on top of UDP and allows users to send formatted, human-readable messages. An example of an OSC message may be /sensors/A/value 54.2145 or /heartbeat "I'm alive" 20170206 0.15. We often use OSC to stream sensor data between applications, as it is easier to read and route than plain UDP. OSC does have some overhead, so if you need to send a ton of data and bandwidth is an issue, you may want to develop a protocol based on straight UDP.

Test It!

1. In Processing, install the oscP5 package.
2. Open the oscP5sendReceive example (file>examples>contributed libraries>oscP5>oscP5sendReceived)
3. Find your IP address (on macOs, hold the option key while clicking the wifi icon)
4. Give your IP address to a friend, get an IP address from a friend.
5. on line 26 of the example, myRemoteLocation = new NetAddress("127.0.0.1",12000); change 127.0.0.1 to your friend’s IP address.
6. Run the example.
7. Modify the messages and protocol that you send each other.

Sample Code From Class

import oscP5.*;
import netP5.*;
  
OscP5 oscP5;
NetAddress myRemoteLocation;

void setup() {
  size(400,400);
  frameRate(25);
  /* start oscP5, listening for incoming messages at port 12000 */
  oscP5 = new OscP5(this,12345);
  
  myRemoteLocation = new NetAddress("10.7.158.108",12345);
}


void draw() {
  background(0);  
}

void mousePressed() {
  /* in the following different ways of creating osc messages are shown by example */
  OscMessage myMessage = new OscMessage("/name");
  
  myMessage.add("jake"); /* add a string to the osc message */

  /* send the message */
  oscP5.send(myMessage, myRemoteLocation); 
}

/* incoming osc message are forwarded to the oscEvent method. */
void oscEvent(OscMessage theOscMessage) {
  /* print the address pattern and the typetag of the received OscMessage */
  print("### received an osc message.");
  print(" addrpattern: "+theOscMessage.addrPattern());
  println(" typetag: "+theOscMessage.typetag());
  
  //check for address pattern
  if(theOscMessage.checkAddrPattern("/name") == true){
    println(theOscMessage.get(0).stringValue());
  }
}

TCP

Transmission Control Protocol is the “transport level” protocol on which HTTP runs. TCP is slower than UDP because it requires a confirmation of receipt for each message. We use TCP for sending information that MUST reach its destination. For example if we want to send updates from our FitBit to a server every 10 minutes, we would use a protocol based on TCP because if one of those FitBit update packets didn’t arrive, our system might fail. We usually do not use TCP for streaming continuous data.

At Home OSC Exercise

Overview

Build a closed system with a partner in which two computers speak to each other using OSC.

Requirements
– One computer must read a sensor.
– Send the sensor data to the other computer.
– The other computer must use that data to control a physical output.
– Post a video of your system to the blog.

Transistors

Since you shouldn’t (and usually can’t) power high-draw devices using the Arduino, you should power them via an external power supply. But what if you want to control when they receive power? You can do that with a Transistor.

Transistors are essentially switches, except they are switched open and closed with electricity instead of a mechanical action. They exist in two main forms (at least with what we’ll be using): BJTs (Bipolar Junction Transistor) and MOSFETs (Metal-Oxide Semiconductor Field-Effect Transistor).

This example shows a high-power LED being powered by a 5V power source, but being controlled by a Transistor hooked up to a microcontroller. When the control voltage goes HIGH, the electricity is allowed to pass through. When it goes LOW, no electricity can pass through the transistor, so the LED can’t turn on.

There are two types of BJTs — NPNs and PNPs.

In diagrams, the arrows for both are on the Emitters. On an NPN, the arrow is NOT POINTING IN. On a PNP, the arrow DOES POINT IN.

On an NPN transistor, the Emitter is connected to Ground, Collector is connected to the Current source you want to pass through, and the Base is connected to the Current source you want to use to control the Transistor. In PNP transistors, the Emitter and Collector are switched.

MOSFETs are very similar, except their pins are named Source, Drain, and Gate. Additionally, the two types are N-Channel and P-Channel.

In diagrams, the arrows are always on the Gate. On N-Channel MOSFETS, the arrow points IN, and on P-Channels it points OUT.

In an N-Channel MOSFET, the Source is connected to ground, the Drain is connected to your high-powered circuit, and the Gate is connected to the control to switch the MOSFET on or off. In P-Channel MOSFETS, the Source and Drain are switched.

DC Motors

DC Motors are a very simple type of motor that turns at varying speeds depending on how much voltage is supplied.

They are exteremely simple to use. Simply connect one wire to power, and the other wire to ground to make the motor spin one way. Flip the wires around to make it spin the other way. You can determine what Voltage to use by looking at the motor’s datsheet.

These motors, for example, have a suggested Voltage of 4.5V DC, and will pull 250mA of current at max load.

Exercise 2.1: Using a Transistor to Control a DC Motor

1. Connect your motor to a Power Supply, and give it 4.5V to see it spin. Flip the wires around the other way to see it spin backwards
2. Design (draw or make in Fritzing) and build a circuit using an N-Channel MOSFET to power that motor via a Power Supply, and control it via an Arduino (you should use the Blink example as a starting point)

Servos

Servos are a little more complicated than regular DC motors. While generally not as strong, you can control the exact speed at which a servo turns, as well as the direction and position it turns to.

To do this, Servos have three wires: Ground, Power, and Control. The colors vary on different servos, but for the most part, red is usually power, black/brown is usually ground, and white/yellow is usually control.

Servos have some limitations. Most servo motors cannot rotate continuously; cheaper servos can have as little as 90° of rotation. Some servos, however, are known as continuous rotation, and can rotate in full circle indefinitely.

Exact control of a hobby servo is accomplished by sending a series of pulses to the device over the control line. We usually don’t generate our own pulses (they’re difficult to keep track of), and instead rely on existing libraries that have all of the potential commands already written.

Exercise 2.2: Controlling a Servo with a Potentiometer

1. Connect a servo to your Arduino like so:

1. Open the example code, File > Examples > Servo > Sweep, and upload it to your Arduino
2. Attach a Potentiometer to your system, and use it to control the exact positioning of the Servo (make use of the map() command)

Sources:

Joshua Noble’s Circuit Diagram Symbols – Programming Interactivity
Tom Igoe’s Understanding Electricity
Sparkfun’s Voltage, Current, Resistance, and Ohm’s Law, How to Read a Schematic, Motors and Selecting the Right One, and Hobby Servo Tutorial
ITP’s Electricity: the Basics
cmuphyscomp’s physcomp-examples
Oscar Liang’s How to Use MOSFET — Beginner’s Tutorial