top of page

 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.

profile.gif
CREATIVE TECH: Image
wholescene#1.gif

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.

cabin3.png

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

cabin2.png

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

CREATIVE TECH: Projects
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.

INNER.gif

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

Iteration#2:

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

iteration2.png

After the iteration

CREATIVE TECH: Projects

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.

1.gif
CREATIVE TECH: Image
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.

WechatIMG4015.jpeg

#2 Hardware Assembly

WechatIMG4018.jpeg

#3 Connect with Adafruit 

 Test

Start Data Collection

ezgif.com-gif-maker (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.

CREATIVE TECH: Projects
3.gif

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

4.gif

output

2.gif

#7 
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."

CREATIVE TECH: Projects

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

output.gif
CREATIVE TECH: Image
arduino.gif
hardware.gif

#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.

test.gif
processing.gif

#2 hardwares assembly

  • Arduino Uno

  • Joystick

  • Breadboard

#3 Fix the joystick on the handle

output.gif
tester.gif

#4 

  • 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."

Interface

playtester.gif

Game Testing

Game Testing

CREATIVE TECH: Projects

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"!

cookie.gif
CREATIVE TECH: Image

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

c1.png

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

WechatIMG3480.jpeg

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.

WechatIMG3481.jpeg

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.

WechatIMG3485.jpeg
CREATIVE TECH: Projects

Caterpillar

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.

Caterpillar
CREATIVE TECH: Image

 DIAGRAM:

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.

Untitled.jpg
WechatIMG3486.png

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.

WechatIMG3487.png
WechatIMG3488.png
CREATIVE TECH: Projects

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
CREATIVE TECH: Bio

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.

WechatIMG3492.png
WechatIMG3489.png

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.

WechatIMG3491.png
WechatIMG3490.jpeg
CREATIVE TECH: Projects

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
1.1.png

When I set the incremental value t=0.1, the motion is not coherent and you can even see each Bezier curve. Then I changed this value to 0.004 and the motion became smoother.