Analog Input

Lab Exercise 1

For this Lab exercise, I set up my Arduino to read and print out the voltage readings of a switch, a potentiometer, and a photocell.   

switch_sm.gif
lightsensor_sm.gif

Code:

 

void setup() {
  // ppin mode
  pinMode(8, INPUT); //set switch's pin 8 to be input
  Serial.begin(9600); //initialize serial communications
  
  

}

void loop() {
  int SwitchState = digitalRead(8); //read the switch
  int potState = analogRead(A0); // Read the potentiometer
  // you should pause for a a millisecond b/w two analog reads. 
  //Turns out that arduino has only one to analog converter so can only do 2 at a time
  //so you need to reset it using this bit of time, this helps get a reliable read on the second analog read
 
  delay(1);  
  int photoCellState = analogRead(A1); // read the photocell

  //print them all out
  Serial.print("switch: ");
 
  Serial.print(SwitchState);
      Serial.print("\t"); //print a tab
  
  
  Serial.print("potState: ");
  Serial.print(potState);
      Serial.print("\t"); //print a tab
  
  Serial.print("photoCellState: ");
  Serial.println(photoCellState); //like enter return when typing
    


}

Lab Exercise 2

After completing lab exercise 2 - using digital or analog input and digital output, I came up with an application: The pressure sensor served as a weighing mechanism for objects I had around. The analog input was the weight of the objects and the digital output was the strings of words written by the Serial print monitor that corresponded to the weight range I assigned. I used an "if / else" statement for this.

if (lightness < 3)
{
Serial.println("Try a heavier one");
   Serial.print("\t"); 
 
}
else  {
  Serial.println("YOU DID IT");

One foot moving into the future: A MEDITATIVE WALK

 

"One step after another, one foot moving into the future and one in the past. Did you ever think about that? Our bodies are caught in the middle. The hard part is staying in the present. Really being here."

 

While I am a fan of Janet Cardiff's work, I have to admit I was initially a bit underwhelmed with Her Long Black Hair audio tour. Towards the end, I gained an appreciation for what she created.   

 

First off, I found it hard to follow where she walked. I was amused at how casually she took 35 minutes of my time with orders of going this way and that, telling me to wet my finger and put it on my cheek and having me listen to her conversation with her husband when he interrupted the walk. It irked me that I had to follow her commands, though i took it with a sense of humor. 

 

Another issue I came across at the walk was that the reality she saw did not match closely with mine. Maybe sometime needs to pass and it would be interesting to revisit this when we live in a time quite different from 2004 or 2017. That said, I also found it thrilling to hear a noise and wonder if it's happening to me or to her. I often had to take my headphones off to check. That was an interesting way to mix the loud realities of Manhattan in 2004 and Manhattan in 2017. 

 

What made this piece enjoyable, despite the setbacks, was the juxtaposition of her meditative stream of consciousness (some of which I found insightful) and the beautiful musical addictions along with a poignant narration of a slave telling his  "walk" story -  running away from slave-owners and getting caught. What I think she is doing is getting us in a mindful state and introducing bits of what she finds worth listening to or worth thinking about. I did feel that being primed with a meditative exercise helped me pay closer attention to the nuances of those stories and sounds.

 

It is believed that meditation increases empathy and I felt this idea may have been playing a role in this work. When Cardiff says "One step after another, one foot moving into the future and one in the past... Our bodies are caught in the middle. The hard part is staying in the present. Really being here." she's inviting us to be present, to see and hear what's there in front of us, even if we don't see exactly what she is seeing in her moment. 

 

photo_cardiff_04_view1_321x244w.jpg

REINTERPRETED

How to document, keep records, and give credit

I don't have a formula for this myself yet, but documenting and giving credit is gong to be an important part of making work at ITP and beyond.  After reading ON THE RIGHTS OF MOLOTOV MAN Appropriation and the art of context By Joy Garnett and Susan Meiselas, a painter and a photographer whose work the painter referenced, this practice feels even more important. 

When a collage artist pulls an image out of an old magazine, is the image free to use as a building block of creating new meaning? Was Romare Bearden supposed to keep track of every source he used? Does it depend on how much he distorted the original image? If a photograph is highly abstracted and only parts of it are used, one may think that perhaps giving credit to every photographer of every newspaper clipping is superfluous. In reality, we see that it's better to keep a record just in case. The Romare Bearden of today ought to be more diligent in keeping records and adding disclaimers that the referenced material is taken out of context, severed from it's previous meaning, and should be reinterpreted in the new ecosystem the artist created.

If it becomes important to borrow not just the form (visual element) of the clipping (or bitmap) but also the original meaning it carries, the artist is required to research the subject of the photo in order to explain the context accurately in the artist statement or wall text.

 

Collage by Romare Bearden

Collage by Romare Bearden

p5 Js Face

Update 0 Week 6 Assignment:

For the HTML addition assignment, I added a slider to this sketch in order to control the mouth this way.

Large GIF (394x386).gif

 

My first assignment in processing is a face made of shapes and curves.

I was hoping to use animation to make the mouth move around on rollover using this code but couldn't figure out how to make the movements more subtle and not have the shape follow the cursor. I found this tutorial to for a simpler interaction and used that for the interactive mouth. 

I'd like to keep trying to build something with bezier curves because I think it would be interesting to make organic shapes that undulate or recoil from the mouse like something living. I think acceleration would help here.  The single-speed interactions in the sketch below feel robotic but it's fitting to the flat, aesthetic of the composition. 

processing.gif
Sep-18-2017 00-56-36.gif

Below is a static earlier iteration where i used curves to create a unibrow and mouth. 

Screen Shot 2017-09-18 at 12.09.25 AM.png

Code

For the animated version:

function setup() {
  createCanvas(400, 400); 
  var button = createButton();

}

function draw() {
  background(236, 269, 85);
  
    

  
  strokeWeight(0);
  // Draw a rectangle with rounded corners having the following radii:
// top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.

    // head
  fill (125, 255, 206);
  rect(80, 80, 240, 355, 75, 75, 45, 45);
        // left eye

  fill (random(255), random(255), random(255));


  rect(130, 130, 55, 35, 50);
  
  
  // right eye
fill (254, 190, 190);
 
  rect(220, 120, 55, 55, 50);
              
  
  
  //ear l
  fill (125, 255, 206);
  rect(36, 160, 85, 75, 50);
  
   //ear r
  fill (125, 255, 206);
  rect(285, 160, 85, 75, 50);
 
  //unibrow
  fill (155, 205, 206);

 stroke(205, 192, 10);

   arc(198, 85, 200, 90, PI, 0);  // upper half of circle

  // nose x, y
    fill (115, 215, 206);

    arc(210, 200, 100, 50, PI / 2, 3 * PI / 2); // 180 degrees


  //mouth before
  
  fill (12, 25, 96);

//  stroke(0);
//  beginShape();
//  curveVertex(250, 250); // the first control point
//  curveVertex(250, 250); // is also the start point of curve
//  curveVertex(230, 270);
//curveVertex(200, 280);
//  curveVertex(170, 270);
//  curveVertex(150, 250); // the last point of curve
//  curveVertex(125, 250); // is also the last control point
//  endShape();
  
  //new mouth:
    // some mouseover code i found that i wanted to make into a mouth
  //realized it's better as a toungue shape that moves with the mouse
  //x1,y1,x2,y2,x3,y3
 
  fill(205, 190, 280);
 

 translate(width/2, height/1.5);
    scale(mouseX / 800, mouseY / 800);

    fill(205, 190, 280);
    triangle(0, 20, -80, -40, 80, -40);

}
Code for the static version

 

function setup() {
  createCanvas(400, 400); 

}

function draw() {
  background(236, 269, 85);
  
    

  
  strokeWeight(0);
  // Draw a rectangle with rounded corners having the following radii:
// top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.

    // head
  fill (125, 255, 206);
  rect(80, 80, 240, 355, 75, 75, 45, 45);
        // left eye

  fill (254, 190, 190);


  rect(130, 120, 55, 55, 50);
  
  
  // right eye
fill (254, 190, 190);
 
  rect(220, 120, 55, 55, 50);
              
  
  
  //ear
  fill (125, 255, 206);
  rect(36, 180, 85, 75, 50);
  
   //ear
  fill (125, 255, 206);
  rect(285, 180, 85, 75, 50);
 
  //hm
    fill (25, 25, 26);

  stroke(255, 102, 10);

    arc(195, 135, 190, 50, PI, 0);  // upper half of circle

  // nose x, y
    fill (115, 215, 206);

    arc(210, 200, 100, 50, PI / 2, 3 * PI / 2); // 180 degrees


  
  fill (12, 25, 96);

  stroke(0);
  beginShape();
  curveVertex(250, 250); // the first control point
  curveVertex(250, 250); // is also the start point of curve
  curveVertex(230, 270);
  curveVertex(200, 280);
  curveVertex(170, 270);
  curveVertex(150, 250); // the last point of curve
  curveVertex(125, 250); // is also the last control point
  endShape();
}
 

Bio Inspiration

For the Soft Robots and Other Engineered softness class our instructor asked us to think of something soft in nature that we find interesting and which we wish were used in engineering. 

The weather has been pretty cold and I often find myself wondering if there are better ways we can insulate and keep our layers moisture free. Fascinated with bird feathers, I chose penguin feathers because they manage to stay warm and dry in very cold and wet climates.

Perhaps there is a way to incorporate penguin feather technology into our apparel. A water-repellent top layer with warm down under-layer. What's great about the modular feather structures is that they allow for unfettered movement, unlike our confining, T-shape, bulky coats like this one. I like the idea of heated jackets with batteries, but if the material was feathers, would be even need to reply on batteries and risk that they run out?

feather_small.jpg
Screen Shot 2018-03-19 at 1.03.00 AM.png
Charles Freger's Wilderman series.&nbsp;

Charles Freger's Wilderman series. 

tumblr_inline_nfiy2uMmPO1qinp34 (1).jpg
black-milwaukee-heated-jackets-201b-21l-64_1000.jpg
Photo by David S. Schultz for the DailyMail.UK

Photo by David S. Schultz for the DailyMail.UK

Meta Mounds: p5js and three force sensitive resistor buttons.

Link to the working code, which uses x and y mouse values instead of input so that one can play with this without hooking up an Arduino. 

Large GIF (740x444).gif
Large GIF (528x442).gif
Large GIF (816x440).gif

Below is a previous attempt to create this, along with the code I used to make the animation above. 

 

Large GIF (420x468).gif

The goal of this project was to use arrays and a constructor function to generate cleaner, compartmentalized code. I am using a shape I made (a clay model of an abstract shape that has curves, sort of reminiscent of a cartoony mountain range) and recreating it's shape using arcs. The display function uses the position of x and y (which are set to random) to place the "portrait" or linear representations of the clay shape onto the canvas.  Here is the link to the code to the P5JS editor. 

Questions

1. I am not sure how to make a step repeat pattern. It must be easy but so far I have only been able to generate linear repetitions, not evenly spread out wallpaper-like repetitions. I actually prefer the randomization, but was just curious to try a more orderly step-repeat approach. 

2. I would like to superimpose this wave over the patterns so that they block the top if the screen with the sine wave motion but I cannot get the two sets of code to coexist in one file. When i try to merge the code i get the following error: 

Uncaught TypeError: Cannot read property 'length' of undefined (sketch: line 96)

This is the code

 

Next Steps

The next step of this project is to use serial connection the pressure sensors on the clay shape and manipulate the amplitude, width, and speed of the wave. 

Code (with Errors)


var xspacing = 12;    // Distance between each horizontal location
var w;                // Width of entire wave
var theta = 0;      // Start angle at 0
var amplitude = 75.0; // Height of wave
var period = 400.0;   // How many pixels before the wave repeats
var dx;               // Value for incrementing x
var yvalues;  // Using an array to store height values for the wave

var sensor1;
var sensor2;
var inData;


function setup() {
  createCanvas(710, 400);
 
  w = width+12;
  dx = (TWO_PI / period) * xspacing;
  // dx =1;
  yvalues = new Array(floor(w/xspacing)); 
  // print(dx);

}

//end of setup

function draw() {
  //background(344, 54, 23);
   background(22, 22, 243);

 calcWave();
 renderWave();
  sensor1 = map(inData, 0, width, 0, 5);
 // sensor2 = map(mouseY, 0, height, 1, 3);
}


function calcWave() {
  // Increment theta (try different values for
  // 'angular velocity' here)
  
  theta += 0.02;

  // For every x value, calculate a y value with sine function
  var x = theta;
   
  for (var i = 0; i < yvalues.length; i++) {
    yvalues[i] = sensor2*sin(x * sensor1) * amplitude ;
    x+=dx;
  }
}

// for incoming serial data

function setup() {
  createCanvas(500, 300);
  colorMode(HSB,255,255,255);
  serial = new p5.SerialPort();       // make a new instance of the serialport library
  serial.on('list', printList);  // set a callback function for the serialport list event
  serial.on('connected', serverConnected); // callback for connecting to the server
  serial.on('open', portOpen);        // callback for the port opening
  serial.on('data', serialEvent);     // callback for when new data arrives
  serial.on('error', serialError);    // callback for errors
  serial.on('close', portClose);      // callback for the port closing
 
  serial.list();                      // list the serial ports
  serial.open(portName);              // open a serial port
circlecolor = color(inData, 200, 200);
  
  
  w = width+12;
  dx = (TWO_PI / period) * xspacing;
  // dx =1;
  yvalues = new Array(floor(w/xspacing)); 
  // print(dx);

  
}

function renderWave() {
  noStroke();
  fill(255);
  // A simple way to draw the wave with an ellipse at each location
  

  for (var x = 0; x < yvalues.length; x++) {
    ellipse(x*xspacing, height/105+yvalues[x], 10, -390);
  }
}
 

CODE THAT DOES WORK (but only maps to one sensor)


var xspacing = 12;    // Distance between each horizontal location
var w;                // Width of entire wave
var theta = 0;      // Start angle at 0
var amplitude = 75.0; // Height of wave
var period = 400.0;   // How many pixels before the wave repeats
var dx;               // Value for incrementing x
var yvalues;  // Using an array to store height values for the wave

var sensor1;
var sensor2;


function setup() {
  createCanvas(710, 400);
 
  w = width+12;
  dx = (TWO_PI / period) * xspacing;
  // dx =1;
  yvalues = new Array(floor(w/xspacing)); 
  // print(dx);

}

//end of setup

function draw() {
  //background(344, 54, 23);
   background(22, 22, 243);

 calcWave();
 renderWave();
  sensor1 = map(mouseX, 0, width, 0, 5);
  sensor2 = map(mouseY, 0, height, 1, 3);
}


function calcWave() {
  // Increment theta (try different values for
  // 'angular velocity' here)
  
  theta += 0.02;

  // For every x value, calculate a y value with sine function
  var x = theta;
   
  for (var i = 0; i < yvalues.length; i++) {
    yvalues[i] = sensor2*sin(x * sensor1) * amplitude ;
    x+=dx;
  }
}

function renderWave() {
  noStroke();
  fill(255);
  // A simple way to draw the wave with an ellipse at each location
  

  for (var x = 0; x < yvalues.length; x++) {
    ellipse(x*xspacing, height/105+yvalues[x], 10, -390);
  }
}