The Scream
interactive interpretation of The Scream painting by Edvard Munch,
made with p5.js
p5.js is a JavaScript library for accessible creative coding.
Originally a team project, it shifted to individual submissions. We first built the artwork’s static shapes together, then each recreated it with user inputs and animations.
THE GROUP CODE
Inspired by the original painting and various online parodies, each team member created SVGs for a section of the artwork as the base for our individual submissions.
Reference: The Scream, 1893 by Edvard Munch
MY CONTRIBUTION TO THE GROUP CODE
THE CHARACTER
I illustrated the main character as a comical cartoon that screams with an increasingly dramatic expression. First, I experimented with basic shapes, but it was not precise enough. So I used vertex() and bezierVertex() in p5.js to build custom curved shapes.
To make the curved lines efficiently and accurately, I drew the shapes on Adobe Illustrator and exported it as an SVG vector. Then opened theSVG file in VS Code to access the path data, which I converted into p5.js code using ChatGPT and the svg2p5.com converter. These tools approximate SVG paths using bezierVertex(), but small inaccuracies can lead to noticeably different results. I converted one path at a time, testing each individually in the p5.js editor, and selectively added them into the final code.
The group code as the base of my individual submission.
ANIMATION & USER INPUTMy individual approach to the group artwork focuses on user interaction through both mouse and keyboard input to make the experience more engaging.
To reflect the chaotic background of The Scream, I drew visual inspiration from the artwork
plant growing_test by cloud.cb found in the OpenProcessing platform, which uses a brush-like effect I admired.
KEYBOARD INPUTI also changed the button labels "Levels 1–4" to keyboard keys “A”, “S”, “D”, and “F”. Then animated the largest mouth to quiver, referencing the
TikTok Pitch Perfect challenge to suggest a high-pitched scream.
TECHNIQUES
SPINNING BRUSHSTROKES
To make spinning circles that repeat like brushstrokes, I used rotate() and map() function and merged it with a colour changing technique I found in p5.js reference page. The map() function translates the mouse position value into different colours, and made 5 shapes in different sizes. The rotate() function creates the spinning effect around the mouse.
Reference: plant growing_test by cloud.cb
FINAL ARTWORK
Instructions:
1. Move the mouse from left to right to paint the background.
2. Click the buttons or press keyboard keys (A, S, D, or F) to see the character "scream".
