Assignment 2 – Brian Matejek

Observations
Professor Finkelstein – before COS 426 lecture on Thursday, February 28.
Professor Finkelstein showed a short video clip about font types to the class starting five minutes before class started. The clip was only tangentially related to the class in general, and not related to the current day’s lecture, and most people were not paying attention to the video. The majority of students were on their computers checking their email and Facebook. Students were not interacting at all with the material or the video right before the class. Some students were talking among themselves. Professor Finkelstein did not provide an introduction to the video, but rather just started playing the video before class started. In previous lectures, he has demoed applications on the projector of some graphics theory that we had learned. However, even then, since it is before class, most students are not paying attention. There is very little interaction with the course material in the few spare minutes students have before COS 426 lecture.

Various Students – 10 minutes between COS 426 and COS 436 lectures – Tuesday, February 26.
COS 426 goes from 1:30 to 2:50 in CS Building 105, and COS 436 goes from 3:00 to 4:20 in CS Building 104. Since the rooms are less than 50 feet apart, students that are in both classes have 10 spare minutes between the classes. Often, COS 426 gets out early and the students have even more spare time. Some students talked outside of CS Building 104, but there was a previous class still in session and one of the preceptors had to close the door. Some students went on their laptops in the 10 minutes to check their email, Facebook, and go on Reddit. I did not see any students looking at either COS 426 or COS 436 lecture slides. There is really very little interaction between the students and the course material that they are studying. Some students just stood around their next classroom looking bored with no one to talk to and nothing productive to do. Matt Dolan was discussing his HCI Project and brainstorming some people that he could interview for P2. Overall, most students were not very productive and the few students who were productive could definitely be much more productive.

Richard Lee – Tuesday, February 26
Richard had HIS 392 lecture in McCosh 62 and then had to walk to McCosh B11 for the precept of the same class. Richard took 5 minutes to walk to precept, although he could have taken a more direct route but decided to instead walk with his friends for a few minutes. When Richard finally made it to precept, he sat down and rested for the last five minutes before class started. He said that more rest time would be useful. I asked him what he does on days where he does not rest before precept. He said that he finds quotes for precept in the readings that he “may or may not” have read. Although Richard would have preferred to walk further with his friends, he did not know when he should start heading back to class.

PHI 340 Precept – last semester, every Tuesday
Although this observation was not this semester, I wanted to include it as a fourth because I was very intrigued by the problem that I saw. One student, Max, had class from 10:00 until 4:30 every Tuesday, with no breaks for lunch – every class started 10 minutes after the previous ended. My philosophy precept started at 12:30 every Tuesday. However, since Max did not have a lunch break, he would run to the dining hall after his 12:20 class, eat quickly, and show up to precept 20 minutes late. Although the professor understood, there is definitely a better way for Max to both eat and attend his classes.

Brainstorming
Collaborators: Mark Whelan, Mianna Chen, Richard Lee, Doug Stuart
Map based and social traveling applications:
1. A map that shows the quickest route to get to class, including cutting through buildings on campus
2. A friend based application to find out where friends are going to and from to walk together
3. An application that gives a path to minimize outdoor traveling time if it is cold or raining outside

Rest and timing based applications:
4. Voice activated alarm clock – wake up from naps when the professor starts lecturing
5. Application that sets alarms before classes that have larger breaks before starting (i.e. not 10 minutes) to make sure the student is awake and out of the dining hall
6. Application that makes sure the student has started walking towards class with enough time to arrive on time

Educational based applications:
7. A way for students to provide feedback to professors about the last lecture and a method for professors to look at the results on their phone and/or computer before the next lecture
8. A productive way to work on homework assignments in the ten minute intervals between classes
9. Application that allows a student to review the quotes and readings before precept
10. Top 10 news articles of the day summarized in paragraphs that take 1 minute or less to read
11. Audio notes of the last lecture while walking to class so a student can review the material while in transit

Social based applications
12. An application that outlines a student’s daily schedule for the day, possibly with time blocks allocated for particular homework assignments, group meetings, etc.
13. Application that allows a student to walk away from a class with friends but notifies the student when they should return back to class to make it on time

For students with no lunch period:
14. An application that allows the student to order food from his phone before 11:30, and pick up a sandwich package at Frist or the Center for Jewish Life to eat in the beginning of his next class
15. An application that says if any friends are coming from the dining hall so that you can ask them to bring you food in a takeout box
16. An application that looks at the free food list-serv and dining menus to determine the best dining hall or event to go to between classes to quickly grab food

Well being applications
17. Application that tells users where to store books around campus and when it is optimal for them to pick the books up to minimize the weight of backpacks
18. Some kind of physical or mental health activity between classes, or perhaps a nutrition application that teaches the student

Prototype Ideas
Ordering Food at Frist or CJL
Students who do not have a lunch either have to be even later for precept or skip lunch, and neither option is healthy or conducive for a good learning environment, which presents an even greater problem than wasting ten minutes when early to class.
News Application
Most students do not have time to keep up with current events at Princeton and this application would provide a simple and easy interface to give students the most relevant information on the top ten news articles in various categories.

Prototypes
Ordering Food at Frist or CJL
IMG_0282

Main screen on iPhone or Android

IMG_0283

CAS login screen to create accountability – students cannot order food and not pick up

IMG_0284

Pick up times are the possible 10 minute intervals between classes, ranging from 11:50 to 2:30

IMG_0285

There are four food options: Kosher, Vegan, Vegetarian, and None. Kosher food is picked up at the CJL while the other three options are picked up at Frist.

IMG_0286

Vegetarian Options

IMG_0287

Kosher and None Options (picked up at CJL and Frist respectively)

IMG_0288

Vegan Options

IMG_0289

Options for Drink

IMG_0290

Review and Submit Page – Changing location alternates between Kosher and Non-Kosher meals

News Application

IMG_0291

Main screen on iPhone or Android

IMG_0292

Different categories of articles a user can select

IMG_0293

Listed entertainment articles

IMG_0294

Listed science articles

IMG_0295

Listed culture articles

IMG_0296

Listed world news articles

IMG_0297

Listed politics articles

IMG_0298

Listed sports articles

IMG_0299

Individual science article, more links to main CNN (or other news network) article. Random returns a random article

IMG_0300

Individual culture article, more links to main CNN (or other news network) article. Random returns a random article

IMG_0301

Individual world news article, more links to main CNN (or other news network) article. Random returns a random article

IMG_0302

Individual politics article, more links to main CNN (or other news network) article. Random returns a random article

IMG_0303

Individual entertainment article, more links to main CNN (or other news network) article. Random returns a random article

IMG_0304

Individual sports article, more links to main CNN (or other news network) article. Random returns a random article

Prototype Testing

I decided to test the News Application

Mianna Chen
IMG_0305

Mianna enters the application

IMG_0306

and chooses to look at culture articles.

IMG_0307

She chooses an arbitrary article

IMG_0308

and is brought to the article page.

IMG_0309

She is confused about what “more” actually does – not specified well in prototype.

IMG_0310

She chooses to look at another category

IMG_0311

and looks at World News articles.

IMG_0312

She clicks on the random button

IMG_0313

and is brought to a random sports article. She wanted to get a random World News article or at least the Sports menu, not just any random article. Mianna is looking for an easy way to get back to the last article but there is none currently.

Cameron Henneberg

IMG_0314

Cameron opens up the application

IMG_0315

and selects culture from the list of categories.

IMG_0316

He chooses an article

IMG_0317

and is brought to the article screen.

IMG_0318

He does not like how random brings him to a completely random page and he thinks that there should be an easier way to go back.

Owen Daniels

IMG_0320

Owen enters the application

IMG_0321

and selects a random article.

IMG_0322

This brings him to an article on Culture.

IMG_0323

He then switches categories to sports

IMG_0324

and reads a new article.

Additional Feedback

Mianna Chen
“The random article generator should generate a random article from the same section or for the default sections page.”

She was confused about how to change articles without going back to the main page (not clear that one could swipe the screen to change the article).

She also asked about the “More” button, wondering what it exactly did. It was supposed to bring the user to the main article about which the summary was on.

Cameron Henneberg
“There should be a back button on the article.”

Cameron also believed that random should go back to the same category.

Cameron also asked what the button “More” does.

Owen Daniels
Owen also asked what the button “More” does.

Owen liked the idea of summarizing the article rather than linking to the whole article in the application. He says that he usually goes on espn over news websites because you can look at the score and know what happened. With news websites, there is rarely a synopsis.

Owen also showed me how some CNN articles have bullet points for the article, and said that if he were to read a CNN News article, he would look at the bullet points.

Insights for Future Development
It wasn’t clear that to cycle through the articles users should swipe the screen from left to right and vice versa. Similarly, it was not clear what the “more” button meant. Both of these insights shows that I need to work on not only the naming of the buttons but also on the directions for the application. People did not like how random selected a random article from any category. The two major suggestions were to either choose a random article in the same category or to go to the menu screen for a random category. The navigation between articles also could be improved by including a back button that will allow users to traverse through pages that they have previously seen. Users in general liked how the articles were summarized, and Owen showed me the equivalent in CNN, which could be valuable in terms of finding succinct summaries of the articles. Also, I had a few ideas about how I would revise the application in the future based on the prototype testing. Firstly, I would allow users to “like” articles, and in the future I would show articles that other users with similar interests liked. The random button would try to look for these types of articles of the same category as well.

A2: Tiger Tacos

Tacos

Observations
As someone who is five minutes late to everything, I thought it would be informative to arrive early to some of my classes and observe the foreign concept known as ‘waiting’. Professors Adam Finkelstein and Yael Niv offered interesting and unique examples of what can be done to improve the Princeton waiting time.

Adam Finkelstein, computer science

  • shows an entertaining video before lecture as people are walking in
  • people who are late don’t miss important material but early students aren’t bored
  • gives a five minute break in the middle of class and ends five minutes early
  • throws candy during class to people who ask or answer questions

Yael Niv, neuroscience

  • in every class, she invites five students to coffee with her.
  • ends class ten minutes early and takes those students to coffee before the next class
  • reviews previous material at beginning of class
  • frequent technical trouble with projector or mic could be addressed

Juan Albanell, sophomore

  • says that ten minutes is the “perfect amount of time if teachers end class on time”
  • suggestion: Make students ask questions at the beginning of class

Motivating Thoughts

“The constraints in a system are the rate-limiting step … and they ought to be the providers. In a private practice, things can only move as fast as the doctor-patient relationship.”

– Shortening Waiting Times: Six Principles for Improved Access, IHI.org

Though the above quote addresses the healthcare system and not education, there are some informative similarities and differences. The teacher-student relationship is still the rate-limiting step, but different constraints and liberties are placed upon the system. For one, classes are scheduled to begin and end at a certain time. Doctor’s appointments (except, say, psychiatrists) do not have this same endtime prescribed. Students struggle to arrive to class on time for a number of reasons, including the time at which the teacher of their previous class lets them out.

This establishes a sort of indirect relationship between teachers. If one professor’s lecture is running over, it causes students to be late to the next class, which causes that class to run over, and so on. Even if classes do not run over their allotted time slot, it is often the case that class is cut short of completion due to time limitations, and useful material is left uncovered or rolled over into the next lecture.

This is not to place blame on teachers for students’ being late—but it is an appropriate pain point to address. Like doctors, teachers are the “providers” of education, so changing the format of lectures could do more than changing students’ habits. In other words, students who are always late would not benefit long-term from any technology. Like the alarm clock, these technologies are quickly silenced and doomed to become stressful reminders rather than helpers. Teachers, on the other hand, can adopt simple changes and preparations that make better use of students’ time.

For example, if a teacher covers important logistical material at the beginning of class, some people will miss it and the material will eventually need to be repeated. It’s better to recap the last lecture or let students talk among themselves about the material while people come in. Maybe an optional self-quiz or group activity could be designed that encourages students to talk to people sitting around them.

At the same time, it’s important to address the quality of the teacher-student relationship, not just efficiency. Yael Niv’s solution is to end class systematically early and invite some students out to coffee every week. This means less time to go over lecture material, but more time spent with individual students. It also gives the rest of the students a larger break until their next class. Since the students she chooses are often ones that participate in class, it encourages students to come to lecture and speak up.

Brainstorm
In discussing the problem with other students and faculty, several types of solutions appeared. The first type of solution is to optimize the class selection process to reduce waiting and walking distance between classes. The second type addresses how teachers could work better within class time limits. The third is to improve the wait time vis-a-vis better teacher-student relations. The fourth is to provide new services that cater to students’ busy schedules.*

1. An upgraded scheduling system with travel time between classes to improve course selection and classroom assignment for both the registrar and students.

2. A modified presentation clicker that tells the teacher how many lecture slides they still have to go present, as well as how much time is left in class.

3. A heads up display on their laptop screen that performs the same role as above.

4. An app that allows teachers to push the remaining notes to students’ phones on the way out of lecture which they can view later in the day or while waiting for their next class.

5. A website called “Take a Teacher to Lunch” that helps students and teachers go to lunch before or after class.

6. A way for students to submit questions or discussion prompts to the teacher before class while they are waiting

7. A class-wide Wiki that students can update throughout the semester with their notes and comments. The entire class could collaborate to create a study guide or ‘course manual’ with help from instructors.

8. A study group app that helps you schedule times to meet with other people in your class and review material.

9. Just make the time between classes 15 minutes.

10. An app that tells you the closest dining hall to eat between classes.

11. An on-demand taco truck that will drive to meet students between classes at the location with the most requests made by phone during the last class.

Favorite Ideas
Ultimately, I decided to develop ideas #2 and #11. The improved presentation clicker is a simple idea with a tangible result, applicable in situations outside of just education. The crowdsourced taco truck, on the other hand, would integrate many different technologies at once and generate a lot of energy around campus—and provide an opportunity for classmates and teachers to grab a bite together after class.

Prototypes

I quickly designed a wireframe for a mobile app that would allow students to request the taco truck at their current location.

angle

The design shows a map with the user’s location, the taco truck’s location, and a single large button. The truck would be instructed to head to the location on campus with the most requests at the moment.
front

Below is the second design considered, a redesigned presentation clicker with a visual indicator showing how many slides are left in a presentation.
presenter

Testing 

IMG_0807IMG_0571 IMG_1698I brought the Tiger Tacos prototype to several students to get their feedback. 

It was clear from testing that people “got” the idea, but several important assumptions were challenged nonetheless.

When I presented the prototype to Gavin Cook, he proceeded to enact a scenario in which he called a friend and invited them to get tacos after leaving class, only afterward pressing the “I want tacos” button in the app. The other testers were likewise wary of how they would have time to pick up tacos between classes if they had to wait for a truck to come.

This is informative: it means that the design did not convey how the app would work in reality—the user would likely have to send a request during class so that the taco truck has time to relocate. This could be better conveyed in future designs. Overall, though, feedback was positive and encouraging.

* Collaboration included discussion with Momchil Tomov, Shompa Choudhury, Nathan Eckstein, and Professor Zschau.

The Cereal Killers L1 – Viewer 360

Andrew Ferg

Bereket Abraham

Lauren Berdick

Ryan Soussan

 

 

Our project:

 

We built a “joystick” controller which, when employed, controlled the movement of a 3D box on the screen. The joystick is made up of two rotary potentiometers. The potentiometers were used to rotate the cube in the y and z direction. One potentiometer controls the y direction, the other in the z. At first, we tried to add in a thin pot sensor to move the box up and down. However, the thin pot was not cooperating with the system and its readings were being affected by the readings of the potentiometer. We had to take this out of the system, because it was causing unexpected movement. Despite this, overall, we believe the project was quite successful. We were able to get rid of jerkiness in the image, so it was a smooth fluid motion and rotation. There was a problem with oversensitivity due to small fluctuations but we were able to fix that. Therefore, given time, we believe this could be made into a reasonable interactive interface. This has AutoCAD applications. 3D designs can be rotated and fully examined with easy movement. 3D images of buildings, monuments, molecules, etc (the opposite of 360 degree camera tours) can be viewed from all angles (e.g. for educational purposes or tours). It could be extended to control, instead of a box, for example a 3D model of a car as a game, or other objects.

 

Sketches:

Alarm system using fsr, buzzer, LED and photocell

An alarm system which uses an fsr and a photocell to detect unexpected motion to set off a buzzer and LED light as an alarm.

 

Joystick using flex sensor and potentiometer

Joystick using flex sensor and potentiometer

 

3D viewer or Driving Game

Uses a potentiometer to rotate a graphic. Input from sensors go through to Processing.

Storyboard:

Viewer 360

Can be used for AutoCAD purposes.

 

Architectural Viewing

Can be used to examine ideas for building design.

 

 

3D Tetris

Can be used for 3D gaming purposes, e.g. making tetris more intense in 3D.

 

3D Viewing

Can be used for educational purposes. For example viewing DNA molecules; the 3D graphics and rotating manipulation allows 360 degrees of examination and studying.

 

Final system:

Video uploaded on youtube at:

http://www.youtube.com/watch?v=WnXExTsq5nc&feature=youtu.be

 

Parts used:

 

–          2 potentiometers

–          1 arduino board

–          8 Wires

–          1 breadboard

 

 

To recreate the design:

 

To build the 3d Viewer, we used two potentiometers with the arduino and fed values to processing.  We brought 5V and ground to a breadboard from the arduino, and fed those values to each potentiometer.   The potentiometers were wired the same – we put 5V on the pin on side ‘3’ of the potentiometer, wired an analog pin from the ardiuno to the middle pin of each potentiometer (using analog pins 0 for one and 1 for the other), and wired the ground to the ‘1’ side of each pot.  In all we used — jumper cables between the breadboard and arduino.  When we turn the pot, the analog inputs change on the arduino.   The potentiometers each had full values of 10k Ohms.  To summarize the code, we fetched values from the analog inputs and then converted these values (stored initially as integers) to bytes, and sent them to processing through our ardiuno and computer using a usb cord.  Processing then scaled the value of each pin to a number between 0 and 2pi, and these values determined the rotation of the 3d object.  We chose to rotate the object about the y and z axes, and both can be done at the same time.  This provides the user with the ability to view every part of the 3d object, and rotate it to preferred positions.

 

 

Source Code:

 

//ARDUINO CODE

<pre>

/* FSR simple testing sketch.

Connect one end of FSR to power, the other end to Analog 0.

Then connect one end of a 10K resistor from Analog 0 to ground

For more information see www.ladyada.net/learn/sensors/fsr.html */

int fsrPin = 0;

int fsrReading;

int scndPin = 1;

int scndReading;

byte fsrByte;

byte scndByte;

 

// the FSR and 10K pulldown are connected to a0

// the analog reading from the FSR resistor divider

void setup() {

// We’ll send debugging information via the Serial monitor

Serial.begin(9600);

}

 

void loop() {

fsrReading = analogRead(fsrPin);

scndReading = analogRead(scndPin);

 

fsrReading /= 4;

scndReading /= 4;

 

fsrByte = (byte)fsrReading;

scndByte = (byte)scndReading;

 

Serial.write(fsrByte);

Serial.write(scndByte);

// the raw analog reading

delay(100);

}

 

</pre>

 

<pre>

//PROCESSING CODE

 

import processing.serial.*;

 

float alpha;

float theta;

float alphaN;

float thetaN;

Serial port;

 

void setup_port() {

port = new Serial(this, Serial.list()[4], 9600);

}

 

void setup() {

size(500,500,P3D);

alpha = 0.0;

theta = 0.0;

alphaN = 0.0;

thetaN= 0.0;

setup_port();

}

 

void draw() {

background(255);

stroke(0);

fill(175);

 

while (port.available() <2) { };

 

if (port.available() > 0) {

thetaN = port.read();

alphaN = port.read();

thetaN *= 0.02463994238;

alphaN *= 0.02463994238;

if (abs(thetaN – theta) > .2) {

theta = thetaN; }

if (abs(alphaN – alpha) > .2) {

alpha = alphaN; }

}

 

translate(250, 250); //translate the coordinates

rotateX(theta); //rotate Z first

rotateY(alpha); //rotate y then

box(200); //draw an ugly box

}

 

//void keyPressed() {

//  if (key == ‘w’) {

//    theta += .1;

//  }

//  if (key == ‘s’) {

//    theta -= .1;

//  }

//  if (key == ‘a’) {

//    alpha -= .1;

//  }

//  if (key == ‘d’) {

//    alpha += .1;

//  }

//  if (key == ‘i’) {

//    y -= 5;

//  }

//  if (key == ‘k’) {

//    y += 5;

//  }

//}

 

</pre>

Assignment 2 – Clay Whetung

Oberservations

I preformed two rounds of observation, one was performed in the ten minutes before a precept for URB201 and the other was performed in the ten minutes before URB201 lecture. I decided that it would be beneficial to observe the two primary class “types” at Princeton and also consider any observations that appeared in both. URB201 lecture occurs at 1:30pm on Tuesdays and URB201 precept occurs at 1:15pm on Thursdays. During lecture I observed my professor (the lecturer) and two students, one who had a laptop and another who had not brought theirs to class. I observed the following:

URB201 Lecture:

Professor:

  • Spent a brief amount of time (~ 2 minutes) preparing the PowerPoint presentation for lecture
  • After the projector was prepared, the professor spent about ~5 minutes conversing casually with students seated in the front rows
    • This was particular interesting as students who were not in the first few rows did not have contact with the professor
    • The remaining time was spent talking with the present preceptor
    • After the professor had set up her lecture slide, the first slide was present on the screen, allowing students to view the start of the lecture
    • Before the start of class the professor closed the main entrance to the lecture room

Laptop Student:

  • Student spent the entirety of pre-lecture time on their laptop
  • They performed simple procrastination tasks, (I,e, Facebook, ESPN etc.)
  • They were seated far from the front row (the very last row)
  • No contact was made between the professor (or the preceptor) and the student

Non-Laptop Student:

  • This student appeared to be doing readings for a class  before lecture (unsure of whether it was for URB201 or not
  • He also spent a brief time conversing quietly with a another student who sat next to him
  • Student checked their phone periodically

In the URB201 precept observations, I took noted on the actions of the preceptor and one other student.

URB201 Precept

Preceptor:

  • Preceptor spent ~2 minutes organizing papers, silently
  • She then began to engage some of the students in some brief discussions about the class (i.e. is this blog post due time working)
  • The remaining time before precept was spent engaging students in casual conversation

Student:

  • The student was on his laptop throughout the beginning of precept (and during)
  • Was procrastinating on the internet (Facebook, Reddit, etc.)
  • Did not converse with the preceptor

Overall Observations

  • Students seemed less inclinesd to engage others when their laptops were available
  • Professor and Preceptors seemed very willing to engage students when it was possible
  • Physical distant made communication between people much less likely to occur
  • The rooms were mostly quiet and speech tended to be hushed
  • Many students appeared to have smart phones available

Brainstorm

 

  1. A live forum, similar to Piazza, is projected in front of the class. Students can log in and ask questions that will be answered in real time by the professor.
  2. Chat room for the students in the class to procrastinate together. Large chat room to post pictures of cats, or discuss the class possibly.
  3. A web space where students can log on and make plans for their next meal (since students often meal exchange and classes usually occur before lunch or dinner). It will able to track email exchanges so students remember to take them
  4. An application that will allow students to mark e-mails that they didn’t have time to respond to, and reminds then to answer them when they have free time before class
  5. 1 vs 100 style game that students can log into before class starts. The game is played with trivia questions from the previous lecture. (basically a trivia game where those who answer the question incorrectly are eliminated). If the 1 player ( a random student) wins then they may be giving some reward.
  6. A twitter style feed where students can log in and post notifications to other students in the class. This can be used to post questions about the class, or to find study groups (i.e. “Hey, anyone want to work on this problem set Wednesday night? cwhetung@”)
  7.  An arcade system that students (and Professors) can log into from their laptops with their netIDs. There will a selection of simple game (light bikes, Tetris, Pong. Etc.) that students can play against each other.  Will have chat to help facilitate communication between players and help members of the class get to know each other
  8. A quick polling system that the professor can use to poll students 10 minutes before class. The poll will be between different short ~6 minute, non-class material lectures, the slides for the winner will be automatically shown and the professor will deliver the short lecture
  9. A Pokémon style game that can only be played against other students in the same class, each student is given a random starter Pokémon t the start of the semester. Since play is limited to the time before class, students are encouraged to arrive early to level their Pokémon
  10. System that students log into as they arrive to precept, a student who is at precept is randomly selected to give a brief analysis of their thoughts on the week’s readings before class begins.
  11. An application that selects a random passage from the week’s reading and projects it before the start of precept. Then students are encouraged to discuss that small slice of the week’s information
  12. A webpage that students can log into . It is a stream of webpage that other students in the class have found to be interesting, it operates as a passive Reddit, where the user doesn’t need to take action as the information is feed to them automatically
  13. An app that can calculate the time to walk between locations on campus quickly. Can be sued to ensure that you don’t arrive early to class and have to wait around!
  14. Before class begins, have last class’s lecture slides repeat on screen as a quick reminder to the students
  15. Digital doodle board that allows students to draw together
  16. Students can sign up online for an off-topic presentation before class (I.e. sing a short song, do a jig)
  17. Have an online poll that would allow students to say what they did/did not like about previous lectures for on the fly improvements

Chosen Ideas

Online Arcade: Gives students a way to have fun, relax and interact with each other easily before class.

Short Lecture Poll: A great way to learn more about a professor’s studies outside of the topic of the class.

Prototyping

Online Arcade:

This slideshow requires JavaScript.

Short Lecture Poll:

This slideshow requires JavaScript.

 

Feedback

Feedback was gathered from three testers, Paulius Paulaskas ’13 (ORFE), Mengou Zho ’13 (WWS) and Eric Penalver ’13 (CBE). I presented each of them with the welcome splash and informed that that it was an activity to be done in the ten minutes before class began. Below are some of them using the prototype:

This slideshow requires JavaScript.

  • It was unclear what the “Play Again” Button was for
  • It was unclear if it was a touch interface or a desktop interface
  • There were no instructions for the games
  • Users couldn’t log out, except for after a game
  • It would be useful to see my record other times as well
  • Users would like to be able to choose who to play in class
  • The ability to see the records of other classmates was highly requested
  • It was unclear why a class had to be selected
  • Users were unsure if they could leave a game in the middle
  • Users would like the ability to chat
  • Would enjoy a friendly form of procrastination before class

Insights:

  • It is extremely important to make it clear to your testers what they are experiencing
  • Students would like a chance to relax before class, rather than work
  • Users enjoyed the social  aspect, but would like it be more pronounced
  • There were aspects that users expected, such as a log out, or leave game button, that weren’t present
  • It would be beneficial to provide users with some analogue that represents the input tools they have available. Such as giving them a keyboard that isn’t attached top anything.
  • Users liked the competition aspect, but it should be made clearer to them who they are competing with, why they are competing with and where the completion stands

 

Assignment 2 – Andrew Boik

1. Observations

Observations were conducted outside near Friend Center and the COS building, in the Architecture building while waiting for COS 461 to start, and in Woolworth 106 before the start of class.

Notes:

1. MUS314 Professor tries to hook up computer to projector and audio system – has difficulty getting everything set up correctly. This seems to be a common occurrence in many of my classes, and it seems to happen more often in specific rooms. Perhaps an app  explaining with instructions and troubleshooting for A/V setup would be appropriate here.

2. Student in COS 436 spends 10 minutes checking Facebook and email. This is a pretty generic use of time. An app that could enhance this experience by combining posts from multiple social networks and email, or summarizing and condensing the content into a few blocks short enough to read in 10 minutes would be appropriate. Or perhaps the student should really be doing homework in which case an app that encourages the student to work or prevents use of certain applications might be useful.

3. Student reads slides for today’s COS 461 lecture before it begins (in Architecture N101). This may be a good way to get a head start on the day’s class, or it may be a waste of time because the student needs extra explanation from the professor to understand what he/she is reading. Perhaps a better use of time would be to review the previous lecture’s material, and an app the lets users swap notes or tests them on concepts from last lecture could be helpful.

4. Student running to Friend Center late for class. This student may have lost track of time in which case an app reminding them to go to class could be appropriate. Maybe they took an inefficient route, suggesting a use for a shortest path directions app.

2. Brainstorming

  1. Desktop app to swap notes with classmates and review before class
  2. Mobile/web app to condense overview of news stories into a specified period of reading time (e.g. 10 minutes) for quick glance
  3. **Mobile app to digitize book/textbook using optical character recognition for reading on-the-go (i.e. going to class/ waiting for it to start), searching for text, and sending pages to friends
  4. Mobile/desktop game to wake up student’s brain to concentrate better during lecture
  5. Mobile/desktop app to provide feedback on lectures to the professor (could use the time before class to provide feedback on the last lecture or use it interactively throughout the lecture)
  6. Mobile study app to review key concepts from last lecture
  7. *Mobile app to let student know where their friends are sitting in a crowded lecture hall
  8. Mobile app to let student know how many seats are left in a lecture hall (to let them know if they need to hurry up to class or if they can slow down)
  9. Mobile/desktop app to calculate the time it will take a student to walk to their next class at their current rate using the most efficient route, letting them know if they need to walk faster or can afford to slow down/leave their current location later
  10. Troubleshooting app for audio/visual setup by a lecturer
  11. App that tells student whether or not they should go to class based on factors such as importance of material in lecture, student’s current workload, weather, student’s ability to stay awake in class, proximity of exams etc.
  12. App that allows teachers to remind students of any materials they need to bring to class
  13. App that delivers the best cat videos of the day to students for viewing before class
  14. App that annoys you if you try to do anything but homework while the app is running
  15. Mobile app that allows you to take pictures of people around you, find their name and Facebook stalk them

3. Ideas Chosen For Prototyping

My favorite ideas were the app to digitize textbooks and the app to let students know where their friends are sitting.

I liked the textbook app idea because sometimes I wish I had my a few chapters of my textbook as a reference before or during class, but I hate having to carry a heavy textbook around.

I liked the find your friends app because a student could determine where their friends are sitting ahead of time, and if a student is late to class they can go straight to where their friend is upon entering the hall without having to spend time looking around.

 

4. Photos & Descriptions of Prototypes

Prototype 1 – Book Digitzer

Photo 2013-02-28 02.56.52

Upon opening the app, the user sees a screen with the digitized books currently stored by the app. In this case, there are none, so a button to add a new book is all that is displayed.

When the user presses the add button, a screen is displayed with options to edit the title and author of the new book and options to digitize the book with a smartphone camera or import it from a photo library.

When the user presses the add button, a screen is displayed with options to edit the title and author of the new book and options to digitize the book with a smartphone camera or import it from a photo library.

In this case, the user presses the edit button next to the title and types in the title.

In this case, the user presses the edit button next to the title and types in the title.

This is the screen displayed after user presses the “Capture book with camera” button. Users can use the camera display to take photos of each page. Users can also edit the page number in the box below the camera button.

This is the screen displayed after user presses the “Capture book with camera” button. Users can use the camera display to take photos of each page. Users can also edit the page number in the box below the camera button.

The user must wait for optical character recognition to complete and digitize the book.

The user must wait for optical character recognition to complete and digitize the book.

Now we are back to the main menu where a button for the new book is displayed.

Now we are back to the main menu where a button for the new book is displayed.

Upon pressing the book's button, the user is presented with a book menu that has several options: read the book from the beginning, select a chapter from the chapter list if entered by user (feature not shown), search for terms, or send all or part of the book to a friend.

Upon pressing the book’s button, the user is presented with a book menu that has several options: read the book from the beginning, select a chapter from the chapter list if entered by user (feature not shown), search for terms, or send all or part of the book to a friend.

This is the book viewer screen with buttons to return to the book menu, go back a page, go forward a page, and search for terms on the page.

This is the book viewer screen with buttons to return to the book menu, go back a page, go forward a page, and search for terms on the page.

This is the search screen where the user is search for the word ‘serial’. A list of pages on which the term appears and a brief context in which it appears are displayed.

This is the search screen where the user is search for the word ‘serial’. A list of pages on which the term appears and a brief context in which it appears are displayed.

This is the sharing screen, where the user can send the entire book or a range of pages to a friend via email. Other possibilities could include sharing through social networking sites such as Facebook.

This is the sharing screen, where the user can send the entire book or a range of pages to a friend via email. Other possibilities could include sharing through social networking sites such as Facebook.

Prototype 2 – Friend Seat Finder

The main menu screen is displayed here. Users can press “find seat near friends” to access the primary functionality of the app, press “friends” to display a list of their friends, press “My profile” to display their profile with options for editing, and “Choose school” to select from a list of schools for which the app is designed for.

The main menu screen is displayed here. Users can press “find seat near friends” to access the primary functionality of the app, press “friends” to display a list of their friends, press “My profile” to display their profile with options for editing, and “Choose school” to select from a list of schools for which the app is designed for.

This screen displays the user’s profile with fields for name, class, major, and schedule. There is also an option to have a profile picture. Depending on the school chosen by the student, editing schedule will present a list of classes currently being offered that semester that the user can add to their schedule.

This screen displays the user’s profile with fields for name, class, major, and schedule. There is also an option to have a profile picture. Depending on the school chosen by the student, editing schedule will present a list of classes currently being offered that semester that the user can add to their schedule.

This screen displays the user’s list of friends. People in this list have installed the app on their app or desktop and have accepted the user’s friend request. Users can click on a friend to view their profile, and add/remove friends by selecting the friend from the list and pressing the ‘+’ or ‘-’ buttons, respectively.

This screen displays the user’s list of friends. People in this list have installed the app on their app or desktop and have accepted the user’s friend request. Users can click on a friend to view their profile, and add/remove friends by selecting the friend from the list and pressing the ‘+’ or ‘-’ buttons, respectively.

This screen displays a friends profile. The friend’s name, class, major, profile pic, and schedule are displayed.

This screen displays a friends profile. The friend’s name, class, major, profile pic, and schedule are displayed.

This is the add friend screen. Friends can be invited via email, selected from a list of contacts, or invited through Facebook or Google+.

This is the add friend screen. Friends can be invited via email, selected from a list of contacts, or invited through Facebook or Google+.

This is where the action happens! SeatFinder keeps track of your schedule, and when it is almost time for class the app will display a map of the room in which the class is being held. The user can broadcast to their friends where they are sitting by clicking on a part of the seat map. The location of their friends is represented by a pin with a picture of their friend above. The total number of friends in class is also displayed under the map.

This is where the action happens! SeatFinder keeps track of your schedule, and when it is almost time for class the app will display a map of the room in which the class is being held. The user can broadcast to their friends where they are sitting by clicking on a part of the seat map. The location of their friends is represented by a pin with a picture of their friend above. The total number of friends in class is also displayed under the map.

 

5. User Testing

Notes:

User testing was done with the textbook digitizing app.

Testing was conducted with four users in various locations: two eating clubs, a room in Frist, and a dorm room. Users were all seniors majoring in Physics, Computer Science, or Ecology and Evolutionary Biology. Users were given a brief description of the app’s purpose, but no instructions on navigating the interface.

One user noted that there are apps similar to this, such as Genius Scan. However, it was noted that this app would also do optical character recognition and index terms to allow for advanced search capabilities.

Overall, users navigated successfully through the interface and used the prototype for its given purpose. Some users were confused as to what some of the screens were – for example, the screen that allows users to read through the textbook.

One user was confused by one of the buttons – the add new book button in the first screen – saying the design reminded them of the Red Cross.

Pictures:

Photo 2013-02-28 02.56.47

Liz scans a page of her textbook and sends it to Amma.

Photo 2013-02-28 02.56.40

Amma forgot her textbook, so the pages Amma receives are very helpful for reviewing before class.

Photo 2013-02-28 02.56.24

Sam scans pages from her notebook.

Photo 2013-02-28 02.56.19

Sam emails the pages to Ben.

Photo 2013-02-28 02.56.12

Ben receives Sam’s notes and is able to review them while eating.

 

6. Insights

Most of the confusions regarding the screens of the prototype seemed to be limitations of the prototype as opposed to a flaw in the app design itself. Perhaps text labels for each of the different screens will make it clearer to the user what the desired purpose of the particular screen is, although if used in an actual app I believe the screen’s purpose would be readily apparent.

The confusion over the button design may stem from the low-fidelity of the drawing and could possibly be mediated by ensuring there is corresponding text with every button.

A tutorial may also be helpful in reducing confusion of the user.

Most of the interface of the prototype is similar to countless other apps. The target market for this app, college students, are mostly familiar with smartphone apps. The test users are all college seniors from a variety of majors, so they are most likely a good representation of the target demographic. Their success in using the app shows there is a high probability that the target demographic will be able to successfully use the app.

A2: Gravi-Keys

Observations:

(MAE 305 lecture and HCI lecture) In the CS 104 lecture hall, the seats are tightly spaced. Frequently, those who sit on the sides of the lecture hall need to get up in order to let others through. This can be an inconvenience and is uncomfortable for those sitting in the lecture. Another observation I made was that many students who make the long walk to the CS building blow on their hands for warmth upon entering lecture. They do so in the 10 minutes before lecture in order to prepare for the note taking or typing they will do during the class.

(MOL 348 lecture) In this lecture, the professor asks questions to the class in the form of clicker questions. In the 10 minutes before class, I asked a student about any inconveniences she had experienced with the iclicker system, to which she responded “I forget my clicker all the time!” I then decided to observe the class for other students who have had the same problem. Sure enough, in the first 10 minutes, one guy dug frantically through his bag before letting out an exasperated sigh. Perhaps a better system could be devised.

(At ORF precept) I observed my preceptor as he walked into the classroom shortly before the start of precept. One thing I noticed was that, although he shouldered a laptop bag, he was holding a lot of things in his hands instead of placing them in the bag. Among the things he was holding were a textbook, notebook and Macbook. With all things out, he was able to set up for the precept quickly, but the walk to the classroom looked uncomfortable and potentially hazardous. He then proceeded to put some notes on the board and check the time.

(On the way to ECO 101 lecture) On the walk to lecture, I observed many people walking with a cup of tea or coffee in one hand, and a phone in the other. Activities on the phone varied, from making a call to sending texts. This is hazardous to phones, as dropping a phone while walking is a common occurrence and results in many broken screens. One girl I observed was holding a tall cup of coffee in addition to a set of notebooks while texting. She looked flustered as she struggled to type out her message.

Brainstorming: 

(Collaboration with Jae Lee)

  1. Hand warmer mats on desks, activated when they sense force
  2. Poll/attendance at entrance of lecture hall/precepts for classes that take attendance
  3. Poll/attendance at exit of lecture hall that discourages people from leaving early
  4. App that tells you where your friends are and if seats are occupied in a lecture hall
  5. App that has a map of the lecture hall that you can use to “reserve” seats for friends
  6. App that tells you outlet locations in lecture halls and if they’re currently being used
  7. App that lets bikers press the crosswalk button without getting off their bike
  8. App that wakes you when you doze off in lecture or even before the lecture starts
  9. A live chat app OIT that is accessible on all computers built into lecture halls
  10. An app that cancels odor when it detects that you fart or burp in a lecture hall
  11. A system that lets professors see what they’re writing from the back of the room
  12. A portable device that can project things clearly onto a blackboard
  13. A device built into a blackboard that erases it automatically from the previous class
  14. A system that allows for delivery from restaurants directly to your lecture hall
  15. A device that scrolls your phone by following the movement of your eyes
  16. A keyboard that condenses keys to whichever hand you hold the phone with

Favorite Ideas:

11. See what you write

I chose to prototype this application because it has the potential to benefit the overall learning experience of students, and because I wasn’t exactly sure how the system would work.

16. One handed keyboard

I chose to prototype this application because I wanted to get user feedback for it in hopes of both improving the details of its design and solving the problem that I observed in people walking to class while texting with one hand.

Prototypes:

Blackboard Visualization App:

Professors can use this app before and during lectures while they write on a blackboard using a camera from the back of the room perspective. The goal of the app is to allow for neater presentation of material and to make professors more conscious of how large they write on a board. Additionally, professors would no longer need to inquire, “can everybody see this in the back?”

Gravi-Keys:

The idea behind this app is that there is an external sensor that detects how many hands you are using to hold your device. If it senses that you are using one hand to type on your phone, the keys will automatically gravitate toward the hand. This decreases the area of each key and space between keys, but the idea is to allow for the reaching of far away keys, such as P and “Send” for the left hand and Q for the right hand. This makes texting while holding other things easier, especially for students going to class.

User Testing: 

I had users test Gravi-Keys. The feedback I received from the tests was tremendous and helped me improve upon many aspects of the design. Based on which hand the user was using to test out the design, I asked users to spell out a word on the screen using only one hand that would require them to stretch their thumbs.

Nora Chen:

Nora enjoyed all configurations of the application. Her small hands made it difficult for her to spell out words containing the letter ‘P’. She was the first to demonstrate that having the “Send” button on the right side of the screen greatly inconveniences left-hand phone users, and contributed to the initial design of just shifting keys by adding button shifts as well.

This user was able to text while taking a sip of her drink.

This user was able to text while taking a sip of her drink.

David Newell-Smith:

David was holding a drink while he tested. He had difficulty spelling out words containing the letter ‘Q’ on the regular configuration. He felt that the right hand vertical configuration made the keys too small, as his thumb was quite wide, but felt that the horizontal configuration was more promising.

This user realizes the difficulty of typing with one hand on the normal keyboard.

This user realizes the difficulty of typing with one hand on the normal keyboard.

Stephen Wang:

Stephen, like David, preferred to use the horizontal configuration over the vertical configuration. He said the smaller keys of the vertical configuration would have been an inconvenience, but the horizontal configuration suited him.

This user enjoys the benefits of the right hand horizontal configuration. He was satisfied with the results.

This user enjoys the benefits of the right hand horizontal configuration. He was satisfied with the results.

Oladoyin Phillips:

Oladoyin was able to successfully use the app while holding a book, which was something that many students did during my observations. She had difficulty typing out the word on the normal configuration, but benefitted from all shifted key configurations.

This user is able to text while holding a book.

This user is able to text while holding a book.

Nana Kwasi Boohene:

Nana’s long fingers made typing on the normally configured keyboard easy, but he agreed that the new configurations allowed for gripping the device more securely. He was the first to point out that the design should include key shifts for both right and left handed phone users.

This user is able to text while holding snacks and a drink.

This user is able to text while holding snacks and a drink.

Insights:

  • Users generally voiced concerns about how the device would actually detect how a user is holding it. This problem has yet to be worked out.
  • When testing the left-handed horizontal configuration, one user pointed out that the current message bar should not grow downward and change the position of the keys. Instead, they should grow upward on the right side of the screen. I made this change when making the right-hand horizontal configuration (see prototype photos).
  • For the Gravi-Key configurations, users had the easiest time reaching the furthest keys in the normal configurations, but the closer keys became harder to hit due to the inflexibility and large area of the thumb (i.e. ‘P’ became easier to hit than ‘Q’ for a left-hand user and vice-versa for a right-hand user). A correction was made to make the leftmost keys larger and the rightmost keys smaller for the left-hand configuration and the same for the right-hand configuration.
  • Most users preferred the horizontal configurations to the vertical configurations in terms of how useful or accurate it would be.
  • One user pointed out that other texting methods such as swipe could resolve the cramped setup in the vertical configurations.
  • Another user suggested that the space created when keys gravitate can be used for more display area, other buttons, or even ads
  • All users were pleased with the design and wanted to see more! They agreed that texting with one hand could be inconvenient at times, and that this product could potentially be of help to them.

A2 – Junjun Chen

Observations:

I did most of my observations before COM 313, Monday 1:30. I arrived 15 minutes early, to an empty classroom. The first person arrived around 1:20. She got out her tablet and checked her email for a couple minutes. Then, she opened the readings we had for this class, and flipped through that for the rest of the time. More people started arriving around 1:25. (A couple students arrived with headphones on.) One girl got out her laptop, and continued a readings she had open. She would occasionally switch tabs to browse the web: facebook, tumblr. Another girl had her calendar open (as well as many other windows). After checking her schedule, she opened a reading for another class, then switched to her email. She started writing an email, referencing her schedule occasionally.

Several other people also checked email/schedules, then opened up their notes for this class, started a new heading, and waited. Several read back over readings they had for this class, as well as the notes they had taken from last week. Most students arrived within a couple minutes of 1:30, which seems in line with what most people I’ve talked to have told me: that there is really not much time between classes, and it often takes the whole 10 minutes to get from one class to the next.

The professor came in right around 1:30 and passed out notes. Then he started an attendance sign-in sheet.

Brainstorming:

  1. An app to submit comments/questions on the lecture to the professor.
  2. An app that shows highlights from the previous lecture.
  3. A way to help organize windows/notes/browser tabs for a class and open/close them together.
  4. An app that breaks readings into small chunks that you can read in spare minutes.
  5. An app that makes group scheduling easier/more automatic by syncing with your calendar.
  6. An app that helps that tells you which friends are in classes close by so you can get together for lunch.
  7. App for ordering food from late meal.
  8. An app that calculates the time it would take to get from your current location to your next class, and tells you when it’s time to leave.
  9. An app to find an open seat (least disruptive) for the late student.
  10. An app that finds the shortest path to class from current location.
  11. A way for professors to save their settings for lights/projector.
  12. An app that lets you check in to class for attendance/sign in.
  13. An app that plays 5 minute clips of audio to learn a foreign language on the way to class (Alex Zhao).
  14. An app that reads your readings to you (text to speech), so you can listen as you’re walking to class.
  15. An app that makes it easier to add events from your email to your calendar.

Favorite Ideas:

1. Number 8: There are a lot of people who are early to class and don’t have anything to do, as well as late to class, suggesting that it is difficult for some people, including myself, to judge how long it takes to get from one location to another.
2. Number 14: It takes advantage of the time students spend walking to class (which takes up most of the 10 minutes), and breaking down a week’s readings into 10 minute segments helps prevent procrastination.

Prototypes:

Number 8: An app that calculates the time it would take to get from your current location to your next class, and tells you when it’s time to leave.

A screen showing your classes.

IMG_20130301_162018

Add a class: Class Name, Date, Time, Location.

IMG_20130301_162033

Edit a class: Class Name, Date, Time, Location.

IMG_20130301_162044

An alert will show up on your phone when it’s time to go.

IMG_20130301_162053

Number 14: An app that reads your readings to you (text to speech), so you can listen as you’re walking to class.

A screen of your current documents. (Main page)

IMG_20130301_161954

Add a new document. (New Document page)

IMG_20130301_162003

Choose one to read. (Page 2)

IMG_20130301_161943

Testing/Feedback:

I tested the prototype for idea #14 on three students. I first gave each user the prototype (starting on the Main page), explained the purpose of the app, and had them navigate freely through the app. Then, I asked each of them complete the following tasks on the prototype: 1. Select a document and play it. 2. Skip to the next section. 3. Add a new document. 4. Delete a document. I observed that all of the users had little trouble completing most of the tasks, and their feedback confirmed this.

Select reading (users 2 and 3):

IMG_20130301_202306 IMG_20130301_220555

Play the current selection (users 2 and 3):

IMG_20130301_202430IMG_20130301_220612

Add a new paper/document (user 2):

IMG_20130301_202545

The first thing I realized with the first user was that I needed a back button from Page 2 back to the Main page. I added this before testing with users 2 and 3. Before I gave them specific tasks, only one user pressed the ‘+’ button on the Main page; the others just clicked on an individual document, which took them to Page 2.

Insights:

The delete button placment: The second user had some trouble deleting a document, as she didn’t see the delete button. The third user also commented on the delete button placement as not what she expected. Perhaps having a delete button on the Main page (instead of having it on Page 2) would be more intuitive. Also, the delete button should have a prompt, asking if the user really wants to delete the document.

Some general points:

Adding a document may be difficult, if the users don’t have it on their phones (and they are not very likely to). It would be a hassle to download the paper onto the phone or find the url of the paper. Perhaps it would be better to have a web interface for managing papers.

The first student, a psychology major, brought up the point that many scientific papers come with graphs/pictures, which the current prototype wouldn’t handle very well. It would be better if the graph was shown on the screen when it is reference.

 

Lab 1 – MusicVisualizer

Team Chewbacca: (Group 14)
Karena Cai
Stephen Cognetta
Jean Choi
Eugene Lee

We built a music-visualizer device, where you can play music and visualize the music being played. Using the soft pot sensor to determine pitch, the button to change arpeggio modes, and the potentiometer changes tempo. We used the buzzer to output the sound and Processing to visualize the outputs. We built it because it’s cool, we wanted to integrate Processing with our device, we wanted to do a music project, and we thought it might be useful for helping people who can’t read music to visualize basic music notes and chords in an intuitive way. Overall, this was a successful project in that we were able to visualize the music we played accurately. We didn’t quite get perfect measurements, the soft pot sensor did not seem to exhibit linear behavior. Another issue we had was that we originally attempted to make a different idea, which just played music and changed between tracks: after completing this we ultimately decided to switch to our current idea.

Three Sketches:

20130301_18285320130301_184427

 

20130301_185602

Storyboard:

photo

Video

http://www.youtube.com/watch?v=3pUHGMbRqRo&feature=youtu.be

Materials:
Potentiometer
Buzzer
Soft Pot Sensor
Button

Instructions:
Hook up the inputs: potentiometer, the soft pot, button
– Hook up the outputs: buzzer
– After hooking up those inputs/outputs through the appropriate means, develop the Arduino and Processing code to take the three inputs and output them to the buzzer and to Processing. The detailed circuit diagram is shown above, following that diagram should be sufficient to recreate our design.

 

Borrowed code/instructions from:
http://www.arduino.cc/en/Tutorial/Graph (Arduino -> Processing code)
by David A. Mellis modified by Tom Igoe and Scott Fitzgerald

Source code

  • Processing Visualizer:
    // Graphing sketch

   // This program takes ASCII-encoded strings
   // from the serial port at 9600 baud and graphs them. It expects values in the
   // range 0 to 1023, followed by a newline, or newline and carriage return

   // Created 20 Apr 2005
   // Updated 18 Jan 2008
   // by Tom Igoe
   // This example code is in the public domain.

   import processing.serial.*;

   Serial myPort;        // The serial port
   int xPos = 1;         // horizontal position of the graph

   void setup () {
     // set the window size:
     size(1000, 300);        

     // List all the available serial ports
     println(Serial.list());
     // I know that the first port in the serial list on my mac
     // is always my  Arduino, so I open Serial.list()[0].
     // Open whatever port is the one you're using.
     myPort = new Serial(this, Serial.list()[0], 9600);
     // don't generate a serialEvent() unless you get a newline character:
     myPort.bufferUntil('\n');
     // set inital background:
     background(0);
   }
   void draw () {
   // everything happens in the serialEvent()
   }

   void serialEvent (Serial myPort) {
     // get the ASCII string:
     String inString = myPort.readStringUntil('\n');
     // 0 = lin/frequency, 1 = pot/tempo   

     String[] inStrings = split(inString, ',');
     float[] inBytes = new float[inStrings.length];
     println(inString);
     for (int i = 0 ; i < inStrings.length; i++) {          inStrings[i] = trim(inStrings[i]);          inBytes[i] = float(inStrings[i]);      }      //println(inBytes);            inBytes[0] = map(inBytes[0], 0, 1023, 0, width/3);      float tempo = inBytes[0];      inBytes[1] = map(inBytes[1], 0, 1023, 0, height/2);      float frequency = inBytes[1];            float rectWidth = tempo;            // at the edge of the screen, go back to the beginning:      if (xPos + rectWidth >= width) {
       xPos = 0;
       background(0); 
     } 

     //println(rectangleWidth);
     // draw the line:
     int color1 = color(127, 34, 255 - frequency);
     fill(color1);
     rect(xPos, 0, rectWidth, (int)frequency);

     // increment the horizontal position:
     xPos += rectWidth;
   } // END serialEvent
  •  Arduino
/*
  Graph

 A simple example of communication from the Arduino board to the computer:
 the value of analog input 0 is sent out the serial port.  We call this "serial"
 communication because the connection appears to both the Arduino and the
 computer as a serial port, even though it may actually use
 a USB cable. Bytes are sent one after another (serially) from the Arduino
 to the computer.

 You can use the Arduino serial monitor to view the sent data, or it can
 be read by Processing, PD, Max/MSP, or any other program capable of reading 
 data from a serial port.  The Processing code below graphs the data received 
 so you can see the value of the analog input changing over time.

 The circuit:
 Any analog input sensor is attached to analog in pin 0.

 created 2006
 by David A. Mellis
 modified 9 Apr 2012
 by Tom Igoe and Scott Fitzgerald

 This example code is in the public domain.

 http://www.arduino.cc/en/Tutorial/Graph
 */

// ******************************************************
// CHORD INITIALIZATION
// ******************************************************
int singleNote[] = { 1, 1, 1, 1 };
int majorChord[] = { 4, 5, 6, 0 };
int minorChord[] = { 10, 12, 15, 0 };
int seventhChord[] = { 20, 25, 30, 36 };
int majorChordLength = 3;
int *chords[] = { singleNote, majorChord, minorChord, seventhChord };
const int chordsLength = 4;

int chordType = 0;                // changes between chords[]
int arpStep = 0;                  // changes between chord frequencies

// ******************************************************
// INPUT INITIALIZATION
// ******************************************************
const int linPin = A0; 
const int potPin = A2;
const int btnPin = 12;
const int tonePin = 10;
boolean firstButtonCycle = false; // button 'debouncer'

// pressing the button changes the chord number
void buttonControl(int btnReading) {
  if(btnReading == HIGH){
    // firstButtonCycle prevents the device from changing songs rapidly when 
    // the button is held down
    if (firstButtonCycle == false) {
      firstButtonCycle = true;
        // change the chord type
        chordType = chordType < chordsLength - 1 ? chordType + 1 : 0;
      }
  }
  if(btnReading == LOW){
     firstButtonCycle = false;
  }
}

// ******************************************************
// MAIN LOOP
// ******************************************************

unsigned int tempo;
unsigned int frequency;
unsigned int chordFrequency;

void setup() {
  // initialize the serial communication:
  Serial.begin(9600);
}

void loop() {
  int linReading = analogRead(linPin);
  // send the value of analog input 0:
  int potReading = analogRead(potPin);
  int btnReading = digitalRead(btnPin);
  // send the value of analog input 0:

  // wait a bit for the analog-to-digital converter 
  // to stabilize after the last reading:
  delay(2);

  tempo = potReading/3 + 10;

  buttonControl(btnReading);
  int* chord = chords[chordType];
  float chordFactor = (float)chord[arpStep] / (float)chord[0];

  if (linReading < 1020) {
    frequency = linReading;
  }
  chordFrequency = frequency * chordFactor;

  Serial.print(tempo);
  Serial.print(",");
  Serial.println(chordFrequency);
//Serial.print(",");
//  Serial.println(chordType);

  unsigned int duration = tempo - tempo / 20;
  delay(tempo);
  tone(tonePin, chordFrequency, duration);
  arpStep = arpStep < majorChordLength ? arpStep + 1 : 0;
}