Overview
animal catcher
Technical Details
Technical Details
Built using p5.js, this project is optimised for touch screens and works across phones, tablets, and desktops.
Core Files:
index.html – Simple HTML shell that loads p5.js and the sketch.
style.css – Locks the canvas to the full viewport and disables browser scrolling.
sketch.js – Contains all the logic for animal creation, detection, and scoring.
Key Features:
- Emoji-based animals instead of images for faster loading.
- Touch detection using touchStarted() and touchMoved() events.
- Gentle score feedback (just a counter, no noise or flashing).
- Automatically regenerates new animals to keep play continuous.
- Minimalist visuals with a light green background for a soft feel.
By keeping everything simple, it remains lightweight and responsive even on older devices.
Results
Creating Animal Catcher reminded me how playful code can be when built with purpose. It’s not just a technical exercise - it’s a little moment of happiness coded into motion.
This project deepened my understanding of event handling on mobile devices and touch-friendly interfaces. But more than that, it taught me the value of designing for real people in real situations, in this case, restless toddlers and tired parents who just need two calm minutes to breathe.
It’s now a staple on my family's phone and I love that something built for practice turned into something used every day.
