My p5.js Critter
This week, I created my first drawing in p5.js. I started off gung-ho, wanting to create a version of Pac Man staring down ghost; however, I encountered a number of issues and ended up more frustrated than enjoying the process. It took quite a bit of experimenting to get the arc() function properly display my Pac Man, but I was eventually able to get it to a point where I was happy with it; the ghost, however, was another story.
My plan was to place an oval, then a rectangle on the lower part, then, on the bottom of the rectangle, place a number of triangles to create the shaggy bottom of the ghost’s form. It was the creation and the placement of the triangles that got me most frustrated… and then the realization that all the work I’d done was so far up in the corner that I’d have to re-figure all the x,y positions, that convinced me this was above my first-timer skill level. I wasn’t even all that excited about the subject matter. I decided to take a deep breath and begin again.
I spent a summer many years ago working at a fitness camp (aka “fat camp”) that had relocated to the campus of Hampshire College in Amherst, Mass. after a fire in the off-season had destroyed much of the camp’s grounds. One of the (many) interesting things about the campus was that it was home to the Eric Carle Museum of Picture Book Art. For those of you who may be unaware, Eric Carle is the creator of the book The Very Hungry Caterpillar. I decided to use this as inspiration.
To create my Critterpillar, I used the ellipse() function to create circles (which I realized later had it’s own function) and repeated the command, replacing the x,y positions and the RBG color codes to create a chain of body parts. I created eyes using the circle() function, a mouth using the ellipse() function (as it was intended, i.e. for when more than a circle is desired) and antennae using the arc() function.
For the most part, my experience using the web editor was positive. There were a few points of frustration. My drawing didn’t autosave as often as I thought it would, so realized later that I had to go back and redo some of the code after I accidentally closed the browser window that had the editor. Also, using the editor to position things using the x,y coordinates was a bit frustrating at times. That said, it’s amazing to be able to use code to create such colorful and multi-faceted images.
Here’s a link to the code I used to create my Critterpillar in p5.js.
