Interaction Lab

• Your partner’s name and the image of their self-portrait (original sketch).
• Describe the story of the memory or dream you received and how you interpreted it.
• The feedback and thoughts you received after your partner experienced your creation.

Partner: MB

Dream: I was out in the field, and there were some kind of a bug that could fly.

Link: https://editor.p5js.org/bx2181/full/PgquUCRkb

MB: It looks cool, and I like the image you chose as the background. This bug is also kinda cute.

Reflection:

• What have you learned throughout the process of using the setup and draw functions, as well as variables and conditionals?
  • I sometimes forget that the draw that I wanted to show on the top should be at the end of my code instead of at the beginning. Also the background should be placed at the beginning.
  • mouseX and mouseY is a good function if I only wanna make a simple interactive design.
• Reflect on the language your partner used to describe the memory/dream and your interpretation of it using code.
  • For “fieled”:  I just used an image from Google. This really svaed me a lot of time hard code the field.
  • For the eyes interaction: I used map() to limit the eyes to move only in between the original value +-5, which MB set as:  circle(310, 205, 25);

      circle(380, 208, 25);

    Mine:let lefteyeX = map(mouseX, 0, width, 310 – 5, 310 + 5);
    let lefteyeY = map(mouseY, 0, height, 205 – 5, 205 + 5);
    circle(lefteyeX, lefteyeY, 25);

    let righteyeX = map(mouseX, 0, width, 380 – 5, 380 + 5);
    let righteyeY = map(mouseY, 0, height, 208 – 5, 208 + 5);
    circle(righteyeX, righteyeY, 25);

• What are your thoughts on digital interactions and real-world interactions? After using mouse and keyboard interaction, describe an interactive device — one that doesn’t exist yet — that could let you to recreate better the memory/dream in p5.js
  • It is a really good way for us to have fun. If we try to make this project more complicated its definately gonna be like a small game. For thos 3A games, they are all amazing that they can make the game view to be like so close to the real world. It can actually make those impossible interactions in real world (like jump from the room top?) 90% real.
  • I’ll say AR/VR are really cool now. They can lead us to a very immersive feeling of the game, tho still can not compare to the real-world.

CONCEPTION AND DESIGN

This is an interactive game based on laser dodging, where laser emitters are fixed to the walls on both sides or to the cardboard overhead. Players need to avoid the laser lines and get to the end without triggering the alarm to press the pass button and get the diamond at the end.

(movie: Ocean Twelve)

Originally conceptualized as the “Laser Breakout Challenge,” this project aimed to create an interactive gaming experience by manipulating laser direction through a top projector. The idea was to immerse players in an environment where they’d dodge dynamically controlled laser lines. However, technical limitations in motion capture using the projector led to a pivot in design. The evolved “Laser Security System” transformed the space by suspending 80cm x 80cm cardboard panels from the ceiling, crafting an immersive challenge that deviated from the initial concept but maintained its essence.

The pivot from the projector-based concept to the suspended cardboard panels was a significant design adaptation. The decision to use Arduino sensors, particularly light-dependent resistors (LDRs), was pivotal. These sensors provided accurate detection of laser contacts and formed the backbone of the system’s functionality. Additionally, the incorporation of 3D-printed fixtures and a motorized mechanism for the rotating green laser further enriched the interactivity of the system, compensating for the earlier envisioned dynamic projector control.

Not only these lasers, but I also chose to add rgb led pixel around the passage to create a tense atmosphere. rgb flashes in the direction from the start to the end, and I also added a red and blue light element above the head, similar to the blinking of a police light, which flashes red and blue to simulate an alarm when the challenger is detected. I’ve also added a buzzer, which will also work together.

Electronic Diagrams

FABRICATION AND PRODUCTION

The fabrication process involved suspending the 80cm x 80cm cardboard panels from the ceiling, creating an expansive and engaging play area. The implementation of Arduino sensors, specifically the LDRs, showcased the project’s technical ingenuity. Initially, the concept involved a top projector for laser control, but the technical constraints prompted a more hands-on approach, leading to the suspension of lasers for a tangible interactive experience.

All the materials I used:  Thanks to Eric’s suggestion, I was able to use a ping pong ball on the outside of the idr to extend the sensing area, which proved to be very successful.

The main Arduino parts:

 Moving laser:

Observing user reactions and responses during user testing provided us with valuable insights. Based on user feedback, the alert system was modified and more storytelling elements were added, such as the need for the challenger to reach the finish line to get the diamonds, rather than simply passing through a laser-filled tunnel. I also added black cloth at the start and in the middle to cover and stop the smoke from spreading out. This creates a more immersive and enjoyable experience.

What the tunnel looks like:

The selection of 3D-printed fixtures for laser mounting and the intricate motorized mechanism for the rotating green laser represented innovative solutions to achieve the desired interactivity. While the initial concept had projected the lasers for control, this adaptation allowed for physical engagement, enhancing the game’s dynamic without compromising its immersive quality.

Since the smoke created by the fog machine has a very unpleasant odor, I have a mask for the challenger as a way to ward off the smoke and have a more immersive experience as well.

Also, I wrote “paint what you want” & “be respectful” on one of the walls.
I also wrote “paint what you want” & “be respectful” on one of the walls. I originally wanted to use this as a way to spruce up my program and give everyone in the ima faculty a chance to vent and relax as they prepare for final, but surprisingly, it was more successful than I could have imagined. I have witnessed so much art being born on this, each with their unique ideas and leaving their work here. I think this section has elevated my work to a higher level and it’s only more of a place to reflect our ima creativity.

Pictures form user testing & IMA Show

Video form user testing & IMA Show

 

CONCLUSIONS

From the genesis of the “Laser Breakout Challenge” to the eventual realization of the “Laser Security System,” this journey has been a testament to adaptability and problem-solving in the face of technical challenges. As a solo endeavor, the project demanded creative solutions and a flexible approach to overcome unexpected limitations.

Despite the solitary nature of the project, the “Laser Security System” managed to exceed initial expectations, offering an immersive and engaging experience that encapsulated the spirit of the envisioned game.

The “Laser Security System” started differently but ended up surprising us all! It turned into this awesome game that really captured what we wanted. The road wasn’t easy- I faced challenges that made us think differently. Instead of holding me back, those challenges helped me grow. I went from just knowing the tech stuff to being super resourceful and flexible. This project taught me that obstacles can actually push me forward. It gave me skills and ideas I know I’ll use in my future projects. I’m excited to bring this innovative and resilient attitude to whatever comes next!

DISASSEMBLY:

It’s really hard for me to dismantle my project because it’s so much of my work and it’s so unique.😭😭😭

APPENDIX

My code for the overpass animation in processing:

code for flashing RGB:

CONTEXT AND SIGNIFICANCE

My definition to interaction:

Interaction is a way in which a connection can be undertaken between a user and the product he or she is using. It is the process of receiving information from the user, processing and transforming it, and finally turning it into an output for the user.

My previous group project involved creating a self-arming protective suit that, like Iron Man’s MARK 42 (Prodigal Son), assembles itself with a single user action. Our product responds when the user enters a certain amount of information, according to my definition of interaction. For this midterm project, I collaborated with my teammates to design a Transformer – Stepper Destroyer that is equipped with numerous sensors, which are devices that can interact with the user. For example, there may be some irregularities in a specific part of the vehicle that the user must discover and correct in order to gradually unlock the Transformer’s transforming function. Rather than a traditional Transformer toy that can only be manually transformed between car and human form, our project is more akin to an enlarged version of a toy Transformer, only with more interactive elements. It’s far more engaging and entertaining than the standard product. Our target audience continues to be traditional toy users, and it can bring them more joy. However, by upgrading our product again, we may be able to achieve a higher level of mechanics and interactive skills similar to Boston Dynamics’ robots.Of course, when it reaches that height, it’s not simply just a toy.

CONCEPTION AND DESIGN

The following interactive elements are included in our program:

1. Ultrasonic Distance Sensor (headlights): We included a sensor in the center of the front of the car, which was plugged into the breadboard of the front of the car and connected to an ArduinoUno. When it detects that someone is in front of the car or that someone’s hand is waving in front of the car, it emits a voice: “Hi, I am Stepper destroyer created by Eric and Evan. I am Stepper destroyer created by Eric and Evan. If you see any stepper motor in front of me, you can press the button on my container and help me chase it. Anyway, nice to see you.Could you do me a favor? I don’t feel well today. Parts of my body maybe needs to be fixed.”
2. Variable Resistors (Reversing Mirror): we used a potentiometer and put a layer of copper tape on the knob, which was designed as a reversing mirror because of its reflective effect, and inserted it on a breadboard. It was connected to an ArduinoUno, and when it was rotated, a voice was emitted: “Thank you, there was dirt on my antenna, now I can recieve the signals.”
3.  Force Pressure Sensor (antenna): We installed a sensor on the roof of the car, which is connected to the Arduino Uno by an extended wire, and when someone pinches its antenna, it will emit a voice: “Thank you, there was dirt on my antenna, now I can recieve the signals.”
4. Slide Sensor（logo）: Right underneath the Ultrasonic Distance Sensor, we added a Slide Sensor and pasted “Class 2027” on top of the slide as its logo, when it is moved to the right position, it will emit a voice: “Thank you, there was dirt on my antenna, now I can receive the signals. When it is moved to the right position, it will emit a voice: “Thank you, now my logo is straight and I feel better.                                         Finally, when all the sensors are triggered, it will emit another voice: “Thank you so much, now I can show you my secret. Autobots roll out.” Thus, we have unlocked its morphing function.
5.  Push Buttun: We installed a button on the rear of the car and glued a long wooden stick on top of the button so that it could stick out of the car. When the user pushes the stick and presses it for a longer period of time, the Transformer can run farther.
6. IR Remote: We added the only device that can be remotely controlled in the project, which is its morphing function. When the user presses the button on the remote control, the Transformer will transform from human form to vehicle form.

This part was inspired by the opening credits of Transformers: Age of Extinction, where Optimus Prime is severely injured and is able to move around after Cade Yeager repairs every part of Optimus Prime.
For the main body of the vehicle, we built it out of cardboard, which is lightweight and inexpensive.

(image credit:http://xhslink.com/ciCkPv)

After we settled on building a Transformer, we started designing its mechanics. We designed it as an 80cm long, truck with a width of 30cm. For the deformation part, we used a simple mechanical structure. As shown in the picture below.

(We are inspired by:https://www.youtube.com/watch?v=vOTkxDtlzN0)

They will be driven by stepper motor.
At the same time, our truck is rear-wheel drive, hich means that its power source is only the two motors at the rear of the truck.

Originally, we planned to mount each stepper motor directly to the vehicle with hot glue, but during our testing, we discovered that the stepper motor had very little time to overheat, and the high temperature melted the hot melt glue. We were fortunate to receive assistance from Prof. Andy Garcia, who converted their connection structure into a 3D printed bracket, allowing the stepper motor to dissipate heat more effectively and mechanically stable.

Previous：

After：

(The mount of Nema17 is from:https://www.thingiverse.com/thing:1901467)

We also used laser cut to create the force arm for the deformation part.

FABRICATION AND PRODUCTION

The most difficult part of our fabrication and production steps is the mechanical structure and code. In this project, I was primarily responsible for the Transformer’s mechanical structure and appearance. The first issue we encountered in our tests was that one stepper motor could not lift the front part of the Transformer, i.e. it could not carry the weight required to transform it. We wondered if two stepper motors could work together as a result of this. The millis code was then tried, but it did not work. We encountered so many difficulties on the first night we began working on the project that we had to prioritize other aspects of the construction.We only solved the puzzle after Prof. Andy Garcia showed us how to make the two stepper motors work together.

During the user testing, Kevin also made several other suggestions, such as adding springs or shortening the length of the robotic arm’s force arm. We tried some of these ideas, such as shortening the force arm. However, accidents occurred during testing, such as when the motor worked for a while and then was unable to lift the front part of the car again. We changed the part of the motor that raised the front end to become a person to lowering it to become a truck to eliminate the possibility of this failure.

But after we finished the main body of the car, we discovered something we hadn’t expected: the torque of the stepper motor wasn’t enough to propel an entire car. Even though I glued more friction material on the wheels, it still didn’t work smoothly.Fortunately, we were advised to shorten the car’s length. Then we repeated the process, removing the six’s two middle wheels because they provided too much resistance. We eventually succeeded.   

We intend to expand the Step Destroyer’s capabilities. However, we discovered that the Arduino is too small to hold so much code, so we had to use multiple Arduinos. But we didn’t know how to connect multiple Arduinos without IR receivers and emitters, and we assumed that using multiple IR’s would be too complicated and difficult for physical wiring. (As shown in the previous image, even though we had organized the wiring, it was still very messy.) As a result, we abandoned the idea of adding more.

And there are numerous issues that arise as we connect them or put them into service. For example, we tried to use a 350w 12v power supply, but we don’t understand why one of the wires always shorts out when connected to four wires. So we chose lithium batteries for power supply, but unfortunately, the lithium batteries were depleted very quickly during the last demonstration, so we had to demonstrate other Transformer functions.

In addition, the ArduinoMega we borrowed from ER had several unresponsive ports. We checked all parts of the device at the time, including the connection, whether the motor was available, whether the power was sufficient, and so on. Knowing that a few hours later, when we replaced its pin, we discovered that the problem was with the Mega’s ports.

Of course, the stepper motor took up far too much of our time in this project; it was inconvenient and did not provide me with enough functionality. We abandoned the idea of adding an arm to the project because it was too cumbersome and didn’t give me enough power, making it a unique “centaur” form of a Transformer from a planet other than Cybertron. Our theory is that he was a valiant warrior who lost his arms while defending.

Arduino Uno (or see the codes here)

Arduino Mega (or see the codes here)

Here’s a video of it in full operation!!!!

reference for the codes:
https://www.youtube.com/watch?v=0DgALFDwouA&t=56s
https://blog.codebender.cc/2014/02/20/emic2/
https://www.bilibili.com/video/BV1XW411H7Ps/?p=3&vd_source=637c310ef910b08826920d2defc0a6f5
https://howtomechatronics.com/tutorials/arduino/ultrasonic-sensor-hc-sr04/
https://docs.google.com/document/d/1MEgxjFO1iaVlIwwEjccmbOkdaQapE4WuOntilAkYfJA/edit#heading=h.15jiiuwqq4uk

This is the first code we’ve used that doesn’t allow both motors to function at the same time:

stepper1.runToNewPosition(200);
stepper2.runToNewPosition(200);

(It will make one stepper motor turns two rounds and the other not work)
Luckily, Prof. Andy Garcia taught us a way to pretend that the two stepper motors are running at once. Here is the code:

for (int i = 0; i < 200; i++){
stepper1.runToNewPosition(-i);
stepper2.runToNewPosition(i);
}
delay(1);

CONCLUSIONS

Our project tries to convey the idea that, in the midst of daily observation and exploration, everyone can find something different in everyday things and enjoy the small pleasures of life. That’s why we designed the Transformers’ transformation to be more like a puzzle game. I believe it perfectly fits my definition of interaction because it encourages our users to explore our products in depth and receive unexpected feedback. That is the type of surprise we provide to our users. However, the sound from our speaker does not appear to be very clear. It would be a more immersive experience if we could make our sound effects as realistic as those of another group of classmates’ Halloween projects.

If I had more time, I would have added the original arm and attached a body monitoring device. It could be attached to the user’s arm. For example, if the user swings his arm upwards, it will also swing his arm upwards in order to synchronize. It may be more interactive by definition at this point.

Something I’ve learned while working on this project is that you should never underestimate something that appears simple because it can consume a lot of your time and energy. When we first considered the mechanics of the transformation, we encountered numerous difficulties. Things like a lack of torque, coding difficulties, and so on. But it was also due to our lack of experience. I believe that we are attempting to learn something new with each assignment. At the very least, I now understand every piece of information in my project.

APPENDIX

A man’s medal!!!!!!!!!!!

Working hard😄

My bed for two nights T___T

Thanks for the treats!!!!!

THE SUIT

Group D : Evan

Introduction

Our invention is based on the novel The Plague. This novel takes place in a future world threatened by a deadly plague. The main character is a man who disposes of plague corpses, and at one point he meets a woman who is being threatened by others. The protagonist chooses to stand up for himself and asks the thugs to let her go, but eventually the thugs throw to that cuts through the protagonist’s protective suit. And our conception is what would have been the outcome if the protagonist had a more powerful protective suit?

The process of completing a project

We started the construction of this armor.

The left one is the beginnings of armor for the arm, but we didn’t cover it with a black exterior.

The right one is what it looks like when we cover it in black.

The group is hard at work constructing the rest of the armor.

The top half of the armor is now complete! Next we start thinking about how to construct the bottom half of it.

Conceptualization is complete!!! We will now start trying to install the armor.

See our results next!!!

Although we conceived the whole armor after Iron Man, the actual operation was much more difficult than we thought, because it drew a huge amount of time to think about how to connect each part of the armor to the human body, and how each piece of armor should be connected to each other at a time.

But the good news at the end of the day is that even if I don’t look that much like Iron Man, I can still call myself Garbage Man：）

Here are some of the components of our suits

• Crow’s special suit : black helmet, chemistry goggles, health center mask, 
  • Black trash bags – Eva
  • White trash bags
  • Jacket –  Evan
  • Gloves- Evan
  • Helmet tammy 
  • Vest → foam/bubble wrap IMA lab
  • All black clothes
  • Water gun – Eva

ACTING:

Evan: Crow (shooter)

Henry: knife demonstrator + dresser

Zora: dresser (infected and shot) + carry body away

Eva: dresser (introduce and narrate) + carry body away

Nina: dresser (infected and shot) 

Tammy: dresser (introduce and narrate)

 

Narrator retells the story or the part where he gets slashed and infected and dies(?). 

Tammy: “Our group chose to reenact the scene in “The Plague” where the Crow gets slashed — 

Eva: One of the infected throws a knife and the Crow shoots, however the knife strikes him in the arm and he gets infected.

• Person throws knife, crow shoots
• Insert wind > Henry> Knife cuts Crow
• Crow “dies” from being infected

 

Tammy: Now, how would the story have changed had the Crow been wearing a stronger suit? (time)

• Crow press button
  • Takes out sunglasses from pocket
• Everyone rushes to dress Crow (stand like iron man preparing for surgery)
  • Eva and tammy: body, front and back
  • Nina and zora: tummy
  • Zora and henry: legs 
  • Eva and tammy: arms
  • Nina and tammy: shoulders
  • Eva and Henry: gloves
  • Henry: helmet and mask first
• **Eva narrates different uses of armor: shoulders, chest plates front and back, stomach, shin guards, arms, helmet, materials used to create

 

Eva: Now that he’s ready, let’s watch the scene again. 

Zora kidnaps Nina.. Nina resists and screams…

Evan: Let her go!

Zora: No, why should I? You kill people everyday. 

Evan: It’s the right thing to do.

Zora: I don’t care.

• Person throws knife, Crow shoots
• Insert wind> Henry> Knife breaks!
• Crow does not die
  • “Thank god I was wearing this suit! It protected me from the dangerous knife, I love this suit!”

The narrator brings up what if he has a stronger suit us dressing Evan up in fast.

Person holds knife cuts him (same person in the retell and after suit) but knife dun dun breaks.

Evan can have a watch and like he taps it and the suit automatically (us dressing) gets on him.

Narrator (or along the lines of): Now lets see this scene again with the stronger suit
No cut no death.

Armor stand not too sure since originally the suit was intended to come out with a press of a button onto his body iron man style（garbage man actually in the end）

Our rehearsals!

Don’t forget our last official show!!!!

 

My Opinion on the Performance from Other Group

Group B’s work is about an ai wing that maximizes human happiness based on its own algorithms, and its final solution is to get all the residents of omleas out of the city, once and for all, so that the child can have the freedom it deserves. Their idea of an ai awakening to self-awareness is very creative, and their performance is very dramatic and interactive, making it an eye-opening experience.

However, I think the downside is whether the ai’s algorithms will actually parse out the result of setting the child free. In the famous trolley problem, we are often unable to make a decision in a short time, or even given a long time, we are unable to make a decision, because any choice is extremely cruel.

Here is the answer given by Chatgpt：

Maybe this is the answer that a real ai algorithm would give. After all, in every movie we’ve seen in our lives, the ai is always cold and ruthless, it always makes the decision that is best for the greater good, without taking into account human emotions etc. The problem we face in omelas, on the other hand, is more of a moral dilemma, much like the trolley problem, where the ai isn’t inclined to save a child at the expense of the comfort of the vast majority of the population.