Composition

Composition is an extremely important concept that needs to be considered from the beginning all the way to the through to completion when designing. We were asked to create a potential ITP Winter Show 2016 poster that demonstrates what ITP means to me.

I key concept that I think really represents ITP is the fact that this program is the intersection of so many different types of disciplines, so that is what I wanted to focus on in creating my poster.

I made two images with the same concept

Proposal 1:

I wanted to use the idea of the Manhattan subway map to show inter-sectionalism of ITP.  I took the current subway map and manipulated it so that ITP was the center of it's surrounding lines. I also labeled each of the subway routes in a couple of the disciplines that we frequently see here at ITP. I attempted to create my own "map" to the event that these two eager prospective students are preparing for. Including these perspective students, along with their messy handwriting, adds a human element to the image.

Additionally, ITP on the map, was intentionally placed to the left and down to create an appeasing composition, rather than having it simply in the middle of the image.

Proposal 2:

This was the original image that I had in mind. I feel as though the both put forth the concept of inter-sectionalism, but this one has the human element left out.

Out of the two, I believe Proposal 1 is the strongest choice.  It seems to grabs the eye and feels easier to relate to.

Synthesis Workshop - Combining PComp and ICM

The purpose of this workshop was the apply learnings from physical computing and combine that with Introduction to Computation Media to create physical interactions on the breadboard and have the result be reflected on the screen in the p5.js editor. The first activity was to use a potentiometer to move an ellipse across the screen as you turned the dial from 0 to 1023 and the second activity was to use a button to have an ellipse disappear on a screen when pushed.

This is what my board looked like for both of those exercises

The tricky part was ensuring that the breadboard and Arduino properly spoke to the p5.js library through serial communications.

Here were the exact instructions for the above activities (I want to share them here because there are a lot of variables and I want to be sure not to miss anything):

1. Download the P5 Serial Control application. This application serves as a bridge between your arduino and your p5 sketch. For it to run you'll on a mac you either need to have "allow apps downloaded from anywhere" enabled or cntrl-click to open. More info on apple's help pages.
2. Open the following example, connect your arduino, and get it running. (You can "duplicate" it in the p5 editor to save it into your account.) Make sure the editor is using http and not https.
   • p5.js code for reading analog value. Works with AnalogReadSerial Arduino sketch, found in the Arduino IDE, File menu, Examples-> Basics —> AnalogReadSerial. Turn a potentiometer from 0 - 1023, the ball moves from 0-255 on the screen.
   • p5.js code for reading digital value. Works with DigitalReadSerial Arduino sketch, found in the Arduino IDE, File menu, Examples -> Basics —> DigitalReadSerial. Push a button, ball appears or disappears.

The examples use the p5.serialport library. You can read documentation and find more examples.

You might notice the above examples use a new concept called a "callback." This is a concept we will examine in detail next week in ICM while looking at "DOM manipulation." A quick explanation for how this relates to serial communication is as follows:

There is an "event" each time your p5 sketch receives data from the serial port. You get to decide what function is executed for that event. In the case of the examples, that function is serialEvent().

// When there is data, run serialEvent  
serial.on('data', serialEvent);

The above line of code then requires you write a function called serialEvent() to handle the data.

function serialEvent() { 
// Your code for reading the data goes here. 
}

The only issue that we ran into was with the potentiometer activity -- when the ellipse moved across the screen it was very jittery. Apparently there is a smoothing function that can help with this issue

Application

Finally, we were asked to create out own "physical variable sketch" in p5.js.  We were given the option to create a new sketch and add a physical component or incorporate a a physical interaction through serial on a previously created sketch.

My partner, Dominic, and I decided that we would implement a button interaction to a previous sketch that I created for ICM: Horus.

Because this was a previously generated sketch we had to upload p5.serialport.js file and link the this to the index.html file by including this line of code:

<script src="p5.serialport.js"></script>

Here is the code in the p5.js Horus sketch that allowed the serial communications to work in the browser:

var clicked = false;
var lastPeriodic = 1;
var serial; // variable to hold an instance of the serialport library
var sensorValue = 0; // ellipse position

function periodic(freq) {
 if (clicked == false) {
 return lastPeriodic;
 }
 // sin of frequency * two pi * time
 lastPeriodic = sin(freq * TWO_PI * millis());
 return lastPeriodic;
}

function randColor() {
 if (clicked == true) {
 fill(random(255), random(255), random(255));
 }
}

// When mouse is clicked, switched Boolean value of clicked
function mouseClicked() {
 clicked = !clicked;
}

function setup() { 
 createCanvas(400, 400);
 serial = new p5.SerialPort(); // make a new instance of serialport library
 serial.on('list', printList); // callback function for serialport list event
 serial.on('data', serialEvent);// callback for new data coming in
 serial.list(); // list the serial ports
 serial.open("/dev/cu.usbmodem1411"); // open a port
}

function draw() { 
 background(220);
 randColor();
 // Stroke growing based on time
 strokeWeight((millis() / 75) % 400);
 // Draw ellipse using periodic function for width and height
 ellipse(width / 2, height / 2, 300 * periodic(22), 300 * periodic(22));
 if (sensorValue !== 0) {
 clicked = true;
 }
 else {
 clicked = false;
 }
}

function printList(portList) {
 for (var i = 0; i < portList.length; i++) {
 // Display the list the console:
 println(i + " " + portList[i]);
 }
}

function serialEvent() {
 var inString = serial.readLine();
 if (inString.length > 0) {
 inString = inString.trim();
 sensorValue = Number(inString/4);
 }
}

Here is a video that demonstrates how the button behavior affected the Horus sketch

I would be interested to also include the potentiometer in this sketch so that the Horus eye moved from right to left with the values on the potentiometer. Combining two serial inputs is something that we will be working on in class this week, so I hope to implement after.

Re-working the fire fox

For this assignment we were asked to take an existing project to re-work and clean up the code using functions, objects and arrays -- I selected my fire fox sketch. The purpose of using functions is to compartmentalize and simplify the code.

By creating a fox function() that called all of the arguments needed to construct the fox, I am not able to easily change the following:

1. the x, y coordinates of the fox without having to move each shape individually
2. create multiple foxes as seen in the image below
3. add variation to the additional fox without affecting the original fox

Here is the location to view the code for the fire fox.

I definitely see the benefit of using functions however this assignment turned out to be a lot more difficult that initially expected.  For some reason, the way functions work doesn't come easily and so this sketch rework took me quite a long time. I am going to take more time this weekend to understand the basic principles.

One specific issue that I was having was that if you have a variable in the header that references random(), it breaks the code.  For a very long time I didn't understand what was going on.  Apparently, you need to call the random() in the setup() or draw() and not in the header because random() is a specific function to p5.js and the library needs to be referenced before this can be called (?).

Colors of My Life

   

Analog Output - Theremin Jam

One of my favorite musicians is the guitarist from the band Phish -- Trey Anastasio. He plays a mean guitar and sometimes a trippy theremin.For class no. 4 in physical computing we were asked to create an analog output circuit. My mind went immediately to creating a theremin after applying the tone() function to a piezo in class.

Why not create a theremin to jam with your favorite musician, right? Below is my attempt at a v.1 theremin:

Here is the entire song of Trey Anastasio and OysterHead playing Shadow of a Man live.

The code was fairly simple to produce the theremin effect:

const int speakerPin = 9;

void setup() {
 pinMode(speakerPin, OUTPUT);
 Serial.begin(9600);
}

void loop() {
 int senState = analogRead(A0);
 int frequency = map(senState, 500, 1000, 3000, 50);
 tone(speakerPin, frequency);
 Serial.println(senState);

}

The tone() function gives you the ability to change the frequency, when mapped to the light sensor using the map() function, based on how much light it emitted on the light sensor.

Because I wanted to have the theremin be making noise in the dark, the 3000 number was used first in the 'min & max' of the mapping function.

ex.

map(potState, 500, 100, 3000, 50);

rather than

map(potState, 500, 100, 50, 3000);

If I were to use the second map() function in the example, then the piezo would only make sound if the light was removed from the sensor.

The components list:

1. light sensor
2. 10K resistor
3. A3 piezo

Here is what the circuit looks like: