Categories
Interactive Fashion

Exercise 7 – Inflatables

 

 

    This week we worked on making inflatables. The very interesting thing about making an inflatable toy is that you can’t fully imagine the effect of the finished product until it’s really inflated (of course, this should be because of our limited experience) I noticed that we needed to design the folded cutout to be narrower in order for the toy to have an obvious fold. At the same time to ensure that the toy does not leak air is also the key to success. We need to strictly control the temperature of the iron, 100 degrees Celsius to 170 degrees is feasible, but still between 130-150 degrees is safer because the temperature is too high will melt the plastic paper (and always remember to pad the baking paper!!) In order to ensure that the plastic film does not move freely, at the very beginning you can first fix around. It is better to press it gently in different positions than to iron it repeatedly, but be careful with the temperature!
    Compared to motor-controlled mechanical devices, the inflatable device has a more surprising effect, because it has a gradual expansion process, while in the process you can not fully imagine the final result.
    In our project, perhaps the heart and spine parts can be moved, which will make our glowworm more lifelike.

Code

int motorPump = 9;
int valve = 11;
int motorSuck = 10;
void setup() {
  // put your setup code here, to run once:
  Serial.begin(9600);
  pinMode(motorPump, OUTPUT);
  pinMode(valve, OUTPUT);
  pinMode(motorSuck, OUTPUT);
}
void loop() {
 //  inflate
  digitalWrite(motorPump,HIGH);
  digitalWrite(valve, HIGH);
  digitalWrite(motorSuck, LOW);
  delay(1000);

  //  deflate
  digitalWrite(motorPump, LOW);
  digitalWrite(valve, LOW);
  digitalWrite(motorSuck, HIGH);
  delay(1000);
}

 

Categories
Interactive Fashion

Project 1 Post

Glowworm

In this project, we wanted to firefly-ize the human. We learned that glowworms flicker at night for courtship, much like a person would do with a wink. When the user presses the sensor in the ear,(we want this action to be done naturally when ruffling the hair, showing a flirtatious gesture, also for the purpose of courtship) the light on his/her body will be dimmed (including the spinal cord and buttocks) At the same time, in order to amplify the feature that fireflies flicker at the tail at night for courtship, we enlarged the buttocks part to make it more prominent. In addition, we also highlight the part of the spine because subconsciously, men will be whether the spine is in the right position as a criterion for courtship because it is a reflection of good fertility. (Dewan MC 2018) And the condition of the spine is shown in people’s walking position (Haber 2015) 

The purpose of this work is to show the animalistic nature of human beings that is engraved in their genes, especially in the process of choosing a mate. We do not want to express the criticism of the almost primitive charm and natural selection in the process of choosing a spouse (according to Dawkins, our genes would lead us to select a mate who will produce the most offspring) , but we want to arouse people’s deeper reflection on love or human characteristics: what makes people tick, and what do people think about besides animal nature?

For the design, we used warm wool to knit in the head as well as the heart part. We hope to show the soft and sweet atmosphere of love directly through the choice of color and material. 

And for the luminous spinal cord and buttocks, we used fiber optics. In fact, we had previously considered that fiber optics would not be so bright, but it would match the shimmering light of fireflies and the ambiguous atmosphere when flirting. But we did not anticipate that the fiber optic will be so dark and difficult to use led to control, perhaps in the future we will choose to replace the light strip or find a brighter light to provide light. 

We also used the strip as a light source during the experiment, but the contact of the circuit was not good, and when we installed it on the clothes it was not under our control again. At the same time, the color of the strip would change every time we pressed it, and we did not find the reason for this situation. So we use the LEDs at last.

For the ass part of the water pipe shape design we have also done consideration. We envisioned a variety of knitting methods and finally decided to wrap and stack in a spiral fashion as seen in the video, so as to enlarge the hip part as much as possible, similar to the principle of a cone corset. In addition, We sewed padding on the hips to make them exaggerated and full.

As an improvement we will later abandon the design of the lower half of the skirt, using water pipe weave for garment production, or use transparent material bottoming because the current fabric looks and overall design has some cut. At the same time, in order to echo the head of the wool, in the lower half of the water pipe appropriate winding wool will be better.

Now we are using paper clay to make the spine part of the bone, after that we need to consider the movable design in this part

Code of the LEDs

int LEDPin1 = 9; //0 if you are using ATtiny
int LEDPin2 = 6; //0 if you are using ATtiny
int sensorPin = A2; // Analog pin 3 if you are using ATtiny
int sensorValue1 = 0;
int sensorValue2 = 0;
int brightness1;
int brightness2;

void setup() {
  pinMode(LEDPin1, OUTPUT);
  pinMode(LEDPin2, OUTPUT);
  Serial.begin(9600); //Serial Comm doesn't work with ATtiny
}

void loop(){
  sensorValue1 = analogRead(sensorPin);
  
  if (sensorValue1<200){
    sensorValue1= 0;
  }else{
    sensorValue1 = sensorValue1;
  }
  brightness1 = map(sensorValue1, 200, 1023, 0 ,255);
  Serial.print(brightness1);
  analogWrite(LEDPin1, brightness1);

sensorValue2 = analogRead(sensorPin);
  if (sensorValue2<200){
    sensorValue2=0;
  }else{
    sensorValue2 = sensorValue2;
  }
  
  brightness2 = map(sensorValue2, 200, 1023, 0 ,255);
  Serial.print(brightness2);
  analogWrite(LEDPin2, brightness2);

}

References

Dawkins, R. (2006). The Selfish Gene. Oxford University Press.
Dewan MC, Mummareddy N, Bonfield C. The influence of pregnancy on women with adolescent idiopathic scoliosis. Eur Spine J. 2018 Feb;27(2):253-263. doi: 10.1007/s00586-017-5203-7. Epub 2017 Jun 29. PMID: 28664223.
Haber, C.K., Sacco, M. Scoliosis: lower limb asymmetries during the gait cycle. Arch Physiother 5, 4 (2015). https://doi.org/10.1186/s40945-015-0001-1.

Categories
Interactive Fashion

Exercise 5 – Textiles

In the classroom exercise we combined water pipes and wire with braided wire. By pulling the two ends of the pipe, the wire will be pulled and become twisted. Between the water pipe and the water pipe, we used paper tape to fix, of course, the use of glue gun fixed is also feasible. At the same time, we found that because the water pipe is made of rubber, there will be a lot of friction between it and other materials. And the shape of the thicker water pipe is not really easy to change and needs to be fixed with plastic strips. But because the pipe itself is hollow inside, adding other materials (such as liquid) to it will be very interesting. We thought that maybe we could stuff fiber optics into it and add lighting at the end so that we could control the “flow” inside the pipe with a switch.

Here are photos of the “fabric” we made in class, which gave us inspiration for the weaving method and placement of the sensors.

Categories
Interactive Fashion

Exercise 4 Mask & Paris is burning

Reflection

Fashion is not only an expression of your own personality but also can be an expression of your ideal self. In the film, transgender people hold balls and turn themselves into stars, supermodels, white people, and real women. The standard of beauty or fashion varies from person to person but the mainstream is a relatively fixed notion. As a niche group like gay and transgender, they are pursuing beauty and identity while also pursuing the white, heterosexual mainstream. The high-end luxury goods are such a symbol, their target customers are the mainstream people, and their high prices also make their products become a symbol of wealth. Maybe that’s the reason why some individuals shown in the documentary live in poverty, sew their own ‘designer’ clothes, or resort to shoplifting: they seek fashion, but also pursue higher social classes. The ability to buy and wear fashionable luxury items allows them to escape from the reality of being a niche group banished by their families and become the mainstream of attention. At the same time, the existence of the houses community allows them to be understood and tolerated, and to accept their gay identity more openly. But they are still conflicted, they have a hard time wearing their favorite clothes and facing the public openly, and they have a long way to go in spreading vogue dancing to the world.

Mask

The surface decoration of our mask is inspired by the scales of the pangolin. We wanted to express the current situation where people tend to hide their true selves and protect themselves with armor. The yellow part on the left side of the mask symbolizes the Broca area, which is damaged when people can understand the language but cannot express it properly. We highlight this area in the hope of reaching a metaphor: people are so ashamed to show themselves as if they do not have the ability to do so. The various shapes of clay bubbles on the top of the head are different parts of people’s true selves, such as narcissism, acrimony, and other emotions. They are all real, and they show up underneath the mask.

We cut and extended the existing mask to fit the head shape, allowing it to cover part of the top of the head, allowing us to mark the Broca area (at least in close proximity)

Initially the mood bubble we were hoping to complete with nano-glue, but we followed the tutorial after many attempts or failed to blow a successful bubble. As the materials ran out we had to give up. The current expression of the mood bubble is a bit ugly, perhaps it would be better to replace it with a small balloon or a clear plastic ball later.

 

Categories
Interactive Fashion

Exercise 3 – wireless circuit XBEE

In this week’s class, we cooperate to make a wireless circuit using sensors and actuators. Our group is responsible for the XBEE A.

First, we program the XBEE and choose 2D1 as our pan id. And then we program the lilypad A and use the code AnalogReadSerial to make sure the circuit is connected in the right way.

After that, we connect lilypad A with the XBEE A. Different from the instruction, we use the computer as the battery. We need to connect the positive and negative poles of the lilypad to the positive and negative poles of the XBEE first, and then connect the XBEE to the computer. One of the connectors fell out during this process and caused problems in the next steps, but we found it later and connected it. 

We use this code to test if the communication works well.

#include <SoftwareSerial.h>
SoftwareSerial mySerial(10, 11); // RX, TX

// the setup routine runs once when you press reset:
void setup() {
  // initialize serial communication at 9600 bits per second in your serial port:
  mySerial.begin(9600);
}

// the loop routine runs over and over again forever:
void loop() {
  // read the input on analog pin 0:
  int sensorValue = analogRead(A5);
  // print out the value you read in your serial port:
  mySerial.println(sensorValue);
  delay(100);        // delay in between reads for stability
}

After that, we send the signal to XBEE B and use this code on XBEE B (since only it receives the signal) to let the circle change with the sensor.

import processing.serial.*;
int NUM_OF_VALUES_FROM_XBEE = 1;   /** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **/
int sensorValues[];      /** this array stores values from the Lilypad1 **/
String myString = null;
Serial myPort;
void setup() {
  setupSerial();
}
void setupSerial() {
  printArray(Serial.list());
  myPort = new Serial(this, Serial.list()[ 3 ], 9600);
  // WARNING!
  // You will definitely get an error here.
  // Change the PORT_INDEX to 0 and try running it again.
  // And then, check the list of the ports,
  // find the port "/dev/cu.usbmodem----" or "/dev/tty.usbmodem----" 
  // and replace PORT_INDEX above with the index number of the port.

  myPort.clear();
  // Throw out the first reading,
  // in case we started reading in the middle of a string from the sender.
  myString = myPort.readStringUntil( 10 );  // 10 = '\n'  Linefeed in ASCII
  myString = null;

  sensorValues = new int[NUM_OF_VALUES_FROM_XBEE];
}
void draw() {
  getSerialData();
   printArray(sensorValues);
   
  circle(width/2, height/2, sensorValues[0]);
  // use the values like this!
  // sensorValues[0] 

  // add your code

  //
}
void getSerialData() {
  while (myPort.available() > 0) {
    myString = myPort.readStringUntil( 10 ); // 10 = '\n'  Linefeed in ASCII
    if (myString != null) {
      String[] serialInArray = split(trim(myString), ",");
      if (serialInArray.length == NUM_OF_VALUES_FROM_XBEE) {
        for (int i=0; i<serialInArray.length; i++) {
          sensorValues[i] = int(serialInArray[i]);
        }
      }
    }
  }
}

I think this circuit can be used for a wearable device and it will become more feasible if we replace the sensors with humidity, temperature, and light sensors. For example, if a top is made from multiple pieces of fabric and each piece of fabric contains a complete circuit like this. Suppose we use light sensors on every piece of fabric so that when people walk into a dark place their tops will glow, and when they enter a bright place the clothes will not change.

Categories
Interactive Fashion

Exercise 2 – sensor & wearable device

In this week’s class, Younian and I used the Veloster to make a sensor and use the Lilipad to control the circuit.

We followed the instruction of the linear potentiometer and made our own. Then we built the circuit and read the sensor value. In the beginning, the value was quite small and we found that we forgot to change the port of the sensor. We fixed it and then it worked.

Then we added the buzzer to the circuit. The connection of the cable was not very stable and we tried many times to build a connection. At last, we found that not only the cable but also the lilypad and the buzzer were all broken. So we changed all of them and we succeeded. 

   Code

//exercise 2 - Interactive Fashion-buzzer
int speakerPin = 9; //0 if you are using ATtiny
int sensorPin = A2; // Analog pin 3 if you are using ATtiny
int sensorValue = 0;
int minValue = 200; //adjuts this accordingly

void setup() {
  pinMode(speakerPin, OUTPUT);
  Serial.begin(9600); //Serial Comm doesn't work with ATtiny
}

void loop() {
  sensorValue = analogRead(sensorPin);
  if (sensorValue > minValue) {
    makeNoise(speakerPin, sensorValue * 3, 100);
  }
  Serial.println(sensorValue);  //Serial Comm doesn't work with ATtiny
}

void makeNoise(unsigned char pin, int frequencyInHertz, long timeInMilliseconds) {
  int x;
  long delayAmount = (long)(1000000 / frequencyInHertz);
  long loopTime = (long)((timeInMilliseconds * 1000) / (delayAmount * 2));
  for (x = 0; x < loopTime; x++)
  {
    digitalWrite(pin, HIGH);
    delayMicroseconds(delayAmount);
    digitalWrite(pin, LOW);
    delayMicroseconds(delayAmount);
  }
}

After that, we change the buzzer to Led and change the range of sensor value to make the control effect become visible.

Code

int LEDPin = 9; //0 if you are using ATtiny
int sensorPin = A2; // Analog pin 3 if you are using ATtiny
int sensorValue = 0;
int brightness;

void setup() {
  pinMode(LEDPin, OUTPUT);
  Serial.begin(9600); //Serial Comm doesn't work with ATtiny
}

void loop(){
  sensorValue = analogRead(sensorPin);
  if (sensorValue<300){
    sensorValue=300;
  }else{
    sensorValue = sensorValue;
  }
  brightness = map(sensorValue, 100, 400, 0 ,255);
  Serial.print(brightness);
  analogWrite(LEDPin, brightness);
}

Wearable Device — 0214

This wearable device is inspired by the daily life experience that people are hard to understand others’ expressions when they are wearing masks. There is a saying that the eyes are the window of the heart. However, when we look into the eyes of others, even with the help of eyebrows, our ability to understand the words and expressions of others is diminished.

So we choose the face mask as the main part of the device to show how a person’s mask may alter others’ views of communicating. In addition, we covered the speaker’s eyes with a piece of white plastic. It conveys a sense of vagueness about what the speaker is actually attempting to say. It is inspired by the daily life experience that wearing glasses and the mask at the same time, the air you exhale will blur your vision. To prove that it is the human species and not another, we added two pieces that resembled eyebrows. We cut a hole in the face mask at the device’s bottom. The plastic strip sticks out from the position of the mouth, and when the wearer speaks, the plastic strip shakes and makes noises, which shows that due to the lack of expression and mask cover when wearing a mask, people’s words become broken and it is difficult for those listening to them to understand what they are saying. At the same time, in order to make the work look as nice as possible with limited materials, we painted the splices, hoping to have a comic effect.

Categories
Interactive Fashion

Exercise 1 – Soft Switch

This week I make a soft circuit that contains a DIY switch, one LED and a power source. First I tried to connect the circuit, replacing the ordinary switch with a button.

And then I replaced the wire with conductive string and started sewing my circuit. I don’t know anything about needlework, so I started from scratch. 

When I sewed everything components on the cloth, the situation was still normal. But when I finished sewing the conductive thread and closed the switch, the led light did not come on. I thought that was because I had a mess of conductive threads, so I re-sewed the circuit, but it didn’t work. I later found out that the abnormality in the circuit was due to the conductive fabric being too large causing it to touch the wires. So I started over and recreated my assignment from scratch. By this time I was much more skilled at sewing.

Reading Reflection

  • What is fashion for you? and why are you interested in fashion

Fashion is a popular culture and a form of self-expression. It shows the public’s definition of the standard of beauty within a certain period of time. At the same time, for individuals, fashion also shows people’s personalities, attitudes and personal tastes. I am interested in fashion because I am interested in clothing, an essential part of people’s daily lives. How clothing, the second skin of human beings, as a natural extension of human character and taste, forms a social fashion. I am curious about it.

  • What kinds of things do your clothing say about you and your values?

I think the color and material of clothes show the personality of a person. I always wear light-colored loose clothing, which means informal and casual. I also hope that I can convey an approachable, easy-going image to others, which leads to casual, relaxed conversations. In addition, the source of the clothes also tells the value of the buyer. For example, wearing clothes from a fast fashion brand may mean that the person is sensitive to fashion or trends. Usually wearing luxury brand clothing means that the person is in a good financial situation and may have a brand cult at the same time. The choice of second-hand clothes is a side indicates that the buyer may be concerned about environmentally friendly fashion

  • What are your main learnings and take aways from the readings?

The fashion industry is closely related to time, and therefore changing rapidly. The content of fashion is constantly changing with the characteristics of the times, but the industry itself will always exist, from the past, to the future. The combination of technology and fashion, which is constantly evolving and easily obsolete, is trying to reach the eternal “timelessness”.

Categories
Immersive Design For Video Games

Week -1 Assignment -1

The game I play-Moss: Book II

1.What do you think about the role of player when you play other’s story?

I think I am the avatar himself/herself. Or I control the game from God’s point of view. (example: Tetris, Xiaoxiaole)

2. Do you like the relationship between you and the avatar you are controlling?

Yes! I really love the avatar I am controlling: little mouse Quill. I can help her to fight the monsters and control her activity. The interaction is very natural and smooth. I work as herself and her friend during the journey at the same time.

3.If you do what contents/designs in this game are used to build the relationship and how it developed it?

The design of using the trigger to heal the avatar is a surprise for me. It is common for the player to control the direction of the avatar and let it fight and jump. Rather than restarting the game, it gives players another choice to continue the game when Quill is hurt. It strengthens the relation between player and avatar since you feel you can really help her. It’s worth mentioning that Quill has different reaction when she is being healed and touched. It also make the relation closer and give me a feeling that we are friends.

Furthermore, players can move some certain articles in the environment and help Quill to pass the river or hole. It deepens the player’s identity as a friend of the avatar and let players be more immerse in the game world.

4.What different experiences did those VR games give you than the 3D games on screen?  Can you find more games/examples supporting your ideas answering the question above?

VR games give me much more immersive game experience than what the 3D games on screen give me. I get used to the game world more quickly and completely absorbed in the story.

For example, Genshin Impact is a 3D game on screen I play recently. In that game, I also can control the action of different avatars, but the interaction is relatively weak. I can’t touch them and their reaction is limited. In addition, being in the model scene with VR is totally different from seeing the models. I can get a better sense of how tall the tree is and how big the hole is. This leads to greater empathy between the player and the game character, deepening the game experience.

What’s more, I can move objects in VR by moving my hand. This is more in line with real life situations than constantly pressing the arrow keys to move things around, thus keeping the player more engaged in the game. When I play Animal Crossing, I have to continue moving the handle and clicking buttons to move my furniture. It feels more like repetitive work than a game.

But VR games cost me more energy. I feel tired and dizzy after one hour’s game. I need to take a rest to continue.

5.What accounts for such different experiences? Can you list them and give explanation?

Realistic modeling

3D model in VR games are very realistic. In Half Life: Alyx, when the paint bucket is thrown, the paint will spill. Ceramic cups break when dropped. In Moss: Book II, the grass moves in the wind. When the player hold down the trigger and touch the mushroom, it also shakes. Realistic modeling enhances the realism of the game world and makes the player more immersed in the game

Full range of audiovisual effects

When players wear the headsets, they can’t see scenes around them. If they are in the quiet room, the headset can cut out the noise of the outside world, giving the player the best hearing effect.

Close to the real interaction

In contrast to the button controls of traditional games, VR games recreate the interaction in real life. For example, I press the button A to pick up the branches in Animal Crossing. In VR games, I usually hold down the trigger to pick up something. The action of pulling a trigger is similar to the action of holding an object in real life, which gives the player a sense of what they are actually holding.

 

Categories
Interaction Lab

Final Project Individual Reflection

Project Title: Food except 🐑

Creator: Ran Xu (Charlotte)

Instructor Name: Prof. Marcela Godoy

CONCEPTION AND DESIGN

This project is based on the current situation in Shanghai and aims at people who are locked down in Shanghai and worried about their food supply. People are anxious about whether they can get enough food and things that are normally within reach now become luxuries, for example, fast food and bubble tea. We would like to make a game world where people can fetch the food they want, such as cakes and bubble tea, and through an unrealistic way like “天上掉馅饼”( a saying in China that means getting something without hard work. It can be translated directly as ” pies falling down from the sky without effort”)

We want users to release their stress while playing the game. So we use the microphone to control the beginning of the game. We also use the pressure sensor to control the hunter and hang it on the wall. In that case, users can make some exercise at the same time.

During the user test, we found the difficulty of the game is too high and people fail the game easily since the sheep always fall down with the food and it is hard to avoid. I thought it is not helpful for stressed people during the lockdown time, so we reduce the speed of the sheep. I think this change is effective since the user experience becomes better after changing.

In addition, we change the caught sound of different food. When people catch basic food such as vegetables and meat, the sound is like “duu–“. And when people catch snacks such as cakes and ice creams, the sound is relatively high. When people catch sheep which means positive, the sound is relatively low.

We also add a score detail display to the game. The detail of the score will show in the right-down corner when the hunter catches the food.

 

FABRICATION AND PRODUCTION

Younian and I cooperate to complete this project. Since we don’t live together, we each finished the physical part.

In the coding process, I complete the original version of this game. I control the hunter with the variable resistors at first.I draw the image of the hunter with Processing and let food fall from the top of the screen at different times. But later Younian found that we only need to let the hunter move right and left. Saving it as an image will be better. So we use the image of the hunter rather than the code.Younian helps me to make the falling code more graceful since in the original one every food has a long code.

In addition, she solved the problem of interaction between the hunter and the food and complete the control of the beginning and the end of the game. Then I complete the timer of the game and she finfish the scoring record part. After we talk about the ending, I add a video to the winning part. At last, we talk about the storyline of the video and shoot the video separately. And I edit the video.

I think the most successful part is the coding part. We have never made such a big code and we still have a lot to learn. During this part, we searched for relative information and tutoring videos online and ask professor Marcela for help. We also cooperate to solve each other’s problems and improve the design of this game. Younian has the original idea of this game and at first, this game tends to show the pressure during lockdown time. But after we talked together and think about the aim audience, we found that maybe a light-hearted game is more suitable for people locked down at home. So we change the code accordingly.

From my perspective, the failure of this game is the sensor. Since each of us only has one vibration sensor. We need to give up the original idea of controlling the hunter by punching pillows. But we still want to relieve people’s stress so we use the pressure sensor. But we found it is hard for us to decorate it since it is not very sensitive. I try to stick a rubber decompression toy on it and control the hunter by pressing the toy, but it doesn’t work. So at last we stick the image of sheep on it and people can play the game by pressing the sheep.

CONCLUSION

The goal of our project is to let people who are locked down in Shanghai release their stress while playing the game. The users interact with the project by shouting and pressing the pressure sensor. This is an input process. And the computer takes charge of ” thinking” and gives feedback ( begin the game and move the hunter) This shows the definition of interaction. If we have more time, I will improve the catch sound effect of the game. I would like to design a special effect for different food. And I also want to improve the code to let the score detail appear near the caught food. These elements can let the users understand the mechanics of this game. 

During the process of this project, I learn the importance of user testing. Sometimes it is hard for the designer to find the problem and details that can be improved. We need suggestions to make our project better. 

What’s more, I learned the importance of cooperation. It did can lead to the effect of  1+1 > 2.  In this surreal semester, everyone suffers more pressure. Understanding and communication become more important during this special period and help this project works better. Younian and I divided the work equally and helped each other. That kind of cooperation makes the final weeks not so stressful. 

At last, thanks for Younian making this project with me. I really enjoy cooperation with you 💗💗💗  Thanks for Marcela helping us to complete this project and teaching us this semester.

Hope we can meet in the fall!

TECHNICAL DOCUMENTATION

Arduino

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

void loop() 
{
  // to send values to Processing assign the values you want to send
  //this is an example
  int sensor1 = analogRead(A0);
  int sensor2 = analogRead(A1);


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

  // too fast communication might cause some latency in Processing
  // this delay resolves the issue.
  delay(100);

  // end of example sending values
}

Processing 

import processing.serial.*;
import processing.sound.*;
import processing.video.*;
int NUM_OF_VALUES_FROM_ARDUINO = 2;
int sensorValues[];
String myString = null;
Serial myPort;
AudioIn microphone;
Amplitude analysis;
Movie myMovie;

//added this to have a feedback when you catch something
//you can replace the sound
SinOsc sine;
Env env;
float attackTime = 0.001;
float sustainTime = 0.004;
float sustainLevel = 0.5;
float releaseTime = 0.4;

Catcher c;
Dropfruit[] dropf;
Droprefresh[] dropr;
Dropsheep[] drops;
//Apple[] apples;

Timer dropTimer;

int numDrops;
int dropInterval;
int activeDrops;

String gameState;
int score;

Timer countDownTimer;
int timeLeft;
int maxTime;

PImage catcherImage;
int x;
int r =150;




void setup() {
  size(800, 800);
  background(237, 222, 139);
  microphone = new AudioIn(this, 0);
  microphone.start();
  analysis = new Amplitude(this);
  analysis.input(microphone);

  
  sine = new SinOsc(this);
  env  = new Env(this);

 countDownTimer = new Timer(1000);
 maxTime = 140;
 timeLeft = maxTime;
 
  PFont myFont;
  myFont = createFont("Phosphate-Inline", 50);
  textFont(myFont);

  gameState = "TITLE";
  score = 0;

  myMovie = new Movie(this, "Never.mp4");
  
  

  c= new Catcher();
  numDrops = 20;//need to adjust, now the orange will run out after we catch them
  dropf = new Dropfruit[numDrops];
  dropr = new Droprefresh[numDrops];
  drops = new Dropsheep[numDrops];
  //apples = new Apple[numDrops];
  for ( int i =0; i < numDrops; i++) {
    dropf[i] = new Dropfruit();
    dropr[i] = new Droprefresh();
    drops[i] = new Dropsheep();
  }
  activeDrops = 0;
  dropInterval = 1000;
  dropTimer = new Timer(dropInterval);
  dropTimer.start();

  setupSerial();
  x = width/2;
  catcherImage = loadImage("hunter.png");
  catcherImage.resize(r, r);
  //d = new Drop();
}

void draw() {
  background(237, 222, 139);
  //println(analysis.analyze());
  getSerialData();
  //printArray(sensorValues);
  
   
 
  if (gameState =="TITLE") {
    title();
  } else if (gameState == "GAME") {
    //noCursor();
    game();
  } else if (gameState == "WIN") {
    cursor();
    win();
  } else if (gameState == "LOSE") {
    cursor();
    lose();
  } else {
    println("something went wrong with gameState");
  }
}


//h.update();
//h.display();
boolean intersect (Catcher c, Dropfruit d) {
  float distance = dist(c.forkX, c.forkY, d.x, d.y);
  if (distance < 50) {
    return true;
  } else {
    return false;
  }
}
boolean intersect (Catcher c, Droprefresh r) {
  float distance = dist(c.forkX, c.forkY, r.x, r.y);
  if (distance < 50) {
    return true;
  } else {
    return false;
  }
}
boolean intersect (Catcher c, Dropsheep s) {
  float distance = dist(c.forkX, c.forkY, s.x, s.y);
  if (distance < 50) {
    return true;
  } else {
    return false;
  }
}

void game() {
  noStroke();
  background(237, 222, 139);
  c.update();
  c.display();

  //time management
  if ( dropTimer. complete() == true) {
    if (activeDrops < numDrops) {
      activeDrops++;
    }
    dropTimer. start();
  }

  for (int i =0; i<activeDrops; i++) {
    dropf[i].update();
    dropf[i].display();
    dropr[i].update();
    dropr[i].display();
    drops[i].update();
    drops[i].display();
    if (intersect (c, dropf[i])==true) {
      dropf[i].caught();
      score++;
      println("score= "+score);
      fill(1,77,103);
      textSize(36);
      String a = "basics +1";
      text(a, 650, 700);
      sine.play();
      sine.freq(500);
      env.play(sine, attackTime, sustainTime, sustainLevel, releaseTime);
    }
    if (intersect (c, dropr[i])==true) {
      dropr[i].caught();
      score=score+2;
      println("score= "+score);
      fill(1,77,103);
      textSize(36);
      String m ="snack +2";
      text(m, 650, 700);
      sine.play();
      sine.freq(1000);
      env.play(sine, attackTime, sustainTime, sustainLevel, releaseTime);
    }
    if (intersect (c, drops[i])==true) {
      drops[i].caught();
      score=score-10;
      println("score= "+score);
      fill(1,77,103);
      textSize(36);
      String u = "sheep -10";
      text(u, 650, 700);
      sine.play();
      sine.freq(200);
      env.play(sine, attackTime, sustainTime, sustainLevel, releaseTime);
    }
  }
  if (score >=10) {  //need to adjust
    gameState = "WIN";
  }
  if (score < 0) {  //need to adjust
    gameState = "LOSE";
  }
   
  fill(1,77,103);
   textSize(36);
  String p = "LIFE:" + score;
  text(p, 90, 90); 
  
  if (countDownTimer. complete() == true){
    if (timeLeft >1){
      timeLeft--;
      countDownTimer.start();
    }else{
      gameState = "LOSE";   
    }
  }
  String s = "Time Left:" + timeLeft;
  textAlign(LEFT);
  textSize(36);
  fill(1,77,103);
  text(s,50,50);
}//end game


void clearBackground() {
  fill (237, 222, 139);
  rect(0, 0, width, height);
}


void resetGame() {
  for (int i = 0; i< numDrops; i++) {
    dropf[i].reset();
    dropr[i].reset();
    drops[i].reset();
  }
  activeDrops=0;
  score = 0;
  gameState = "GAME";
  
  timeLeft = maxTime;
  countDownTimer.start();
  
  
  
}


void title() {
  background(237, 222, 139);
  fill(1,77,103);
  textSize(36);
  textAlign(CENTER);
  String s = "Shout out FOOD to Play";
  text(s, 400, 200);
  //Sound code
  float volume = analysis.analyze();
  float diameter = map(volume, 0, 1, 0, 1000);
  if (diameter > 20) {
    //startTime = millis();
    gameState = "GAME";
    countDownTimer.start();
  } 
}

void win() {
  background(237, 222, 139);
  fill(1,77,103);
  textSize(36);
  textAlign(CENTER);
  String s = "You win!\n Dancing is better than hunting ";
  text(s, 400, 50);
  float volume = analysis.analyze();
  float diameter = map(volume, 0, 1, 0, 1000);
  if (diameter > 0.1) {
if (myMovie.available()) {
    myMovie.read();
  }
  play();
}
}

void play(){
  myMovie.play();
  image(myMovie, 25, 130);
  
}



void lose() {
  background(237, 222, 139);
  fill(1,77,103);
  textSize(36);
  textAlign(CENTER);
  String s = "You will starve to death\nSHOUT to Play Again";
  text(s, 400, 200);
  float volume = analysis.analyze();
  float diameter = map(volume, 0, 1, 0, 1000);
  if (diameter > 20) {
    resetGame();
  }
  
}

void setupSerial() {
  printArray(Serial.list());
  myPort = new Serial(this, Serial.list()[ 3 ], 9600);
  myPort.clear();
  myString = myPort.readStringUntil( 10 );  // 10 = '\n'  Linefeed in ASCII
  myString = null;

  sensorValues = new int[NUM_OF_VALUES_FROM_ARDUINO];
}

void getSerialData() {
  while (myPort.available() > 0) {
    myString = myPort.readStringUntil( 10 ); // 10 = '\n'  Linefeed in ASCII
    if (myString != null) {
      String[] serialInArray = split(trim(myString), ",");
      if (serialInArray.length == NUM_OF_VALUES_FROM_ARDUINO) {
        for (int i=0; i<serialInArray.length; i++) {
          sensorValues[i] = int(serialInArray[i]);
        }
      }
    }
  }
}

Catcher

class Catcher {
  //properties
  float x, y, w, h, forkX, forkY;

  //constructor
  Catcher() {
    x= width/2;
    y = height-r;
  }

  //methods
  void update() {
    if (sensorValues[0]>600) {
      x=x+20;
    }
    if (sensorValues[1]>600) {
      x=x-20;
    }
    //x = mouseX;
    image(catcherImage, x, y);
    w = catcherImage.width;
    h = catcherImage.height;
    forkX = x+w-30;
    forkY = y+30;

    if (x>width-r) {
      x=width-r;
    }
    if (x<0) {
      x=0;
    }
  }
  void display() {
    image(catcherImage, x, y);
    //you can delete this part, it is just to figure out where the fork is
    fill(0, 0, 0, 0 );
    rectMode(CENTER);
    rect(forkX, forkY, 60, 10);
  }
}

Drop_fruit

PImage cucmber;
PImage greens;
PImage onion;
PImage orange;
PImage steak;
PImage fruit;
class Dropfruit {
  float x, y, w, h;
  float speedY;
  String pix;
  Dropfruit() {
    x = random(width);
    y = -10;
    h = 16;
    w = 16;
    speedY = random(5, 10);
    float r = int(random(1,8));
    if (r <= 2) {
      pix = "cucumber.png";
    } else if (r == 3) {
      pix = "greens.png";
    } else if (r == 4) {
      pix = "onion.png";
    } else if  (r == 5) {
      pix = "orange.png";
    } else if  (r >= 6) {
      pix = "steak.png";
    } 
  }
  void update() {
    y+= speedY;
    if (y > height +h/2) {
      y = -h/2;
    }
  }
  void display() {
    fruit = loadImage(pix);
    fruit.resize(60, 50);
    image(fruit, x, y);
    //orange = loadImage("orange.png");
    //apple = loadImage("apple.png");
    //apple.resize(60, 50);
    //image(apple,x+100, y+60);
  }
  void caught() {
    speedY =0;
    y = 0;
  }
  void reset() {
    y=0;
    speedY = random(5, 10);
  }
}

Drop_refresh

PImage cake;
PImage hamburger;
PImage ice;
PImage refresh;

class Droprefresh {
  float x, y, w, h;
  float speedY;
  String pix;
  Droprefresh() {
    x = random(width);
    y = -10;
    h = 16;
    w = 16;
    speedY = random(5, 10);
    float r = int(random(8,13));
    if (r <= 9) {
      pix = "cake.png";
    } else if (r == 10) {
      pix = "hamburger.png";
    } else if (r >= 11) {
      pix = "ice.png";
    } 
  }
  void update() {
    y+= speedY;
    if (y > height +h/2) {
      y = -h/2;
    }
  }
  void display() {
    refresh = loadImage(pix);
    refresh.resize(60, 50);
    image(refresh, x, y);
  }
  void caught() {
    speedY =0;
    y = 0;
  }
  void reset() {
    y=0;
    speedY = random(5, 10);
  }
}

Drop_sheep

PImage sheep;

class Dropsheep {
  float x, y, w, h;
  float speedY;
  //String pix;
  Dropsheep() {
    x = random(width);
    y = -10;
    h = 16;
    w = 16;
    speedY = random(3, 7);
    //float r = int(random(15,18));
    //if (r == 15||r == 16) {
    //  pix = "sheep.png";
    //}
  }
  void update() {
    y+= speedY;
    if (y > height +h/2) {
      y = -h/2;
    }
  }
  void display() {
    sheep = loadImage("sheep.png");
    sheep.resize(60, 50);
    image(sheep, x, y);
  }
  void caught() {
    speedY =0;
    y = 0;
    
  }
  void reset() {
    y=0;
    speedY = random(5, 10);
  }
}

Timer

 

class Timer {
  int startTime;
  int interval;
  Timer (int timeInterval) {
    interval = timeInterval;
  }
  void start() {
    startTime = millis();
  }
  boolean complete() {
    int elapsedTime = millis()- startTime;
    if (elapsedTime > interval) {
      return true;
    } else {
      return false;
    }
  }
}

Images in the game

 

 

Circuit

Video

The video is too big to upload to this blog. Here is the link to the YouTube video. 

Categories
Interaction Lab

Recitation 10 :Image & Video

 Part 1: Media controller

I decided to make the image of a hunter for our final project and control it with the variable resistors. So I made the code of the hunter. 

void drawMan(float u, float v, float s, color c){
   fill(255);
  noStroke();
  circle(u-450,v-450,s-20);
  
  ellipse(u-450,v-415,s+5,s);
  ellipse(u-433,v-390,s-30,s-40);
  ellipse(u-465,v-390,s-30,s-40);
  
  ellipse(u-475, v-410, s-40, s-20);
  ellipse(u-425, v-425, s-20, s-40); 
  
  
  fill(0);
  noStroke();
  stroke(0);
  line(u-455,v-450,u-445,v-450);
  circle(u-455,v-450,s-45);
  circle(u-445,v-450,s-45);
 
  
  fill(0);
  noStroke();
  rect(u-413,v-450,s-45,s+10);
  rect(u-420,v-450,s-30,s-40);
  rect(u-420,v-470,s-45,s-20);
  rect(u-413,v-470,s-45,s-20);
  rect(u-405,v-470,s-45,s-20);
  
}

I forgot that I need to use an image at that time and change the numbers into variables. And then I realized this problem and save it as a picture.

 

Here is the code.

Arduino

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

void loop() 
{
  // to send values to Processing assign the values you want to send
  //this is an example
  int sensor1 = analogRead(A0);
  int sensor2 = analogRead(A1);


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

  // too fast communication might cause some latency in Processing
  // this delay resolves the issue.
  delay(100);

  // end of example sending values
}

Processing

PImage hunter; 
import processing.serial.*;
int NUM_OF_VALUES_FROM_ARDUINO = 2;   /** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **/
int sensorValues[];      /** this array stores values from Arduino **/

String myString = null;
Serial myPort;
void setup(){
  size(600,600);
  background(237,222,139);
  setupSerial(); 
  imageMode(CENTER);
}
void draw(){
  background(237,222,139);
   getSerialData();
  printArray(sensorValues);
 float val1 = sensorValues[0];
 float val2 = sensorValues[1];
 hunter = loadImage("hunter.png");
 hunter.resize(90,90);
 
 image(hunter,val1,val2);

}

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

  myPort.clear();
  // Throw out the first reading,
  // in case we started reading in the middle of a string from the sender.
  myString = myPort.readStringUntil( 10 );  // 10 = '\n'  Linefeed in ASCII
  myString = null;
  
    sensorValues = new int[NUM_OF_VALUES_FROM_ARDUINO];
}

void getSerialData() {
  while (myPort.available() > 0) {
    myString = myPort.readStringUntil( 10 ); // 10 = '\n'  Linefeed in ASCII
    if (myString != null) {
      String[] serialInArray = split(trim(myString), ",");
      if (serialInArray.length == NUM_OF_VALUES_FROM_ARDUINO) {
        for (int i=0; i<serialInArray.length; i++) {
          sensorValues[i] = int(serialInArray[i]);
        }
      }
    }
  }
}

 

Part 2: Musical Instrument

At first, I didn’t understand the requirement of the exercise so I asked LA for help. I knew that the functions of envelope and difference are necessary but I don’t know how to use them. I spent a long time solving this problem. 

Code

import processing.video.*; 
import processing.sound.*;
TriOsc triOsc;
Env env;
String[] cameras = Capture.list();
Capture cam;
float attackTime = 0.006;
float sustainTime = 0.002;
float sustainLevel = 0.3;
float releaseTime = 0.4;
int size = 20;
float r, prer;
void setup() {
  size(640, 480);
  cam = new Capture(this, cameras[0]);
  cam.start();
  triOsc = new TriOsc(this); 
  env  = new Env(this);  
}
void draw() {
  if (cam.available()) {
   cam.read(); 
  } 
 
  for (int x=0; x<cam.width; x=x+size) {
     for (int y=0; y<cam.height; y=y+size) {
       color c=cam.get(x,y);
       fill(c);
       noStroke();
       rect(x,y,size,size);
     }
}
  color c = cam.get(width/2, height/2); 
  r = red(c);
  float difference = abs(r-prer);
  if (difference>10) {
    triOsc.play();
    triOsc.freq(map(r, 0, 255, 100, 600));
    env.play(triOsc, attackTime, sustainTime, sustainLevel, releaseTime);
}
prer = r;
}