Whale! in P5

For ICM week one we had to create our own screen drawing in P5.js using only 2D primitive shapes.

My drawing is inspired by a recent whale watching trip out on Cape Cod. I’ve wanted to go whale watching since I watched “The Voyage of the Mimi” in third grade.

On our trip we saw four humpback whales— two mothers with their calves. They played with us, breaching, waving, flipping their tails up and swimming under the boat. It was AMAZING. I’ve been geeking out about whales ever since.

My drawing is above (or online here) and my code is below.

Having used Illustrator and Photoshop for years, I found drawing with P5 really frustrating at first (I kept wanting to draw with my trackpad!!). After a while though, I started to get used to it. The one thing I still find difficult is that I cannot see coordinates on the drawing in the editor. This functionality would make placing objects much easier and quicker.

Also,  I was frustrated with the JS functionality in Chrome dev tools. I’m used to working with CSS, where you see changes as you make them. So, having to save to see style changes took some getting used to.

Before you get to the code, enjoy 25 seconds of whale watching bliss caught on my cellphone. 🙂

And, here’s the code…