Digital and Web + Kinetic Type + Creative Coding + Storytelling + Interaction
Swimmy
a creative coding project that reimagines storybooks and storytelling in the digital age, using interactive kinetic type to convey the timeless tale of Swimmy the fish by Leo Lionni
DURATION:
Nov 2019, 1 week
SKILLS:
p5js, javascript
MY ROLE:
Planning, design, and programming of the whole project
CLICK TO BEGIN
With the transition from books to other tools of storytelling such as the iPad and smartphone, stories and the way they are told must respond.
Based on a variation of the story of Swimmy the fish by author, illustrator and art director, Leo Lionni, Swimmy is the story of a small black fish living amidst a colony of white fish. This is Swimmy’s story of overcoming differences and finding strength in being unique. It was the story my father told me every night as a child.
The way the white fish tries to interact with the black fish, is a visual representation of the story's entire premise where swimmy tries to fit in, but is shunned by the white fish. The reader controls the white fish.
Currently hosted on p5js. This project was my first ever interaction with p5js and javascript code.
Special mention to Daniel Shiffman's 'The Coding Train' Youtube Channe
Process:
The kinetic type workshop with Tim Rodenbroker made me excited about the possibilities of computation/machine-generated art.
I thought about how I could use this way of computing to code complicated movements and bodies containing many smaller parts (such as a herd of sheep) into doing things with much less effort than it would have taken to do it all in animating software. Getting exciting, and sometimes unexpected, results were just an added bonus. I began to build on this idea. I thought about bees and beehives and then soon came upon the idea of a shoal of fish.
I kept thinking of the Pixar film Finding Nemo and that little sequence in it where a shoal of fish were helping Nemo’s father Marlin who was looking for his son. The shoal morphed and changed shapes to narrate a story to Marlin. This line of though brought me to the idea of Swimmy The Fish.
For the next version of Swimmy:
-
I must make the fish seem a lot more alive. I want to make them alive and responsive to one another within a shoal and not just Swimmy. I would like to make them change the directions they face as real fish would.
-
I want to figure out how they can move in certain specific directions and formations to look like a real, alive shoal (like in Finding Nemo)
-
Build on point 2 to transition realistically from one word to another.
-
Testing the final result on the target touchscreen device to seek areas of improvement and polish the experience
-
Give thought to how another story might fit in with this wider concept of interactive storytelling for children in the digital age.
-
Be open to where this journey takes me :)