Category: Interaction Lab

Posted on

Proposals Final Project: Ruben Mayorga

Proposal 1: trashcan that can interact with the user, it talks to induce the user to throw away their trash in the cans. The project would use a movement sensor to detect objects falling inside and giving a prerecorded message.

The idea behind the trashcan is to incentive the use of the trash to better protect the environment, by giving fun facts or phrases that motivate people to use the object correctly. 

Proposal 2:  Proposal 2 is based on the idea of cultural interactivity between people. The premise is to use the smells and the sounds that people relate to home, and their own culture. This will help to give an idea of what other people experience in different parts of the world. This project will help the understanding of the cultural richness that the world posses, and can help close the mental barriers that people have regarding other countries and people.

Image result for smell displays ,museum

Proposal 3: An array of objects (tbd) that when touched send a signal to the arduino and the computer to show an image and a tone. The idea behind is for people to collaborate and experiment with the objects, creating songs and different array of images. This idea comes from a display of light bulbs that turned on when being touched, but in this case my project would project different shapes depending on the object touched.  

Posted on

Recitation 8: Serial Communication by Amy DeCillis

Exercise 1: Make a Processing Etch A Sketch

In this exercise, we used two potentiometers to recreate a childhood toy. Taking input values from Arduino and sending them to Processing, this small project allows users to create artwork of their own.

Arduino Code

void setup() {
  Serial.begin(9600);
}

void loop() {
  int sensor1 = analogRead(A0);
  int sensor2 = analogRead(A1);

  // keep this format
  Serial.print(sensor1);
  Serial.print(",");  // put comma between sensor values
  Serial.print(sensor2);
  Serial.println(); // add linefeed after last value

  delay(100);
}

Processing Code

import processing.serial.*;

String myString = null;
Serial myPort;


int NUM_OF_VALUES = 2;   
int[] sensorValues;     

float preX;
float preY;

void setup() {
  size(500, 500);
  background(0);
  setupSerial();
}

void draw() {
  updateSerial();
  printArray(sensorValues);

  float posX = map(sensorValues[0],0,1023,0,500);
  float posY = map(sensorValues[1],0,1023,0,500);
  
  stroke(255);
  line(preX,preY,posX,posY);
  //this tells the code that the new line becomes the previous line
  preX = posX;
  preY = posY;
}

void setupSerial() {
  printArray(Serial.list());
  myPort = new Serial(this, Serial.list()[1], 9600);

  myPort.clear();
  myString = myPort.readStringUntil( 10 );  
  myString = null;

  sensorValues = new int[NUM_OF_VALUES];
}

void updateSerial() {
  while (myPort.available() > 0) {
    myString = myPort.readStringUntil( 10 ); 
    if (myString != null) {
      String[] serialInArray = split(trim(myString), ",");
      if (serialInArray.length == NUM_OF_VALUES) {
        for (int i=0; i<serialInArray.length; i++) {
          sensorValues[i] = int(serialInArray[i]);
        }
      }
    }
  }
}

Exercise 2: Make a Musical Instrument With Arduino

This exercise differs from the first in that it takes input values from Processing and sends them to Arduino. The user is able to move the mouse to different areas of the screen to trigger different tones on the Arduino buzzer. 

Arduino Code

char valueFromProcessing;
int ledPin = 13;


void setup() {
  Serial.begin(9600);
  pinMode(ledPin, OUTPUT);
}


void loop() {
  // to receive a value from Processing
  while (Serial.available()) {
    valueFromProcessing = Serial.read();
  }
  
  if (valueFromProcessing == 'H') {
    tone(13, 440, 3000);
  } else if (valueFromProcessing == 'L') {
    tone(13, 400, 3000);
  } else if (valueFromProcessing == 'A') {
    tone(13, 340, 3000);
  } else if (valueFromProcessing == 'B') {
    tone(13, 300, 3000);
  } else {
    // something esle
  }
  delay(10);
}

Processing Code

import processing.serial.*;

Serial myPort;
int valueFromArduino;


void setup() {
  size(500, 500);
  background(0);

  printArray(Serial.list());
  
  myPort = new Serial(this, Serial.list()[1], 9600);
}


void draw() {
  // to send a value to the Arduino
  if (mouseX<250 && mouseY<250) {
    myPort.write('H');
  } else if (mouseX>250 && mouseY>250) {
    myPort.write('L');
  } else if (mouseX>250 && mouseY<250) {
    myPort.write('A');
  } else if (mouseX<250 && mouseY>250) {
    myPort.write('B');
  }
}
Posted on

Recitation 7: Functions and Arrays by Alexander Cleveland

Introduction

In this recitation, I created the base outline for a function and added it it through multiple steps. These steps included using the for() function to create different arrays. My goal for this recitation was to thoroughly understand every line of code that I was creating. I didn’t want to copy and paste lines from the example without knowing how they interacted with my function first. This way, I could understand how to use the code in future purposes for my project if necessary.  

Step One

I started step one by creating a simple motif using a rectangle, an ellipse, and a square. It alternated black and white colors to signify the difference between shapes. I entered these units under void display to have the three shapes represented on the canvas. The code for void display can be found below.

void display (float x, float y, color c)
{
fill(c);
rect(x, y, 300, 300);

fill(255);
rect (x, y, 150, 200);

fill(0);
ellipse(x, y, 55, 55);
}

This step in the process just resulted in the shape and colors being represented on the canvas without any manipulations. 

Step Two

In step two, I created a for loop under setup to move my motif in 100 different positions at the same time. In setup, my for loop consisted of the following code:

for (int i = 0; i < numberOfInstances; i++)

Before creating this loop, I defined “numberOfInstances” at the top of my code as equaling 100. So, this code will run until it reaches 100 instances of my motif hitting the screen.  But because it is in setup, it will only one once, so I have to move it into draw in the future. Because every time the for loop is running, the “i” value is gaining “+1” because of the “i++” value.  This for loop combined with my defined “numberOfInstances” ensures that the function will only run until “i” is no longer less than the “numberOfInstances” which in this case, is 100.

Step Three

In step three, I created three arrays to store my x, y, and color data for the original function I created. In order to do this, I had to start within setup and fill them with data. Below is the code I had up until this point within display.

void setup() {
size(600, 600);
background(255);
rectMode(CENTER);
for (int i = 0; i < numberOfInstances; i++) {
xPositions[i] = random(0, 250);
yPositions[i] = random(0, 255);
cPositions[i] = color(random(0, 255));

The for loop stayed the same, but in order to fill each “i” position with data, I set it equal with random values. What should be noted is that in order to setup the array, I needed to include three lines at the beginning of my code that are as follows.

float[] xPositions = new float[numberOfInstances];
float[] yPositions = new float[numberOfInstances];
color[] cPositions = new color[numberOfInstances];

These three values set x, y and c positions to float the numberOfInstances (100) within my code. So, under setup, I was essentially assigning random numbers to be placed within these addresses (xPositions[i], yPositions[i], and cPositions[i]). I needed to differentiate cPositions as color in the above code because otherwise it wouldn’t coordinate to a random color, but instead a random position. Then in Draw, I used the array to make sure the function is displayed 100 times.

void draw() {
background(255);
for (int i = 0; i < numberOfInstances; i++) {
if(xPositions[i]>600){xMovement[i]= -xMovement[i];}
if(yPositions[i]>600){yMovement[i]= -yMovement[i];}

display(xPositions[i], yPositions[i], cPositions[i]);

xPositions[i] += xMovement[i];
yPositions[i] += yMovement[i];
cPositions[i] += cMovement[i];
}
}

This can be seen in the original for loop that I correlated with “numberOfInstances”, thus creating 100 repetitions in the function. This code for these 100 different positions are also correlated by manipulating the variable “i” in (display(xPositions[i], yPositions[i], cPositions[i]);) on line 7 of the above code.

Step Four

By this step, I had created 100 different positions of my motif across the screen with random numbers assigned as positions and colors. To first add any movement to the variables, I had to define xMovement, yMovement, and cMovement as “float” and “color” and set it equal to “numberOfInstances” so in the for loop it could occur 100 times.

float[] xMovement = new float[numberOfInstances];
float[] yMovement = new float[numberOfInstances];
color[] cMovement = new color[numberOfInstances];

Under setup, I then added three lines of code signifying the randomness of each movement correlated with the originally defined “x/y/cMovement” variables.

xMovement[i] = random(0, 10);
yMovement[i] = random(11, 20);
cMovement[i] = color(random (0,255));

After establishing the variables and the randomness, under draw I set the positions equal AND adding “one” to the movements to ensure they would be moving from the random position they were put in.

xPositions[i] += xMovement[i];
yPositions[i] += yMovement[i];
cPositions[i] += cMovement[i];

After, and in order to make sure they don’t float off of the screen, I inserted an if statement just below the original for loop in draw.

if(xPositions[i]>600){xMovement[i]= -xMovement[i];}
if(yPositions[i]>600){yMovement[i]= -yMovement[i];}

By doing this, I was essentially saying that if x or y positions reached a certain point on the canvas, that the shapes would bounce off of the side and come back into view. This was when I inserted the xMovement equaling “-xMovement” so reflect back into the picture when it reached 600. Thus completing the step where the function cannot move off screen. All of my code can be viewed at the bottom of this post listed under “My Full Code.”

A video of the completed project can be viewed below.

Questions

Question One

In your own words, please explain the difference between having your for loop from Step 2 in setup() as opposed to in draw().

When I used a for loop in setup, the purpose was to set a random factor to happen only once during the course of the function. Setup only runs things once as opposed to draw. When I inserted the for loop into draw, it repeated it as many times as I set it to. In this case, I set it to run continuously because I did not insert any code to say “stop” once it hits a certain value. All the code knew was to keep repeating on and on under draw.

Question Two

2. What is the benefit of using arrays?  How might you use arrays in a potential project?

Arrays can be used to store different types of data within a function. As I did here, I store colors and positions which matched with my position, movement, and color data. The benefit of arrays are their ability to store large quantities of this data within their own function and repeat this how ever many times you need it to. For a potential project, I may use an array to store random color data and have it linked to something physical within the arduino kit. So that when a button is hit for example, the array will display a different, random color value every time.

My Full Code

int numberOfInstances = 100;

float[] xPositions = new float[numberOfInstances];
float[] yPositions = new float[numberOfInstances];
color[] cPositions = new color[numberOfInstances];

float[] xMovement = new float[numberOfInstances];
float[] yMovement = new float[numberOfInstances];
color[] cMovement = new color[numberOfInstances];

void setup() {
size(600, 600);
background(255);
rectMode(CENTER);
for (int i = 0; i < numberOfInstances; i++) {
xPositions[i] = random(0, 250);
yPositions[i] = random(0, 255);
cPositions[i] = color(random(0, 255));

xMovement[i] = random(0, 10);
yMovement[i] = random(11, 20);
cMovement[i] = color(random (0,255));

//void display(random(0,255), random(40, 90), random(80, 160))
// display (width/2, height/5, color(125));
// display (width/4, height/2, color(220));
//}
}
}

void draw() {
background(255);
for (int i = 0; i < numberOfInstances; i++) {
if(xPositions[i]>600){xMovement[i]= -xMovement[i];}
if(yPositions[i]>600){yMovement[i]= -yMovement[i];}

display(xPositions[i], yPositions[i], cPositions[i]);

xPositions[i] += xMovement[i];
yPositions[i] += yMovement[i];
cPositions[i] += cMovement[i];
}
}

void display (float x, float y, color c)
{
fill(c);
rect(x, y, 300, 300);

fill(255);
rect (x, y, 150, 200);

fill(0);
ellipse(x, y, 55, 55);
}

Posted on

Recitation 7 by Jackson Pruitt

Question 1:
In your own words, please explain the difference between having your for loop from Step 2 in setup() as opposed to in draw().

Having the for loop from Step 2 using the setup() function as opposed to in draw() makes the image only display once without repetition. In the draw() function, however, the loop is repeated over and over in an animation-like fashion unless another function such as noloop() is called. 

Question 2:
What is the benefit of using arrays? How might you use arrays in a potential project?

The benefit of using arrays is that it allows you to assign values to different variables, which means that more information can be stored within a single array instead of creating separate variables to complete the same task. This could potentially be used within my final project to help design the code so that it is structured in a more uniform way, especially if one function contains multiple variables.

int[] posX = {200, 200, 175, 300};
int[] posY = {110, 150, 200, 300};
float[] colors = {random(255), random(255), random(255)};

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

void draw() {
  float[] colors = {random(255), random(255), random(255), random(255), random(255)};
  background(50);
  strokeWeight(10);
  //for ( int u = 0; u < posX.length-1; u++) {
  //  stroke(0, 255, colors[u]);
   // line(posX[u], posY[u], posX[u+1], posY[u+1]);
 // }
 
 for (int i = 0; i<100; i++){
  display(random(200), random(400), int(random(200)));
 }
  
}
void display(float x, float y, color c) {
  //Use these parameters to create your graphics
  fill(c);
  rect(x, y, 600, 700);
  ellipse(x, y, 200, 200);
  triangle(x, y, 200, 400, 300, 200);

}
Posted on

Recitation 7 Documentation

Step 1:

In Step 1, we were required to make a function that would display a graphic that we designed, utilizing the parameters of x position, y position, and color, in addition to using three different shapes. I attempted to create a motif of a cup, with a diagonal pattern on the outside label. I originally wanted to create a motif of bubble tea, but the ellipses that filled the cup were difficult to create into one shape. I used float x and float y for the parameters of the cup, and float a, float b, and float c as the parameters for the color. To create the cup, I used ellipse, line, and quad to form the straw and actual cup. 

Cup
void setup () {
 size (600, 600);
}
  
void draw () {
  background(255);
  cup(300, 250, 255, 255, 255);
}
void cup(float x, float y, float a, float b, float c){
  fill(a, b, c);
  strokeWeight(5);
  ellipse(x, y, 250, 100);
  line(x-125, y, x-75, y+300);
  line(x-75, y+300, x+75, y+300);
  line(x+125, y, x+75, y+300);   
  fill(0);
  quad(x-20, y-125, x+15, y-125, x+15, y, x-20, y);

}

Step 2:

For Step 2, we were to create a for loop in the setup() to display 100 instances of our graphic, in random colors and positions in the rendering. If the for loop is placed in setup(), it produces a static image of the repeated motif in random colors. Since it is in setup(), the code runs once, and does not produce a moving image or a video. The loop function uses random float numbers for both the x and y coordinates, then uses random float numbers for the color. 

Step 2
float x;
float y;
int a;
int b;
int c;
void setup () {
 size (600, 600);
 background(255);
 for(int i=0; i<100; i++){
   x =(random(width));
   y =(random(height));
   a =int(random(255));
   b =int(random(255));
   c =int(random(255));
   cup(x, y, a, b, c);
  }
}
  
void draw () {
cup(300, 250, 255, 255, 255);


}
void cup(float x, float y, int a, int b, int c){
  fill(a, b, c);
  strokeWeight(5);
  ellipse(x, y, 250, 100);
  beginShape();
  vertex(x-125, y);
  vertex(x-75, y+300);
  vertex(x-75, y+300);
  vertex(x+75, y+300);
  vertex(x+125, y);
  vertex(x+75, y+300); 
  endShape();
  fill(0);
  quad(x-20, y-125, x+15, y-125, x+15, y, x-20, y);
  
 
}
 

When the for loop is under draw(), the function runs continuously from top to bottom until the program is stopped, resulting in a moving image and a video. In contrast to the static picture of the for loop under setup(), the end result is a video that runs 100 times of the original graphic.

float x;
float y;
int a;
int b;
int c;
void setup () {
 size (600, 600);
 background(255);
 
}
  
void draw () {
for(int i=0; i<100; i++){
   x =(random(width));
   y =(random(height));
   a =int(random(255));
   b =int(random(255));
   c =int(random(255));
   cup(x, y, a, b, c);
  }
}
void cup(float x, float y, int a, int b, int c){
  fill(a, b, c);
  strokeWeight(5);
  ellipse(x, y, 250, 100);
  beginShape();
  vertex(x-125, y);
  vertex(x-75, y+300);
  vertex(x-75, y+300);
  vertex(x+75, y+300);
  vertex(x+125, y);
  vertex(x+75, y+300); 
  endShape();
  fill(0);
  quad(x-20, y-125, x+15, y-125, x+15, y, x-20, y);
   
}

Step 3:

For Step 3, we were instructed to create 3 arrays to store the x, y, and color data. By setting float [] to different values, we were able to state these specific values. The array stores values under a set of data elements, capable of holding any type of data for it to be individually assigned and read. 

float [] x = new float[100];
float [] y = new float[100];
float [] z = new float[100];
void setup () {
 size (600, 600);
for(int i=0; i<x.length; i++){
   x[i] =random(width);
   y[i] =random(height);
   z[i] =random(255);
  }
 printArray(x);
 printArray(y);
 printArray(z); 
}
  
void draw () {
  background(255);
 for(int i=0; i<x.length; i++){
 cup(x[i],y[i],z[i]);
  }
}
void cup(float x, float y, float z){
  fill(z);
  strokeWeight(5);
  ellipse(x, y, 250, 100);
  beginShape();
  vertex(x-125, y);
  vertex(x-75, y+300);
  vertex(x-75, y+300);
  vertex(x+75, y+300);
  vertex(x+125, y);
  vertex(x+75, y+300); 
  endShape();
  fill(0);
  quad(x-20, y-125, x+15, y-125, x+15, y, x-20, y);
   
}

Step 4:

For Step 4, we were required to add individual movements to each instance, through modifying the content of the x and y arrays. The x and y arrays were assigned to move through the line of code “x[i] += random(-30, 30);
y[i] += random(-30, 30);”, and the speed at which the movements ran would increase as these respective numbers increased. 

float [] x = new float[100];
float [] y = new float[100];
float [] z = new float[100];
void setup () {
 size (600, 600);
for(int i=0; i<x.length; i++){
   x[i] =random(width);
   y[i] =random(height);
   z[i] =random(255);
  }
 printArray(x);
 printArray(y);
 printArray(z); 
}
  
void draw () {
  background(255);
 for(int i=0; i<x.length; i++){
 cup(x[i],y[i],z[i]);
 x[i] += random(-30, 30);
 y[i] += random(-30, 30);
  }
}
void cup(float x, float y, float z){
  fill(z);
  strokeWeight(5);
  ellipse(x, y, 250, 100);
  beginShape();
  vertex(x-125, y);
  vertex(x-75, y+300);
  vertex(x-75, y+300);
  vertex(x+75, y+300);
  vertex(x+125, y);
  vertex(x+75, y+300); 
  endShape();
  fill(0);
  quad(x-20, y-125, x+15, y-125, x+15, y, x-20, y);
   
}

Question 1:

In your own words, please explain the difference between having your for loop from Step 2 in setup() as opposed to in draw().

The difference between having the for loop in setup() as opposed to in draw() is that in setup(), the code runs only once and generates a still image, as it is not being constantly repeated for it to be an active image. If the for loop is placed under draw(), however, the for loop is being continuously executed until the program is stopped or noLoop() is called. Under draw(), the function can create animations as it is constantly being repeated. 

Question 2:

What is the benefit of using arrays?  How might you use arrays in a potential project?

The benefit of using arrays is that you are able to hold any type of data, ranging from numbers, characters, sentences, or boolean values. These types of data are individually assigned and read within each array, making it simpler for the code to be designed. Arrays allow us to store many variables that would normally take much time to set up each individual value, but arrays are instead able to assign values to these data. I might use arrays in a potential project if there are multiple values that would need to be stored, or a multitude of shapes and designs within the function.