UX Final Portfolio | Amber Wang

Project: 3D Cake Lab

Project contributed by: Amber Wang and Theresa Lin

Instructor: Azure Qian

Motivation and Brainstorm

In today’s world, customization and personalization have become a heated trend. Not only shoes, clothes and bag designs allow customization option, food industry has widely accepted this new idea as well. During my study away year at NYU New York, I had many good experiences customizing my own salad or pizza in my everyday life. As a dessert lover, I have long wished to customize my own coffee and cake. At the same time, I have become obsessed with 3D technology since my second IMA class in my sophomore year. I have taken two more IMA classes related to 3D technology in New York. I not only had a better idea of the technology as well as the information-sharing online community related to 3D, but also was able to envision the broad application of the technology in all different industries. The classes enabled me to realize the possible combination of my two interests to focus on the implementation of the technology in food industry. My initial idea was to create the customizable latte art with the milk foam on the top of the coffee. During my research, I found an Israel company called Ripples has already made a breakthrough in this field. However, the coffee art only consist 2D design, while a cake could naturally provide a 3D design base. As a business major student, I have continued to push forward the 3D cake idea in the Entrepreneurship class at NYU Stern, and my business plan was selected by the judge investors among other 50 peer students.

The idea I have in mind is to open a 3D cake design bakery that allows customers to customize their cakes using 3D modeling apps on mobile phones and tablets. The bakery allows online ordering as well as in-store interactive experiences. One major form would be a 3D modeling App that is very user-friendly. The interface would be similar to Tinkercad website. The users could simply use their fingers to drag the basic 3D objects (cubes, balls, characters, texts ,etc.) to the working surface (the 3D cake model), scale them and change different colors and shapes. They could also use these basic shapes to design their own characters. The bakery would have an interactive open space for customers to actually see their cakes being printed from the 3D printers. There would also be an interactive projected screen for customers to upload their own designs and vote for the best design.

For this course, I want to mainly focus on the user experience design of the mobile App for 3D cake customization design. The brainstorm of the idea is demonstrated as follows:

Story Board

 

It was a beautiful weekend afternoon. Three best friends Amy, Lisa and Catherine were walking aimlessly on the street. Since they were the coolest girls at school, they decided to go to some really cool place to spend their afternoon. Somewhere they could take very attractive pictures and post on Instagram.

 

Lisa recently heard that a new bakery opened nearby. They decided to give it a try. “3D Cake Lab…?” They were attracted to the modern design of the cafe. There were no waiters to serve them. Rather they had a big iPad in front of them.

On the interface, there were all different 3D shapes on the right side of the screen. Catherine dragged one ball and two pyramids to create a shape of cat. Lisa and Amy also joined the design. They changed the color of the cake to pink and typed “Happy Day” on the surface of the cake. After pressing the “submit” button, they received their order number. 15 minutes later, the iPad vibrated. They were then directed to a 3D printing machine. They couldn’t believe their eyes. What they have designed in the App was actually being printed out as a real cake!!!!!!

They brought their cute cake back to the table. They celebrated their friendship. They took a picture of the cake a selfie, and then posted them on the Instagram. In just 30 minutes, they have received 12 million likes! What an amazing day!

 

User Research

In order to get a better sense of our customers and end users of 3d cake design application, we have sent out surveys through WeChat mini program Wenjuanxing. We have in total received 44 responses. The result of the survey is as follows:

The age range of the survey participants was from 10 to 43 with the average age 21 years old. Based on the survey, we got a lot of helpful information:

  1. Half of the participants are interested in design/DIY, art, technology, and digital products. They are the target group that has higher possibility for using our product.
  2. It shows that most people purchase cake on special date such as birthday or anniversary to someone they really care, like their parents, friends or lovers, which indicates in some sense that the customization may be a good option for those people in these occasions.
  3. Top three considerations for people when they purchase a cake are taste/flavor, design and price. This result help us position our product to provide customers with choosable flavors, self design and reasonable price. It also support our initial hypothesis that design really matters in bakery sector.
  4. We are glad to see that more than 70% of people are willing to pay extra fee for the customization option with average 83RMB premium.

In addition to the survey, we have also conducted interviews with people about this application and they all show pure interests in our product. The interviews help us consolidate our belief that this product is actually helpful for most people.

Persona and Scenarios

Based on the survey results we got, we have designed 4 personas with the heroes’ scenarios of using our product. Overview of 2 personas are as follows: (please view my previous post for all 4 personas)

Michael Sun

It is almost their 5th anniversary. Michael has been searching around for the best place to celebrate their anniversary. Michael is such a crazy worker that he hardly has time left for his family. He really needs an amazing date to cheer his beautiful wife up. Money is not a big problem for Michael, a banker. He wants the date to be the combination of his interests in technology and his wife’s love in design. Then 3D cake lab becomes his optimal choice.

Michael and his wife Susan walked into the mysterious modern cafe called “3D Cake Lab”. They were assigned to a beautifully decorated couch with an iPad on it. The interface asked them to “Start Your Design” with a simple click. Then they were led to choose their cake size, layers and flavor. “6 inch should be enough… honey you like chocolate, lets choose the chocolate base flavor.” After they were done, a magic 3D modeling design interface appeared. There were tons of different basic 3D shape on the right side bar. Susan was very excited about the designing process. She expertly dragged a ball shape and two pyramids to create a shape of cat. She happily played with the different characters, colors, and texts. “Happy Anniversary!” Michael added the text on the top of the cake with a beautiful font and a rosy color. Then they were asked whether to upload their design to the big screen in the cafe. Susan clicked “YES!”. “I want to share this beautiful moment with everyone here!” They got an order number and was told by the interface there were only 3 more orders before them. After 15 minutes, the iPad vibrated and made sounds. They were instructed to go to machine No. 12. Michael couldn’t wait to show Susan the most cutting-edge 3D cake printer. They ran to the machine and saw the cake being printed out. “It is so amazing!This is the best anniversary I have ever had! I love you Michael!” Susan said.

Jessica Lai
Jessica Lai loves to hang out with her friends at cafes especially when they have to study. She loves exploring different kinds of dessert and beverages while at cafes. One day, while she was walking around the city looking for a new cafe with her friends, they stumbled upon the “3D Cake Lab.” The name peaked their curiosity and they went in to have a look. When they were shown to their table, they were surprised that they could design their own cake. They each picked up an iPad with the screen “Start Design.” They each chose a single serving size cake as well as cake flavor and icing then immediately began to design. They were surprised by how simple the interface was and how easy it made the designing process. They searched for pictures of their favorite character and attempted to design it on the cake. When they were done, they were given a choice to upload their design. Jessica felt confident in her design so she uploaded hers while some of her other friends didn’t. Then they chose the print now option and each received a number. When the cake was about to start printing, the iPad buzzed and displayed the number machine. They all hurry to the machine and watch in awe as the design is 3D printed on the cake. When it’s done, they all pull out their phones and start taking pictures for Instagram. Jessica captions her post, “Omg you guys HAVE to come here to design your own cake if you haven’t yet!!! It’s 3D printed!”
Jessica and her friends feel like it’s a waste eating their masterpiece, but they take a bite and decide that they’re definitely coming back again.

User Flow and Site Map

As is shown in the user flow, we want the customer to choose their cake size and layers first and then direct them to the main design interface. When the user finish their design, they will have the option to upload their design into our global design library or rather directly go to the payment page. In the payment page, they would choose to either deliver the cake to their home, pick up in store in a future time, or print it out now.

Site map:

 

Business Model

Based on Prof. Azure Qian’s feedback on our project, we have further brainstormed on the business model of the product. Since the major problem of this product may be the customer retention problem. It is a common concern that people may only buy cake once or twice a year. In order to make the business have continuous profits, we have added additional features.

  1. As is discussed before, users have the option to upload their design to our global library. At the same time, users with less or little background in design and art can easily browse our online design library to choose others’ designs. Once a person’s design is used by others, he or she would get noticed in our App and gain membership points. We would also announce the winner of our monthly best design and give out coupons for buying cake or having afternoon tea in our 3D Cake Lab cafe. By doing this, users with no cake-buying need may also use our Apps during free time and upload for the chance to win our coupons. They would also be stimulated to buy our cake and experience our cafe.
  2. One important component of the our business apart from the 3D cake design App is our physical store – the cafe. Our revenue would not only come from customers who buy birthday or anniversary cakes, but also customers who spend their leisure time with friends and family in our cafe with interesting human-machine interactions. We would further provide smaller-size dessert cake for those customers to eat while drinking their afternoon tea or coffee.
  3. We would take advantage of today’s online platform and have social media influencers to experience and advertise our product.
  4. *Additional marketing and financial analysis  (Cited from my previous business class):

 

Wireframe

First Version

We designed our first version wireframes using pencil and paper. We used Marvel to make these wireframes interactive and did our first round usability test. Based on the result of the usability test, we designed our second/final version using Adobe XD.

 

Final Version

 

 

Mockups and LOGO 

First Version

To align with the topic of cake, we decided to use blue and pink as our main and secondary colors. We chose our two colors from color-hex.com/color-palettes/. The hex values are #D6FCFF and #ff8080. We also used Piktochart to edit our interface background. We added the effect of colorful short lines because it resembles the toppings on a cake.

However, during the in-class discussion with professor Azure Qian and another designer, they pointed out the problem with the visibility of our background color. According to their experience, App design usually use colors with higher saturation. The blue color is definitely too light as our primary color. Besides, the gray bar doesn’t have that clear contrast with he background, which makes the text not clearly visible. Taking all these feedbacks, we have designed our second version mockup.

Second Version (Final Version)

We decided to go with the pink color as our primary color for the cake theme and searched the color palette on Dribbble.

The final version: primary color pink #f25469, secondary color yellow #ffe098, minor color gray #EAEAEA

LOGO design

The logo is a 3-layer cakes with a half donut. It resembles the character 3D.

Usability Test

Some really important feedback were given through user testing especially on our first prototype. In our first prototype, the option to choose the cake flavor and frosting was at the beginning and each in a separate page. Some users were concerned that towards the end if they wanted to change the cake flavor or frosting, they’d have to go all the way back to the beginning and lose progress on other choices. On the design interface, some users also preferred to have already finished designs as options to drag and drop on the cake rather than design the entire cake from scratch. Users also pointed out that there was no payment page on our first prototype. We then incorporated a payment page and the delivery section on one. Overall users said our app was generally easy to understand and navigate.

We did another round of user testing on our second prototype. We have received many feedbacks and good suggestions for our 3D design interface. A common impression of this interface to users is that it is childish cartoonish. They could immediately be indicated that they were supposed to tap and dragged the basic 3D shapes to the interface. However, some have concern that they couldn’t properly position the shapes on the cake. And it would be better if there’s an auto-filling options, like cube holes on different places of the cake for user to put in the shapes they chose, which could give them a better proportion and position which is aesthetic. Some also suggests to change the interface to be more realistic, like a real cake. Users have the concern that a cartoonish interface may be misleading and they want to know how the real cake look like. They suggest that the 3D shapes on the tool bars should also look like realistic cake components. Another suggestion come from the users is to have a search bar on the top of the 3D shapes tool bar for users to type in the shapes they want. eg. flowers, dogs, etc.

Highlight of usability test:

Final Demo

 

Documented by Amber Wang

Special thanks to my instructor Prof. Azure Qian and my partner Theresa Lin.

 

 

UX Design| Amber Wang & Theresa Lin| Wireframe, Mockups and Usability Test

Project: 3D Cake Lab

Instructor: Azure Qian

Documented by: Amber Wang and Theresa Lin

1. Wireframe Update

After the first draft version of wireframe using pencil and paper, this week, we started to design the second version of our wireframe using the software Adobe XD. We have made changes to our previous user flow. The latest version looks as follows:

2. Mockups

To align with the topic of cake, we decided to use blue and pink as our main and secondary colors. We chose our two colors from color-hex.com/color-palettes/. The hex values are #D6FCFF and #ff8080. We also used Piktochart to edit our interface background. We added the effect of colorful short lines because it resembles the toppings on a cake. We also made our main design interface as follows.

                   

3. Usability Test

Some really important feedback were given through user testing especially on our first prototype. In our first prototype, the option to choose the cake flavor and frosting was at the beginning and each in a separate page. Some users were concerned that towards the end if they wanted to change the cake flavor or frosting, they’d have to go all the way back to the beginning and lose progress on other choices. On the design interface, some users also preferred to have already finished designs as options to drag and drop on the cake rather than design the entire cake from scratch. Users also pointed out that there was no payment page on our first prototype. We then incorporated a payment page and the delivery section on one. Overall users said our app was generally easy to understand and navigate.

We did another round of user testing on our second prototype. We have received many feedbacks and good suggestions for our 3D design interface. A common impression of this interface to users is that it is childish cartoonish. They could immediately be indicated that they were supposed to tap and dragged the basic 3D shapes to the interface. However, some have concern that they couldn’t properly position the shapes on the cake. And it would be better if there’s an auto-filling options, like cube holes on different places of the cake for user to put in the shapes they chose, which could give them a better proportion and position which is aesthetic. Some also suggests to change the interface to be more realistic, like a real cake. Users have the concern that a cartoonish interface may be misleading and they want to know how the real cake look like. They suggest that the 3D shapes on the tool bars should also look like realistic cake components. Another suggestion come from the users is to have a search bar on the top of the 3D shapes tool bar for users to type in the shapes they want. eg. flowers, dogs, etc.

This is a demo video of one usability test we conducted.

first half second half

UX Design| Amber Wang & Theresa Lin| Scenario and Persona

Class: User Experience Design

Instructor: Azure Qian

Documented by: Amber Wang and Theresa Lin

Zoe Richard

Zoe’s been working hard part time for the past month because she’s been trying to save up for a cake for her grandma. Since her college is too far from her grandma’s house, she can’t visit her grandma. Unfortunately, her school doesn’t have a break on her grandma’s birthday. However, Zoe still wanted to get her grandma a cake. Originally she wanted to just buy a pre-designed cake and have it delivered to her grandma’s house but she happen to come across a cake design of a mahjong piece on Instagram. Remembering that her grandma loves to play mahjong, she decided she wanted a design of that. Unfortunately after looking through several bakeries, she either couldn’t find a mahjong design or the ones that had it didn’t look so great. Suddenly she came across the “3D Cake Lab” website. After reading their ‘About’ page, Zoe was excited about being able to design her own. She looked at the price and it was reasonable for a custom cake, especially one she could design on her own. Zoe went through the design process on the website and was also delighted that they had a delivery option. After she finished designing the cake, she selected the delivery option and inputted her grandma’s address. She could also select which day and what time to have it delivered. On the day of her grandma’s birthday. She received a call from her grandma just several minutes after the cake was set to be delivered. Her grandma sounded really excited and thanked Zoe for the surprise cake. She also told her how much she loved the design and was surprised at how bakeries offer this kind of design. Zoe then told her grandma all about the 3D Cake Lab.

Jessica Lai

Jessica Lai loves to hang out with her friends at cafes especially when they have to study. She loves exploring different kinds of dessert and beverages while at cafes. One day, while she was walking around the city looking for a new cafe with her friends, they stumbled upon the “3D Cake Lab.” The name peaked their curiosity and they went in to have a look. When they were shown to their table, they were surprised that they could design their own cake. They each picked up an iPad with the screen “Start Design.” They each chose a single serving size cake as well as cake flavor and icing then immediately began to design. They were surprised by how simple the interface was and how easy it made the designing process. They searched for pictures of their favorite character and attempted to design it on the cake. When they were done, they were given a choice to upload their design. Jessica felt confident in her design so she uploaded hers while some of her other friends didn’t. Then they chose the print now option and each received a number. When the cake was about to start printing, the iPad buzzed and displayed the number machine. They all hurry to the machine and watch in awe as the design is 3D printed on the cake. When it’s done, they all pull out their phones and start taking pictures for Instagram. Jessica captions her post, “Omg you guys HAVE to come here to design your own cake if you haven’t yet!!! It’s 3D printed!”
Jessica and her friends feel like it’s a waste eating their masterpiece, but they take a bite and decide that they’re definitely coming back again.

 

 

Michael Sun

It is almost their 5th anniversary. Michael has been searching around for the best place to celebrate their anniversary. Michael is such a crazy worker that he hardly has time left for his family. He really needs an amazing date to cheer his beautiful wife up. Money is not a big problem for Michael, a banker. He wants the date to be the combination of his interests in technology and his wife’s love in design. Then 3D cake lab becomes his optimal choice.

Michael and his wife Susan walked into the mysterious modern cafe called “3D Cake Lab”. They were assigned to a beautifully decorated couch with an iPad on it. The interface asked them to “Start Your Design” with a simple click. Then they were led to choose their cake size, layers and flavor. “6 inch should be enough… honey you like chocolate, lets choose the chocolate base flavor.” After they were done, a magic 3D modeling design interface appeared. There were tons of different basic 3D shape on the right side bar. Susan was very excited about the designing process. She expertly dragged a ball shape and two pyramids to create a shape of cat. She happily played with the different characters, colors, and texts. “Happy Anniversary!” Michael added the text on the top of the cake with a beautiful font and a rosy color. Then they were asked whether to upload their design to the big screen in the cafe. Susan clicked “YES!”. “I want to share this beautiful moment with everyone here!” They got an order number and was told by the interface there were only 3 more orders before them. After 15 minutes, the iPad vibrated and made sounds. They were instructed to go to machine No. 12. Michael couldn’t wait to show Susan the most cutting-edge 3D cake printer. They ran to the machine and saw the cake being printed out. “It is so amazing!This is the best anniversary I have ever had! I love you Michael!” Susan said.

 

Domenico Russo

It was Domenico’s third year in China. He still keeps the weekly habit of exploring the city of Shanghai. He reads art magazines, follows the most trendy events in Shanghai. This week, he surprisingly found that two of his most favorite blogger all recommended a cafe called “3D cake lab”. He became very interested. After reading different posts and reviews about the cafe, he found it align perfectly with his art affection. “I should find someone to go with me…” Domenico thought this could be a perfect chance for him to show his crush on his classmate, a Chinese girl called Fangfang.

Like most Italian man, Domenico is very romantic and has a born taste of art. He had secretly drew a portrait of Fangfang combining Italian art and Chinese traditional ink painting. As usual, he asked Fangfang out for coffee using the excuse of studying. They passed by the “3D cake lab” and walked in. Unlike other customers, Domenico directly walked to the front desk and showed a code in his mobile App, and then they were directed to a 3D printing machine. “I thought we are coming for a coffee and then study, aren’t we,” Fangfang asked. “Coffee would be too bitter for a girl like you. Why don’t we have some dessert as sweet as you?” Fangfang blushed. However, what made Fangfang surprised was that she saw a painting of her being printed out on the top of the cake. It turned out that Domenico has finished the cake design three days ago and selected the pick-up date. He found an amazing function of the design interface to upload a picture or pre-made design on the surface of the cake. He uploaded his favorite painting work of Fangfang and scaled it on top of the cake.

“Domenico, you really surprised me! This is like a miracle!” Fangfang said. “Meeting you was already a miracle for me.” Domenico smiled. “We should come back often!” Fangfang laughed.

 

UX DESIGN/ 3d Cake Lab

Class: User Experience Design

Instructor: Azure Qian

Documented by: Amber Wang

Given the fact that 3D printing technology has become a huge hit in nowadays world and the implementation of 3D tech in food industry has achieved unprecedented development, the idea I have in mind is to open a 3D cake design bakery that allows customers to customize their cakes using 3D modeling apps on mobile phones and tablets. The bakery allows online ordering as well as in-store interactive experiences. One major form would be a 3D modeling App that is very user-friendly. The interface would be similar to Tinkercad website. The users could simply use their fingers to drag the basic 3D objects (cubes, balls, characters, texts ,etc.) to the working surface (the 3D cake model), scale them and change different colors and shapes. They could also use these basic shapes to design their own characters. The bakery would have an interactive open space for customers to actually see their cakes being printed from the 3D printers. There would also be an interactive projected screen for customers to upload their own designs and vote for the best design.

Please see the following demo of the 3D food printing technology:

The idea board for the project is as follows:

The concept story board:

It was a beautiful weekend afternoon. Three best friends Amy, Lisa and Catherine were walking aimlessly on the street. Since they were the coolest girls at school, they decided to go to some really cool place to spend their afternoon. Somewhere they could take very attractive pictures and post on Instagram.

Lisa recently heard that a new bakery opened nearby. They decided to give it a try. “3D Cake Lab…?” There were no waiters to serve them. Rather they had a big iPad in front of them.

On the interface, there were all different 3D shapes on the right side of the screen. Catherine dragged one ball and two pyramids to create a shape of cat. Lisa and Amy also joined the design. They changed the color of the cake to pink and typed “Happy Day” on the surface of the cake. After pressing the “submit” button, they received their order number. They were then directed to a 3D printing machine. They couldn’t believe their eyes. What they have designed in the App was actually being printed out as a real cake!!!!!!

They brought their cute cake back to the table. They celebrated their friendship. They took a picture of the cake a selfie, and then posted them on the Instagram. In just 30 minutes, they have received 123456789 likes! What an amazing day!

Final Project Documentation by Amber Wang (Marcela)

Final Project Beauty & the Beast Documentation

Instructor: Marcela Godoy

Produced by Amber Wang and Esme Wang

Documented by Amber Wang

Date: May 16, 2017

  1. The idea of our project

Beauty and the Beast is the final Interaction Lab project made by Esme and I. It is a physically interactive game, competing with the computer. Basically how it works is that the player acts as the character of “the Beast” and is supposed to defend “the Beauty” against waves of bats (the enemy) in certain time. As is shown in the following map, when the game starts, there will be bats coming from the five entrances and moving along the path to approach the castle and “the Beauty”. The player can also move along the path to fight against the bats. The rule is that the bats will not hurt “the Beast” and you lose only when there’s one bat get into the castle. If you can survive certain time, you will win.

map  IMG_1010

It is designed as an entertaining game. The users can be any physically healthy people who search for fun! Besides, the game is especially suitable for those “indoorsman” and “indoorswoman”, which allows them to have enough exercise and entertainment playing at home. The special design of our project is that it is not just a typical computer game, instead, it involves a series of physical movements of the user to play in an open space. As you can see, we borrowed the idea from Dance Dance Revolution moving pad, and designed our four stepping pads to control the player’s movement. Likewise, our game also requires players’ quick response, because there’re five paths on the map and you have to keep an eye on either of them and move quickly enough to stop the bats from getting closer to the castle. Besides the foot movements, the player will also wear a claw glove, with which he/she has to wave to scratch the enemies. The inspiration also comes from our midterm project Dodgeplane, which motivates us to design a more physically engaged game with a better interaction.

IMG_0953IMG_0951

2.  Early Planning and Preparations

After we decided the main idea of our final project and wrote the proposal about three weeks ago, we started our early preparations. We divided the task into two parts and work on it simultaneously. As for me, I mainly focus on the graphic design of our project.

Because we had made a clear and concrete story and character setting in our proposal, so  I need to design the features of the game accordingly. The first step and also the most important one is to design a game map. As we mentioned in our proposal, we wanted the enemies to come from different directions and approach the castle, so I need to indicate the path in the map. Our first sketch, as you can see below, has quite curved paths and the main paths are connected to each other through certain small paths. However, we found it of too much difficulty to write the coordinate equations of the paths, as well as not clearly enough for the player to move along the paths. (For example, if the path has an inclined angle, the user has to step on both UP and Left button to move up, which is quite troublesome.) Therefore, we changed the paths to be horizontally and vertically placed. When I actually started to frame the map, I had another struggling, which is the viewing angle of the game. Especially after learning 3d modelling in Tinkercad, I found it of vital importance to effectively demonstrate a three dimension object in a two dimension screen. I first though of the top view, like our midterm project, which can clearly show the setup of the map. However, then my player and other characters will only be seen as the top of their heads, which is not so lively and also hard to find corresponding picture materials. Then I think of using the first person view of the player, like Temple Run and Counter-Strike, but again it affects the game experience because the players are supposed to view every path at the same time, and the first person view will only allow them see the path that they are on. After researches and comparisons, I finally decided to borrow from the Pokemon video game and design a view that can both show the paths and objects’ shapes.

The designing process is quite painful, because before this I didn’t have too many Photoshop background and only knew very basic tools in Photoshop. And I understood if I drew out the map, it will take me too much time and to be host, I am not that good at drawing. Luckily, during my long-time research on game materials in Google and Pinterest, I found out great graphic materials which could be used in my design. I used the keywords including “Pokemon”, “RPG Maker”, “game map”, “pixel arts” and “tilesets”, and found incredible game patterns. I then also found out that most of the game maps, like Pokemon, are actually made up of with tiled squares, and each square has its pattern. I successfully downloaded two images which contained a great many pattern units, like trees, grass, ground tiles, and buildings, etc. I then copied the two images for many times and cropped them into the patterns that I needed. In Photoshop, I first tried to copy and paste those small units and tile them one by one, but it took too much effort and felt so stupid. So I watched several Youtube tutorials and learned to use “Define Pattern” and “Fill—Pattern” to quickly fill the whole canvas with the unit pattern I need. I also used the same tool to design the road. I just needed to simply select the rectangle that I wanted to pave the path and fill them with the ground tile units. The whole design process was quite complex and I spent almost a week to finally accomplish it. Especially for the decorations of the map, I really did it tile by tile. As for the trees and the snow on trees, I didn’t find an effective way to do them in group, so I indeed “planted” and adjusted the trees one by one and added the snow to them. Also for the paths you see now is actually a revised final version of the map, and before we had discussed different ways of paving them and did it several times until deciding this way to best improve user experiences. I have used more than a hundred layers to finally set up the whole map. It is exhausting, but makes me proud!

Screen Shot 2017-05-07 at 3.37.46 PM

3. Working Process

After finishing the map design, I later worked on the character design and game effects. This involves a lot of searching as well. During my search, I found that a lot of games have the character images in different views, so when the character is moving, the image changes and it feels like the character is actually turning around. It was a great inspiration for me so I decided to design our game with a similar effect instead of just plane view like our midterm project was. After finding appropriate character images, I started to code the effect in Processing. Like what we did in midterm project, I first designed the version based on the keyboards. As is shown in the code, I had different images with different states of the character and stored them in different PImage variables. I used “Class” to code it. I also created three more variables to be the current image, x, and y coordinate of the image. I set an initial display image, which is m1 and displayed it in an initial position. Then with the different “keyPressed”, the current image changed to the corresponding view of the character and its x and y position changed accordingly. Similarly, I Photoshopped four different images of a claw scratch and put the corresponding image right in front of the character when the “attack” key is pressed. It is a very lively game effect, which looks like the character is actually turning around, moving and attacking.

Screen Shot 2017-05-12 at 3.41.10 PM Screen Shot 2017-05-21 at 10.04.16 AM Screen Shot 2017-05-21 at 10.05.58 AM

While I was working on the graphic design and game effects, my partner Esme was working on the game principle design in Processing. It was a quite new realm for her because it requires the object to move only within the designed path. It means even though the player pressed the moving buttons, if they were at the edge of the path, they could not move out of it. She made a lot of effort on this and consulted many experts, and finally made it work by using Collision. Moon helped her with a smart idea of identifying colors. So basically she put another layer of map composed of barely pure color, and let the object moves only when it is on the certain color. The “hidden” map looks as follows. If you want to know more about how the things work, please refer to Esme Wang’s documentation post.

mapWall3

She also worked on the time count and other theoretical game design like: setting the enemies coming from every road and moving randomly; the bats will only disappear when the player is close enough to them and press the attack key; the game will over when either the time is out or one bat is close enough to the castle, etc.

At the same time, I started to work on the Arduino circuits and physical mechanism part of our project. I first looked into the “attack” interaction. While the most common way of attacking in most games is to press a button, this time, I want to make it different and also more closely related to the game. As for “the Beast” in the game attacks the enemies by scratching, then I thought of letting the players do the same scratching action. As mentioned in our proposals, we thought of asking the players to wear the claw-like glove and wave the glove to trigger the “attack” function. So I decided to use 3 axis accelerometer as the sensor. As is shown in the sample code of the accelerometer, this sensor can actually give out the x, y, z coordinates of a point as well as its acceleration in the three axises. With the help of Marcela, I then figured out to use only the acceleration on X axis to be my input variable. And after reading the values in serial monitor, I found the  value domain smaller than -1.5 and bigger than 1.5 is the best indicator of a effective “attack”. So I set the if statement that if the former two conditions happen, Arduino will print “1”.

The whole process of setting the sensor went through well, however, the most challenging part is the stepping pad. At very beginning, I thought about several approaches to make the pads, by either using pressure sensors or carpet, but I then  gave up them and found a better way by making our own “buttons”. Actually for the midterm project, Rudy had mentioned to me about making self-designed buttons, but I always felt it too hard and troublesome and found another alternative with already-built buttons. This time, when I was discussing with Marcela about using pressure sensors, she also suggested me building buttons by myself. So I decided to take the challenge. After figuring out the principal of a button mechanism, things become easier, and all I need to do is to find fitting materials.

The basic mechanism of our self-built button is composed of two boards and one layer of foam. At first I was trying to use many layers of fabric to be the “soft isolation layer” of the button, but when I found the foam materials in the equipment room,  I settled on it all at once. So what I did was to pave the two boards with the conductive tape, and dug out a whole in the foam layer. So when the board are pressed, the foam layer will be compressed and then the two conductive layers will be connected. The real mechanism looks as follows:

IMG_0928 IMG_0927

To better polish our stepping board as well as apply to our game them, I also used Illustrator to design the footprints and laser cut them on the wooden boards.

IMG_0865 IMG_0975

(Actually the first version of our stepping board didn’t work so sensitively after the testing because the foam hole was too small. I later took part the boards and dug a much bigger hole LOL)

Then Esme helped me solder each conductive side of the board to wires and I connected them to my Arduino circuits. The circuits are the basic button circuits with combination of resistors, and connecting to Arduino’s digital pins to read the values. I then wrote for the serial communications between Arduino and Processing by using String to send multiple variables. (For a more clear explanation of how to use String to send multiple variables from Arduino to Processing, please refer to my midterm project Dodgeplan documentation post.) After further combinations with Esme’s codes and some adjustments, our project was finally DONE!

4. The Video Demo

5. Reflections and Improvements

I have to say this project is my most favourite project so far and I have to give great thanks to my best partner Esme, and also IMA fellows Marcela, Jiwon, Moon for their help. It is more than exciting to have the project finished in time and also meet all our proposals and expectations! The most valuable lesson I learned from this project is that I have to take the risk and dare to think big. Just like how I tried to build my first self-made electronic component instead of just using the ready-made. Also, because we made it clear about our complex game design, it motivated me to keep polishing the whole graphic design as well as detailed game effects.

The improvement we can further make to this game is that we can add a ranking system. Right now the idea is wether the player can win or lose in certain time, (usually 30 -45 seconds), however, in the future, we can change it to record the longest time the player can stay alive (keep the bats away from the castle) and give them an updated ranking each time they play.

 

 

PImage map;
PImage mapWall3;
PImage m1, m2, m3, m4;
PImage c1, c2, c3, c4;
PImage monster;
PImage g;
PImage win;
PImage lose;
Beastprince p;
import processing.serial.*;
String myString = null;
int NUM_OF_VALUES = 5; 
Serial myPort;
int[] potValues; 
import processing.sound.*;
SoundFile soundfile;
float timeLeft;
float timeTotal;
int lastTime = 0;
int delta = 0;
ArrayList<Ball> balls = new ArrayList<Ball>();
float x1; //
float y1;//Beast
float x2;
float y2;
//future position
float radius = 5;
float rectx1 = 0;
float recty1 = 0;
float rectw1 = 150;
float recth1 = 300;

float rectx2 = 0;
float recty2 = 280;
float rectw2 = 40;
float recth2 = 520;

float rectx3 = 0;
float recty3 = 0;
float rectw3 = 800;
float recth3 = 50;

float rectx4 = 720;
float recty4 = 0;
float rectw4 = 100;
float recth4 = 600;

float rectx5 = 300;
float recty5 = 0;
float rectw5 = 200;
float recth5 = 200;

float rectx6 = 200;
float recty6 = 100;
float rectw6 = 150;
float recth6 = 300;

float rectx7 = 80;
float recty7 = 350;
float rectw7 = 70;
float recth7 = 400;

float rectx8 = 150;
float recty8 = 450;
float rectw8 = 120;
float recth8 = 300;

float rectx9 = 320;
float recty9 = 450;
float rectw9 = 120;
float recth9 = 300;

float rectx10 = 400;
float recty10 = 300;
float rectw10 = 150;
float recth10 = 90;

float rectx11 = 480;
float recty11 = 400;
float rectw11 = 70;
float recth11 = 360;

float rectx12 = 600;
float recty12 = 400;
float rectw12 = 75;
float recth12 = 360;

float rectx13 = 600;
float recty13 = 100;
float rectw13 = 75;
float recth13 = 250;

float rectx14 = 400;
float recty14 = 100;
float rectw14 = 160;
float recth14 = 150;

float rectx15 = 680;
float recty15 = 650;
float rectw15 = 160;
float recth15 = 150;

int frameC = 0;

boolean gameover = false;
boolean displayLose = false;

void setup() {
   setupSerial();
  size(800, 700);
  timeTotal = timeLeft = 45;
  mapWall3 = loadImage("mapWall3.png");
  map = loadImage("map.png");
  m1 = loadImage("move1.png");
  m2 = loadImage("move2.png");
  m3 = loadImage("move3.png");
  m4 = loadImage("move4.png");
  c1 = loadImage("claw1.png");
  c2 = loadImage("claw2.png");
  c3 = loadImage("claw3.png");
  c4 = loadImage("claw4.png");
  g = loadImage("prince1.png");
  monster = loadImage("bad.png");
  win = loadImage("win.png");
  lose = loadImage("lose.jpg");
  p = new Beastprince();
  soundfile = new SoundFile(this, "Martin Garrix - Oops.mp3");
  soundfile.loop();
}

void draw() {
  background(0);
  updateSerial();
  rect(rectx1, recty1, rectw1, recth1);
  rect(rectx2, recty2, rectw2, recth2);
  rect(rectx3, recty3, rectw3, recth3);
  rect(rectx4, recty4, rectw4, recth4);
  rect(rectx5, recty5, rectw5, recth5);
  rect(rectx6, recty6, rectw6, recth6);
  rect(rectx7, recty7, rectw7, recth7);
  rect(rectx8, recty8, rectw8, recth8);
  rect(rectx9, recty9, rectw9, recth9);
  rect(rectx10, recty10, rectw10, recth10);
  rect(rectx11, recty11, rectw11, recth11);
  rect(rectx12, recty12, rectw12, recth12);
  rect(rectx13, recty13, rectw13, recth13);
  rect(rectx14, recty14, rectw14, recth14);
  rect(rectx15, recty15, rectw15, recth15);
  image(mapWall3, 0, 0, 800, 800);
  
  image(map, 0, 0, 800, 800);
  //image(mapWall3, 0, 0, 800, 800);
  image(g, 350, 135, 55, 55);
  //time
  fill(0);
  textSize(40);      
  delta = millis() - lastTime; // time difference from last to prev frame
  timeLeft = timeLeft - (delta / 1000.0); // milli to seconds
  lastTime = millis();
  if (timeLeft < 0) timeLeft = 0;
  text(round(timeLeft), 50, 50);
  //println("Time Left: ", timeLeft);

  // rect border
  /*
  rect(rectx1, recty1, rectw1, recth1);
   rect(rectx2, recty2, rectw2, recth2);
   rect(rectx3, recty3, rectw3, recth3);
   rect(rectx4, recty4, rectw4, recth4);
   rect(rectx5, recty5, rectw5, recth5);
   rect(rectx6, recty6, rectw6, recth6);
   rect(rectx7, recty7, rectw7, recth7);
   rect(rectx8, recty8, rectw8, recth8);
   rect(rectx9, recty9, rectw9, recth9);
   rect(rectx10, recty10, rectw10, recth10);
   rect(rectx11, recty11, rectw11, recth11);
   rect(rectx12, recty12, rectw12, recth12);
   rect(rectx13, recty13, rectw13, recth13);
   rect(rectx14, recty14, rectw14, recth14);
   rect(rectx15, recty15, rectw15, recth15);
   */

  boolean collision1Detected = isCollidingCircle1Rectangle(x1, y1, radius, rectx1, recty1, rectw1, recth1);
  boolean collision2Detected = isCollidingCircle2Rectangle(x1, y1, radius, rectx2, recty2, rectw2, recth2);
  boolean collision3Detected = isCollidingCircle3Rectangle(x1, y1, radius, rectx3, recty3, rectw3, recth3);
  boolean collision4Detected = isCollidingCircle4Rectangle(x1, y1, radius, rectx4, recty4, rectw4, recth4);
  boolean collision5Detected = isCollidingCircle5Rectangle(x1, y1, radius, rectx5, recty5, rectw5, recth5);
  boolean collision6Detected = isCollidingCircle6Rectangle(x1, y1, radius, rectx6, recty6, rectw6, recth6);
  boolean collision7Detected = isCollidingCircle7Rectangle(x1, y1, radius, rectx7, recty7, rectw7, recth7);
  boolean collision8Detected = isCollidingCircle8Rectangle(x1, y1, radius, rectx8, recty8, rectw8, recth8);
  boolean collision9Detected = isCollidingCircle9Rectangle(x1, y1, radius, rectx9, recty9, rectw9, recth9);
  boolean collision10Detected = isCollidingCircle10Rectangle(x1, y1, radius, rectx10, recty10, rectw10, recth10);
  boolean collision11Detected = isCollidingCircle11Rectangle(x1, y1, radius, rectx11, recty11, rectw11, recth11);
  boolean collision12Detected = isCollidingCircle12Rectangle(x1, y1, radius, rectx12, recty12, rectw12, recth12);
  boolean collision13Detected = isCollidingCircle13Rectangle(x1, y1, radius, rectx13, recty13, rectw13, recth13);
  boolean collision14Detected = isCollidingCircle14Rectangle(x1, y1, radius, rectx14, recty14, rectw14, recth14);
  boolean collision15Detected = isCollidingCircle15Rectangle(x1, y1, radius, rectx15, recty15, rectw15, recth15);

  p.move();
  p.display();
  
  for (int i=0; i<balls.size(); i++) {
    Ball b = balls.get(i); 
    //boolean displayLose = b.displayLose();
    
    if (!gameover) b.move();
    if (b.checkGameOver()) gameover = true;
    boolean dead = b.checkBoundary();
    
    if (dead) {
      balls.remove(i);
    }
      b.display();

  }


  //p.attack();
  if(frameC % 10 == 0){
  int randomValue = int(random(0, 5));
  if (randomValue == 0) {
    balls.add( new Ball(60, 700));
  } else if (randomValue == 1) {
    balls.add( new Ball(300, 700));
  } else if (randomValue == 2) {
    balls.add( new Ball(460, 700));
  } else if (randomValue == 3) {
    balls.add( new Ball(580, 700));
  }
  if (randomValue == 4) {
  balls.add( new Ball(793, 622));
}
  }
frameC++;
println(frameC);

    if (gameover == true && displayLose==true){
      image(lose, 0, 0, 800, 700); 
    }

}

void keyPressed() {
  if (key == ' ' && gameover) {
    balls = new ArrayList<Ball>();
    gameover = false;
    timeLeft = timeTotal;
  }
}

void mouseClicked() {
  println(mouseX + ", " + mouseY);
}
  
  void setupSerial() {
  printArray(Serial.list());
  myPort = new Serial(this, Serial.list()[2], 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;

  potValues = new int[NUM_OF_VALUES];
}

void updateSerial() {
  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) {
        for (int i=0; i<serialInArray.length; i++) {
          potValues[i] = int(serialInArray[i]);    
        }        
      }
    }
  }
}

class Beastprince {
  PImage mo;
  float x1, y1;

  Beastprince() {
    x1 = 372;
    y1 = 380;
    mo = m1;
  }
  void display() {
    pushStyle();
    imageMode(CENTER);
    image(mo, x1, y1-20, 60, 60);
    popStyle();
  }
  void move() {
    float x2, y2;
    x2 = x1;
    y2 = y1;
    //if (keyPressed) {

    if (potValues[3] == 1) {
      if (x2 > 0) {
        mo = m2;
        x2 = x2 - 10;
      }
    }

    if (potValues[2] == 1) {
      if (y2 < 700) {
        mo = m1; 
        y2 = y2 + 10;
      }
    }

    if (potValues[0] == 1) {
      if (x2 < 800) {
        mo = m3;
        x2=x2+10;
      }
    }

    if (potValues[1] == 1) {
      if (y2 > 0) {
        mo = m4;
        y2=y2-10;
      }
    }
    //}
    if (!isCollidingCircle1Rectangle(x2, y2, radius, rectx1, recty1, rectw1, recth1) && 
      !isCollidingCircle2Rectangle(x2, y2, radius, rectx2, recty2, rectw2, recth2) && 
      !isCollidingCircle3Rectangle(x2, y2, radius, rectx3, recty3, rectw3, recth3) &&
      !isCollidingCircle1Rectangle(x2, y2, radius, rectx4, recty4, rectw4, recth4) &&
      !isCollidingCircle5Rectangle(x2, y2, radius, rectx5, recty5, rectw5, recth5) &&
      !isCollidingCircle6Rectangle(x2, y2, radius, rectx6, recty6, rectw6, recth6) &&
      !isCollidingCircle7Rectangle(x2, y2, radius, rectx7, recty7, rectw7, recth7) &&
      !isCollidingCircle8Rectangle(x2, y2, radius, rectx8, recty8, rectw8, recth8) &&
      !isCollidingCircle9Rectangle(x2, y2, radius, rectx9, recty9, rectw9, recth9) &&
      !isCollidingCircle10Rectangle(x2, y2, radius, rectx10, recty10, rectw10, recth10) &&
      !isCollidingCircle11Rectangle(x2, y2, radius, rectx11, recty11, rectw11, recth11) &&
      !isCollidingCircle12Rectangle(x2, y2, radius, rectx12, recty12, rectw12, recth12) &&
      !isCollidingCircle13Rectangle(x2, y2, radius, rectx13, recty13, rectw13, recth13) &&
      !isCollidingCircle14Rectangle(x2, y2, radius, rectx14, recty14, rectw14, recth14) &&
      !isCollidingCircle15Rectangle(x2, y2, radius, rectx15, recty15, rectw15, recth15)) {
      x1 = x2;
      y1 = y2;
    }
    if (potValues[4] == 1) {

      if (mo == m1) {
        image(c1, x2-30, y2, 60, 60);
      }
      if (mo == m2) {
        image(c2, x2-60, y2-30, 60, 60);
      }
      if (mo == m3) {
        image(c3, x2, y2-30, 60, 60);
      }
      if (mo == m4) {
        image(c4, x2-30, y2-80, 60, 60);
      }
    }
  }
}

class Ball {
  float x, y, size;
  //color clr;
  float xspeed, yspeed;
  PImage m;


  Ball (float tempX, float tempY) {

    x = tempX;
    y = tempY;
    xspeed = 0;
    yspeed = -2;
    m = monster;
  }
  void display() {
    //fill(clr);
    pushStyle();
    imageMode(CENTER);
    image(monster, x, y, 30, 30);
    popStyle();
  }


  void move() {
    x += xspeed;
    y += yspeed;
  }
  boolean checkBoundary() {
    //color c1 = color (0,0,0);
    color c = mapWall3.get(int(x), int(y));   
    //println(red(c) + " " + green(c)+ " " + blue(c));
    if ( blue(c) < 100 && red(c) < 200) { //black
      // it's going up or down
      if (xspeed == 0) {
        y = y - yspeed*5;
        yspeed = 0;
        if (random(1) < 0.5) {
          xspeed = 2;
        } else {
          xspeed = -2;
        }
      }
   
      else if (yspeed == 0) {
        x = x - xspeed*5;
        xspeed = 0;
        if (random(1) < 0.5) {
          yspeed = 2;
        } else {
          yspeed = -2;
        }
      }
    }
  
    if ( blue(c) < 100 && red(c) > 200 ) {  //&& goingThroughAWall == false
      if (xspeed == 0) { 
        //println(y);
        y = y - yspeed*5;
        yspeed = 0;
        int randomValue = int(random(0, 2));
        if (randomValue == 0) {
          xspeed = -2;
        } else if (randomValue == 1) {
          xspeed = 0;
          yspeed = -2;
        }
      }
    }
    if (dist(x, y, p.x1, p.y1) < 60) {

      if (potValues[4] == 1) {
        //println ("attack");
        xspeed = 0;
        yspeed = 0;
        //x = 0;
        //y = 0;
        return true;
      }
    }

    return false;
  }


  boolean checkGameOver() {

    color c = mapWall3.get(int(x), int(y));
    //println(red(c) + " " + green(c)+ " " + blue(c));
    if (blue(c) < 100 && green (c) > 220) {
      displayLose = true;
      return true;
    }


    if (timeLeft <= 0) {

      image(win, 0, 0, 800, 700);
      return true;
    } else {
      return false;
    }
  }
}

//boolean 1
boolean isCollidingCircle1Rectangle(
  float x1, 
  float y1, 
  float radius, 
  float rectx1, 
  float recty1, 
  float rectw1, 
  float recth1)
{

  float distancex1 = abs(x1 - rectx1 - rectw1/2);
  float distancey1 = abs(y1 - recty1 - recth1/2);

  if (distancex1 > (rectw1/2+radius)) { 
    return false;
  }
  if (distancey1 > (recth1/2+radius)) { 
    return false;
  }

  if (distancex1 <= (rectw1/2+radius)) { 
    return true;
  } 
  if (distancey1 <= (recth1/2+radius)) { 
    return true;
  }

  float cornerDistance_sq = pow(distancex1-rectw1/2, 2) +
    pow(distancey1-recth1/2, 2);

  return (cornerDistance_sq <= pow(radius, 2));
}

//boolean 2
boolean isCollidingCircle2Rectangle(
      float x1, 
      float y1, 
      float radius,
      float rectx2,
      float recty2,
      float rectw2,
      float recth2)
      {

    float distancex2 = abs(x1 - rectx2 - rectw2/2);
    float distancey2 = abs(y1 - recty2 - recth2/2);

    if (distancex2 > (rectw2/2 + radius)) { return false; }
    if (distancey2 > (recth2/2 + radius)) { return false; }

    if (distancex2 <= (rectw2/2+ radius)) { return true; } 
    if (distancey2 <= (recth2/2+ radius)) { return true; }

    float cornerDistance_sq = pow(distancex2 - rectw2/2, 2) +
                              pow(distancey2 - recth2/2, 2);

    return (cornerDistance_sq <= pow(radius,2));
}
     
//boolean 3
boolean isCollidingCircle3Rectangle(
      float x1, 
      float y1, 
      float radius,
      float rectx3,
      float recty3,
      float rectw3,
      float recth3)
      {

    float distancex3 = abs(x1 - rectx3 - rectw3/2);
    float distancey3 = abs(y1 - recty3 - recth3/2);

    if (distancex3 > (rectw3/2 + radius)) { return false; }
    if (distancey3 > (recth3/2 + radius)) { return false; }

    if (distancex3 <= (rectw3/2+ radius)) { return true; } 
    if (distancey3 <= (recth3/2+ radius)) { return true; }

    float cornerDistance_sq = pow(distancex3 - rectw3/2, 2) +
                              pow(distancey3 - recth3/2, 2);

    return (cornerDistance_sq <= pow(radius,2));
}

//boolean 4
boolean isCollidingCircle4Rectangle(
      float x1, 
      float y1, 
      float radius,
      float rectx4,
      float recty4,
      float rectw4,
      float recth4)
      {

    float distancex4 = abs(x1 - rectx4 - rectw4/2);
    float distancey4 = abs(y1 - recty4 - recth4/2);

    if (distancex4 > (rectw4/2 + radius)) { return false; }
    if (distancey4 > (recth4/2 + radius)) { return false; }

    if (distancex4 <= (rectw4/2+ radius)) { return true; } 
    if (distancey4 <= (recth4/2+ radius)) { return true; }

    float cornerDistance_sq = pow(distancex4 - rectw4/ 2, 2) +
                              pow(distancey4 - recth4/2, 2);

    return (cornerDistance_sq <= pow(radius,2));
}

//boolean 5
boolean isCollidingCircle5Rectangle(
  float x1, 
  float y1, 
  float radius, 
  float rectx5, 
  float recty5, 
  float rectw5, 
  float recth5)
{

  float distancex5 = abs(x1 - rectx5 - rectw5/2);
  float distancey5 = abs(y1 - recty5 - recth5/2);

  if (distancex5 > (rectw5/2 + radius)) { 
    return false;
  }
  if (distancey5 > (recth5/2 + radius)) { 
    return false;
  }

  if (distancex5 <= (rectw5/2+ radius)) { 
    return true;
  } 
  if (distancey5 <= (recth5/2+ radius)) { 
    return true;
  }

  float cornerDistance_sq = pow(distancex5 - rectw5/2, 2) +
    pow(distancey5 - recth5/2, 2);

  return (cornerDistance_sq <= pow(radius, 2));
}

//boolean 6
boolean isCollidingCircle6Rectangle(
  float x1, 
  float y1, 
  float radius, 
  float rectx6, 
  float recty6, 
  float rectw6, 
  float recth6)
{

  float distancex6 = abs(x1 - rectx6 - rectw6/2);
  float distancey6 = abs(y1 - recty6 - recth6/2);

  if (distancex6 > (rectw6/2 + radius)) { 
    return false;
  }
  if (distancey6 > (recth6/2 + radius)) { 
    return false;
  }

  if (distancex6 <= (rectw6/2+ radius)) { 
    return true;
  } 
  if (distancey6 <= (recth6/2+ radius)) { 
    println("bump");
    return true;
  }

  float cornerDistance_sq = pow(distancex6 - rectw6/2, 2) +
    pow(distancey6 - recth6/2, 2);

  return (cornerDistance_sq <= pow(radius, 2));
}

//boolean 7
boolean isCollidingCircle7Rectangle(
      float x1, 
      float y1, 
      float radius,
      float rectx7,
      float recty7,
      float rectw7,
      float recth7)
      {

    float distancex7 = abs(x1 - rectx7 - rectw7/2);
    float distancey7 = abs(y1 - recty7 - recth7/2);

    if (distancex7 > (rectw7/2 + radius)) { return false; }
    if (distancey7 > (recth7/2 + radius)) { return false; }

    if (distancex7 <= (rectw7/2+ radius)) { return true; } 
    if (distancey7 <= (recth7/2+ radius)) { return true; }

    float cornerDistance_sq = pow(distancex7 - rectw7/ 2, 2) +
                              pow(distancey7 - recth7/2, 2);

    return (cornerDistance_sq <= pow(radius,2));
}

//boolean 8
boolean isCollidingCircle8Rectangle(
  float x1, 
  float y1, 
  float radius, 
  float rectx8, 
  float recty8, 
  float rectw8, 
  float recth8)
{

  float distancex8 = abs(x1 - rectx8 - rectw8/2);
  float distancey8 = abs(y1 - recty8 - recth8/2);

  if (distancex8 > (rectw8/2 + radius)) { 
    return false;
  }
  if (distancey8 > (recth8/2 + radius)) { 
    return false;
  }

  if (distancex8 <= (rectw8/2+ radius)) { 
    return true;
  } 
  if (distancey8 <= (recth8/2+ radius)) { 
    return true;
  }

  float cornerDistance_sq = pow(distancex8 - rectw8/ 2, 2) +
    pow(distancey8 - recth8/2, 2);

  return (cornerDistance_sq <= pow(radius, 2));
}

//boolean 9
boolean isCollidingCircle9Rectangle(
  float x1, 
  float y1, 
  float radius, 
  float rectx9, 
  float recty9, 
  float rectw9, 
  float recth9)
{

  float distancex9 = abs(x1 - rectx9 - rectw9/2);
  float distancey9 = abs(y1 - recty9 - recth9/2);

  if (distancex9 > (rectw8/2 + radius)) { 
    return false;
  }
  if (distancey9 > (recth8/2 + radius)) { 
    return false;
  }

  if (distancex9 <= (rectw9/2+ radius)) { 
    return true;
  } 
  if (distancey9 <= (recth9/2+ radius)) { 
    return true;
  }

  float cornerDistance_sq = pow(distancex9 - rectw9/ 2, 2) +
    pow(distancey9 - recth9/2, 2);

  return (cornerDistance_sq <= pow(radius, 2));
}

//boolean 10
boolean isCollidingCircle10Rectangle(
  float x1, 
  float y1, 
  float radius, 
  float rectx10, 
  float recty10, 
  float rectw10, 
  float recth10)
{

  float distancex10 = abs(x1 - rectx10 - rectw10/2);
  float distancey10 = abs(y1 - recty10 - recth10/2);

  if (distancex10 > (rectw10/2 + radius)) { 
    return false;
  }
  if (distancey10> (recth10/2 + radius)) { 
    return false;
  }

  if (distancex10 <= (rectw10/2+ radius)) { 
    return true;
  } 
  if (distancey10 <= (recth10/2+ radius)) { 
    return true;
  }

  float cornerDistance_sq = pow(distancex10 - rectw10/ 2, 2) +
    pow(distancey10 - recth10/2, 2);

  return (cornerDistance_sq <= pow(radius, 2));
}

//boolean 11
boolean isCollidingCircle11Rectangle(
  float x1, 
  float y1, 
  float radius, 
  float rectx11, 
  float recty11, 
  float rectw11, 
  float recth11)
{

  float distancex11 = abs(x1 - rectx11 - rectw11/2);
  float distancey11 = abs(y1 - recty11 - recth11/2);

  if (distancex11 > (rectw11/2 + radius)) { 
    return false;
  }
  if (distancey11> (recth11/2 + radius)) { 
    return false;
  }

  if (distancex11 <= (rectw11/2+ radius)) { 
    return true;
  } 
  if (distancey11 <= (recth11/2+ radius)) { 
    return true;
  }

  float cornerDistance_sq = pow(distancex11 - rectw11/ 2, 2) +
    pow(distancey11 - recth11/2, 2);

  return (cornerDistance_sq <= pow(radius, 2));
}

//boolean 12
boolean isCollidingCircle12Rectangle(
  float x1, 
  float y1, 
  float radius, 
  float rectx12, 
  float recty12, 
  float rectw12, 
  float recth12)
{

  float distancex12 = abs(x1 - rectx12 - rectw12/2);
  float distancey12 = abs(y1 - recty12 - recth12/2);

  if (distancex12 > (rectw12/2 + radius)) { 
    return false;
  }
  if (distancey12> (recth12/2 + radius)) { 
    return false;
  }

  if (distancex12 <= (rectw12/2+ radius)) { 
    return true;
  } 
  if (distancey12 <= (recth12/2+ radius)) { 
    return true;
  }

  float cornerDistance_sq = pow(distancex12 - rectw12/ 2, 2) +
    pow(distancey12 - recth12/2, 2);

  return (cornerDistance_sq <= pow(radius, 2));
}

//boolean 13
boolean isCollidingCircle13Rectangle(
  float x1, 
  float y1, 
  float radius, 
  float rectx13, 
  float recty13, 
  float rectw13, 
  float recth13)
{

  float distancex13 = abs(x1 - rectx13 - rectw13/2);
  float distancey13 = abs(y1 - recty13 - recth13/2);

  if (distancex13 > (rectw13/2 + radius)) { 
    return false;
  }
  if (distancey13> (recth13/2 + radius)) { 
    return false;
  }

  if (distancex13 <= (rectw13/2+ radius)) { 
    return true;
  } 
  if (distancey13 <= (recth13/2+ radius)) { 
    return true;
  }

  float cornerDistance_sq = pow(distancex13 - rectw13/ 2, 2) +
    pow(distancey13 - recth13/2, 2);

  return (cornerDistance_sq <= pow(radius, 2));
}

//boolean 14
boolean isCollidingCircle14Rectangle(
  float x1, 
  float y1, 
  float radius, 
  float rectx14, 
  float recty14, 
  float rectw14, 
  float recth14)
{

  float distancex14 = abs(x1 - rectx14 - rectw14/2);
  float distancey14 = abs(y1 - recty14 - recth14/2);

  if (distancex14 > (rectw14/2 + radius)) { 
    return false;
  }
  if (distancey14> (recth14/2 + radius)) { 
    return false;
  }

  if (distancex14 <= (rectw14/2+ radius)) { 
    return true;
  } 
  if (distancey14 <= (recth14/2+ radius)) { 
    return true;
  }

  float cornerDistance_sq = pow(distancex14 - rectw14/ 2, 2) +
    pow(distancey14 - recth14/2, 2);

  return (cornerDistance_sq <= pow(radius, 2));
}

//boolean 15
boolean isCollidingCircle15Rectangle(
  float x1, 
  float y1, 
  float radius, 
  float rectx15, 
  float recty15, 
  float rectw15, 
  float recth15)
{

  float distancex15 = abs(x1 - rectx15 - rectw15/2);
  float distancey15 = abs(y1 - recty15 - recth15/2);

  if (distancex15 > (rectw15/2 + radius)) { 
    return false;
  }
  if (distancey15> (recth15/2 + radius)) { 
    return false;
  }

  if (distancex15 <= (rectw15/2+ radius)) { 
    return true;
  } 
  if (distancey15 <= (recth15/2+ radius)) { 
    return true;
  }

  float cornerDistance_sq = pow(distancex15 - rectw15/ 2, 2) +
    pow(distancey15 - recth15/2, 2);

  return (cornerDistance_sq <= pow(radius, 2));
}

Lab 11: Media Controller Documentation by Amber Wang(Marcela)

Lab 12: Media Controller

Date: May 5, 2017

Instructor: Marcela Godoy

Partner: Eric Zhang

Documented by Amber Wang

  1. Goal:

The goal of this week’s lab is to build communications between Arduino and Processing by using Arduino to control medias like image, audio and video in Processing.

2.  Needed Materials:

Arduino along with USB cable, breadboard, 2 potentiometers, wires.

3.Working Process:

In the Interaction Lab lecture 24, I learned about loading and displaying PImage in Processing. Then after discussion with my parter, we chose image as our media in Processing and decided to use a potentiometer to apply filter to the image. After searching on the Processing reference, we find one filter called “blur” has a numerical parameter in its function which can adjust the level of the filter. So we thought about mapping the analog input from potentiometer to the range of the level of “blur” filter. We simply built a potentiometer circuit and connected it to A0, and then read its range from serial monitor. Meanwhile, we tried the parameters in processing and find the best range is from 0 to 10. So we created a variable of the mapped value from Arduino and used it in the filter function. Then we successfully control the blur effect of Yao’s image.

Development:

After the lab, I then further developed our circuit by adding another potentiometer. I checked the preference website again and found the “posterize” filter also has a numerical parameter. Then I decided to use one potentiometer to change the “blur” effect while the other to change the “posterize” effect of the image. Based on my midterm project experience, I sent more than one variable from Arduino to Processing by using a string. I then decoded the string and changed it to an array. Likewise, I found the best range of “posterize” filter to be from “5” to “20”, so I mapped the second variable and applied to the filter. The final effect of my applying and combining two different filters to the image is as follows:

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

void loop() {
  
  int p1 = analogRead(A0); 
  int p2 = analogRead(A1);

 
  Serial.print(p1);
  Serial.print(",");  
  Serial.print(p2);
  Serial.println();
  

  delay(500);

   
}

//Processing

import processing.serial.*;
String myString = null;
int NUM_OF_VALUES = 2; 
PImage yao;
Serial myPort;
int[] potValues; 
float x, y;

void setup(){
  x = 600;
  y = 600;
  size(600, 600);
  yao = loadImage("yao.gif");
   setupSerial();
  
 
}


void draw(){
  updateSerial();

  image(yao, 0, 0, x, y);
  float filter1 = map(potValues[0], 0, 1023, 0, 10);
  float filter2 = map(potValues[1], 0, 1023, 5, 20);

  filter(BLUR, filter1);
  filter(POSTERIZE, filter2);
 
  
}

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;

  potValues = new int[NUM_OF_VALUES];
}

void updateSerial() {
  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) {
        for (int i=0; i<serialInArray.length; i++) {
          potValues[i] = int(serialInArray[i]);
        }
      }
    }
  }
}
  

Lab11: Drawing Machine Documentation by Amber Wang (Marcela)

Lab 11: Drawing Machines

Date: April 28, 2017

Instructor: Marcela Godoy

Partner: Eric Zhang

Documented by Amber Wang

1.Goal:

In this week’s lab, we are supposed to make a drawing machine by using an H-bridge to control stepper motor attached to mechanism arms. Furthermore, we will use a potentiometer to change the speed of the motor.

2.Needed Materials:

Arduino along with USB cable, stepper motor, mechanism arm, pen, SN754410NE ic chip (H-bridge), power plug

3. Internal Principals of Main Components:

Motor: The motor we used today to control the mechanism arm is the Bipolar Stepper Motor. The stepper motor used fixed electromagnet coils, and by providing changing current, the coils will be activated by sequence, which will push and pull the magnetic rotor. The Bipolar Stepper Motor has 4 wires and only operates positive voltage.

H-Bridge SN754410NE: This is an integrated circuit (IC) contains a dual H-bridge. The main function of the H-bridge is to change the current and then change and reverse the polarity of the coils inside the motor.

4. Working Process:

Part1:

We first quickly finished the laser-cut mechanism arm based on the picture below:

preview-full-IMG_1449

On the breadboard, we first plugged in the H-bridge chip and then connected the 16 pins according to the diagram below:

bipolarStepperMotor

As is shown in the diagram, the four thick lines represent the four wires connected to the Bipolar Stepper Motor. Besides, the four pins in the middle of the H-bridge all goes to the Ground in Arduino. However, for the Power side, we should be extremely careful. Based on the diagram, two pins in the top and one pin on the right bottom side all goes to the 5V Arduino Power, while the left bottom pin goes to outside high voltage power supply. Therefore, the latter pin should not connect to “+” on breadboard (which connects to Arduino power), instead, it should be connected to the power plug.

Then we used the Arduino Example codes “stepper_oneRevolution” and made our mechanism move.

Part2:

After finishing our single mechanism drawing arm, we then found Esme’s group who also finished their circuits. We then joint the two mechanism arms like this:

IMG_0544

When we both run our program at the same time, the effect of the drawing machine looks like this:

However, we found the motor was not so steady and always moving, so we used a laser-cut board to fix the two motors.

 

Part3:

We then improved our circuit by adding a potentiometer and connected it to A0. We then used the “stepper_speedControl” example codes in Arduino and successfully changed the speed of the motor. The finished effect of the drawing machine with speed control:

WHAT OUR DRAWING MACHINE DRAWS FOR US:

FullSizeRender 9

 

/*
 Stepper Motor Control - one revolution

 This program drives a unipolar or bipolar stepper motor.
 The motor is attached to digital pins 8 - 11 of the Arduino.

 The motor should revolve one revolution in one direction, then
 one revolution in the other direction.


 Created 11 Mar. 2007
 Modified 30 Nov. 2009
 by Tom Igoe

 */

#include <Stepper.h>

const int stepsPerRevolution = 200;  // change this to fit the number of steps per revolution
// for your motor

// initialize the stepper library on pins 8 through 11:
Stepper myStepper(stepsPerRevolution, 8, 9, 10, 11);

void setup() {
  // set the speed at 60 rpm:
  myStepper.setSpeed(60);
  // initialize the serial port:
  Serial.begin(9600);
}

void loop() {
  // step one revolution  in one direction:
  Serial.println("clockwise");
  myStepper.step(stepsPerRevolution);
  delay(500);

  // step one revolution in the other direction:
  Serial.println("counterclockwise");
  myStepper.step(-stepsPerRevolution);
  delay(500);
}

/*
 Stepper Motor Control - speed control

 This program drives a unipolar or bipolar stepper motor.
 The motor is attached to digital pins 8 - 11 of the Arduino.
 A potentiometer is connected to analog input 0.

 The motor will rotate in a clockwise direction. The higher the potentiometer value,
 the faster the motor speed. Because setSpeed() sets the delay between steps,
 you may notice the motor is less responsive to changes in the sensor value at
 low speeds.

 Created 30 Nov. 2009
 Modified 28 Oct 2010
 by Tom Igoe

 */

#include <Stepper.h>

const int stepsPerRevolution = 200;  // change this to fit the number of steps per revolution
// for your motor


// initialize the stepper library on pins 8 through 11:
Stepper myStepper(stepsPerRevolution, 8, 9, 10, 11);

int stepCount = 0;  // number of steps the motor has taken

void setup() {
  // nothing to do inside the setup
}

void loop() {
  // read the sensor value:
  int sensorReading = analogRead(A0);
  // map it to a range from 0 to 100:
  int motorSpeed = map(sensorReading, 0, 1023, 0, 100);
  // set the motor speed:
  if (motorSpeed > 0) {
    myStepper.setSpeed(motorSpeed);
    // step 1/100 of a revolution:
    myStepper.step(stepsPerRevolution / 100);
  }
}

Final Project Proposal by Amber Wang (Marcela)

Final Project Proposal: Beauty and the Beast

Team Members: Amber Wang, Esme Wang

Documented by Amber Wang

For our Interaction Lab final project, Esme and I planned to make a computer game with more physical interactions. We insisted on game design because we have got pretty helpful advice from Marcela about our last midterm project, which is a spaceship shooting game with joysticks. Last time we didn’t put too much effort on the physical design of our controller, which is just two balls attached to joysticks. However, this time we will make our physical controller more closely related to the game theme and easy for users to handle.

This time we plan to make a battle game. Inspired by a lately movie, we determined the theme as Beauty and the Beast. Similar to most battle games, we have the enemy side whose goal is to come and kill you. And we have the “home” that the player has to protect, which is the Beauty in this game. We based our design on a famous game called Plants vs. Zombies, but in a quite different way. So basically the enemies will come from all directions approaching the Beauty, and the player act as the Beast to fight against the enemies and protect the Beauty. The scene design as you can see in our scratch is that the Beauty stands on the bottom of the screen right outside the castle and there’s a garden in front of  the castle just like it is in the movie, and with five paths that enemies can come. The player (the beast) can move on the five paths and battle. To make the game more challenging, the enemies will move more and more faster, and the player has to beat back all enemies in certain time to protect the Beauty.

IMG_0531

Interaction designs:

To better improve user experiences and fit them as much as possible into this game, we think of using a wearable interaction controller. Players don’t need to hold any hardware controllers, instead, they will be wearing beast-claw-like gloves. The claws will accord with the beast drawing design in the game, in color and in shape. We will attached sensor inside the claws so that when the players want to beat the enemy, they just shake and wave their “claws”, then the Beast in the game will do the same to attack the enemy. Moreover, the movement of the Beast in the game will also need players’ body movements. We will project our game on a big screen on a wall and set aside enough space for players to interact. On the floor we will set up guide space representing four different directions for players to stand on and attached pressure sensor under it. So by standing on the signs on the floor, players can change the movement of the Beast in the game. At first, we were thinking of using four carpet and drawing four arrows on the carpets. After discussing with Marcela, we found a better solution by laser cutting the footprints of the Beast, which conform more closely to the game theme. We will design the foot controller by adding some fabric under the board to let the players feel the press. Later on we will keep testing the foot controller, and hopefully we can manage to match the speed of the Beast to the frequency of the users’ steps.

(Possible claw-like gloves we may use as the wearable controller)

Screen Shot 2017-04-27 at 2.33.02 PM Screen Shot 2017-04-27 at 2.32.37 PM Screen Shot 2017-04-27 at 2.33.26 PM

 

Lab 10: 3D Modelling by Amber Wang (Marcela)

Lab 10: 3D Modeling

Date: April 21, 2017

Instructor: Marcela Godoy

Documented by Amber Wang

1.Goal:

In this week’s lab, I am supposed to use Tinkercad to design a wearable, or a game controller including the assigned electric components.

2. Working Process:

At first, I was thinking of redesigning a game controller using Tinkercad 3D modelling to better improve my midterm Dodgeplane Game project. However, all joysticks had been checked out before it was my turn. Then I had no choice but to find other alternatives. Another electronic component provided in this lab was called 4-Digit Display. I didn’t quite get what it was and how it could be used for, until Marcela showed me the object and inspired me to make a watch. Then I started to prototyping based on the measurement diagram and the real object.

Grove 4-Digit Display V1.01

The main idea was to build a framework that can perfectly get the component embedded. So I first set a box a little bigger than the total volume of the display. I measured the height of the 4-digit display and found that I should set aside enough space for the plug port on the bottom of the display board. So the the box I set was quite thick. I then set another box based on the measurement of the display and attached it correctly inside the first box. It took me quite some time to appropriately scale the two parts. To do this, I selected the second box to adjust its vertical position to be align on the surface with the big box. Then for the relative horizontal location of the two box, I used the ruler tool and put it on one corner of the big box. By doing this, I would be able to tell the position of each point of the box to the origin and then calculate the distance between certain lines. The next step was to make a hole. I just simply selected the small box, changed it to “hole” and then grouped the two object.

2

Then I had to build another hole that can perfectly hold the electronic board. Similar to the first hole, I need to first make a solid model with the same size as the board and then changed it to hole. I added another ruler and and started to build the board. I simply dropped a box with the length and width based on the planar diagram, and gave it an initial height of 1.5mm. I used six cylinders with r=2mm and the same height and adjusted them to the right position using the ruler. I changed three of them to hole to conform to the diagram.

3 4 5

I then dragged this solid board model into the box and change it to a hole. However, I found two problems here. The first thing was that this hole cannot fully hold the component because as is shown before, there’re some raised port and pins under the board and had their certain volume. So I then changed the height to 6.3mm after careful measurement of the real object. The other problem was that I didn’t have a bottom of the box to hold the component as the hole could be seen from the bottom. So I then made further adjustment to the whole box and added 2mm height of solid bottom.

76

I further adjusted the position of the second board hole to make it stand right under the surface of the display hole. So now you can see from the top of the inside framework.

8

Later, to improve my watch, I measured my wrist and used the Ring model to act as the watchband. I dragged another box the same as before and used it as a hole to cut the ring. I then deleted this box and attached the cut ring to the watch.

9 9.2 10

And my finished wearable watch is like this:

Screen Shot 2017-04-23 at 7.53.24 PM Screen Shot 2017-04-23 at 7.53.53 PM

3.Reflections

What I learned from this lab is that 3D modelling is actually a very delicate and subtle work, which need me to be very patient, careful and considerate. A little error can cause the two parts not able to fill together at all. Besides, there’re still a lot of problems of my model. One big issue is that how can I easily put the 4-digit display in and out of my framework model without breaking it. There’re still many details I could do to improve this model. However, this is my first try of Tinkercad and the wearable watch is not practical yet for the components need to be connected with wire rather than wireless. So I am still quite consent with my first exercise and hope this experience can help with my future 3D prototyping.

Lab 9 Documentation: Self-designed Stamp by Amber Wang (Marcela)

Lab 9: Self-designed Stamp using AI

Date: April 13, 2017

Instructor: Marcela Godoy

Documented by Amber Wang

1.Goal:

In this week’s lab, I am supposed to design my own stamp following the DIY Rumber Stamp Tutorial.

My finished stamp looks like this:

Screen Shot 2017-04-17 at 11.57.24 AM

2.Preparation/ Before I start:

Before Tuesday’s lecture, I had no background in Adobe Illustrator and knew nothing about it. So I started from zero and watched the IMA tutorial video. I followed step by step and gained a basic idea of some common tools. I got to know that people didn’t just draw from nothing, but set a pre-made sketch in first layer and use computer tools to draw a more standard graph on top of it.

Then I started to think about my own stamp. I first searched on Google about “stamp design” and got a sense of the main components of most stamps. During my search, I was particularly interested in the stamps with a curly ring and though of adding that to my own stamp.

Screen Shot 2017-04-17 at 9.42.19 AM

To gain more knowledge about stamp design and AI, I also watched some Youtube videos relating to this, and luckily I also learned how to make that zigzag outer ring.

3.Working Process

— Outer Rings

Screen Shot 2017-04-17 at 11.36.51 AM Screen Shot 2017-04-17 at 11.37.40 AM

To create a zigzag outer ring, I used the “Star tool” under the “Rectangle Tool”. By default, it is a five-pointed star. However, by holding the star and pressing the UP key at the same time, the points will increase. In order to make it cooler, I pressed the UP keys a lot so that it had many points. Before I let go the mouse, I also used COMMAND key and held the mouse in-and-out to change its sharpness. After I made it less sharp, I enlarged it with same proportion. I filled it with black with no stroke. To make it a ring, I then dragged a little smaller circle filled with white on top of it and used the “divide tool” in “pathfinder”.

Screen Shot 2017-04-17 at 11.53.05 AM

This will give you a zigzag outer boundary and rounded inner boundary ring, filled with black.

Then I added two more circle with no fill and black stroke. I let them have different weights.

Screen Shot 2017-04-17 at 11.56.36 AM

–Text on Curve:

As most stamps do, I also made some text on top and bottom in a curve path. I made two smaller circle path as a guide for the text, and used “Type on the Path” tool to type my name and nickname on the top. This one is not so hard. But for the bottom text one, it is kind of tricky. The guide circle is a little bit bigger than the first one. When I typed on this guide, the text was on the outer side and was converse. To solve this, I used the black arrow tool to select the text and then changed to the white arrow tool. When I moved the mouse around the middle of the text, it changed to a black arrow with a small arrow on a line. It can change the side of the text on which side of the curve. This tool can also be used to adjust the position of the text on the curve.

Screen Shot 2017-04-17 at 1.04.39 PM

–Graphical Logo/ Drawing

Then it comes to the main part and also the most exciting part of my stamp design. In stead of just using simple shapes and texts to compose my stamp, I thought of adding a more vivid logo in the centre to present myself. It took me some time to figure out what to draw until I looked at my backpack, which was a shark-like backpack with its mouth open. I suddenly remembered my pencil box and also one favourite shirt was also a shark shape with its mouth open. I found one good shark drawing in Google which may fit my stamp. Then I put it in first layer and started to sketch my logo using the drawing tools.

sharkScreen Shot 2017-04-13 at 10.45.17 AM

Drawing the shark logo required more AI skills than I thought. I first tried to use different shapes to compose the outline like the IMA Stamp Tutorial did. However it didn’t work that good and took too much effort to make the curve. Then I watch three more Youtube videos to learn the “Pen Tool”. Basically how it works is that when you first click it, it will create a point, and then you move to another place to create another point. But if you just let go the mouse, it will automatically make a straight line between the two points. In order to make a curve, I held the mouse and dragged it to different directions, like playing with a bow, which gave me different curves. Sometimes I didn’t drag it that perfectly and let go the mouse, so I used other tools like “Anchor Point Tool” and “Add/ Delete Anchor Point Tool” to adjust it. “Anchor Point Tool” allows you to redo the arc on that point, and “Add/Delete Anchor Point Tool” allows you to add or get rid of one point. They were pretty useful to make a perfect curve. Using those tools require more practice. At first, I would easily make some random wrong curves because I didn’t let go the mouse or drag correctly, or the tool just keep tracking my mouse to make random lines. But then I learned to let go the tracking by clicking again the last point (then I can move my mouse to another place and start new lines). I also learned “Smooth Tool” which could smooth some awkward joints of curves.

Screen Shot 2017-04-17 at 4.29.19 PMScreen Shot 2017-04-17 at 6.53.31 PMScreen Shot 2017-04-17 at 7.03.09 PM

The “Pen Tool” allows me to draw the outlines of the shark, and also some closured random shapes. I used similar technique to draw the nostrils of the shark, filling it black with no stroke. As you can see, the outline of the shark is in the same weight of stroke, however, for the sea wave and the mouth, the stroke varies with different weights. I actually did them by drawing different closured shapes filled with black instead of keep changing the weights of its stroke. And one more tool I used was the “Curvature Tool”. After watching one Youtube video, I found that I didn’t have to drag the line so hard to make the curve, but just simply used the “Curvature Tool” to easily add points and curve the line. This is particularly useful when I was drawing the teeth. There were so many teeth and took too much time to use “Pen Tool” to draw the curve one by one. So what I did was to first draw bunch of closed triangles along the mouth, then I switched to the “Curvature Tool” to adjust their arc to make each tooth more unique and vivid. The basic idea of how it works is showing as follows:

Screen Shot 2017-04-17 at 7.14.59 PM Screen Shot 2017-04-17 at 7.15.15 PM

My finished shark logo and its composition points look like these:

Screen Shot 2017-04-17 at 7.21.24 PM

Screen Shot 2017-04-17 at 7.12.24 PM

–Text and Stars

As you may notice that I didn’t wholly follow the original shark drawing but drew a much bigger mouth, which was because I would add a title text in the centre. I typed “AWESOME” on a rectangle to cover on top of the logo. Also, I had left some space between my name and nickname in the upper text. I then used “Star” tool again and adjusted it by holding COMMAND key to a star that looked nice. By copying and pasting, I got four stars. To perfectly assign them to their places, I used some lines, rotating and reflecting, to be the guides. I also used the Align Tool a lot. After select my objects, there were several buttons on top which allowed me to align them horizontally and vertically centre. I should exclusive the stars each time I did the alignment, otherwise the stars would all overlap together in the centre.

guide Screen Shot 2017-04-17 at 7.32.07 PM

–A Few More Steps

Just like the IMA tutorial did, I selected the text and “Create Outlines” tool to change the text to shapes that will be constant when the laser cutter cut it. I also added a little bigger boundary circle and a 0.1 weight line to be the line that cut the stamp. I then used the “Reflect” tool to reflect everything vertically.

Screen Shot 2017-04-17 at 8.05.16 PM Screen Shot 2017-04-17 at 8.24.22 PM

The last step was to make another circle with the same size as the 0.1 weight one and put it one the back. Then I changed the fill color to red and selected everything and used Pathfinder tool to “Exclude” the color (stamp is usually filled negatively when its cut). Then I had my final laser cutter stamp ready to be cut!

Screen Shot 2017-04-20 at 3.37.04 PM

I want to give special credit and thanks to Marcela who helped me with my last step. As you can see I put the title text “Awesome” on top of my shark logo which has a white background color and it is what covered the logo part. So when it turned to negative, this part went wrong. Marcela helped me figured this out by trying those Pathfinder tools.

Finally, Marcela also helped me laser cut the stamp! It looks like this:

IMG_0396

4. What I learned

The experience of making this stamp is very exciting for me. This is a very good example of self-learning. Before this, I had no experience in AI at all but designing this stamp really makes me learn a lot about this useful software. The whole process was so much fun. I had so many ideas in mind and also got inspired a lot during my research. Just like adding that zigzag outer ring and the cool shark logo to the stamp, I made it happen by continuing growing my knowledge in this software. Any time I got stuck at some point, I would watch some Youtube tutorial videos and learned more tools to solve it. I skilled myself by trial and error, and I also compared different tools which might have similar effect by practicing them many times. Especially when I was drawing that shark, I zoomed the shapes and adjust the lines a lot to make it more perfect. The achievement is quite pleasing and I am so proud of my stamp!

5.Video Resources I Watched:

Screen Shot 2017-04-17 at 8.50.29 PMScreen Shot 2017-04-17 at 8.50.15 PM

Hope you like my stamp as well : )