Music was cut for copyright purposes, but the original song is “I Wanna Dance with Somebody” by Whitney Houston.
I Wanna Dance With Somebody
Experimental Sprite Animation and Canvas System Logic
I Wanna Dance With Somebody is an interactive digital performance that transforms real-world movement into a retro 8-bit game aesthetic. By repurposing traditional photo-editing and web-development tools for character animation, I created a dynamic dorm-room dance party where the user’s cursor acts as a spotlight, triggering animated sequences across a multi-layered canvas.
Project Specifications
Role: Lead Animator & Creative Coder
Context: FMX 310: Creative Coding | University of Tampa
Tech Stack: Adobe Photoshop, Adobe Premiere Pro, Adobe Dreamweaver (JavaScript/HTML5 Canvas)
Technical Scope: 24-frame sprite sheets | 6 unique animated actions | Randomized coordinate mapping
The Vision: Retro-Human Hybrid
The objective was to make the human form appear like a game character. By rotoscoping and cleaning video footage of myself and my roommate, I created a series of sprites that maintain the energy of a real dance while fitting the aesthetic of an 8-bit classic. The project explores the concept of hidden interactivity, where the different dance moves and images only reveal themselves through user exploration.
Key Animation Objectives:
Non-Traditional Pipelines: Using Photoshop to manually clean and sequence video frames into a professional-grade sprite sheet.
State-Based Interaction: Programming the canvas so that specific animations only trigger based on the user's mouse position.
Atmospheric Layering: Synchronizing music, a rotating disco ball, and shifting backgrounds to create a cohesive environment that allowed our dorm room to turn into the dance floor.
The Process: Overcoming Software Constraints
Using software like Photoshop and Dreamweaver for frame-by-frame sprite animation posed a significant technical challenge:
Frame Extraction & Cleaning: I filmed real dancing videos and used Adobe Premiere Pro to export individual stills. I then brought these into Photoshop to remove backgrounds and standardize the silhouettes.
Sprite Sheet Engineering: I had to manually align 24 frames for each of the six actions into a single large-scale sprite sheet. This required extreme precision in grid alignment to prevent the animation from jumping when played back.
JavaScript Animation Logic: In Dreamweaver, I wrote the logic to slice a sprite sheet in real time.
Coordinate Mapping: I assigned various X and Y coordinates to each action. By coding a distance check between the mouse and the coordinates, I ensured that the dancers would appear only when the user was nearby, creating a sense of discovery.
Reflection: What I Learned
This project was a massive lesson in technical patience. Using Photoshop to build a sprite sheet from scratch, without an automated game engine, really made me understand exactly how 2D games work. The hardest part was making sure the twenty-four frames of each dance move lined up perfectly so the movement felt natural. It challenged me to bridge the gap between video production and creative coding, and I’m proud of how the interactive piece turned out.
Looking Ahead: Accessibility In Creative Tech
My work with sprite sheets and coordinate mapping has given me a new perspective on my Honors Thesis research on visual attention. I am interested in how we can use these animation techniques to make websites more engaging without slowing load times for users with slower internet connections. For the future, I want to explore how AI-assisted rotoscoping can speed up this process, allowing designers to create high-quality, character-driven interfaces that are accessible and fun for everyone.