Koi Google Doodle

Google doodles are temporary alterations of the logo displayed on Google’s homepage, aimed to celebrate holidays, events, achievements, and historical figures. The very first doodle was created by Google co-founders Larry Page and Sergey Brin in August 1998 to notify users that the site would be left unattended while they were attended Burning Man. This doodle became so popular that the founders created a second for Thanksgiving, and eventually employed Dennis Hwang as the main Google doodle designer. Google doodles were controversial at first, subverting traditional branding practices. However, the fun drawings and animations have come to represent Google’s creativity and diversity, and are appreciated all around the world.

Features

I’ve seen a different Google Doodle almost every time I’ve used the internet since I was very young, so I thought it would be fun to design and create one myself. I love finding unique ways to combine my skills in programming and design, and this was a perfect opportunity. All the koi fish, lily pads and flowers are randomly generated (note the random number of petals). The bodies of the koi are dynamically generated shapes built around a series of circles (see diagram below). If you click anywhere inside the blue box, ripples will spread out around your cursor and any nearby koi will swim away. The website also includes a working search bar, operating just as the Google homepage does.

Challenges

By far the most difficult aspect of this project was generating the koi bodies. I wanted the fish to interact with the cursor, so they had to be able to change shape and direction dynamically (this meant I couldn’t use a pre-recorded animation). I first learnt how koi moved by watching videos of them swimming in ponds. I then wrote an algorithm that generated koi bodies by tracing around the outermost edges of a series of sequentially smaller circles, and used a trigonometric function to mimic the swaying of real fish tails (see diagram below). I also noted that koi fish tend to swim in groups, so I implemented Professor Daniel Shiffman’s flocking algorithm which allows ‘agents’ (the koi fish) to experience an attractive or repulsive force between other objects. In my implementation of the algorithm, koi fish are attracted to one another and are repulsed by the location of a mouse press.