ICM / Week 7 / API and JSON

For this homework assignment, I used the NYTimes API in attempting to create simple data visualization with movie reviews. I wasn’t able to get far in my sketch because I was struggling with attaching the Key to the API JSON string.

Tried the following that didn’t work:
1) var url = ‘https://api.nytimes.com/svc/movies/v2/reviews/search.json’+’&APPID=ADD KEY HERE‘;
2) var url = ‘https://api.nytimes.com/svc/movies/v2/reviews/search.json’
var apikey = ‘?&apikey=ADD KEY HERE‘;

But this line worked:
loadJSON(“https://api.nytimes.com/svc/movies/v2/reviews/search.json?api-key=ADD KEY HERE“, gotData);

Now that I was finally able to attach the data to the sketch, it now displays 1 ‘film title’ of the movie review in the console. I tried following Shiffman’s NYTimes & API video to create variables (eg: createElements and createP) but the results doesn’t run, so I’m stuck at that point for now.


function setup() {
  loadJSON("https://api.nytimes.com/svc/movies/v2/reviews/search.json?api-key=ADD KEY HERE", gotData);

function gotData(data) { 
    //var articles = data.results;
    //for (var i = 0; i < articles.length; i++) {
    for (var i = 0; i < data.number; i++) {
      ellipse(random(width), random(height), 16, 16);*/


ICM / Week 6 / HTML, CSS and Holmes


I’ve been thinking about using maps and Sherlock Holmes as a project for awhile. I originally planned on building a map of London in p5, but when we had class last week and learned to use jpgs from websites, it made it quicker to build this because it would of taken me the rest of the semester to actually built it. There’s a lot more that I would do with this idea. On the top header, there is a Sherlock quote. I gathered some other Sherlock quotes and collected them in an excel file, so it would be great to be able to press a button and generate the different Sherlock quotes. And for the mousePress, I would like to be able to hover over the map, press a key location and then have a magnifying glass appear with a closeup of the building inside of the circle of the glass for places like Scotland Yard, Baker Street and some other Sherlock haunts of London.


S&V / Weeks 5-7 / Looking for 語言

Looking for 語言 (Language): Video Portrait by Paula Leonvendagar, Sejo Vega-Cebrián, Anne-Michelle Gallero

From the very moment that we started talking about what we were going to do for this 4-week video project, Paula, Sejo and I were all in agreement that we wanted to do a documentary style portrait. That following Sunday after we formed our group, we went to the PBS POV Digital Lab NYC to get some inspiration. It was eye-opening to see how people were adding interactivity to their video projects and documentaries, like using VR, 360-degree cameras or just having the viewers choose storylines to follow.

Our next step was to choose a subject that everyone in the group would be excited about. We all brought some ideas of possible portraits ranging from a NYC waitress/actress/writer, reporter/editor, a homeless person to Ken Perlin, an NYU professor for Computer Science who created a computer graphic’s texture used in the movie, Tron. Sejo didn’t get a response from Perlin in time before the storyboard deadline, so we sadly didn’t pursue that route. Paula did have a really interesting conversation with a classmate which lead to the subject of our video, an anonymous portrait in Chinatown. ITP has a large population of foreign students, living in NYC and even the United States for the first time. It was something that we wanted to explore and that some of us (as international students) can relate to. Our storyboards were made up of all these different places that were visual and colorful pockets of New York’s Chinatown. Our subject had only been living there for a month or so, and the area was fairly new to her.


During filming, we decided to use two Canon 5D cameras for handheld use with a 50mm lens and another for a tripod with a 24-105mm lens. We were moving around the city pretty fast at night and using a handheld was really helpful in capturing the spontaneous moments. We were following our subject around Chinatown after her long day of classes and went where she wanted to go. Because of this, our storyboards went a little off script but it was her walk around town.

We had so much video that we shot and I commend Sejo and Paula for editing the piece down to shape and clarify the story. After getting feedback from the rough cut without sound, it was good to hear everyone’s opinions on the pacing and creating some quieter moments in this busy piece.


With all the material that we collected that night, we could work on this video forever, but this really was a 4-week crash course in video and Adobe Premiere editing. I do plan on watching the watching the 10-hour Premiere tutorial on lynda.com at a more leisurely pace. And Marina’s slides are awesome and quick sources to use cause I do plan on pursuing these mediums of storytelling. When I was an undergrad, I majored in Visual Arts concentrating on filmmaking and photography, but didn’t end up doing that as a career after college. It was good to get behind the cameras again cause it was something that I loved to do, but haven’t had the opportunity to do. Although the footage that I shot from my first shoot was a little shaky and sometimes out of focus, I was definitely more conscientious about learning from my mistake. When I shot additional footage on a second outing, I figured out how to move the camera steadier and had my fingers constantly adjusting the lens for better focus. I also worked with a curious and talented group that gave lots of encouragement during the process to be creative and to learn while having some celebratory moments over Tsingtao and soup dumplings.

S&V / Week 4 / Storyboards and Synopsis

I partnered up with Paula Leonvendagar and Sejo Vega-Cebrián to work on our video portrait of an international student from China living in New York for the first time. One of the creative challenges of this project is that it will be an anonymous portrait where we will not reveal her face but concentrate on her words and the images of Chinatown. Below is our synopsis and storyboards for her story.




Looking for 我最喜欢的洗发水
It’s her first time in Chinatown, she just arrived from China to New York as an international student studying in the United States. In this colorful and fascinating neighborhood, we walk with her. Listening to her thoughts and first impressions about the city, and this city inside the city.

Chinatown. Is it like mainland China for her? Or is it different? Does she like the food, the places, the people? Can she find a little bit of home here? How does this international student from China feel in a tight-knit community of Chinese-Americans?

Through this anonymous portrait with a subjective sight, we follow a fresh perspective on the Chinese community in New York City and take a glimpse into the mysterious culture of China.


This small 3-5 minutes piece will be a point of view of our character and her experiences around the town, though we will work mostly with a handheld camera as her P.O.V. Despite this we will use some wide shots to settle our character in the context of the big city and it ́s visual richness. We will never see her face, just her silhouette, shadow and her tiny body lost in the multitude of the town. We want to keep this anonymous voice that will help to maintain a poetic mystery through the piece and also to get deeper into her intimate perceptions. We want to capture both, her fresh and sharp sight and all the intensity and beauty of Chinatown.

The sound will be composed through the narrative of her voice, the sounds of the city and some music. In the music we will mix new compositions and traditional music from China, to create the feeling of contrast in between different generations from China.

PCOM / Week 6 / Serial Communication

In continuation of the upcoming elections, I took a ICM sketch of Hillary & Trump as bouncing balls that I created last week and attached a button switch to make an element appear and a potentiometer to make the element move around the canvas.

When I try to merge the sensorValue to the an element of the sketch that I want to map it to, it doesn’t work. First off, I ran into a couple of obstacles while trying to link the sketch to the sensors:

1) I was running my p5 sketch in Firefox in the “New Private Window”, but I had better luck making the 2 programs communicate when I ran the p5 sketch on Chrome in the “New Incognito Window.”

2) Whenever the sensors didn’t run the values in the serial monitor, I tested the readings of the initial sensorValue (before the mapping line) to make sure data was coming out and what the initial readings were.

3) When something didn’t work after I made an adjustment, I would also shut down all the programs and start fresh to clear the buffer, especially after I keep pressing the buttons to upload the program.

4) When reading the values from the potentiometer, there doesn’t seem to be a huge range in the values. I see it reading from 350 – 500 and with really small variation when I turn the knob from one side to the other. And when I run just a plain sketch of an ellipse to the potentiometer, the ellipse moves only a small distance and not from one side of the screen to the other, even though I use the width of the screen to map out the values.


Right now I’m having problems making the Hillary ball appear with a button click. I see that the sensor values does change from 0 to 1 when clicked, but my p5 sketch isn’t registering under the draw functions. The problem, I think, is just how and where I’m writing my code in p5 so I just need to play around with that more. I also attempted to attached the potentiometer sensorValue to the Hillary ball so she can slide left to right, but that’s also not mapped out correctly in the p5 sketch so the potentiometer values isn’t moving. It was reading some sort of value before, but when I kept adjusting the code in the p5 sketch it stopped. It also could be from my Arduino sketch. I keep tinkering with the map values since the sensor wasn’t moving the ellipse from 0 to 320 on the x axis of the canvas. Despite this not working correctly, this whole exercise made me apply all the serial connection readings and videos that I learned about from the last 2 weeks. I just need to work on my debugging and coding better.




void setup() {
  // initialize serial communication at 9600 bits per second:

// the loop routine runs over and over again forever:
void loop() {
  // read the input on analog pin 0:
  //int sensorValue = analogRead(A0);
  int sensorOriginal = analogRead(A0);
  int sensorValue = map(sensorOriginal, 200, 600, 0, 320);
  //sensorValue = (sensorValue/4);
  //sensorValue = map(sensorValue, 0, 1023, 0, 320);
  //sensorValue = map(sensorValue, 684, 1023, 0, 320);
  // print out the value you read:
  int sensorValue2 = digitalRead(2);
  delay(1);        // delay in between reads for stability
var serial; // variable to hold an instance of the serialport library
var sensorValue = 0;		// ellipse position

// create a trump bouncy ball
 var ball = {
 x: 200,
 y: 30,
 speed: 0,

var trump = {
 x: 180,
 y: 20,
 speed: 0,
 img: 0,
 visible: 1

var clinton = {
 x: 0,
 y: 0,
 //speed: 0,
 img: 0,
 visible: 0,

var gravity = 0.1;
 img = 0;

function preload() {
 trump.img = loadImage("./trump.png");
 clinton.img = loadImage("./clinton.png");

function setup() {
 createCanvas(400, 400);
 serial = new p5.SerialPort(); // make a new instance of serialport libra
 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.usbmodemfd121"); // open a port

function displayBall(ball_name) {
 //fill(random(255), 0, 0);

// head
 if(ball_name.visible) {
 image(ball_name.img, ball_name.x - 35, ball_name.y - 35, 70, 70);
 //image(clinton_head_img, clinton.x, clinton.y, 50, 50);
 // ball
 // ellipse(ball.x, ball.y, 24, 24);

function dropClintonBall() {
 clinton.y = clinton.y + 1;

function moveTrumpBall() {
 trump.y = trump.y + trump.speed;
 trump.speed = trump.speed + gravity;

function bounceTrumpBall() {
 if (trump.y > (height - 35)) {
 trump.speed = trump.speed * -0.95;

function draw() {
 stroke(255, 255, 255);
 box_width = 100;
 box_height = 20;

for (var i = 0; i < 400; i += box_width) {
 fill(102, 217, 255);
 rect(i, 0, i + box_width, box_height);
 fill(255, 0, 102);
 rect(i, 20, i + box_width, box_height);
 rect(i, 40, i + box_width, box_height);
 fill(102, 217, 255);
 rect(i, 60, i + box_width, box_height);
 fill(255, 0, 102);
 rect(i, 80, i + box_width, box_height);
 fill(0, 0, 160, 50);
 rect(i, 100, i + box_width, box_height);
 fill(102, 217, 255);
 rect(i, 120, i + box_width, box_height);
 fill(255, 0, 102);
 rect(i, 140, i + box_width, box_height);

for (var i = 0; i < 400; i += box_width) {
 fill(255, 0, 102);
 star(25, 380, 5, 10, 5);
 star(75, 380, 5, 10, 5);
 star(125, 380, 5, 10, 5);
 star(175, 380, 5, 10, 5);
 star(225, 380, 5, 10, 5);
 star(275, 380, 5, 10, 5);
 star(325, 380, 5, 10, 5);
 star(375, 380, 5, 10, 5);



 //fill(255, 0, 0)
 //fill(255, 0, 0, sensorValue);
 //rect(x, y, 50, 50);
 //text(sensorValue, 20, 20)
 // display


function mousePressed() {
 clinton.visible = 1;
 clinton.x = mouseX;
 //clinton.x = sensorValue;
 clinton.y = 360;

// if you click on trump, have him bounce up
 if(dist(trump.x, trump.y, mouseX, mouseY) < 50){
 trump.x = random(0, 400);
 trump.y = 20;
 trump.speed = 0;


function star(x, y, radius1, radius2, npoints) {
 var angle = TWO_PI / npoints;
 var halfAngle = angle/2.0;
 for (var a = 0; a < TWO_PI; a += angle) {
 var sx = x + cos(a) * radius2;
 var sy = y + sin(a) * radius2;
 vertex(sx, sy);
 sx = x + cos(a+halfAngle) * radius1;
 sy = y + sin(a+halfAngle) * radius1;
 vertex(sx, sy);

// get the list of ports:
 function printList(portList) {
 for (var i = 0; i < portList.length; i++) { // Display the list the console: println(i + " " + portList[i]); } } function mousePressed() { serial.write("X"); } function serialEvent() { var inString = serial.readLine(); if (inString.length > 0) {
 inString = inString.trim();
 //sensorValue = Number(inString/4)
 sensorValue = Number(inString);

ICM / Week 5 / Arrays and objects

In honor of October 9th’s Second Presidential Debate of 2016 between Hillary Clinton and Donald Trump, click the mouse to make Hillary appear and keep Trump at his wall.

Eventually, I’d like to keep adding on to this sketch by making the bricks fall when Trump’s head bounces on it like the Atari game, Breakout. My attempt to make the individual bricks with arrays wasn’t quite successful, so for now, the blocks in this sketch are drawn with a for loop (with the ‘work-in-progress’ commands to make arrays of the individual blocks commented out in the code). I also want to toggle between using Hillary as the bouncy ball with a key press of “H” for all the Hillary supporters and a key press of “T” for Trump supporters. Another thing that I came across that was a little complicated was drawing stars. Drawing stars from scratch requires lots of math, but in following one of the virtues of a lazy programmer, I was able to copy the star-making code from the p5.js reference library. I also kept the code from the synthesis in the sketch, so Hillary can turn into a potentiometer paddle to bounce Trump’s head on when connected to a sensor.

Photos of Clinton and Trump’s bouncy heads were taken from The New York TimesPresidential Polls Forecast

ICM & PCOM Synthesis / Week 5


For this Synthesis workshop, I got my first introduction to the possibilities of what PCOM and ICM can do when they listen to each other. It was nice to be with the entire class in this hackathon-like vibe and to see what cool things would come out of this synthesis over pizza.

The design challenge was to create a Physical Variable. My partner, Roi Lev and I started off with connecting the serial communication and using a potentiometer to dim a red ellipse that was drawn in the p5.js sketch below.

We then took four colored buttons (red, green, blue and yellow) and attached them to the breadboard. Roi then programmed the buttons in p5.js to draw in the color that is pressed. For instance, to color in red, you need to hold down the red button while using your mouse to draw on the p5.js screen.


img_2172closeup of the circuit and breadboard


img_2163user testing


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

function setup() {
  createCanvas(600, 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.usbmodem1421"); // open a port

function draw() {
  //text(sensorValue, 20, 20);
    if (sensorValue > 1 && sensorValue < 500){
    }else if (sensorValue > 500 && sensorValue < 900){
    }else if (sensorValue > 900 && sensorValue < 1010){
    }else if (sensorValue > 1010){
    ellipse(mouseX, mouseY, 30, 30);

 function mousePressed(){

// get the list of ports:
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);
        sensorValue = Number(inString);


ICM / Week 4 / Functions



For this assignment, I wanted to work on a new sketch to implement more data art into my P5.js homework, instead of continuing on previous projects that I’ve done. I recently got a book called Dear Data by Giorgia Lupi and Stefanie Posavec for inspiration. The artwork in the book, showcases the year-long, analog data drawing correspondence between the two information designers.


What I originally intended was to make a single clock that bounced around a background partly filled with ‘red hands of a clock’, similar to the spread above from the Dear Data book. I thought that I could use a random command and fade the cluster of red clock hands in and out of view. But since this idea is too challenging for me right now and the fact that I’m really slow in the execution, my sketch has morphed into something more simple, orderly and less exciting.


I did experiment using Example 11-3: Arrays, Not Variables from Getting Started with p5.js with arrays to try and scatter the ‘red clocks hands,’ but I couldn’t figure out how to change the 1 simple shape into the 2 line objects that I made into a function. I also played around with inserting the clock face and hands into the ‘bouncing ball with functions example’ and it turned into a yo-yo with the hands not staying within the circle constraints. This led to an obstacle that I’m now having with my current sketch. The hands have different positions based on the row that they are in, which corresponds to one of three functions that I created. Ideally, I want one point of the hand to move independently around like a clock. and it still needs more work to get the hands to move around and stay within the circle constraint. Since I’m still trying to figure this out, the sketch is pretty static but does have functions. I do plan on continuing this sketch and hopefully get it to my original intention.