P5.js Explorations

Roles: Creative Coder, Interaction Designer, Visual ProgrammerTools: P5.js, JavaScript, HTML/CSS, OpenType.js, Github



A collection of interactive sketches and experiments using P5.js, focused on visual computation, generative motion, narrative logic, and digital expression. These explorations test how code can become a medium for storytelling, perception, and play.

Interactive Typography Project

Project Summary:
This sketch transforms static text into a responsive visual system. Letters stretch, distort, and animate based on cursor input and time-based triggers. Inspired by kinetic typography and live motion graphics, the project treats language as a living, reactive form.



Design Goals:
Use motion and parametric math to animate letterforms

Explore expressiveness in typography beyond static composition

React to user interaction in real-time (mouse interaction, clicks)

Treat language as performative rather than fixed

Outcome:
An experimental type sketch that turns reading into interaction; blurring the line between form, function, and visual language.




Platformer Game with Branching Narrative

Project Summary:
This 2D platformer merges narrative choice with level design. As players explore the world, their decisions change the environment, dialogue, and outcome. Each branching point affects not just story text but physical navigation and enemy behavior.

Design Goals:
Combine traditional platformer controls with narrative decisions

Implement branching logic usnig arrays and conditional states

Design levels that reflect emotional tone and story divergence

Encourage replayability via multiple endings

Outcome:
A small-scale narrative game built entirely in P5.js, showcasing how even simple mechanics can carry complex player agency and world-shaping decisions, demonstrating how conditional logic becomes a tool for shaping branching player stories.



Minecraft-Inspired Experimental Clock

Project Summary:
This project visualizes time using a Minecraft-style aesthetic. Blocks represent changing time states, shifting form and color based on live cycles and pseudo-random seeds. The clock uses modular generation logic to simulate environmental rhythms.

Design Goals:
Simulate time using digital “blocks” in a grid-based interface

Create real-time transformations based on hours/minutes/seconds

Integrate Minecraft-style chunk design for visual familiarity

Treat time as spatially manipulable

Outcome:
A playful, ambient visualization of time, blending creative coding with nostalgic visual language and procedural systems.




Optical Illusion Experiment

Project Summary:
This interactive sketch explores how motion, contrast, and placement affect visual perception. Inspired by op art and mathematical patterning, it uses programmed oscillation and distortion to generate illusions of depth, movement, and spatial warping.

Design Goals:
Use sine/cosine and transform functions to simulate illusion

Play with colour contrast and visual interference patterns

Engage users in altering illusions via input or motion

Explore psychological limits of shape recognition and motion blur

Outcome:
An interactive visual experiment that challenges perception and highlights the power of generative code to affect how we see and interpret motion and space.