The Performance
The resultant creation from an exquisite corpse is often a complete unknown. This kind of generative process employs the use of the human random-the creativity which is borne from each of our own unique experiences. Stringing together multiple highly qualitative random variables is a wonderful recipe, the results of which are just as jarring as they are unexpectedly enlightening.
Working with Gretchen Steinbrunner and Jason Brill, a character was created, an amalgamation of our creative experiences and thoughts.
Once we had exchanged body parts, the character I ended up with was visually unique to say the least! This character, moulded by the mixed histories of abstract art, a brutal past, and the idea of pure spirituality, would now inhabit a world created by my p5.js sketch. They (the character) have a rich tradition of performance and the arts, and would like to find a medium of practice within their new embodiment. They have a deep interest in exploring the intersection of theatre, dance, and music, to tell their own personal stories. With such a diverse and often violent history, they have a lot to say, with the intent to inspire others to tell their own stories.
The assembled character (they/them)
Use keys 1 2 3 4 5 6 7 8 9 0 to interact with the sketch (don't forget to click on the sketch before pressing any keys!) You may need to used Firefox/Chrome to enable sound. There's an issue with Safari and p5js editor at the moment!
Design Process
Prior to starting any work, I knew that I wanted to explore the movement and form with this character. With the complexity of the components of the character (especially the torso), the wiser approach would be to use images and generate novel forms. I initially tried to use the different components as individual objects, but soon came to the realisation that image manipulation within p5.js was not ideal, and other tools would be better suited for this task. Even after manipulating the different elements (head, torso and legs), connecting them together to generate new forms was proving to be quite difficult. The dimensions of the image were different with every source component and hence it was proving impossible to create a perfectly formed character.
To get around this limitation, I created different character variations using image manipulation software to ensure that the different components would fit perfectly with each other. Performing the same task within p5.js led to gaps and spaces between the body parts. The multiple variations of the characters were uploaded and used as the elements for the performance. Each variation of the character was mapped to a different number on the keyboard, and a different position on the screen. To accomplish this, I created a function which used values from 0-9 to compose each figure on the corresponding part of the screen. I envisioned the canvas to be a stage for the charater to perform, with each number from 0-9 triggering a different scene of the performance. With each scene, a different character variation is called upon, foregrounded on a particular section of the stage.
Audio is a key component of this performance. In addition to a different variation of the character being called upon each scene of the performance, a unique sound sample is also triggered. The sound samples were downloaded from soundpacks and edited to create snappier samples to be used as the corresponding sound for every scene. The intent is to have the viewer play the sketch as an instrument, directing the performance of the character. With each scene, the viewer will see the character in a different form, and hear a different sound. The sounds are just long enough so that multiple sounds can be heard at the same time, overlapping over each other to create an abstract soundscape.
In order to tell a story through the sketch, I added breaks in between the scenes. Inspired by the slides of text that appear between scenes of silent films (Ã la Charlie Chaplin), the interludes tell the story of the character. Summarised into brief thoughts, the character attempts to communicate with the viewer and talk about their journey. This element is important as it serves as a visual break between the scenes, and enhances the narrative aspect of the performance.
One of the key techniques used in the sketch was the use of
eval(). This allowed me to easily call out different scenes
which caused the correct character variation to be displayed and the
appropriate sound to be played. By evaluating the programmatically
generated strings, the corresponding functions are called
upon. The intent was to write as little code as possible, and minimise
repetition.
Once I had the basic sketch completed, I started adding in the smaller
transitions and visual elements to tie the whole piece together. I
edited the sound to make it trail off in certain samples, and give a
sensation of space. The background coloured lights in the stage was
carefully manipulated with colorMode(HSB) and
random() to give the sensation of flickering stage lights.
The opacity of the background() was reduced and the opacity
of the text was tied to millis() to give the appearance of
the text slowly fading in. I also used a
sin(frameCount) with the main text to make it pulse ever so
slightly. Just as I was putting in the final touches, I realised that
the character would look much better with a drop shadow, which would
allow it to 'pop' out of the stage. A quick scan of the p5js reference
page revealed the presence of the drawingContext function,
which allowed me to quickly add in a drop shadow to every image without
having to edit the images and reupload them.
Reflections
What started out as an experiment with modular functions and a fun character building activity, transformed into a project with meaning and a platform to explore methods to refine the visual and experiential aspects of the sketch. In retrospect, it perhap sounds a little far-fetched to see meaning in a disfigured character created with the help of an exquisite corpse exercise, but once I saw potential in the story, I found the motivation to work on creating a cohesive experience. I felt like a director, producer, and conductor all rolled into, managing different aspects of the performance and the storytelling.
It is definitely possible to elevate and improve a p5js sketch using basic visual elements of contrast, form, and motion, along with a strong narrative. P5js is after all, just another tool which can be used to tell stories, both good or bad. The capabilities of the platform can afford new kinds of visual and aural experiences. The ability to create bespoke functionality for certain outputs and results makes it especially useful and powerful. Just as p5js is a custom library for javascript, we too can create functions to make a framework for our own purposes.