Category: Interaction Lab

Posted on

Final Project Proposals by Eleanor Wade

Proposal 1:

One potential project that both interests me and combines all the necessary requirements for this assignment would be based off synesthesia as it pertains to art and designs.  More about synesthesia can be found on this wikipedia page:https://en.wikipedia.org/wiki/Synesthesia   In my understanding and experience of synesthesia this is a concept that can be used to translate colors into letters or numbers.  For some reason I very definitely associate particular colors with numbers and letters (I view ‘A’ as red, ‘B’ as blue, ‘C’ as green, etc) and would be interested in creating an interactive art experience that allows users to type, for example their names, and then see which colors illuminate.  In practically thinking about this project, I would program each letter or number with an LED  (or possibly an LED underneath colored films) that would light up when pressed.  I would place the lights in an interesting pattern on a board so that each word or letter would illuminate a completely different design.  The space bar could act as a clear that would turn all the lights off again. What inspires me about synesthesia are the ways in which it brings words or letters into a visually colorful field.  I think this demonstrates interactivity in that it allows for viewers to have unique experiences each time they encounter the piece and provides something new.  I also like that there is an element of my own perspective, in that it is my understanding of letters and the colors that I associate with them.  

Proposal 2:

Another possibility would be to create an interactive way to draw with your body.  Using movement sensors that translated your action into strokes on a processing background, I would engage audiences with the ability to create new and unique, abstract designs that are directly following their movement.  I think this would be a compelling project because it would not only be interesting motivation to move, encouraging physical activity, while also providing them with interactive art.  

Proposal 2:

I am exceptionally passionate about understanding the implications that our dietary choices have on not only our health and wellbeing, but also the environment and vulnerable global populations.  I am increasingly interested in spreading awareness for the importance of our food choices, specifically when it comes to consuming animal products.  As your dietary choices have an even greater impact on green house gas emissions than your transportation choices, this is a problem that has extreme relevance and correlation to our influence on the environment and global warming.  In trying to shed light on the impacts that our every food decision has, I would like to create a project that presented audiences with different snack options.  Possibly featuring bacon, mac n cheese, and falafel (or other variations on a meat dish, vegetarian dish, and a vegan dish) that then when selected, it triggered a response on the screen that informed the consumers of the larger impact of this choice.  What I think would be especially interesting would be to not tell consumers of the purpose of this free snack before they make their choice, then tell them of the relevance that this choice has on the world, and record reactions.  This is interactive in that it would definitely involve sensors that responded when different foods are taken (like a little vending machine, when a button is pressed their snack is dispensed, the facts are delivered) and then their eating of the food.  I would be interested to know of their experience of eating each snack after learning more about what it means.  And in attempts to not be too obnoxious in my vegan beliefs, I would like to try and keep the conversations about eating animals far less aggressive and accusatory than they can be.  Rather, this project seeks to educate and inform without telling people what to do or what they should eat.  snack facts??

Posted on

Recitation 7 Function by Hangkai Qian

Recitation Exercise:

Step 1:

This is my function code:

void funny(float x, float y, float c, float e) {
colorMode(HSB);
color d=color(c, 500, 500);
color f=color(e, 500, 500);
rectMode(CENTER);
fill(f);
rect(x-30, y, 10, 20);
rect(x+30, y, 10, 20);
fill(d);
ellipse(x, y, 60, 100);
fill(0);
ellipse(x-10, y-10, 10, 10);
ellipse(x+10, y-10, 10, 10);
line(x-10, y+30, x+10, y+20);
}

Step 2: 

Create a for loop in the setup() to display 100 instances of your graphic in a variety of positions and colors.  Make sure to use the display function you created in Step 1.  Then move your for loop to the draw() loop, and note the difference.

Here is my code for Step 2:

void setup() {
size(600, 600);
for (int i=1; i<=100; i++) {
funny(random(600), random(600), random(360), random(360));
}
}

void funny(float x, float y, float c, float e) {
colorMode(HSB);
color d=color(c, 500, 500);
color f=color(e, 500, 500);
rectMode(CENTER);
fill(f);
rect(x-30, y, 10, 20);
rect(x+30, y, 10, 20);
fill(d);
ellipse(x, y, 60, 100);
fill(0);
ellipse(x-10, y-10, 10, 10);
ellipse(x+10, y-10, 10, 10);
line(x-10, y+30, x+10, y+20);
}

move the code into draw:

Step 3:

Create three Arrays to store the x, y, and color data.  In setup(), fill the arrays with data using a for loop, then in draw() use them to display 100 instances of your graphic.  You can use this example to help you do this.  Make sure to use the display function you created in Step 1, and if you’ve added any other parameters to your display function you should create new arrays for them as well.

  1. I have got some trouble when I tried to create an array with 600 numbers in it with for function. After I asked fellows for help, I have successfully made that code:
    for (int i=0; i<xpos; i++) {
    x[i]=i;
    }
  2. The second trouble came when I tried to make a random integer from 0 to 600 because x[i] ‘s i  must be an integer. With the help of fellows, the code should be like this:
    float a=random(0, 600);
    int b=int(a);
  3. Here is my whole code:
    int xpos=600;
    int ypos=360;
    int[] x=new int[xpos];
    int[] y=new int[ypos];

    float colorH=random(360);

    void setup() {
    size(600, 600);
    for (int i=0; i<xpos; i++) {
    x[i]=i;
    }
    for (int i=0; i<ypos; i++) {
    y[i]=i;
    }
    }

    void draw() {

    for (int i=1; i<=100; i++) {
    float a=random(0, 600);
    int b=int(a);
    float c=random(0, 600);
    int d=int(c);
    float e=random(0, 360);
    int f=int(e);
    float g=random(0, 360);
    int h=int(g);

    funny(x[b], x[d], y[f],y[h]);
    }
    }
    void funny(float x, float y, float c, float e) {
    colorMode(HSB);
    color d=color(c, 500, 500);
    color f=color(e, 500, 500);
    rectMode(CENTER);
    fill(f);
    rect(x-30, y, 10, 20);
    rect(x+30, y, 10, 20);
    fill(d);
    ellipse(x, y, 60, 100);
    fill(0);
    ellipse(x-10, y-10, 10, 10);
    ellipse(x+10, y-10, 10, 10);
    line(x-10, y+30, x+10, y+20);
    }

Step 4:

Add individual movement to each instance of your graphic by modifying the content of the x and y arrays.  Make sure that your graphics stay on the canvas (hint: use an if statement).

I modify the value of xpos to ensure it is in the canva.

Here is my code:

int xpos=550;
int ypos=360;
int[] x=new int[xpos];
int[] y=new int[ypos];

float colorH=random(360);

void setup() {
size(600, 600);
for (int i=50; i<xpos; i++) {
x[i]=i;
}
for (int i=0; i<ypos; i++) {
y[i]=i;
}
}

void draw() {

for (int i=1; i<=100; i++) {
float a=random(50, 550);
int b=int(a);
float c=random(50, 550);
int d=int(c);
float e=random(0, 360);
int f=int(e);
float g=random(0, 360);
int h=int(g);

funny(x[b], x[d], y[f],y[h]);
}
}
void funny(float x, float y, float c, float e) {
colorMode(HSB);
color d=color(c, 500, 500);
color f=color(e, 500, 500);
rectMode(CENTER);
fill(f);
rect(x-30, y, 10, 20);
rect(x+30, y, 10, 20);
fill(d);
ellipse(x, y, 60, 100);
fill(0);
ellipse(x-10, y-10, 10, 10);
ellipse(x+10, y-10, 10, 10);
line(x-10, y+30, x+10, y+20);
}

Optional:

Add some interaction to your graphics.  Refer to Recitation 6 if you don’t remember how to do this.

Documentation

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().

In the setup(): the code run only once, so it only drawed 100 faces, then it stopped;

As for the draw(): It draws one hundred faces every time and it will keep drawing 100 faces.

Question 2:

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

Array helps when a bunch of different values or data in the same category happened to be needed in the application. It will make it clear and not messed up in the code. 

I absolutely will use array in my final project to import data from Arduino to Processing.   I may also use it to simplify the code in the future.

Posted on

Recitation 7: Functions and Arrays by Min Jee (Lisa) Moon

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 for-loop inside the setup() and draw() is definitely making the big difference because setup() function only runs once, meaning the change will not occur even though you keep your serial open. However, if the for-loop is inside the draw() function, the for-loop will be running continuously, meaning the change will occur constantly. 

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

Arrays often add efficiency to the code. Like a database, you can add and delete values to and from the code whenever the situation is met (which the situation can be adjusted by the programmer. In addition, by grouping the similar types of values (like x-positions), it is easy to see what the values are for then having 100, for example, variables. 

If you use the array, you can go through the values using a loop, which definitely adds efficiency to the code. 

I can use arrays in a variety of ways in the potential project. For example, in the recitation 6 coding, I used array to make a snow falling effect. I can make the snow falling effect again or can use an array to simply save the position values.

Continue reading “Recitation 7: Functions and Arrays by Min Jee (Lisa) Moon”

Posted on

Final Project Step 2: Project Proposal by Min Jee (Lisa) Moon

  • Project 1: First-hand-messenger

First, it would be nothing special. However, without you even knowing, you can be the next target.

I am not sure if I can finish this project on time, to be honest. However, this is the project that I would be most eager to work with (which is why I put this project as the first project). First, the users will be able to freely interact with the messenger. However, after a certain time, the messenger will shut off for a few seconds and turn back on. Though in this state, the messenger looks the same as before, the messenger will show the experience of the bullied (especially cyber-bullied) in the first-person point of view. 

One of the games that recently got famous became my motivation. This game, as well, shows the first-hand-experience in the point of view of the bullied. However, the user knows about what they will go through. However, for this project, it would stay unexpected because the shock usually hits a max point when something comes up unexpected.

  • Project 2: Waking-up Alarm

If you are having a hard time waking up each morning, this definitely would be of your choice. 

Though this is an existing device and would rely more on the Arduino than the processing, it would flip the bed over when the pre-set time comes. The motivation came from my daily life, having difficulty every morning to wake up. Because it would be hard to put it on the actual bed, it would be helpful for me if I can mini-print the bed. When the user sets the time, when that time comes, the mini-bed will be flipped over. The already existing version is called “High Voltage Ejector Bed”.

  • Project 3: Foot-taptap

A chance to dance around. Play taptap, but with your feet.

There already exists a similar game in Korea, called “Pump” (See the image below).

However, that game is pretty hard. By inputting this logic with the taptap, which is a phone game, it would be fun. In addition, if there is a way to process the user’s input music because they can also select their favorite music, it would be more interesting for user to interact with the device. 

Posted on

Project Proposal by Anica Yao

Idea 1: “Doctor’s training kitchen”

This is a health detector and also a cooking tutorial. Firstly, the user can stand on a “scale”( force sensor ) and type a group of body information (eg. weight, diet habit, etc. )  on the screen. Based on your health condition ( BMI may be calculated and indicated through an animation ), it will recommend the most suitable dish for you. There will be a handful of choices in the data library, and the dish together with its recipe will pop on the screen. Then, the user can follow a cooking tutorial. The tutorial provides a hands-on experience where you can use sensors to make your delicious dishes step by step. For example, you can clench your fist to knead the dough, wave your hand up and down to cut the vegetables, and hold the gravity board to cook them on the stove. Based on your performance during this process, you can get a final score and feedback.
This game is based on the cooking games we played before. One of them linked down below is called Cooking MAMA. Also, we notice that more and more students are trying to cook at the dorm, but sometimes they can not go pretty well. We consider this project significant, for it targets those young people who want to pursue a healthy life but don’t know what to do or those who live on their own. Usually, when people want to cook by themselves, they buy recipes at the store, search for online recipes in various apps, or search the Tiktok for cooking videos. In comparison, our potential design may help people cook more easily through trials and errors without possible losses ( eg. waste of raw materials ), so that they can be more motivated to cook and figure out how to develop a healthy lifestyle. 

Idea 2: “The aviator”

This is a game involving two or more players in an aerial competition. It requires each of the players to move their arms/hands to change the position of the virtual “aviator” on the screen( We want to let the players move their hands left and right/up and down to change the vertical height of the virtual “aviator”). To control the speed the players are required to blow into the tube. You can also click the button and speed up when you see the “speed up” prop. Also, in this competition, People can choose to have a battle or build a team. For example, in battle mode, players are able to “kick” others and take the lead. In the teamwork mode, the aviators are bound together with a rope. The players should be careful that the obstacles will not cut off the rope, or both of them will lose the game. We got the inspiration from  “The Aviator”. It’s a fun game made from Javascript 3D. It requires both multitasking and cooperation skills. It’s targeted at anyone who is interested in it.

Idea 3:  “The Best Detective”

This is a party game testing who has the quickest reaction. Pictures are covered by a dark layer initially. One of the users can wipe out the layer ( waving their hands above the sensor ) so that the picture will gradually appear on the canvas. The rest of the players can have a guess what it is. There can be hints below the picture. But the more you wipe out, the more time and score you will lose. The point is that he/she should let others figure out what’s on the canvas in a very short time. There can be three to four rounds in a game and the one who uses the shortest time will win the game. The possible challenge might be about how to make the picture gradually appear. This game is specially designed for the party and it also involves competition and entertainment.