Serial Communication

October 19, 2016October 20, 2016 | A-M Gallero

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.

ADRUINO SKETCH FOR SERIAL COMMUNICATION
void setup() {
  // initialize serial communication at 9600 bits per second:
  Serial.begin(9600);
}

// 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:
  Serial.println(sensorOriginal);
  int sensorValue2 = digitalRead(2);
  Serial.println(sensorValue2);
  delay(1);        // delay in between reads for stability
}

P5.JS SKETCH FOR SERIAL COMMUNICATION
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
 serial.write("X");
 }

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() {
 background(255);
 stroke(255, 255, 255);
 strokeWeight(1);
 box_width = 100;
 box_height = 20;

for (var i = 0; i < 400; i += box_width) {
 //blue
 fill(102, 217, 255);
 rect(i, 0, i + box_width, box_height);
 //red
 fill(255, 0, 102);
 rect(i, 20, i + box_width, box_height);
 //white
 fill(random(255,240));
 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);
 fill(random(255,240));
 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);
 }

displayBall(trump);
 moveTrumpBall();
 bounceTrumpBall();

displayBall(clinton);
 //dropClintonBall();
 //bounceClintonBall();

//noStroke();
 //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;
 beginShape();
 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);
 }
 endShape(CLOSE);
 }

// 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);
 println(sensorValue);
 }

ICM / Week 5 / Arrays and objects

October 13, 2016October 13, 2016 | A-M Gallero

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 Times‘ Presidential Polls Forecast

ICM & PCOM Synthesis / Week 5

October 12, 2016October 12, 2016 | A-M Gallero

dsc_0782v2

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.

closeup of the circuit and breadboard

user testing


//p5.js CODE FOR RGBY DRAWING TOOL
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
    background(255);
}

function draw() {
  //background(255);
  noStroke();
  //fill(0);
  //text(sensorValue, 20, 20);
  //fill();
    if (sensorValue > 1 && sensorValue < 500){
        fill(255,255,0,120); 
    }else if (sensorValue > 500 && sensorValue < 900){
        fill(0,102,255);
    }else if (sensorValue > 900 && sensorValue < 1010){
        fill(0,204,0);
    }else if (sensorValue > 1010){
        fill(255,51,0);
    }//else{
        //fill(255);
    //}
    ellipse(mouseX, mouseY, 30, 30);
}

 function mousePressed(){
   background(255);
 }

// 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);

    println(sensorValue);
    }
}

ICM / Week 4 / Functions

October 6, 2016October 6, 2016 | A-M Gallero

clocks

https://alpha.editor.p5js.org/full/ryVsv270http://

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.

APPLICATIONS / WEEK 6 / PRESENTATION

October 4, 2016April 11, 2017 | A-M Gallero

Created a mock newspaper for our Applications group presentation on surveillance and data collecting.

ICM / Week 3 / Repetition with Variation

September 29, 2016October 13, 2016 | A-M Gallero

Worked with Steven Simon on this interactive sketch that implements the concept of repetition with variation and a button. When we collaborated, we worked on our own at first and came together to show each other our ideas. I had the idea of repeating triangles in different colors after being inspired by 10PRINT sketch of randomizing slanted lines.

Steven had this fantastic concept of repeating windows and using the rollover button to make the shade go up and down. With Steven’s sketch, I got a clearer picture on the differences between arrays and objects and learned some techniques he uses for debugging lines. This sketch is also a great base for adding more things, like a little yellow bird flying around (which is TK) using the ‘bouncing ball’ idea and pieces like snow falling to put the wall of windows in the context of seasons and maybe even giving a watcher a peep into what’s in a window.

PCOM/ Week 3 / Interactivity in Public

September 28, 2016September 28, 2016 | A-M Gallero

Riding the New York City subways everyday, I couldn’t help but think of the MetroCard swipers as my interactive technology to observe. There have been many times that I’ve missed a train, waiting for the person before me to swipe through the regular turnstiles or getting through the double obstacle of a MetroCard swiper and the rib-caged revolving turnstiles. Then there are the rough mornings where either my flimsy yellow MetroCard bent a bit on the magnetic black strip or my quick flick of a swipe was not so quick (or too quick), where it gives me the “Please Swipe Again At This Turnstile” message. My strategy in those scenarios is to wait for the 1 minute message to clear and then swipe again at the same turnstile to avoid losing money on your card or the 18 minute wait time to swipe again with the fancy Unlimited Ride MetroCards.

alg-subway-turnstiles-jpg

When observing users getting through the subway gates, you get a good sense of who is a local user and who may not be. I found that when I observed people swiping their MetroCards at our 8th Street/ NYU stop on the N and R train, not a lot of people had difficulty swiping smoothly to get that beep to “GO.” However, when I’m at a tourist hot spot like the B, D, F and M stop at Rockefeller Center, there’s a lot of foot traffic and people fiddling around with their cards and swiping repeatedly to get through. I’ve also witnessed some elderly people having problems, whether it being because of their eyesight of getting the thin card precisely through the slot or people swiping very slowly where the card reader tells them to swipe again. One elderly woman that I observed was standing in front of a MetroCard ticket kiosk for over 10 minutes, trying to get a card. Since it was taking a while and was the only machine, the 2 people in back of her were patiently assisting her. I’m not sure if there was a problem with her credit card or just figuring out card options on the touch screen.

I do think that the MetroCard turnstiles works effectively, especially when you’re a regular user and figured out the speed at which to swipe. The visibility problems, that Norman talks about in The Design of Everyday Things, could be something to improve upon in the design though and it could be just a simple line of text stating the additional instructions on the speed of a ‘smooth’ swipe (not too fast and not too slow) especially for new users. And in comparing other user interactions in similar transportation situations, I do like how the card readers on the NYC transit buses are easier to use though. It seems more user friendly cause you just dip your card in the slot, the card reader pulls it in to read the strip and then automatically pushes the card up for the user to get back. I also like the Oyster Card system in London where the cards are thicker and it’s just a quick tap on a touch pad for gates to open up for you to pass through.

_____

Simple Application Using Analog Input and Digital Output

Tiny Piano from annemgal on Vimeo.

ICM / Week 2 / Variables

September 22, 2016October 13, 2016 | A-M Gallero

For this week’s assignment, I was inspired by Gene Wilder in Willy Wonka and the Chocolate Factory, which I watched twice this past week after introducing the movie to my two year old son. This sketch contains an element controlled by the mouse (the Golden Ticket and the color changing background), and an element that changes over time and is independent of the mouse (the changing little circles in the background). What I would like to do to take this further is to decorate it more with the candy trees and oompa loompas. And I would also like to take a complex object, like the everlasting gobstoppers (made up of 4 different colored rectangles) and have those objects multiply and be random in the background instead of the circles. Trying to figure out how to uses arrays and maybe can use that to grab multiple shapes to group them and multiply.

wonka-screen-shot

I had a bit of a slow start with my ICM homework assignments the first few weeks, but I’m finding my ways to balance out the workload of all the classes. For last week’s ICM assignment, I started my drawing, but didn’t present it in class since it still needed time and work. Although it looks simple, it took me much longer to do than this week’s freer assignment. I think navigating the space without rulers on the side and figuring out the coordinates with all the little details of connecting each line precisely needed more time. I attempted to draw one of Sol LeWitt’s pieces, called Isometric Projection with code. I like how he takes simple shapes and lines and makes it complex and it took me so long to plot out the diagonal lines on top of the geometric shape and it’s not equality distant from one another on top. After this exercise, I now have a better feel for the x, y, width, height coordinates, which made it much easier for tackling the 2nd assignment. One thing that really saved some time from last week to this week was using variables with all the repeating lines.

INSPIRATION
200px-isometric_projection_-13_ink_and_pencil_drawing_on_paper_by_-sol_lewitt-_1981

BEFORE (without VARIABLES)
sol

AFTER (with use of VARIABLES)
https://alpha.editor.p5js.org/full/ByxLCRqgT

sol_screenshot

S&V / Week 2-3 / To be Listened on a Couch with Eyes Closed

September 21, 2016October 13, 2016 | A-M Gallero

oncouch

A sound piece made with Regina Cantu de Alba and inspired by Octavia Butler’s short story “Bloodchild.”

With this project, I learned to strip away the pictures that I’m so comfortable with and concentrate on tones and sounds that me and my partner recorded and later edited in Adobe Audition. I used to listen to lots of audio books with my eyes closed and would fall asleep to them. It’s an experience to focus solely on the sounds and to let the blank visual canvas of your mind wander away. And that’s hard to do nowadays when everyone is so plugged into their smart phones and social media.

Listening to the sound piece in the dark with the rest of the class and hearing the feedback was interesting. I definitely was influenced by the sound walk and Pejk Malinovski’s talk. I loved how the sounds took me on a journey and that’s what our intention was with the piece. Collaboration with Lola was also a big pleasure. Her initial interpretation of the story as ‘points of entry vs. the expected’ was our base for the emotional values that we collected in our sounds. And the freedom for both of us to explore and experiment in sound collecting and editing separately was good in combining different perspectives. Then later coming back together to combine our finds and discover things together, like recording interesting sounds in the stairwell with specials mics and chia pudding. This was all key to making a piece that we’re both happy with.

A lesson that I will take for the next sound project is to bring some sort of buffer on the Zoom to cancel out the wind when recording outside or to just take a stick mic instead for cleaner sounds with less distortion.

PCOM/ Week 2 / Electricity Labs and a Switch Project

September 21, 2016 | A-M Gallero

This week I started to use my Arduino Starter kit to connect the breadboard to the microcontroller and light up my first LED diode. Had a couple hiccups when putting the resistors on the board. There were so many variations of the middle color stripes and ohm values of the resistors. And they are so tiny that it’s hard to distinguish what’s what. Luckily, my starter kit had a book with a very helpful chart on ‘How to Read Resistor Color Codes’ and decipher the math behind it. Another small problem that I ran into when uploading my code in the Arduino application was that I plugged the USB cable from the microcontroller to the wall instead of my laptop. Once I fixed that connection, my LED started blinking.

LED from annemgal on Vimeo.

For this week’s homework of putting together a simple application for switches and LED circuits, I found a sample project of connecting 3 LEDs to a push button switch and used that as the base for the coding and schematics of the assignment.

My initial idea was to make a little house and use the switches to open a door or light up a window, but it morphed into an idea seeing silhouettes through windows at night. With the base that I had, I wanted to fill the house with LED lights, so I added a couple more LED lights to the board and adjusted the code.

I then cut black paper silhouettes and taped them to the board in front of the LED lights and constructed a see through building with tracing paper to enclose the lights and paper figures.