I'm excited to share details about an upcoming collaboration with oil painter Amber Buckley to digitally recreate her latest artwork titled "Hello my name is."
The project brings together oil painting, p5.js, React, and Next.js to create an interactive digital painting, extending her existing piece into the online space.
All images used throughout this post capture Amber's original artwork: Hello my name is, 2023, oil on canvas and board.
Amber’s perspective
"Identity is a complex and multifaceted concept that encompasses various aspects of an individual’s sense of self and how they relate to the world around them. This work aims to foster self-discovery, empathy, play and connection by inviting participants to creatively represent their identity on a canvas. The initial painting, (Hello my name is, 2023, oil on canvas and board) was derived from name labels commonly used within sticker graffiti. The viewer can physically respond to the work by participating in writing on the surface of the canvas.”
The Digital Interpretation
The culmination of our collaboration will manifest as a digital, interactive rendition of the painting, easily accessible online through a dedicated website. Viewers will be able to use digital artistic tools to personalise the depiction of their identity, subsequently downloading their name label once finished. Additionally, they will also be able to contribute their creation to the global collection, showcased on the website.
Technical Reflections and Challenges
The intricacies of integrating p5.js within a React environment are well-documented, often demanding a touch of tinkering. Adding a layer of complexity, my choice to also incorporate Next.js, renowned for its server-side rendering capabilities, presents its own set of challenges.
While it might seem simpler to rely on Vanilla JavaScript and Node.js when working on a project like this, I've embraced the Next.js journey for no other reason than I enjoy a challenge.
The work is still very early in draft stages at the moment, but already i’ve found that ensuring responsiveness across different viewports hasn’t been easy, mostly because the window object (client side) is mostly absent in the Next.js (server side) environment (cue useEffect to the rescue).
Yet, therein lies the beauty of being a creative programmer… for me anyway!
As long as the final result functions, the struggles will have been worth it. Not only will I have gained a huge amount of experience working with p5.js in a different environment, I’ll enjoy a whole host of benefits from using Next.js once everything starts working later on.
Thanks to our Funders.
This collaboration was made possible because of a grant awarded by the EMERGE creative studio - thank you!