Interaction Lab

Task #1: Test the NeoPixel

The task for this recitation was for us to use the Neopixels in order to visualize music. For task 1 I followed the schematic provided and wired it accordingly. The libraries were already installed from previous classes, so I skipped step 2. However, I ran into a problem, because Arduino IDE decided to open into an old code, and the library couldn’t be found. To solve this problem I closed IDE and restarted it. For step 3 I went into the FastLed library, and used the blinking example. Pictures of task 1 can be found below. 

 

Schematic connection: 

 

 

Blinking LED test:

 

 

 

Task #2: Use your computer to light up NeoPixels

For the 1st step of task 2, the serial record library was already installed from previous classes, the use of it is to allow communication between Arduino, and processing.  For step 2, I clicked the link that directed me into the GitHub page, and I copy pasted the code into IDE. The code allowed  to modify individual led strips so I put the following into the serial monitor ” 5, 255,0,0″ This made the 6th led light up red. This verified the code was running properly. For step 3, I copy pasted the code provided, and ran it in processing. The processing code allowed to turn the LEDs on when you slid the mouse across it. 

 

Fifth LED light up:

 

Arduino, and processing code:

 

Mouse sliding through: 

 

Task #3: Add Music!

 

The first thing I did for task 3 was to download the sketch for the amplitude analyzer. The following I did was to start combining the previous processing sketch, with the one I just downloaded. The final code can be found below. I asked Gottfried for help in modifying the code, and he suggested adding a second array that would track which LED’s have already been triggered, and turn them off. So you could visualize the music better.  I also multiplied the volume by  50, so the effect was more centered. The song I chose was “Thousand bad times” by Post Malone, but I needed to convert it into an MP3 file, and the websites that offered it seemed very sketchy. So Gottfried helped me by converting it for me. I added the file into the data folder, and ran the program. The video can be seen below. Overall, this was a very interesting recitation, and it provided some insight into my final project. 

 

Amplitude analyzer program:

 

Combining the 2 Sketches:

 

Final code:  

import processing.sound.*;
import processing.serial.*;
import osteele.processing.SerialRecord.*;

Serial serialPort;
SerialRecord serialRecord;
SoundFile sample;
Amplitude analysis;

int W;         //width of the tiles
int NUM = 60;  //amount of pixels
int[] r = new int[NUM]; //red of each tile
int[] g = new int[NUM]; //red of each tile
int[] b = new int[NUM]; //red of each tile
int lastN;


void setup() {
  size(640, 480);
  W = width/NUM;
  // load and play a sound file in a loop
  sample = new SoundFile(this, "thousand.mp3");
  sample.loop();

  // create the Amplitude analysis object
  analysis = new Amplitude(this);
  // analyze the playing sound file
  analysis.input(sample);


  String serialPortName = SerialUtils.findArduinoPort();
  serialPort = new Serial(this, serialPortName, 9600);
  serialRecord = new SerialRecord(this, serialPort, 4);
  serialRecord.logToCanvas(false);
  rectMode(CENTER);
}

void draw() {

  println(analysis.analyze());
  background(125, 255, 125);
  noStroke();
  fill(255, 0, 150);


  for (int i=0; i<NUM; i ++) {
    fill(r[i], g[i], b[i]);
    rect(i * W + W/2, height/2, 10, 10);
  }



  // analyze the audio for its volume level
  float volume = analysis.analyze();

  // volume is a number between 0.0 and 1.0
  // map the volume value to a useful scale
  float diameter = map(volume, 0, 1, 0, width);
  // draw a circle based on the microphone amplitude (volume)
  circle(width/2, height/2, diameter);


  // if (mousePressed == true) {
  int n = floor(constrain(volume*50, 0, NUM-1));

  r[n] = floor(random(255));
  g[n] = floor(random(255));
  b[n] = floor(random(255));

  serialRecord.values[0] = lastN;     // which pixel we change (0-59)
  serialRecord.values[1] = 0;  // how much red (0-255)
  serialRecord.values[2] = 0;  // how much green (0-255)
  serialRecord.values[3] = 0;  // how much blue (0-255)
  serialRecord.send();            // send it!

  serialRecord.values[0] = n;     // which pixel we change (0-59)
  serialRecord.values[1] = r[n];  // how much red (0-255)
  serialRecord.values[2] = g[n];  // how much green (0-255)
  serialRecord.values[3] = b[n];  // how much blue (0-255)
  serialRecord.send();            // send it!
  
  lastN = n;
  //  }
  
  
}

Final Video:

 

 

For this recitation, the goal was to create an interactive poster for the end of semester IMA show. My approach towards this was to create a crossword showcasing all the information about the event, and also adding a background that would catch people’s attention. Which is why I used a square background that moves, and is colored red.  Firstly I created a sketch for the crossword. For this I used the text function. However there was a problem, I could now write vertically, so I tried to find ways, but it was hard. Then an LA suggested the following method: textLeading(40);  text(“l\no“, 135, 100 ); this would allow me to write vertically. It only allowed me to do 2 letters at a time, so I had to repeat it many times. Then I started to draw an eye on graphing paper. Then I moved it digitally with the Bezier vertex formula, and a circle formula. I made it interactive by creating 2 variables for the eye that took into the X, and Y axis, which made the pupils follow the mouse. Then I made a translate function, so that I could have an eye on the left side as well. Below, the code, and video can be found for this first part. 

 

Physical sketch: 

 

Video: 

 

 

Code: 
 

 

PFont myFont;
float eyex;
float eyey;




void setup() {
  size(1024, 768);

  noStroke();

  String[] fontList = PFont.list();
  printArray(fontList);
  myFont = createFont("Broadway", 32);
  textFont(myFont);
}

void draw() {
  background(255);
  stroke(0);
  fill(255);

  //eye right
  beginShape();
  vertex(600, 230);

  bezierVertex(600, 230, 660, 120, 800, 230);
  bezierVertex(800, 230, 660, 340, 600, 230);

  endShape();

  eyex= map(mouseX, 1024, 0, 720, 650);
  eyey= map(mouseY, 768, 0, 250, 220);

  fill(16, 180, 165, 50);
  circle(eyex, eyey, 60);

  fill(0);
  circle(eyex, eyey, 18);

  //eye left
  push();
  fill(255);
  translate(-500, 200);
  beginShape();
  vertex(600, 230);

  bezierVertex(600, 230, 660, 120, 800, 230);
  bezierVertex(800, 230, 660, 340, 600, 230);

  endShape();

  eyex= map(mouseX, 1024, 0, 720, 650);
  eyey= map(mouseY, 768, 0, 250, 220);

  fill(16, 180, 165, 50);
  circle(eyex, eyey, 60);

  fill(0);
  circle(eyex, eyey, 18);
  pop();

  fill(0);
  textSize(50);
  text( " IMA Fall 22 EnD-Of-Semester Show", 0, 60);

  //floor 8
  textLeading(40);
  text("l\no", 135, 100 );
  textLeading(40);
  text("o\nr", 135, 180 );
  textLeading(40);
  text("8\n", 135, 280 );




  //december 16th
  textLeading(40);
  text("e\nc", 400, 100);
  textLeading(40);
  text("e\nm", 400, 180);
  textLeading(40);
  text("b\ne", 400, 270);
  textLeading(40);
  text("r\n", 400, 350);
  textLeading(50);
  text("1\n6", 400, 420);
  textLeading(50);
  text("t\nh", 400, 520);

  //time 6 to 8pm
  text("ime: 6pm to 8pm", 425, 520);



  fill(0);
  textSize(60);


  println(mouseX, mouseY);
}

 

 

For the second part, I created the background by creating a function that would draw a bunch of rectangles across the screen. After, I used 2 “for” functions to draw them in to canvas, and added a random function for the stroke value, which gives the optical illusion that the rectangles are moving. Video and code can be found below.

 

 

Video:

 

Code:

 

float eSize = 50;

void setup() {
  size(1024, 768);
  background(0);
}

void draw() {
  fill(255);
  noStroke();



  for (int x1 = 0; x1 < width; x1 = x1 + 80) {
    for (int y1 = 0; y1 < height; y1 = y1 + 60) {
      Rectangle(x1, y1, random(1, 10));
    }
  }
}

void Rectangle( int x, int y, float sw) {
  fill(#E82A2A);
  stroke(0);
  strokeWeight(sw);
  rect(x,y , 50, 50);

 
}

After having both elements done, and verifying that they satisfied the requirements,  I created a new sketch in processing and united both of them together taking the different layers into account. After merging, I realized that one of the eyes turned red, and both of their stroke values where going off randomly. In my opinion this made them look better, so I left them as if. The videos and code can be found below. 

 

video:

 

Code: 

 

PFont myFont;
float eyex;
float eyey;
float eSize = 50;



void setup() {
  size(1024, 768);
  background(255);
  noStroke();

  String[] fontList = PFont.list();
  printArray(fontList);
  myFont = createFont("Broadway", 32);
  textFont(myFont);
}

void draw() {
background(0);

  
   for (int x1 = 0; x1 < width; x1 = x1 + 60) {
    for (int y1 = 0; y1 < height; y1 = y1 + 60) {
      Rectangle(x1, y1, random(1, 10));
    }
  }

 //eye right
  beginShape();
  vertex(600, 230);

  bezierVertex(600, 230, 660, 120, 800, 230);
  bezierVertex(800, 230, 660, 340, 600, 230);

  endShape();

  eyex= map(mouseX, 1024, 0, 720, 650);
  eyey= map(mouseY, 768, 0, 250, 220);

  fill(16, 180, 165, 50);
  circle(eyex, eyey, 60);

  fill(0);
  circle(eyex, eyey, 18);

  //eye left
  push();
  fill(255);
  translate(-500, 200);
  beginShape();
  vertex(600, 230);

  bezierVertex(600, 230, 660, 120, 800, 230);
  bezierVertex(800, 230, 660, 340, 600, 230);

  endShape();

  eyex= map(mouseX, 1024, 0, 720, 650);
  eyey= map(mouseY, 768, 0, 250, 220);

  fill(16, 180, 165, 50);
  circle(eyex, eyey, 60);

  fill(0);
  circle(eyex, eyey, 18);
  pop();

fill(255);
  textSize(50);
  text( " IMA Fall 22 EnD-Of-Semester Show", 0, 60);
  
  //floor 8
   textLeading(40);
  text("l\no",135 ,100 );
  textLeading(40);
  text("o\nr",135 ,180 );
  textLeading(40);
  text("8\n",135 ,280 );
  
  
  
  
  //december 16th
  textLeading(40);
  text("e\nc", 400, 100);
  textLeading(40);
  text("e\nm", 400, 180);
  textLeading(40);
  text("b\ne", 400, 270);
  textLeading(40);
  text("r\n", 400, 350);
  textLeading(50);
  text("1\n6", 400, 420);
  textLeading(50);
  text("t\nh", 400, 520);

//time 6 to 8pm
  text("ime: 6pm to 8pm", 425, 520);



  fill(0);
  textSize(60);


  println(mouseX, mouseY);
}

void Rectangle( int x, int y, float sw) {
  fill(#E82A2A);
  stroke(0);
  strokeWeight(sw);
  rect(x,y , 50, 50);

 
}

 

Step 1: Choose your motif

 

 

For this week’s recitation,  I chose this image of a sunset at the beach, because it was the first picture that had my attention while I was going through my gallery. The image consisted of  3 areas, sky, ocean, and sand. The approach that was suggested to me by Rudy, was to separate each of the areas into rectangles, as it was easier to color, and the original image was a landscape that was separated into sections. 

Step 2: Draw your image on paper

 

 

Step 3: Draw your image with code

 

The final creation consists of the top part, which represents the sky on the blue part, and the orange part represents the sunset. The next spot shaded dark blue represents the ocean, and the boulder on the right represents a rock. The brown section represents sand at the beach. I think that the location of objects in both original pic, and processing render are quite similar. However, I do not think that processing was a good means of realizing the original picture with what we have learned. It lacks the organic shapes that are found on the original picture. If one were to implement the organic shapes it would be quite hard, and take a long time to complete. 

Code:

void setup() {
  size(600, 600);
}

void draw() {
  background(255);

  //water
  fill(#2235AA);
  rect(0, 219, 600, 600);

  //sky blue
  fill(#269DEA);
  rect(0, 0, 600, 108);

  //sky orange
  fill(#F59F00);
  rect(0, 110, 600, 109);

  //rock
  fill(0);
  rect(520, 200, 100, 100, 10);

  //sand
  fill(#462D09);
  rect(0, 260, 600, 600);

  println(mouseX, mouseY);
}

 

1. Auto-Trashcan-  KENNETH CHU – GOTTFRIED

 

1. CONTEXT AND SIGNIFICANCE
   

I think that the previous research project provided me with the idea of how easy it was to work with cardboard. It also gave me some insight into interactivity from watching other groups present their projects. My definition of interaction is the feedback one receives from doing an action, such as my project, in which my trash can opens its lid automatically when it senses someone is near. I think that something significant about my project is the ability for me to automate a task that was annoying for me, since the mechanism in my trash can back in my dorm was broken. Since similar designs already exist, one example of its application outside of my own use is a hospital room in developing countries such as Ecuador. Nurses in such countries often don’t have the necessary vaccine needle covers that protect them from being stabbed by the needle, and since the disposal bins are manual, some nurses have been stabbed accidentally which puts them at risk of being infected by a disease. I think an automatic disposal bin such as mine could help reduce the amount of accidental needle stabbings in developing countries.

 

CONCEPTION AND DESIGN:

My partner and I knew from the beginning that this trash can was meant to be put on the floor, so it made sense to put the ultrasonic sensor at the bottom of the bin. We used the 2 images below as references, but we knew they wouldn’t work, because of how the cables were managed. For the materials, we used cardboard. This decision was made, because cardboard was easily available to us, and we both had some experience with it. Moreover, cardboard was very easy to cut, unlike wood, which requires special machinery to cut. Another we could have used was plastic, but it would be harder to find plastic in such a shape we were expecting. 

 

Visual references for the project:

• Sketch/ diagram initial prototype:

 

FABRICATION AND PRODUCTION:

Firstly, my partner and I met together and both of us proposed our ideas, and we decided to go on with mine. The mechanism we decided to use was an ultrasound sensor attached to a servo motor, which would be triggered when it sensed something within a certain distance. Afterwards, we looked for a box that resembled a trash can, because building it from scratch would result in not being aesthetically pleasing. We then spray painted it with an oil based paint, thus leaving a shiny finish. I think that the communication between me and my partner was pretty good, and living on the same floor, we could easily work on the project whenever we wanted to. I focused more on the software side, and he focused more on the fabrication process. 

 

Spray painting: 

 

 

We started designing the schematic in Tinkercad, which is a tool we used in previous recitations. After viewing different projects on the arduino project hub and using them as references, this is the schematic we designed. We built the schematic, and coded it on the same day in the dorm, because it is really hard for us to concentrate on the IMA studio, as there are too many people doing different things. Then we mounted everything together in Thursday’s class. We decided to use the battery pack as a power option, because it would facilitate cable management, and the arduino also had a memory storage, so it could remember the code. 

 

Schematic: 

 

Circuit: 

 

Circuit test: 

 

Mounting together:

 

Inside view:

 

For the coding part, we also looked in the arduino project hub for references, as well as to the slides provided to us. Below is the initial code. We modified this code, because we thought that it made the mechanism too aggressive, and sometimes it sent the lid flying backwards. After talking with Gottfried in Thursday’s class, he suggested to us to make the servo motor activate in stages, and put some delay which in turn resulted in a smoother opening of the lid. The new code can be found below and the stage activation is in bold.

 

Initial code: 
#include
Servo servo;
int const Pulse = 9; //blue cable
int const Echoreceive = 10; // green cable

void setup() {
Serial.begin(9600); //channel for serial monitor
pinMode(Pulse, OUTPUT);
pinMode(Echoreceive, INPUT);
servo.attach(6); //Blue long cable
}
void loop() {
int duration, distance;
digitalWrite(Pulse, HIGH);

digitalWrite(Pulse, LOW);

duration = pulseIn(Echoreceive, HIGH);

distance = duration * 0.034 / 2;
//We found distance formula from arduino project hub.

// servo triger distance is from 0 – 45 cm
if (distance <= 45 && distance >= 0) {

servo.write(90);
delay(3000);
} else {

servo.write(180);
}

delay(10);

Serial.print(“Distance: “);

Serial.print(distance);
Serial.println(“cm”);
delay(300);
}
 

Second code: 
#include
Servo servo;
int const Pulse = 9; //blue cable
int const Echoreceive = 10; // green cable
int open;

void setup() {
Serial.begin(9600); //channel for serial monitor
pinMode(Pulse, OUTPUT);
pinMode(Echoreceive, INPUT);
servo.attach(6); //Blue long cable
}
void loop() {
int duration, distance;
digitalWrite(Pulse, HIGH);

digitalWrite(Pulse, LOW);

duration = pulseIn(Echoreceive, HIGH);

distance = duration * 0.034 / 2;
//We found distance formula from arduino project hub.

// servo triger distance is from 0 – 15 cm
if (distance <= 15 && distance >= 0) {

if (open == 0) {

//servo.write(90);
//delay(5000);

servo.write(162);
delay(100);

servo.write(153);
delay(100);

servo.write(144);
delay(100);

servo.write(135);
delay(100);

servo.write(126);
delay(100);

servo.write(117);
delay(100);

servo.write(108);
delay(100);

servo.write(90);
open = 1;
delay(5200);
}
} else {
open = 0;

servo.write(180);
}

delay(10);

Serial.print(“Distance: “);

Serial.print(distance);
Serial.println(“cm”);
delay(300);
}

 

After the user testing session we realized that we had made one major design flaw. At first we placed the ultrasonic sensor outside the box, which allowed it to have a better detection range. However people were stepping on the sensor during the test round, which could very possibly damage it, so after the class we decided to place it inside the box, with just the ultrasonic part protruding out. This was effective, because it protected the mechanism from damage, but we also had to reduce the detection distance to 15 cm, in order to avoid false triggers. As for the feedback received, it mostly focused on how this project could be applied on a larger scale, and increasing the volume of the trash can. The code was also slightly modified to hold for 5.2 seconds when it was triggered, and to keep open as long it sensed something in front of the trashcan. 

 

ultrasonic sensor first design: 

 

 

 

New ultrasonic design sketch: 

 

New ultrasonic design: 

 

User testing Feedback: 

 

User testing: 

 

Final Test:

 

1. CONCLUSIONS:

 To summarize this project, we had to create a an artifact that was either, useful, interesting, or entertaining. With me choosing the first option, because I wanted to solve a problem I had back in the dorm. Automation of a mundane task could also help people save a lot of time, in the long run. I think that our project aligns with my concept of interaction, because it provides a response (opening) every time time you put a input in it (senses something). I think that most of the audience that tried interacting with our project figured out what to pretty quickly. I think that an aspect we could improve, if we had more time would be the finishes for the trash can, as it looks really basic. I learned that I can always ask for help, and or suggestions from other people if we are not sure what to do, but ultimately it for us to decide what to do. My takeaway from this project is on how to plan and execute a project, and also how I could be able to better introduce a background story into my designs. The whole process was really rewarding to me from start to finish, and I am looking forward to next coming weeks!

 

Other people testing:

 

 

References: 

 

https://create.arduino.cc/projecthub/abdularbi17/ultrasonic-sensor-hc-sr04-with-arduino-tutorial-327ff6 ** allowed us to view how the code looked like, and how the sensor worked. 

 

https://docs.arduino.cc/learn/electronics/servo-motors ** review on servos

 

https://www.arduino.cc/education/smart-trash-can ** schematic ideas

 

https://create.arduino.cc/projecthub/corn_isamazing/smart-trash-can-d080e3 ** schematic ideas

 

https://create.arduino.cc/projecthub/ashraf_minhaj/arduino-trash-bot-auto-open-close-trash-bin-fef238?ref=search&ref_id=cardboard&offset=49 ** code ideas

 

 

• A. SMART TRASH BIN- KENNETH CHU – GOTTFRIED

 

• B. SKETCHES AND/OR DIAGRAMS

• C. PROJECT EXPLANATION

 

I was inspired by the trash bin that is in my dorm, because the lid mechanism is broken, so I always have to manually lift the bin in order to dispose of trash. I think this project falls into the significant topic of automation of an everyday task. 

Recitation 4

Step 1: Build the circuit

For today’s recitation, we are building a mechanism with a stepper motor, and an H bridge that allows the motor to reverse the spinning motion, without the need of rewiring the cables, which basically makes it bipolar. We are also using a higher voltage, so to protect our laptops, we are using a usb protector. The process went very smoothly, as we followed the schematic above. 

 

Finished Circuit:

Time lapse Build:

 

 

Step 2 & 3: Build a cardboard mechanism!

The mechanism for today’s recitation was built using cardboard, and a 3d printed adaptor shaft, along with some rivets to hold the cardboard together. After the mechanism was done, we mounted the stepper motor in between, and sealed off everything. For the personalization part, we drew a fist and cut it out, because we felt that a fist motion could be easily mimicked by the mechanism’s range of motion.

 

Time lapse build Cutting part:  

 

 

Time lapse build Mounting: 

 

 

 

Finished mechanism

 

Finished project: 

 

For the coding part, we used the code provided to us in the instructions and tested everything, to make sure it worked. After further code modifications, we decided to change the delay value to 100, and we noticed that the stepper motor spun faster, from side to side. Afterwards, we modified the code. For the last modification, we changed the speed of clockwise rotation to 60 making it faster, and the speed of counterclockwise value to 20, making it slower, therefore giving the fist the effect of punching really fast at first, and winding up to punch again. The code with the highlighted part can be found below. 

 

#include <Stepper.h>

 

const int stepsPerRevolution = 300;  // change this to fit the number of steps per revolution

// for your motor

 

// initialize the stepper library on pins 8 through 11:

Stepper myStepper(stepsPerRevolution, 8, 9, 10, 11);

 

void setup() {

 // set the speed at 60 rpm:

 myStepper.setSpeed(60);

 // initialize the serial port:

 Serial.begin(9600);

}

 

void loop() {

 // step one revolution  in one direction:

 myStepper.setSpeed(60);

 Serial.println(“clockwise”);

 myStepper.step(stepsPerRevolution);

 delay(100);

 

 // step one revolution in the other direction:

 myStepper.setSpeed(20);

 Serial.println(“counterclockwise”);

 myStepper.step(-stepsPerRevolution);

 delay(100);

 

Test run with default code:

 

 

 

Delay 100: 

 

 

Different setSpeed video: 

 

 

Additional Questions

Question 1: Choose an art installation mentioned in the reading ART + Science NOW, Stephen Wilson (Kinetics chapter). Post your thoughts about it and make a comparison with the work you did during this recitation. How do you think that the artist selected those specific actuators for his project?

“The drumming and Drawing Subhuman” 

I think that the main objective of this installation was to make a robot resemble natural human motion. I believe that it can relate to today’s recitation, because after we completed the mechanism, we tried to program it in a way so that it could resemble the natural punching motion of a human. 

 

Question 2: What kind of mechanism would you be interested in building for your midterm project? Explain your idea using a sketch (conceptual or technical) with a list of materials that you plan to use. Include details about the ways that you expect the user to embrace in a physical interaction with your project. In particular, explain how would your motor (or motors) with a mechanism will be different than using an animation on a digital screen.

I am considering a trash can that could be activated via a motion sensor. The motion would trigger a reaction, so that a servo motor can spin to a certain direction, and the tab attached to the servo motor would allow the lid of the trash can to open. I am automating an everyday process that most people take for granted, so the user could just wave their hand, and the lid will automatically open, and close after a determined period of time. It will be different because it will be a physical object, which you can expect a physical reaction to happen, unlike a digital mechanism, that will only be happening inside a screen.