Tina's Documentation Blog

Qilin Stress Relieve – Tina Chen – Professor Gottfried Haider

Concept and Design

For this project we attempted to put a new twist to the traditional way of playing computer games by replacing the mouse and keyboard with self invented mechanisms. The ultimate goal was to create a unique user experience through the substitution of these new mechanisms incorporated with sensors. My preparatory research consisted of a Hammertone that used sensors to read the vibrations created by the performing musicians and the information is then transformed into a visual effect through the connected LED lights. This project inspired me to also use sensors and I had planned to use sensors to read user input.

At first, the game was a simple single player game that consisted of two parts, one part for collect “ammunition” and part two for destroying homework with the collected ammunition. However, due to the restrictions of the sensors that were available to us and the unclear game instructions we had to reconsider our decisions proposed during the proposal. After sometime of rethinking how we wanted the computer game to go about my partner and I decided that we wanted the game to be a two-player game. Inspired by the games It Takes Two and Overcooked, we wanted our game to be chaotic and fun. We created two poles with a piece of wood that would be able to move up and down the pole. The distance between the wood and the sharp infrared distance sensor would be used to provide information for the x and y axis of the user controlled aspect of the game. Below is our vision and demo sketch of our final idea:

During User Testing our game operated especially well. Other than minor bugs on the coding part and some tweaks to specific values we did not have any big issues. The testing process made us make minor changes to the difficulty of the game as we realized that it is way harder for the players to accomplish the game through the use of the poles compared to the mouse and keyboard we originally tested the game with. After user testing, we moved our project to a different location and found out that the sensor was not functioning. After several trials of changing Arduino boards and checking codes we found out that it was really sensitive to the amount of light it received and the angle that we connected it to the table legs. We eventually just added a piece of wood between sensor and table so that the sensor was easier to receive light. The new adapted game is well balanced between user comprehension and difficulty of winning game.

 

Fabrication and Design

The first task we tackled during production was the coding of the game. I coded the game as Denny designed all the visuals of the game from buttons to icons to backgrounds. Denny was mainly in charge of the code for the Arduino and most of the production of the poles and gloves. We had planned out the rules of the game prior so coding the game was not a problem for me. I created three different classes, the Homework class, the Player class, and the Scissor class which are in charge of loading the images and the movement of these objects and the whole game is split into four stages, 0-4. Stage 0 is the start page, stage 1 is the instructions page, stage 2 is the actual playing part of the game, and stage 3 is the ending page. More details of the code can be found on the Github linked in the appendix. 

As mentioned earlier we used two poles with a moveable object in the middle of the pole to use as the controllers for the x and y coordinates of the user controlled icon in the game. We chose to use two round cardboard poles rather than a squared wooden log because the round shape allows for easier movement and does not restrict the movement of the user compared to a squared shape. We added long wooden sticks inside the two poles around the area where they connected to enforce the structure such that they won’t bend easily since the poles started to tilt on top during user testing. 

 

 

We laser-cut the the part that was supposed to move up and down the pole such that we can achieve a smooth circle cut effortlessly. For the sensor that was supposed to get input for the x and y axis we decided on the sharp infrared sensor because it was more accurate and the ultrasonic sensor was not as it is easily affected by other things in the vicinity of the ultrasonic. However, after encountering the issues mentioned earlier by the sharp infrared distance sensor I think that ultrasonic may have been a better option after all as it is not affected by light. 

 

For the controller of changing between the two different user icons we eventually chose to use a simple switch circuit mechanism. The initial plan to to plant a pressure sensor in the gloves and have one user control that aspect. However, after trying the pressure sensor we realized that it takes time for the pressure sensor to return to zero and it was not the instance effect that we had wanted. Additionally, it was too sensitive to the hand movement of the user so we decided to replicate the switch paddle from Recitation one’s mechanism by using copper tape and just simply detect the connection between the two gloves as a signal for icon changing. 

 

Conclusion

This project seeks to substitute the typical role of the keyboard and mouse with a unique mechanism in hopes of fabricating a new user experience to a simple computer game. The final outcome fulfilled every expectation that we had and the user experience it created was spectacular! Our users had a lot of fun working together to complete the tasks of the game and it was quite a “chaotic and stressful” game as some of them had stated.  For each team of new players they always showed a sign of curiosity to how they were suppose to utilize the provided mechanisms to accomplish the game. Eventually, the adrenaline pump comes as they mastered the given tools and with some cooperation the race for saving Qilin is on! The two players not only had to communicate with the game through the use of the poles but they also had to communicate with each other in order to do certain tasks required to achieve victory in our game. The end result demonstrates my definition of a successful interactive project as we not only stimulated interaction between the users and the computer game but also interaction between the users themselves is quite crucial in achieving the goal of the game. There is definitely much more improvements to be made in terms of the type of sensor we used for the two poles. The sharp infrared sensor proved to be too unstable and unpredictable for us. We incorporated the sensor to our game quite late during the production period such that we didn’t have time to try other options. Moreover, I am very much proud of the game that we designed and which I have coded for the most part. This new way of adapting computer games with the incorporation of Arduino is a new exploration for me and one that I will definitely try again in the future. 

 

Appendix

 

Final look of mechanisms:

 

 

User testing video:

 

 

View of game:

 

Laser cut file:

 

Wiring of circuit:

 

The Github link to all the codes and files used for the game is below:

https://github.com/tc0610/Interaction-Lab-Final-Codes

 

The code for reading the information from the sharp infrared distance sensors and turning that information to values in centimeters was adapted from the following code below. The library used for the code is also provided from this site:

https://www.makerguides.com/sharp-gp2y0a21yk0f-ir-distance-sensor-arduino-tutorial/

Project B – Through the Decades

TINA CHEN, EXPLORE : THROUGH THE DECADES

 

PROJECT DESCRIPTION

EXPLORE : THROUGH THE DECADES

2023

Interactive Art

 

ELEVATOR PITCH 

Explore attempts to create a museum gallery/time machine like website where the user can travel through the decades of the Chinese dynasties and see all that these time periods holds. From inventions to important historical figures to fashion, Explore introduces all aspects of the dynasties to the audience.

                   
              

ABSTRACT

Explore is a stimulation of a time traveling website where the user can ‘travel’ through time through the scrolling of the pages on the website.  It is a website that attempts to contain all the aspects of China’s dynasties and to showcase it in an engaging and interactive way through the mechanisms of scrolling and hovering. The choice of which dynasty and what aspects of the dynasty shall be seen and explored lays in the hand of the audience and through these explorations they are also capable of making comparisons among different dynasties as they scroll up and down. 

Upper most part of the website/the title

Part II

 

1) Process: Design and Composition

The initial idea for the website was to have the user click icons that corresponds to each dynasty and then have the page jump to whichever dynasty the user chose. However, after relaying my proposal ideas to Professor Marcela, she suggested that the simple act of scrolling up/down/left/right is a better option as it is a better storytelling technique. I think the use of scrolling to tell the story of the dynasties really simplifies my website for both the user and myself as the developer as I don’t have to implement as many html pages as I would have if I sticked with my original plan. To add more interaction to the website I incorporated little captions and unless the user hovers over the caption, they would not be magnified for the user. This not only saves “space” but also it does not affect the layout of the boxes. Moreover, I underestimated the amount of research that I would need to do in order to fulfill my hopes of having all the main dynasties on my website. The website would be more complete if I were able to incorporate all the dynasties that I had initially planned to include. On the flex boxes that requires a lot of information, I used a p5 sketch for each of them that had a slideshow of all the information. That way there’s no resizing of information needed on the flex boxes in order for the user to view the content. 

 

First page of every dynasty 
The boxes that contained a slideshow of important people (left) and territorial map

The box with a slideshow of fashion and the mouse-hovering caption

 

 

2) Process: Technical

The first challenge I faced was how to make the horizontal scrolling affect. After doing much research, I was introduced to the concept of flex boxes. Hence, for each dynasty I designed the website in such a way that they each had their own div box that contained all the flex boxes for each of the categories. In this way I was able to fulfill my plan of having the user scrolling up/down/left/right. Moreover, I was faced with the challenge of how to create a p5 sketch that ‘scrolled’ through a massive painting. I had wanted to use the painting the 清明上河图(Along the River during the Qingming Festival), but it was a massive painting. The ultimate plan was that I downloaded 22 parts of the painting and then had the p5 sketch load the individual parts as an object of a Pic class that I had implemented which would be in charge of moving each part of the painting out of the canvas to create the affect of a moving background. I also used this technique on some of my other flex boxes as a slideshow of the information I wanted to showcase. My biggest challenge for this project was the researching. As mentioned earlier, I had underestimated the amount and time needed for the research aspect of this project which lead me to have to size down on the amount of info I was able to provide for each of the flex boxes of the dynasties. If I had more time I would like to improve the overall aesthetics of the website as the flex boxes didn’t really match my theme of ancient China and also implementing different ways to show my content rather than using just p5 sketches with slideshows. 

 

3) Reflection and Future Development

In terms of visuals, I am satisfied with what I have achieved. The scrolling affects and the addition of using a p5 sketch as the background along with the music really sets the scene of immersing the audience in a ‘traveling back in time to ancient China’ type of experience. It is quite accurate to how I had imagined the visuals to be like back when I was brainstorming ideas. Due to time constraints I was unable to incorporate more dynasties onto the website, however if all the dynasties were incorporated I’d feel like the website would be more complete. There’s definitely a lot of researching work that needs to be done in order for this website to be polished and finished. In addition, I feel like there’s a lack of interactivity. I would love to use a p5 sketch for each of the first cubes of the dynasties and have the audience ‘scratch’ open the boxes to reveal what dynasty they are currently exploring. Overall, as my first official attempt on Web Development, I am satisfied with all the techniques and skills I have acquired and applied on this project. 

Reading 3: New Media Art

My understanding of New Media Art is the use of technology to produce art rather than using the traditional art tools. Although this article was published in 2007, the author’s definition of New Media Art still coincides with my own. With the arise of newer technological devices, the Conception of New Media Art is no longer constrained simply by the use of computers. Rather we have 3d printers, smartphones, and iPads that also allows us to express art through technology. Back in 2007, many of these technologies are not widely used yet so their understanding of what could be used as the tool for New Media Art is limited. 

Artist John F. Simon Jr. created a New Media Art called Every Icon where the program runs on its own and attempts to create every picture that could possibly fit in a 32 x 32 grid. The program just colors the squares on the grid as it they were pixels and a combination of white and black grids creates an image. To see the final image will take trillions of years as there are some many possibilities on the grid to create diverse images. Born in 1963 in Louisiana, John F. Simon Jr utilized LCD screens and computer programming to create visual imagery. Simon’s style of art fits with the definition of conceptual art mentioned in the article. His art is a form of New Media Art because he utilized his skills in software development to create visual images. His works are more conceptual because they focus more on his own ideas rather than trying to convey some political or social meaning. 

Moreover, Jon Thomson and Alison Craighead are two artists who live and work in London. They make artworks for galleries, online, and outdoors. Most of their works focuses on live networks and how they are changing the way people understand the world. One of their work pieces called Telephony (2010) consists of a wall based grid of 42 Siemens mobile telephones and the audience can dial these phones and they will begin to call each other to create music. Every phone is individually programmed with a different ringtone. This piece of work is another form of Conceptual New Media Art as it introduces a new idea and way of creating music. It is very similar to musical tools that musicians would use nowadays to create their pieces with where they simply press a button to produce a specific sound and then a combination of multiple sounds becomes music. Telephony is like the earlier adaptation of such an idea which overtime has changed form from pressing physical buttons to pressing screens. 

Project B Proposal

Description:

For this project I plan to create a museum gallery/time machine-like webpage that displays information about Chinese dynasties from clothing to famous people to territory. The purpose of this site is to give users a “traveling through time” like experience where they can visually see the passing of time and explore each time period with the additional information provided. The webpage will be organized as so: scrolling left or right on a dynasty will reveal all the information about that specific dynasty and scrolling up and down will take you to different dynasties. Hovering over a specific picture will enlarge the text and the picture itself for the viewer to see more clearly. With regards to the limited time that I have I will only focus on 10 dynasties in which I find the most interesting and the rest will still remain on the timeline but it will not be thoroughly described. 

 

Visual Prototype:

 

Slides deck:

https://docs.google.com/presentation/d/1QuRQVghO_ykkIhp2hMbzMtJUXQwdBx0i53uOrUOIV4E/edit?usp=sharing

 

Mini Project 8 Sketch Gallery Page

 

Link to Github Page:

https://github.com/tc0610/cclab/tree/main/11r-sketch-gallery-page

Link to WebPage:

https://tc0610.github.io/cclab/11r-sketch-gallery-page/

 

Description:

For this project I created a gallery page for my midterm project. The webpage describes the function and insights behind why the midterm project was created. 

 

Final Result:

 

Coding:

I did not have any trouble with creating a javascript file and placing that into a div nor was the html file difficult to manage either. However, the css file was quite challenging as I had to trial and error with the position of the boxes in order to get the result I wanted. Below is the code for my css file:

 

#Greet{
font-family: ‘Caveat’, cursive;
font-size: 50px;
position: relative;
left: 20%;
 
}
body {
background-color: rgb(220, 221, 166);
}
#one{
position: relative;
top: 175px;
left: 20%;
}
.t{
font-family: ‘Caveat’, cursive;
position: relative;
left: 25%;
width: 600px;
height: 100px;
 
}
#intro{
font-size: 20px;
bottom:400px;
}
#key{
font-size: 20px;
bottom: 325px
}
.pic{
position: relative;
left: 5%;
bottom: 500px;
}
.pic1{
position: relative;
left: 90%;
bottom: 900px;
}

 

Reflections:

Orderly file names allow us to find and utilize specific files that we need without having to look through every file to double check that it is the correct one. We use classes when there are several divs that would share the same features. We use IDs when specific divs has their own unique feature that we want to distinguish from. I initially planned to put multiple javascript files on the website but I found that I could only place one, or the website would only show one even when I upload multiple ones. Styling text in text editors are much easier as the text editors usually have all the font families loaded and ready to be used. In addition, it is a lot easier to place words at specific locations compared to writing HTML. However, the placement of texts in HTML are more flexible in terms of where the text can be placed on the page. On my page I upload the js file in order to have my midterm project accessible and the HTML was used to upload all the images, js files, and content I wanted to put on the page. Lastly, I ordered and organized the contents with the CSS file. Writing HTML or CSS is different in terms of syntax. 

 

Reading #2: Long Live The Web Response

An example of an ill effect of the Web that I have experienced is the walling of information. There have been multiple instances where I had wanted to read an article related to a paper that I am writing but I couldn’t directly have access to that specific article because I am not a subscriber of the specific website. In addition, living in China without a VPN means that I am disconnected from the rest of my life back in America because I am unable to use any western apps or go on western websites. Universality is the characteristic of being able to comply and work with any form of information and data. Having universality means that anything from a sentence to a series of numbers to pages of essays can be posted and shared on the Web for everyone to access. Isolation occurs between individual sites where the information that you post on one site cannot be reused and transferred to another site. The individual sites are walled off from each other. While the Web allows universality on the level of types of information posted, there is still isolation between these information in the forms of individual sites. Open standards are standards that allows anyone to contribute to the design of the sites on the Web. These standards are available for free on the Web for both developers and users and there’s no consent from anyone needed. Closed worlds are “worlds” separated from the Web where a specific link can only be opened by a specific program. The information shared in a closed world cannot be shared within the web. The Web is one of many applications that runs on the internet. The internet is an electronic network in charge of transmitting packets of information among computers according to some open protocols. Any application can run on the internet as long as it follows the Internet protocols. The author mentioned his vision of the “proliferation of smartphones” as a means of making the Web more central to people’s lives and he is absolutely right. Unlike computers, smartphones are a lot more handy and portable for daily uses and has become an essential of our lives. For some societies, smartphones function as a communications, entertainment, and payment device. I think the author will be in shocked at how humanity’s behavior and way of living has been improved and changed by smartphones. With the development of messaging apps people have started to refrain from the actual act of making phone calls. In terms of devising pages that works well on all screens, a good representation of that would be how we are able to open the same link from both smartphones and computers no matter the brand or size of the machines. Finally, linked data has been improved throughout the years. Nowadays we have large linked open data sets like DBpedia and Wikidata. 

Project A – Shore

TINA CHEN, SHORE : THE ROLLING OF THE TIDES 

 

PROJECT DESCRIPTION

SHORE : THE ROLLING OF THE TIDES 

2023

Interactive Art

 

ELEVATOR PITCH 

Shore attempts to replicate the behaviors of rolling tides washing upon shore. The audience is not solely an observer of this natural phenomenon but also a participant who can interfere with the waves and the sand. Shore is a stimulation that seeks to magnify humanity’s role as an interference nature. 

 Crashing waves

                                  

ABSTRACT

Shore is a stimulation of human interaction with the tides that gets washed upon shore.  Visualize the movement of the tides as it crashes on the sand, leaving a trail of foam as it disappears into the vast ocean. Try to step on the sand and the water with the clicking of the mouse. You will see that no matter what damage or change you’ve done will eventually by recovered by the natural world. It’s as if you’ve never took a step on that sand or interrupted the rhythm of the tides. As if you never existed at all. Like the sea foam left on shore and the footprint that disappeared, we humans are a temporary stay on this Earth as well. Forget about all the mistakes you’ve done, bad grades you’ve gotten, or the embarrassments you’ve had. The rolling tides of time will erase them for you so don’t you look back on them. In the end, we are erased from the natural world anyways. 

 

Part II

 

1) Process: Design and Composition

My initial intentions were to draw the waves with vectors and lines and using circles as the foam. However, after encountering the following painting by artist D. TaoI soon realized that I don’t need defined lines to recreate waves. I can recreate an abstract wave with solid shapes of different shades of blue instead to add more depth to my water. I wanted my wave to be made up of wave particles that are of circular shapes and different shades of blue. 

 

I then pondered on what form my wave particles should have and decided that circle was a better option than rectangles because I wanted to create the phenomenon of waves crashing on shore and leaving a trail of white foam. The transition of color from blue to white can be achieved by circles better than rectangles because foams are roundish. The user interaction of stepping on sand was achieved by using a not outlined ellipse filled in with a color that was close to that of a leftover footprint on sand. The effect of stomping into water was planned out to be that the water particles would repel from the area where the mouse lands out. At first I only created a single wave that kept moving on shore but it was not ideal because when the water particles moved back and forth between the ocean and sand there was a period of blankness in the art as shown below.

 

My solution to this was to add another layer of wave particles underneath the moving wave and those wave particles will fill in the empty spots. I also designed the layer underneath with wave particles that moved back and forth so that it is not a static section of just blue circles. This step added more dimensions and layers to the waves. 

For the repelling wave particles I tried both the mousePressed()  and mouseIsPressed() and decided that the mouseIsPressed() is ideal because I want the repulsion to occurs the whole time while the mouse is being pressed down. A classmate (Rudy) suggested that to make the waves look more realistic I should try to have the white foam be a more solid white when the waves first come in contact with the shoreline and then fade to a more transparent foam so I played around with the opacity to create that effect. A fellow (Samantha) suggested that I should include the aspect of footprints on the sand as an additional interaction which I was able to accomplish by simply drawing an ellipse. This additional interaction really makes this piece more realistic. 

 

Below are the main designs of Shore.

 

                 The crashing of the tides                       Sand Stepping                           Stomping into Water 

                                             

 

2) Process: Technical

One technical issue that I had was the coloring the wave particles. I knew that I could achieve the different shades of blue with the color mode HSB but I was not familiar with the function so it was quite frustrating. I eventually solved this issue by just randomizing the shades of blue in RGB mode instead by finding out what ranges of r, g, and b the shades of blue usually lies on. Another issue was with the repelling of the water particles when the mouse is clicked. The particles were repelling in the right way but when the mouse is released they were not gradually moving back to their original spots. However, this was a problem that solved itself because the continuous movement of the wave particles was able to hide the empty spot left behind. This part can definitely be implemented better. I would really focus more on trying to figure out how to achieve the returning of the wave particles to fill in the empty spot left behind after the displacement. In addition, if I could do it again I would make the footprints created last longer and gradually fade away rather than immediately fading. Moreover, the transition of the waves into foams can be achieved better if the waves turned a lighter shade the closer it got to the shoreline. 

 

3) Reflection and Future Development

In terms of visuals, I am very satisfied with what I have achieved. It is quite accurate to how I had imagined the visuals to be like back when I was brainstorming ideas.  Rudy’s comment about the opacity of the white foam and Samantha’s feedback about adding footprints made a huge difference in terms of how realistic Shore became. I do wish that I had made the footprints have  subtle disappearance rather than disappearing right away after the user stops pressing on the sand. In addition, the suggestion of having the waves turn from dark blue to light and then to the white foam was something that I hadn’t thought about and I think would definitely add a lot more to the visualization of the piece. In terms of interaction I would like to improve on the behavior of the wave particles after the user stops pressing on the water. While the movement of the wave particles makes the recovering of the empty spot easier it is still quite awkward that after the user pressed the mouse there are no wave particles in that spot other than the moving ones. Overall, I think Shore is quite a success because it did in fact fulfill my initial goal of replication a stimulation of crashing waves.

Mini Project 7: Particles

 

Link to final product:

https://editor.p5js.org/tina06c/sketches/3uIi4PaI5

 

Description:

For this project I intend to recreate the natural phenomenon of balloons floating in the sky. I created the class Particles which displays a balloon on the canvas. Based on which display function is called the balloon can be squared or round. In addition, the balloon also has a move() method that controls its movement and there’s a release() method that determines the whether the balloon is in the release state or not. The default state of a balloon is that it will be generated on the bottom of the canvas and moving up until it is no longer seen (at that point it is in outer space and we no longer see it). If the balloon is in release state the balloon will float down rather than up due to the lost of air inside. When the balloon enters release state its face will turn from a happy face to a sad face. In addition, a balloon in release state will shrink and become skinnier due to loss of air. 

 

Final Result:

 

Coding:

The bString() function is in charge of displaying the string of the balloon if the balloon is not released. The displayCircle() and displayRect() functions are used for displaying either a round balloon or a rectangle one. The releaseAir() function is in charge of signaling the releasing of the air to the variable release  which is checked within every displaying function in order to know which type of balloon is displayed on screen. The move() function is in charge of the balloon’s floating movement and the sadFace() and happy() functions are in charge of displaying the balloon’s emotions. 

bString() {
if (this.release) {
//nothing
} else {
push();
translate(this.x, this.y);
stroke(0);
noFill();
beginShape();
curveVertex(this.p1, this.p1y);
curveVertex(this.p1, this.p1y);
curveVertex(this.p2, this.p2y);
curveVertex(this.p3, this.p3y);
curveVertex(this.p1, this.p4y);
curveVertex(this.p1, this.p4y);
endShape();
pop();
}
}

displayCircle() {
this.bString();
push();
translate(this.x, this.y);
noStroke();
colorMode(HSB, 100);
fill(this.color, 20, 100);
ellipse(0, 0, this.w, this.h);
pop();
if (this.release) {
this.sadFace();
} else {
this.happy();
}
}
displayRect() {
this.bString();
push();
translate(this.x, this.y);
noStroke();
rectMode(CENTER);
colorMode(HSB, 100);
fill(this.color, 20, 100);
rect(0, 0, this.w, this.h);
pop();
if (this.release) {
this.sadFace();
} else {
this.happy();
}
}

move() {
this.x += random(-2, 2);
if (this.release) {
this.y += this.ySpd;
this.p1y += this.ySpd / 100;
this.p2y += this.ySpd / 100;
this.p3y += this.ySpd / 100;
this.p4y += this.ySpd / 100;
} else {
this.y -= this.ySpd;
this.p1y -= this.ySpd / 100;
this.p2y -= this.ySpd / 100;
this.p3y -= this.ySpd / 100;
this.p4y -= this.ySpd / 100;
}
}

releaseAir() {
this.w = 40;
this.release = true;
}

sadFace() {
push();
translate(this.x, this.y);
fill(0);
circle(this.w * 0.3, 0, this.w * 0.05);
circle(-this.w * 0.3, 0, this.w * 0.05);
arc(0, 10, this.w * 0.3, this.w * 0.3, PI, 2 * PI);
pop();
}
happy() {
push();
translate(this.x, this.y);
fill(0);
circle(this.w * 0.3, 0, this.w * 0.05);
circle(-this.w * 0.3, 0, this.w * 0.05);
arc(0, 0, this.w * 0.3, this.w * 0.3, 0, PI);
pop();
}

 

Reflections:

Object-Oriented Programming is when we write code and programs using objects and classes.  A class defines object properties and behaviors and is the blueprint for creating objects. An object is an instance of a class and it has all of the properties and behaviors that the class has. OOP is frequently useful in situations when we want to create things with similar behavior and features but they differ in small variable details. By programming in OOP we can avoid writing duplicating and excessive code. We usually create classes for objects that are called multiple times. I have created objects like Clouds and Balloons. The Clouds and Balloons have a display() function to show and they can move through the calling of the move() function. The Clouds and Balloons have properties such as x and y coordinates, length and width, color, and speed. I was able to make them float up, down, or bounce on the screen. The Balloons can change their facial expressions and release air when asked to do so. 

Midterm Project: Candy Shooter – Tina Chen -Professor Gottfried Haider

Context and Significance 

My previous research allowed me to realize the importance of receiving and providing inputs in the world of interaction. One project that really inspired me was the GhostWriter produced by Arvind Sanjeev that allowed the user to be able to communicate and ask questions to the AI. For this project there is a continuance of the user providing input and the machine gaining that input to provide a specific output for the user who can then choose whether or not they would like to continue their “conversation” with more inputs. This project made me realize that interaction should never be a one way thing. Interaction should be both parties (the human and the machine) providing both inputs and outputs. Hence I wanted to make something that was fun and quirky that would be both useful and decorative. What is significant about my project is that we utilized this concept of the “vending machine” but rather than a user seeking for something from the “vending machine” my “vending machine” is seeking for something from the user. The Candy Shooter’s goal is to collect information from people. To be specific, we aim to gain feedback from people on certain topics. As a reward for providing feedback, the Candy Shooter will reward the person with a candy no matter what choice they decide to pick. My project is intended for event holders and merchants who would like to collect information from their participants or customers. The best way to know whether something is working fine or liked by the public is to gain feedback. Oftentimes people refrain from providing feedback on surveys and questionnaires because they see it as a waste of time However, the appearance of the Candy Shooter and the rewarding feature makes it a good machine to attract and thus gain information. We took inspirations from vending machines in our design to dispense candies but our vending machine is not used to simply sell products. 

Concept and Design

We wanted our model to be people friendly thus we decided very early on that we were going to use fabric to make our project look very cozy and touchable. Our users needed to come in close contact with our project, hence making it furry and friendly was the key to luring potential users. The plant like appearance of the project makes it suitable not only for gaining information but also a great little decoration. After all, who wouldn’t like a furry little plant sitting lying around! We decided to take inspirations from the Plant vs. Zombie character the PeaShooter for the form of the project because it is a very well known game among people of all ages and is a friendly character which makes it very likable. In addition, the feature of shooting out peas from its mouth can be applied to our initial idea of giving the users a reward through the mechanism of a vending machine. The overall structure of the project was to be made out of cardboard as that is the most affordable and available material. Below was our plans for what materials were to be used for which parts:

 

Petals 

  • Inside: plastics
  • Outside: wrapped with cloth 

Leaves 

  • Felt paper

Stalk 

  • Inside: cardboard
  • Outside: wrapped with cloth 

Pot

  • Buy it from taobao

FACE

  • Inside: cardboard
  • Outside: translucent paper or plastic paper

 

Fabrication and Production

Our group’s initial goal was to make the project look like a flower that will “eat” coins from the mouth and store the coins until it is asked to dispense. Below is our initial sketch:

 

However, due to the fact that coin savers are not quite useful nowadays we decided to create a machine that can dispense candy from the flower’s head and the petals will open up when a person is in front of it. The dispensing of the candy will be controlled by the pressing of buttons. Below is the final sketch and design:

After we sketched out the appearance of the project and all the mechanisms we planned to use the first thing we did was to make the plant stalk. At first we hot glued the plant stalk shut, but then we realized that we were going to have to work with the inside of the stalk later so we cut a new piece of cardboard and attached velcro to the two sides so that it was capable of being opened and closed.

 

After the plant stalk was made we cut out 5 flower petals from delivery bags and glued them around the top of the flower stalk. After that, we taped strings of yarn to each flower petal. We then glued inside the plant stalk five bubble tea straws so that we can restrict the movement of the strings and not have it interfere with the vending machine in the middle of the stalk. We used three different diameter of straws and eventually decided that the bubble tea straw was the best for allowing enough space for the string to move can to its original position after being pulled but small enough that we can still fit the vending machine in the middle. 

.     

Moreover, we then built the vending machine mechanism separately through the use of a geared dc motor, cardboard, and some wire taken from fabrication lab. After discussing with Professor Andy, he suggested that a geared dc motor was the best choice for recreating the vending machine mechanism and also provided us with the wheels of a toy car on which we attached the coiled wire. We added a piece of cardboard between the coiled wire and the motor to have some separation and made a little cardboard box to hold the coiled part. We left a side of the box open and attached velcro so that it would be easier for the “refilling” of candy to happen.This step was successfully performed with minimal problems occurring.

 

     

 

I did all of the coding for this project and my partner and I worked together for all of the building process. We’d meet whenever our schedules were both free and worked until dark for at least three days of the week. After the vending machine was coded properly we decided to tackle the ultrasonic sensor and music part. We searched online for how to put together the sensor and coded the music ourselves. After that, we attached the ultrasonic sensor to the flower pot that we had bought.  The inspiration for the vending machine was taken from the video below.

 

https://www.youtube.com/watch?v=IzD6wC8MlQw

 

The hardest part of the process was to make the petals open and close without any effort. After attaching the strings to the petals and covering the petals with the fuzzy material we realized that it was difficult to pull all the petals to the center of the plant so we decided to add anchors to the side of the plant to hold up the petals. However, that method was not effective. We then decided to restrict the shape of the petal so that it is curved. We did so by hot glueing the leftover wire we had from the vending machine to the petals and then shaping them. We then attached the strings to the tip of the petal to make it easier to pull the petals down. 

 

After that we decided that pulling all the petals from one servo was going to be difficult so we glued two of the petals’ strings together and the other three together and decided to use two servos. We then attempted to connected the strings with servos and see if they can close. Unfortunately, with the design of placing the vending machine in the middle of the plant stalk it was difficult for the servo to pull down the strings. We realized that our design of adding the vending machine in the middle made it extremely difficult for the petals to get pulled by the servos. 

Another problem arose during User Testing Session in which we didn’t have time to figure out how to make the vending machine’s motor run simultaneously with the music and ultrasonic sensor due to the delay() function. During the User Testing Session we had two separate sketches, one for music and ultrasonic sensor and one for the geared dc motor but one Arduino board. One of the LA’s suggested to us that we should use multiple Arduino boards since the music had no connection to the functionality of the motor so we connected and coded the music and ultrasonic sensor on one board and the motor on another Arduino board. That really solved the issue having constant music without messing around with the motor’s functionality. We then attached buttons to the project on the Arduino board that controlled the geared dc motor so that every time a button is pressed we can keep count of which buttons were pressed how many times. The button was coded to trigger the rotation of the dc motor to rotate long enough for just one candy to fall at a time. Below are the finalized codes, one for the Arduino board connected to the geared dc motor and the buttons and the other one for the board connected to the sensor and buzzer. Below is also what we had during User Testing. 

 

/*Code for Motor and Buttons

The code for the ultrasonic sensor was adapted from the
tutorial found here:
*/
int dcmotor = 6;
//blue
int button1 = 10;
//yellow
int button2 = 11;
int val1;
int val2 = 0;
int counter1 = 0;
int counter2 = 0;
int start = -1;
void setup() {
pinMode(button1, INPUT);
pinMode(button2, INPUT);
pinMode(dcmotor, OUTPUT);
Serial.begin(9600);
}
void loop() {
val1 = digitalRead(button1);
val2 = digitalRead(button2);
 
if(val1 == 1 || val2 == 1){
start = millis();
digitalWrite(dcmotor, HIGH);
if(val1 == 1){
counter1 ++;
Serial.println("Button 1: ");
Serial.print(counter1);
}
if(val2 == 1){
counter2 ++;
Serial.println("Button 2: ");
Serial.print(counter2);
}
}
if(start != -1 && millis() - start > 2000)
digitalWrite(dcmotor, LOW);
start = -1;
}
 

//Code for Buzzer and Sensor

int buzzer = 11;
//ultrasonic
int trigPin = 3;
int echoPin = 5;
long duration;
int dist;
bool isPerson = true;
int state = 0;
int pauseBetweenNotes;
int melody[] = {
277, 294, 277, 294, 233, 196, 233, 196, 277, 196};
int noteDur [] = {300, 300, 300, 300, 300, 900, 300, 900, 300, 900};
void setup() {
pinMode(buzzer, OUTPUT);
pinMode(trigPin, OUTPUT);
pinMode(echoPin, INPUT);
Serial.begin(9600);
}
void loop() {
if(state == 0){
state0();
}
elseif(state == 1){
state1();
}
}
void state0(){
ultra();
if(isPerson == true){
state = 1;
}
}
void state1(){
ultra();
playPvZ();
if(isPerson == false){
state = 0;
}
 
}
void ultra(){
digitalWrite(trigPin, LOW);
delayMicroseconds(2);
digitalWrite(trigPin, HIGH);
delayMicroseconds(10);
digitalWrite(trigPin, LOW);
duration = pulseIn(echoPin, HIGH);
dist = duration * 0.034 / 2;
Serial.print("Distance: ");
Serial.println(dist);
if(dist < 50 && dist > 0){
isPerson = true;
}
else{
isPerson = false;
}
delay(100);
}
void playPvZ() {
for(int note = 0; note < 10; note++){
int noteDuration = noteDur[note];
tone(buzzer, melody[note], noteDuration);
pauseBetweenNotes = noteDuration * 1.30;
delay(pauseBetweenNotes);
noTone(buzzer);
}
}

Nonetheless, we were running out of time as both my partner and I were busy with other assignments and midterms coming up so we decided to discard the flower opening feature of our project and just change the project’s appearance to the Pea Shooter of Plant vs. Zombie because in that way we can keep all of the features we already have now and just move the vending machine mechanism to become the mouth of the PeaShooter rather than being inside the stalk. We acknowledged that the vending machine aspect was the most important mechanism and the opening and closing flower was just an addition so we decided to discard that mechanism due to limited time. Here is our final product and user testing:

 

 

Conclusion:

The goal of this project was to create a project that would allow interaction between the machine and users. The user would be able to provide input to the machine which would generate an output for the user. The Candy Shooter aligns with this definition of interaction in which the user inputs through the pressing of buttons and the Candy Shooter outputs a reward no matter which button the user chooses. The ultimate goal was to gain feedback and information on a specific topic or questionnaire through the user’s interaction with the machine and it has been achieved by our final product. The audience was able to answer to the question provided and the machine was able to capture the number of times each choice was chosen. As a reward for their effort to provide an input, the machine would generate a candy from its mouth for the user. In addition, interaction also happens between the user and our project when they come into close contact. The Candy Shooter will play a little music for the audience when it senses through the ultrasonic sensor. Unfortunately, we are unable to have the project produce more outcomes based on what input is provided, rather the output is quite static in which we give only candies to the users who answers the question. If more time were given I’d really like to do more reactions of the project with the ultrasonic sensor and perhaps allow a different reward to be given based on what answer was provided. In addition, I’d figure out how to have the flower petals open and close accordingly. There were many other setbacks along the way of constructing the different mechanisms but we managed to overcome most of them through researching online and asking Professors and Fellows. The making of this project really ignited my inner creativity whether it was thinking and designing the mechanisms or choosing the materials to use.  I gained more experience and knowledge with the Arduino board and building circuit. It is still a shame that we couldn’t stick to our initial plan due to limited time but overall, this was a successful project and I am proud of what we’ve done. 

 

 

Project A. Project Proposal: Waves

Description:

The subject of my project is ocean waves.  I plan to recreate the scene of ocean waves washing upon a sandy shore and sea foams colliding with each other. In my work the waves will keep washing on the shore and moving back and forth, leaving sea foams when they leave the shore. The interaction will occur when the user presses the mouse on a specific spot of the canvas the waves will break and come back together, mimicking the reaction of waves when someone stomps on it. I am debating between using just circles to recreate the whole wave or a combination of  lines and/or vectors. It will be decided when I try both options. The sea foams will be made of circles. When the mouse is pressed, the lines will be coded to move away from the area that the mouse landed on and join back together after some time. This project is a demonstration of humanity’s interaction and affect on natural phenomenon’s in the world. 

Drafts:

 

Link to Google Slides:

https://docs.google.com/presentation/d/1SqM8sy6BF_us5dCTv8qDurSElV_g7Ig6epCw2ge0gXg/edit#slide=id.g2004b50afbe_0_0