Overview
Tap to Calm grew naturally out of my earlier creative coding experiments. Where Mindful Circles explored motion and space, this project introduced touch, colour transitions, and subtle game mechanics. I wanted something that could work anywhere — a single file that loads instantly and creates a few moments of calm for anyone who opens it.
It’s a browser-based mindfulness tool built entirely with p5.js and no external dependencies beyond the library itself. The aim was simplicity, portability, and softness — something lightweight enough to run on a mobile browser yet visually rich enough to feel immersive.
When the page loads, animated orbs drift gently across a gradient background. Each tap triggers a small burst of colour, a shift in “breath level,” and a rising sense of rhythm as the background hue changes over time. There’s no timer, no failure, and no noise — only interaction and flow.
Technical Details
This project is written entirely within a single HTML file. Everything - the structure, styling, and p5.js logic - lives inside index.html, making it easy to host and share.
Languages / Tools: HTML, CSS, JavaScript, p5.js
Design choices:
- Gradient background blending cool violet and deep indigo hues.
- UI overlays for score and “breath level,” designed to fade in softly.
- Animated orbs that pulse, drift, and respond to user taps with particles.
- Mobile-friendly touch support via touchStarted() events.
- Auto-start behaviour with gentle fade transitions for accessibility.
Because everything is inline, it demonstrates how a compact, single-file structure can still deliver a complete interactive experience.
Results
Building Tap to Calm helped me explore how minimal code can create meaningful impact. It deepened my understanding of timing, animation pacing, and emotional interaction through colour.
The finished result feels part meditative tool, part digital art. It works well in quiet spaces or short breaks — moments when someone might need to recentre or refocus.
This project also taught me to think about accessibility in interactive art — designing with larger hit areas, soft colour contrasts, and text overlays that encourage mindful engagement rather than distraction.
If I expand it in future, I’d like to experiment with:
Sound-reactive visuals that move with ambient tones.
Different mood themes (“Focus”, “Flow”, “Rest”) based on colour palettes.
A shared gallery of interactive calm tools that blend art and code.
