Wing Pang

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.

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.

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.

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