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.
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.
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 #1:
To ensure each device is functional and each interaction is reasonable, I embedded a video on the TV.
After the iteration
Iteration#2:
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.
#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
Test
Start Data Collection
When the value equals zero, it means that the cellphone is not on the device. The reverse means the cellphone is placed on it.
#4 Import the collected data into visual studio.
#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.
output
#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."
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
#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
Game Testing
Game Testing
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.
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.
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.
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.
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.
