Skip to content

🐳 Interactive web cartoon about the friendship between a boy and a fish

Notifications You must be signed in to change notification settings

jjeongin/Benny-the-fish

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Benny-the-fish

Project Description:

“Benny the Fish” is a kids story about a kid named Benjamin, whose dream was to get a fish. After writing a long letter to his parents asking for one, he finally gets his fish and names him Benny. With time, Benny gets bigger and bigger as the users interact with the comic to feed him. He gets so big that he is taken to the bathtub. After feeding Benny again in the bathtub, he realizes that he would need to let Benny go. With tears in his eyes, Benjamin lets Benny go to where he truly belongs: The ocean. But the story does not end there, as every year they meet each other again, and Benny takes his previous owner on a trip around the ocean. Truth is that Benny was never a fish, Benny has always been a whale!

Through this project we aimed at creating a webcomic experience where the user could interact with it and affect the course of the story. Through the watercolor painting, the soft tones and the cute characters drawings, we intended to bring back the “kids book” experience to our digital comic.

Screen Shot 2021-10-14 at 12 23 18 AM

By Pressing on the buttons, the user feed Benny. Every time Benny is feed, he grows.

Screen Shot 2021-10-14 at 12 23 34 AM

When the mouse hovers over the bathtub, Benny jumps from Benjamin's hand to it.

Screen Shot 2021-10-14 at 12 24 14 AM

This menu tab helps the user navigate through the different scenes.

Process:

As soon as we had the idea for the story we divided the implementation into 2 groups: Juan and Riley worked on making the visual side of the comic. They made the watercolor background using Procreate and the interactive pieces such as the fish, hands, button design and the whale using Adobe Illustrator. Jeongin and Mike worked on code. The library “One Page Scroll” was used to make the whole comic fit in one scrolling page. As Juan and Riley had already done the illustrations, they just added them to the html. Lastly they added the animations of feeding Benny and making him “jump” into the water by using functions in the JQuery library. Glitch was used so the code could be edited online by them simultaneously.

Reflection/Evaluation:

In this project we got to use some skills learned in class such as using illustrator to make the SVG design of the characters. We also got to use the JQuery library to add animations to our project. Although working on this project in a group seemed a bit challenging , we were able to work out well and get a result we were all happy with. When facing technical problems we reached out to each for help and were able to share and gain skills. Overall, we believe this group project was very useful to improve our communicative and social skills as we had to be constantly coordinating between the different groups and different parts of the comic to achieve the results we have now. We all agree that the final result came far better than we expected when we first brainstormed and planned the project.