WEEK 11 EXERCISES W/PIERRE

Exercise 1

IMG_7102

let rVal = 0;
let potentiometerInput = 0;
let circleX;


function setup() {
  createCanvas(640, 480);
  textSize(18);
  circleX = width/2;
}

function draw() {
  // one value from Arduino controls the background's red color
  background(255);

  // the other value controls the text's transparency value

  if (!serialActive) {
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    text("Connected", 20, 30);
    

    // Print the current values
    text('potentiometerInput = ' + str(potentiometerInput), 20, 70);

  }
  
  //Draws the circle 
  circle(circleX,height/2,100);
}

function keyPressed() {
  if (key == " ") {
    // important to have in order to start the serial connection!!
    setUpSerial();
  }
}

// This function will be called by the web-serial library
// with each new line of data. The serial library reads
// the data until the newline and then gives it to us through
// this callback function
function readSerial(data) {
  ////////////////////////////////////
  //READ FROM ARDUINO HERE
  ////////////////////////////////////

  if (data != null) {
    // make sure there is actually a message
    // split the message
    let fromArduino = split(trim(data), ",");

    // if the right length, then proceed
    if (fromArduino.length == 1) {
      // only store values here
      // do everything with those values in the main draw loop
      
      // We take the string we get from Arduino and explicitly
      // convert it to a number by using int()
      // e.g. "103" becomes 103
      
      
      potentiometerInput = int(fromArduino[0]);
      
      //Maps the potentiometer input value to the width of the canvas.
      circleX = map(potentiometerInput,0,1023,0,width);


      
    }
    let sendToArduino = "\n";
    writeSerial(sendToArduino);
    
  }
}

P5 ⬆️

void setup() {

  Serial.begin(9600);

  // start the handshake
  while (Serial.available() <= 0) {
    digitalWrite(LED_BUILTIN, HIGH); // on/blink while waiting for serial data
    Serial.println("0,0"); // send a starting message
    delay(300);            // wait 1/3 second
    digitalWrite(LED_BUILTIN, LOW);
    delay(50);
  }
}

void loop() {
  // wait for data from p5 before doing something
  while (Serial.available()) {
    digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data
      
      delay(5);
       if (Serial.read() == '\n') {
      int potentiometer = analogRead(A1);
      delay(5);
      Serial.println(potentiometer);
      Serial.print(',');
      Serial.println(potentiometer);
       }
    }
      digitalWrite(LED_BUILTIN, LOW);
  }

Arduino ⬆️

Exercise 2

 ASSIGNMENT 2

while (Serial.available()) {
    Serial.println("0,0");
    digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data
    int value = Serial.parseInt();
    int value2 = Serial.parseInt();
    if (Serial.read() == '\n') {
      analogWrite(ledPin, value);
      analogWrite(ledPin2, value2);
    }
  }

Arduino ⬆️

function readSerial(data) {
  if (data != null) {
    //////////////////////////////////
  //SEND TO ARDUINO HERE (handshake)
  //////////////////////////////////
  value = int(map(mouseY,0, height, 0, 255));
  value2 = int(map(mouseX,0, width, 0, 255));
  let led1 = value + "\n";
  let led2 = value2 + "\n";
  writeSerial(led1);
  writeSerial(led22);
  print(value);
  print(value2)
    
    
  }

p5 ⬆️

ASSIGNMENT 3

void loop() {
  // wait for data from p5 before doing something
  while (Serial.available()) {
    // led on while receiving data
    digitalWrite(LED_BUILTIN, HIGH); 
    // gets value from p5
    int value = Serial.parseInt();
    // led switch from p5 value input
    if (Serial.read() == '\n') {
      if (value == 1) {
        digitalWrite(ledPin, HIGH);
      }
      else {
        digitalWrite(ledPin, LOW);
      }
      
      // gets sensor value
      int sensor = analogRead(A0);
      delay(5);
      // sends sensor value to p5
      Serial.println(sensor);
    }
  }
  digitalWrite(LED_BUILTIN, LOW);
  
}

Arduino ⬆️

 

Final Project Proposal

For my final project, I would really love to incorporate something with sound and color (very similar to my midterm). I think maybe a cool idea would be composing a short piece of music, that would generate some sort of light show using leds. I could assign different colors to the notes, so that when the piece plays, the leds (the translucent ones) will generate different colors for the piece.

WEEK 11 RESPONSE

For this week’s reading, the author discusses design in relation to disabilities. He specially talks about how the fashion industry has changed the perception of certain disabilities, purely based off of the design choices made to enhance the appearance of certain medical items. He used glasses as an example, stating that eyeglasses were once considered humiliating and undesirable, but that since the fashion industry/brands discovered a method to produce trendy and cool eyewear, glasses are now considered fashionable and stylish. This is a great example of positive framing (no pun intended) of a disability through its design, which not only offers a product for those with disabilities, but also allows indivsisuals with disabilities to seamlessly blend into society without feeling “different” from everyone else. What can become concerning about the fashion industry and its role in making certain medical items “fashionable” is its economic influence on these  products. These fashionable items become more expensive and leave those who actually need these items unable to afford them. This is extremely concerning and it begs the question of whether emphasizing aesthetic in the process of manufacturing these products is a good idea. Personally, I believe that the (aesthetic) design part of these items is extremely necessary because it not only allows people with disabilities to feel more at ease in society, but it also enables them to feel good about themselves. Of course, there must be a fair balance between usability and appearance, but looking good also makes you feel good.

WEEK 10 Reflection

 

A Brief Rant on the Future of Interaction Design:

Main points

  • We take for granted the importance of touch and how much we rely on our hands. Touch is one of the, if not the most important sense out of all five of our senses. 
  • Interactivity shouldn’t be confined to the press of a finger, but rather engage our entire bodies. Only then will we be able to progress into an era of true interactivity.

Follow up article:

  • From what I could gather in the response article, the author was emphasizing the importance of further developing the technology already at our disposal. Technology cannot remain stagnant, it needs to develop and advance with us. 
  • Again the author highlights that we must NOT neglect our bodies, allowing ourselves to create a future of total immobility. We should engage all aspects of our being and ensure that we give ourselves the chance to experience true interactivity. 

Personally, I find myself extremely scared of our future. The author mentions the possibility of complete immobility in the future due to our lives becoming too heavily reliant on external technologies. To me this is so dystopian to even think about. I don’t want every aspect of my life to be consumed by technology. I want to feel HUMAN and be HUMAN.

WEEK 10 ASSIGNMENT (PIERRE & DIANA) PIANO/SYNTHESIZER

 

 

CONCEPT:

For this project, our goal was to craft a musical instrument within the constraints of limited resources available. Despite the restricted options, we brainstormed various concepts and ultimately settled on developing a hybrid piano/synthesizer. To accomplish this, we repurposed buttons as keys by integrating two types of sensors, analog and digital. Using a breadboard, we configured the keys and delved into the coding phase. Each button was programmed to generate distinct notes, connected to a borrowed speaker from the IM lab for clearer and better sound quality.

 

As we progressed with the initial setup, the need for an analog sensor arose. We incorporated a potentiometer, not to alter the current, but as a knob to modulate the notes produced by the four buttons. The potentiometer’s range was segmented into three sections, and within the programming loop, an ‘if-else’ construct acted akin to cases, adjusting the notes played in response to the potentiometer’s adjustments.

 

Code:
#include "pitches.h"


const int speaker = 12;


const int tone_G = 2;
const int tone_A = 3;
const int tone_B = 4;
const int tone_C = 5;
const int tone_D = 9;
const int tone_E = 10;
const int tone_F = 11;




int buttonState_G = 0;
int buttonState_A = 0;
int buttonState_B = 0;
int buttonState_C = 0;
int buttonState_D = 0;
int buttonState_E = 0;
int buttonState_F = 0;


int potPin = A0;
int potVal = 0;




void setup() {
 // iterate over the notes of the melody:
 pinMode(tone_G, INPUT);
 pinMode(tone_A, INPUT);
 pinMode(tone_B, INPUT);
 pinMode(tone_C, INPUT);
 pinMode(tone_D, INPUT);
 pinMode(tone_E, INPUT);
 pinMode(tone_F, INPUT);
 
 }


void loop() {
 // no need to repeat the melody.


 potVal = analogRead(potPin);




 buttonState_G = digitalRead(tone_G);
 buttonState_A = digitalRead(tone_A);
 buttonState_B = digitalRead(tone_B);
 buttonState_C = digitalRead(tone_C);
 buttonState_D = digitalRead(tone_D);
 buttonState_E = digitalRead(tone_E);
 buttonState_F = digitalRead(tone_F);


if (potVal < 341)  // Lowest third of the potentiometer's range (0-340)
 {   
 if (buttonState_G == HIGH) {
   // play the sound
   tone(speaker,NOTE_G4);
 }
 else if (buttonState_A == HIGH) {
   // play the sound
   tone(speaker,NOTE_AS4);
 }
 else if (buttonState_B == HIGH) {
   // play the sound
   tone(speaker,NOTE_F4);
 }
 else if (buttonState_C == HIGH) {
   // play the sound
   tone(speaker,NOTE_C3);
 }


 else
  {
   noTone(speaker);
   }
 }


 else if (potVal < 682)  // Lowest third of the potentiometer's range (0-340)
 {
   if (buttonState_G == HIGH) {
   // play the sound
   tone(speaker,NOTE_A4); //random note not matching the name
 }
 else if (buttonState_A == HIGH) {
   // play the sound
   tone(speaker,NOTE_B4); //random note not matching the name
 }
 else if (buttonState_B == HIGH) {
   // play the sound
   tone(speaker,NOTE_C4); //random note not matching the name
 }
 else if (buttonState_C == HIGH) {
   // play the sound
   tone(speaker,NOTE_D4); //random note not matching the name
 }


 else
  {
   noTone(speaker);
   }


 }


 else
 {
   if (buttonState_G == HIGH) {
   // play the sound
   tone(speaker,NOTE_AS4);
 }
 else if (buttonState_A == HIGH) {
   // play the sound
   tone(speaker,NOTE_FS4);
 }
 else if (buttonState_B == HIGH) {
   // play the sound
   tone(speaker,NOTE_GS4);
 }
 else if (buttonState_C == HIGH) {
   // play the sound
   tone(speaker,NOTE_CS3);
 }


 else
  {
   noTone(speaker);
   }
 }
  
 }




 

 

 

WEEK 9 RED LIGHT GREEN LIGHT

 

IMG_3777

Concept:

For this project, I wanted to re-create a stop light or intersection, where a “car” could be driving when the light is green and a pedestrian could press a button to turn the traffic light red, so that they could walk and cars could not drive forward. I really liked this concept, because it reminded of all the times I would be walking by an intersection and would attempt to press the button to turn the traffic light red and it would never work.  With this model, the light actually turn red to let the pedestrians cross.

FUN FACT: I made the car a Tesla, because I really like teslas.  (:

// Set pin names
// to keep track of what is connected to which pin, we set global variables that name each pin
// this also allows us to use these names in functions like "pinMode" & "digitalWrite" instead of the pin numbers. 
const int switch_Pin = 2;
const int lightSensor_Pin = A0;
const int LED_green = 13;
const int LED_red = 12;
void setup() {

  //Start the serial monitor
 Serial.begin(9600);
 //Set pin modes
 // The LED pins are OUTPUT pins because we are sending information to the LED instead of receiving information from it
 // the information we are sending is in the form of HIGH or LOW
 // this is an alternative to connecting the LED lights straight to the 5V pin, which constantly outputs 5 volts
 // with these pins being used as OUTPUTs we can control wether the LED is recieving power or not.
 pinMode(LED_green, OUTPUT);
 pinMode(LED_red, OUTPUT);

 // The switch pin is an INPUT pin because we are taking in information from the switch about whether it is ON or OFF.
 pinMode(switch_Pin,INPUT);
}

void loop() {
  // Set variables for the input from the light sensor & the switch
  
  // for the lightValue variable, we want it to be equal to the value coming from the light sensor
  // the data coming form the sensor is analog data so we use the "analogRead()" function and we give it the pin it's supposed to read from
  // here we give it the pin connected to the light sensor (A0)

   int lightValue = analogRead(lightSensor_Pin);

  // for the switchState variable, we want it to be equal to the value coming from the switch
  // the data coming form the switch is digital (either HIGH or LOW) so we use the "digitalRead()" function and we give it the pin it's supposed to read from
  // here we give it the pin connected to the switch (2)

   int switchState = digitalRead(switch_Pin);

   // Prints values from sensor in serial monitor
   // we use the "Serial.print()" function to send information serial monitor (open using bottom on top right) so that we can read it
   Serial.print("Analog reading: ");
   Serial.print(lightValue);
   // "\n" is a line break, makes the serial monitor start on a new line
   Serial.print("\n");

// If statement to check if there is something blocking the light from the light sensor & control the green LED accordingly
// if the value coming form the light sensor is less than 700,
   if (lightValue < 800) {
    // we use the "digitalWrite()" to send data to the green LED, in this case we send "HIGH" so that it turns on
    digitalWrite(LED_green,HIGH);
    // else ; if the light value is not less than 700
   } else {
    // we send a "LOW to the green LED so that it turns off"
    digitalWrite(LED_green,LOW);
   }
  
  // If statement to check if the switch is ON or OFF & controls the red LED light accordingly 
  if (switchState == HIGH){
    digitalWrite(LED_red,HIGH);
    digitalWrite(LED_green,LOW);
  } else if (switchState == LOW){
    digitalWrite(LED_red,LOW);
  }
  

}

 

 

 

 

 

 

 

WEEK 9 Reflection

“Making Interactive Art: Set the Stage, Then Shut Up and Listen”

In the reading, “Making Interactive Art: Set the Stage, Then Shut Up and Listen”, the author discusses the importance of allowing users to fully take charge of interactive artworks. The main points brought up were the following: 

  • Interactive artwork doesn’t need to have a clear statement. (Leave room for interpretation) 
  • Interactive artwork is meant to open a conversation not DIRECT the conversation. 
  • The audience should ideally complete the artwork by offering their emotional reactions, physical actions, and thoughts to the piece.

I think the PERFECT analogy that the author used was when they compared a director telling an actor on set how to feel or what to do when acting, to artists adding too much of their input into their interactive pieces.

I thought that that analogy wonderfully tied together what the author was trying to explain throughout the piece. I believe that artists have such a critical role in creating spaces that allow for important discussion and have the great responsibility of making sure these discussions are OPEN without being manipulated.

“Physical Computing’s Greatest Hits (and misses)”

For the reading, “Physical Computing’s Greatest Hits (and misses)”, the author goes over a wide range of different interactive artworks. For me this reading almost acted as a means for me to brainstorm some possibilities for projects in the future and gave me a sense of some of the things that are possible with physical computing. 

My favorite example was the piece called “Fields of Grass”. I really liked the idea of the user being able to use semi physical touch to activate music or light using sensors. I always enjoyed these types of interactive artworks when seeing them in person! 

 

MAYBE ITS MAYBELLINE

 

For my assignment idea, I really wanted to incorporate makeup because it’s something that I really love and use everyday (especially red lipstick). I know that I am technically using my hands, but I really didn’t want to let go of this idea!

I connected my Arduino to the breadboard, making use of the techniques we used in class and then taped my jumper wires onto my lipstick (not very subtly, if I may add) and used foil  as my “conductor fabric” to get the LED to switch on and off.


 

For next time, I would like to create some sort of holder for the lipstick so I don’t have to physically apply it and also find a way to hide the wires since they are so obvious.

WEEK 8 REFLECTION (:

Norman,“Emotion & Design: Attractive things work better”

The main takeaways!

  • “Design matters, but which design…depends on the occasion, the context, and above all the mood.”
  • “Pleasing things work better, are easier to use, and produce a more harmonious result.”
  • “The design should not become a barrier, it should be carefully tailored for a task.”
  • “A product must be beautiful, have useful function, work well, and be usable and understandable.”

With these quotes, I took away the importance of balance in regards to great design. It is essential to make sure you are covering all aspects of the design process: 

  • Ensuring your product is providing some sort of benefit or fulfilling a certain purpose
  • Catches the user’s eyes with its attractive design, whether it be adding a combination of colors or cool features that ultimately enhance the likability of the product.
  • Making sure that there is a certain level of learnability. This is where the human centered design really comes through. A product should be pretty self explanatory to ensure that the user doesn’t become frustrated with the product, therefore halting the usage of it.

Her Code Got Humans On the Moon — And Invented Software Itself. 

I really appreciate how this article highlighted the female computer scientist Margaret Hamilton and her role in the Apollo Mission, as well as how her creations deeply impacted the future of computer science. It is refreshing to hear more about female contributions to the field of computer science since the field is so male dominated. 

 

The section of the article about Hamilton being under great pressure to be perfect while building the computer software for the mission was very relatable. I can understand her worries about not being perfect, because she was not only representing herself, but women (at the time) in computer science. The article writes, “I [Hamilton] was always imagining headlines in the newspapers and they would point back to how it happened, and it would point back to me.”. When she says this, she demonstrates how much pressure was placed on her to be flawless. This is something I believe many women, particularly in technical fields, experience. 

MIDTERM PROJECT “AURA”

https://editor.p5js.org/dianadonatella/sketches/0Rv4DeXZ_

Concept:

My project was inspired by a series of paintings that I created over the last couple of weeks. I am not sure why exactly, but this style of painting really speaks to me.  It allows me to freely paint using as many colors as my heart desires. It was once stated to me that my pieces reminded people of energies, specifically auras. This idea became the foundation of my midterm project. My initial goal was to create a sketch that allowed for user input to type in an initial of their name and generate a unique interpretation of their aura both visually and sonically. Unfortunately due to the amount of errors and complications I faced during this process the idea has slightly shifted.  Now the user can actually build their own depiction of their aura by typing in single letters to generate a concoction of colors and sounds. Though this wasn’t the initial idea, I actually think this process is much more interactive for the user, giving the user more control of how they want their “aura” to look or sound.

The program starts with the following opening image:

I made this image in Canva with their free gradient backgrounds and added the butterfly and text as well!

The user then has access to the user input when they click generate, which generates the base color of their sketch. In the box directly next to it, the user can input ONE capitalized letter at a time, creating a wall of color and sound to build what their aura looks and sounds like.

What I have implemented into my code from class!

Within my code I have made use of CSV files and images:

function preload() {
  bg = loadImage('gradient.png')
  initials = loadTable("initials.csv", "csv", "header");

I used sound (specifically .wav files):

 
//continuation of the preload section
songA = loadSound("A.wav");
  songB = loadSound("B.wav");
  songC = loadSound("C.wav");
  songD = loadSound("D.wav");
  songE = loadSound("E.wav");
  songF = loadSound("F.wav");
  songG = loadSound("G.wav");
  songH = loadSound("H.wav");
  songI = loadSound("I.wav");
  songJ = loadSound("J.wav");
  songK = loadSound("K.wav");
  songL = loadSound("L.wav");
  songM = loadSound("M.wav");
  songN = loadSound("N.wav");
  songO = loadSound("O.wav");
  songP = loadSound("P.wav");
  songQ = loadSound("Q.wav");
  songR = loadSound("R.wav");
  songS = loadSound("S.wav");
  songT = loadSound("T.wav");
  songU = loadSound("U.wav");
  songV = loadSound("V.wav");
  songW = loadSound("W.wav");
  songX = loadSound("X.wav");
  songY = loadSound("Y.wav");
  songZ = loadSound("Z.wav");

I used functions:

//function for main page (SIMPLE EXAMPLE
function main_page() {
  // sets up variables to get the alphabet and color columns
  alphabet = initials.getColumn("alphabet");
  color1 = initials.getColumn("color1");
  color2 = initials.getColumn("color2");
  color3 = initials.getColumn("color3");

I used conditional statements:

if (initial === "A") {
   songA.playMode("untilDone");
   songA.play();

 }
 if (initial === "B") {
   songB.playMode("untilDone");
   songB.play();
   
 }

 if (initial === "C") {
   songC.playMode("untilDone");
   songC.play();
 }

 if (initial === "D") {
   songD.playMode("untilDone");
   songD.play();
 }

 if (initial === "E") {
   songE.playMode("untilDone");
   songE.play();
 }

 if (initial === "F") {
   songF.playMode("untilDone");
   songF.play();
 }

 if (initial === "G") {
   songG.playMode("untilDone");
   songG.play();
 }

 if (initial === "H") {
   songH.playMode("untilDone");
   songH.play();
 }

 if (initial === "I") {
   songI.playMode("untilDone");
   songI.play();
 }

 if (initial === "J") {
   songJ.playMode("untilDone");
   songJ.play();
 }

 if (initial === "K") {
   songK.playMode("untilDone");
   songK.play();
 }

I used User input/buttons/text:

//function for homescreen 
function homescreen() {
  fill("white");
  square(0, 0, width);
  background(bg);

  fill(0);
 
  text("Click generate & type in a letter!", width/7.5, 20);
  textAlign(CENTER);
  textSize(14);
  
  input = createInput();
  input.position(20, 30);
  button = createButton("generate");

I used arrays:

// an arrray to store the Particles
let particles = []; // variable for the particles
const num = 3500; // how many particles will be displayed

 

An extra step! (USING LOGIC PRO X and PLUGINS)

This is the DAW that I used to create the Sounds/Chords for my project. They are all synthesizers!

Parts you are proud of or challenges you have overcome:

I am really happy that I was able to achieve a similar interpretation of my painted pieces. I feel that not including a background and letting the perlin noise loop really brought the stroke affect and colors out of my paintings.

for (let i = 0; i < num; i++) {
    let p = particles[i];
    square(p.x, p.y, 2);

    color1 = color(colors_for_sample[0]);
    color2 = color(colors_for_sample[1]);

    fill(lerpColor(color1, color2, noise(p.x * noiseScale, p.y * noiseScale))); // lerpColor() function is used to interpolate two colors to find a third color between them.
    noStroke();

    let n = noise(p.x * noiseScale, p.y * noiseScale); //Multiplies the x-coordinate of the point p by a value noiseScale.... Multiplies the y-coordinate of the point p by the same value noiseScale. X and y coordinates are mutiplied by the noise scale before passed onto the noise. Basically generates random-like values based on the input coordinates and maps out the coordinates before the noise is generated
    let a = TAU * n; //TAU = 2PI & n = value calculated in previous line
    p.x += cos(a); // incrementing the x and y coordinates of a point based on the cosine and sine of angle (a)
    p.y += sin(a);
  }

I really wish that my code didn’t have to be so redundant when including the sound files. Having lines like these:

if (initial === "A") {
    songA.playMode("untilDone");
    songA.play();

  }
  if (initial === "B") {
    songB.playMode("untilDone");
    songB.play();
    
  }

  if (initial === "C") {
    songC.playMode("untilDone");
    songC.play();
  }

  if (initial === "D") {
    songD.playMode("untilDone");
    songD.play();
  }

  if (initial === "E") {
    songE.playMode("untilDone");
    songE.play();
  }

  if (initial === "F") {
    songF.playMode("untilDone");
    songF.play();
  }

really stunted my mobility within the code, made figuring out errors 1,000,o00 times harder, was very overwhelming to look at, and took so much extra time to write out, (even if copy and pasted).

In the future, I would really like to work on expanding on this project and creating a better set up around the user input, since it’s a bit plain and doesn’t really contain a means of restarting the sketch. My sketch overall is really lacking user input which is such a key aspect of any interactive piece, so for that I am a bit disappointed with my project.