top of page
INTERACTIVE SIMULATION
GRAPHIC DESIGN/JAVASCRIPT/ SCHOOL PROJECT
This is one of my recent projects that involve both graphical elements and coding elements using Javascript to create a simulation for users to go through the process of making a bubble tea.
Click the image to see the final video
My ROles
Project
Duration
Graphic Design
Illustration
Programmer
Individual
1 week - Spring 2022
why this project was made?
This project was done during the first term of my second year at SFU. During this time, I was having a part-time job at a bubble tea shop, and I wanted to bring my barista experience into this project. Even though coding has never been my strength before, completing this project was truly a fun and challenging journey!
Unique of the project
The project aimed to work on a simulation, which is considered to be a process for users to complete. I have to take this requirement into consideration and make sure that the simulation is easy to follow, there are no such challenging elements preventing the users from finishing it, and no gaming elements should be involved in the simulation either.
Design process
Because of the nature of the program I used for this project, I first carefully planned out each element of the process I wanted to be involved in by creating different classes for each of them.
Listing out all of the elements I need for the simulation
getting into illustration
After finishing the basics of the code body and classes for each of the elements, I spent time illustrating all the elements I need for my project using Procreate. One thing I always considered when doing these illustrations is that they have to have the same size and be small enough to fit in with the window size I created before.
Some of the main components in the simulation
Finishing the code and visual elements
The last step is to put everything together, debugging any code errors and making sure each of my images is put in the right position.
Reflection
Coding is definitely a challenge for me but I made it! By doing this project, I was able to bring my real-life experience as a barista to others and at the same time, improve both my coding skills and illustration skills in general.
FInal Work
If you want to see the final version of the simulation, click on the image at the top of this page or the link is here:
https://youtu.be/I7_NJW1h51w
bottom of page