An invitation, not a rulebook
The introduction presents Fluffie’s problem and a single “Help” action. The story gives the next click a purpose before the timed game begins.
INTERACTION DESIGN / CREATIVE CODING
Cotton Cloudie
A small act of play.
A world with a story.
A candy-collecting game that turns the satisfying action of Pop It into a character-led digital experience. Help Fluffie gather scattered sweets, one tap at a time.
- CONTRIBUTION
- Concept, illustration & development
- FORMAT
- Interactive web game
- CRAFT
- HTML · CSS · JavaScript · p5.js
01 / CONTEXT & INTENT
How do you give a simple tapping mechanic a reason to matter?
The original process journal begins with the popularity of Pop It and asks how its tactile satisfaction could translate to a screen. Cotton Cloudie adds a small narrative: Fluffie’s candy machine has broken, and the player can help collect the scattered candies.
02 / DESIGN REASONING
The thinking behind the interface.
One action, immediate feedback
A nine-cell grid keeps the task focused. A candy appears, the player taps it, and the score increases. A short popping sound echoes the physical inspiration.
A soft world around a fast interaction
Pastel clouds, rounded character illustrations, and Fredoka’s friendly letterforms build a consistent visual voice. The journal also distinguishes the quieter introduction music from the energetic game track.
The experience, step by step.
A walkthrough of the documented experience.
- 01
Meet Fluffie
Understand the candy problem.
- 02
Help
Begin a short round.
- 03
Collect
Tap candies on the grid.
- 04
See the result
Review the score and play again.
03 / VISUAL EVIDENCE
A closer look at the work.
Original screens and process material. Select an image to inspect it at full size.
From sketch to character
Original journal, p. 9: early layout sketches and Fluffie’s illustrated expressions.
A friendly visual language
Original journal, p. 12: Fredoka and the reasoning behind its rounded forms.
The central interaction
Original demo capture: a clear grid, remaining time, and an illustrated guide.
Closing the loop
Original demo capture: a result screen with continuation and reset actions.
04 / EXPLORE
From explanation to experience.
Press Start preview, choose Help, then tap or click the candy as it moves. You can also use Tab and Enter. Music is off until you choose to enable it.
EXPLORE THE ACTUAL PROJECT
What this work carries forward.
The original reflection describes growing confidence in HTML, CSS, and JavaScript through debugging. This restored demo corrects duplicate timers and click handlers, adds keyboard and touch support, and keeps the original artwork and game concept.