Interactive
Pumpkin

2021 
p5.js

Click me!
Please use Firefox if you're on iOS
(Mobile Safari is bugged)

Overview

Interactive Pumpkin is a simple Halloween-themed interactive piece coded through p5.js. It features a cartoon Jack-O-Lantern that lights up when you click on it.

The colours I've chosen for this piece was referenced off a previous artwork that I've done for Halloween in 2020. That artwork involved a similar Jack-O-Lantern that was animated to light up.

My 2020 Halloween illustration.

Image of my 2020 Halloween illustration.

Sketches

Before I started coding the illustration in p5.js, I did some mindmapping and sketches to see what stylistic choices were most viable. My original pumpkin drawing had too many edges on the mouth of the Jack-O-Lantern. It also had an irregular bezier shape for the stem of the pumpkin, which made it difficult to recreate in p5.js.

I decided that I needed to simplify elements of the illustration to make it more efficient. This meant using mainly plain ovals, rounded rectangles, circles and triangles.

Scanned sketchnotes of my iteration process.

Scanned sketchnotes of my iteration process.

Research and
rationale

Not a lot of research was required for this piece since it was simple and straightforward. I did however, use the p5.js reference page to achieve the final result. The reason why I went for the Jack-O-Lantern graphic was because it was a class exercise which took place around mid October.

In the process of creating the triangular mouth and thunderbolt background, I had to add an extra line of code which showed where the cursor was on screen (with x and y coordinates).

In order to embed the p5.js canvas onto this page, I had to import the libraries into my IDE (VSCode) to make it local, since the iframe embed from p5.js's web editor requires a https secure connection to function (UTS's student servers aren't https secured).

Tim Rodenbr√∂ker's Youtube video helped since Sam Lavigne's p5.vscode extension made it easy to set up a new p5.js canvas where I can copy and paste the code I've made in the web editor. I embedded the canvas using a local iframe.

Unfortunately, embedding the p5.js canvas in an iframe seems to have problems with interaction for iOS devices using Safari.

Decorative screenshots of research sites.

Screenshots of research sites.

Screenshots of the complete Jack-o-Lantern before and after a click interaction.

Screenshots of the complete Jack-o-Lantern before and after a click interaction.

p5.js
project link

If you're on iOS Safari and don't want to install Firefox for iOS, feel free to open the original p5.js project here:
editor.p5js.org/tsz.w.pang/full/V5tOCsPOZ

Project widget
(Interaction doesn't
work on mobile)