Shiba Inu In Wonderland

Course:  Creative Technology 2 - 22SP 
Project #2_ digital dream space

This wonderland belongs to a Shiba Inu who owns three quaint cottages. He lives with Ponyo, a young goldfish princess escaping from the ocean. Visit this wonderland. Many of his unexpected secrets are waiting for you to discover.


Overlooking the entire wonderland, you can see the three main parts that compose it, including an island with tents, an open treehouse, and a quaint cottage on the side.

welcome scene.gif

To make Wonderland look more appealing,  two welcome video are played at the entrance.


On the island area, you will see a campfire lits next to the tents.


A shabby cottage is located on the opposite side of the island.

main cabin.gif

As you enter the treehouse, the central part of Wonderland, you have a chance to meet the owner and learn more about his private space.


Interior of the tree house

iteration before.png

Iteration #1:

To ensure each device is functional and each interaction is reasonable, I embedded a video on the TV.

TV section.gif

After the iteration

iteration2 before.gif


Since the surreal animation helps convey the atmosphere of Wonderland, I replaced the still images with gifs as the welcome billboard.


After the iteration


A Phobbling's Data Portrait

Course:  Creative Technology 2- 22SP 
Project #3_ Mediated Extension of Self

Everything about social media is designed to grab the user's attention. When you subconsciously trigger an app, you are always drawn to its design, just like some of the addictive deployments in Las Vegas that keep you in their casinos longer. People can't help but be immersed in social media, even when driving, having dinner with their family, or chatting with others. This symptom of staring at your phone screen is what we call "phubbing".

In this project, we explored how digital technology can expand and enhance our senses, bodies, and perception of ourselves. By creating a device that collects data about the time I spend on my phone, I collected and distilled seven days of phone usage data, ultimately presenting them in a visual form. It's what I called Phobbling's Data Portrait.

Screen Shot 2022-03-12 at 9.28.53 PM.png

#1 Coding in Arduino

In this project, I chose to use a touch sensor to detect if the phone was taken away. Specifically, if the phone is detected to be on the device, it means I am concentrating on my work. Otherwise, I might be engrossed in social networking.


#2 Hardware Assembly


#3 Connect with Adafruit 


Start Data Collection (1).gif

When the value equals zero, it means that the cellphone is not on the device. The reverse means the cellphone is placed on it.

Screen Shot 2022-04-20 at 8.37.31 PM.png

#4  Import the collected data into visual studio.

Screen Shot 2022-04-20 at 8.40.20 PM.png

#5. Create the pattern to be displayed on the interface.


#6. I use mouseEvent to randomly change the background color by moving the mouse position to enhance the visual effect.




By moving the slider left and right, you can adjust the amount of data presented in the interface. And the size of the data quantity will change the appearance of the "portrait."


Apple Killer

Course:  Creative Technology 2 - 22SP
Project #4_ Building For Play

Apple Killer is inspired primarily by the classical puzzle video game Angry Birds. Different from it, in this game, the slingshot is launched from the bottom up of the screen, with the intent of smashing the apples thrown in the air. To make the comical style look more straightforward to understand, several main elements of the game, slingshot, stones, and apples, are from my lame hand drawings


#1 Coding in Arduino
In this project, players could slide the joystick left or right to control the launch direction. Press the joystick vertically to fire the bullet.


#2 hardwares assembly

  • Arduino Uno

  • Joystick

  • Breadboard

#3 Fix the joystick on the handle



  • Coding in processing 

  • Import the background image and three main elements into Processing

  • Establish and process serial communications

  • connect with Arduino 

  • Adjust the control mode of slingshot from "keyboard control" to "joystick control."



Game Testing

Game Testing


Defend the cookie

Course:  Creative Technology 1 - 21FA Sec 01
Project #3_ machine learning

In this game, I intended to control the puppy's movement through the machine learning Speech Commands model. Players can help the puppy jump over the oncoming cookies by issuing the command "up"!


After creating a new Javascript file "puppy.js", I forgot to reference it in the HTML, which caused the "undefined" problem.


To make this game more enticing and engaging, I added a background and changed the rectangle to an image controlled by the player.


In order to give the "puppy" enough time to react to incoming cookies and then skip over them, I reduced the probability of adding cookies. That is to say, the frequency value was changed from 0.03 to 0.006. This subtle change greatly improved playability and improved the game experience.


Initially, I intended to use the PoseNet to control the puppy's movements by waving hands. Whereas, when I realized that my movements could not be captured flexibly by the camera, there was a delay in the puppy's movement, which would lead to a poor gaming experience. I decided to use the speech command model, the backup plan, to manipulate the game proceeding smoothly.



Course:  Creative Technology 1 - 21FA Sec 01
Project #3_ interactive system

This game is based on a classic mobile game--- Snake. There are not many much-sophisticated skills that need to be maste. All the caterpillar can do is move up, down, left, and right. Eating, growing, endless repeating is the crucial mission of it. Caterpillar grows longer each time it eats.  However, unlike the traditional snake game, it would be over once the Snake hit the wall or bite its tail. The caterpillar is only set to die by hitting the wall, which reduces the difficulty of the game.



The running system of caterpillar

I use different shapes to clearly distinguish between caterpillars and food.

To make the game easier to play, I adjusted the parameters of framerate so as to reduce the speed of the caterpillar's movement.


From investigating the use of the "Array.shift" function, it's feasible to help me present changes in the growth of the caterpillar's body.


Bubble Bath

Course:  Creative Technology 1 - 21FA Sec 01
Project #1_non-linear movement

Countless bubbles will appear in front of players eyes. They will take up the entire screen, which may induce an aversion to people who have Trypophobia unless they keep clicking the mouse.

bubble bath.gif

To create a screen dimension for this project, I used the "windowWidth" syntax.

To create the colorful bubble effect, I used the random() syntax to randomize the color and size of the bubbles.

As the transparency of the background color is adjusted, the background color begins to overlay as the code loops, resulting in a gradient effect.


To enhance the interaction between the audience and the project, I use the mousePressed() function, which allows the them to control the number of bubbles and the color of the background by clicking the mouse.


Bézier curves

Course:  Creative Technology 1 - 21FA Sec 01
Project #1_ organic shape

In this project, I used the Bezier function to create a series of smooth and rhythmic curves.

Perlin noise.gif