Pixl - A Predictable Pal in a Pixelated Playground

Give me a clock, three counters, and a few coloured squares, and I will show you something that sleeps under the stars: Pixl.

A Keychain, a Clock, and a Dream

In the midst of the 2008 financial crysis, my pocket rattled with a plastic egg that beeped for food every two hours. It died often. It taught persistence, empathy, and the power of a single pixel turning from 😊 to 😢.

Pixl is a love-letter to that era—an attempt to prove that, even in a world of trillion-parameter transformers, small deterministic systems still spark genuine delight. There is no server, no randomness, no hidden neural net. Only the browser’s Date object, three integers, and a handful of SVG sprites that look best on a pretend-CRT background.¹

Go play with Pixl right now at pixl.humbertowoody.xyz — the code lives on
GitHub if you want to fork, tweak, or time-travel.

Three Numbers, Infinite Gestures

Every 30s the numbers drift: $$\begin{aligned} \text{happiness}_{t+30} &= \text{happiness}_{t}\;-\;2 \\ \text{hunger}_{t+30} &= \text{hunger}_{t} \;+ \;3 \\ \text{energy}_{t+30} &= \text{energy}_{t} \;- \;1 \end{aligned}$$

Left alone for half an hour Pixl grows hungry, drowsy, and a little gloomy—entropy with boundaries.

The Breath of the Machine

A laptop in Tokyo and a phone in Tijuana will see the same snores at the same moment. Pixl exists as a single, shared creature drifting through each visitor’s local midnight.

Five Axioms of Pixl’s World

1. Circadian
   Pixl dozes whenever the local clock reads between 10 PM and 5 AM. $$h \in [22,24) \cup [0,5) \;\Longrightarrow\; \texttt{sleeping/sleepy}$$

2. Dominant Need
   Physical necessities outrank mood: starving pixels grumble, exhausted ones sag. $$\begin{aligned} \text{hunger} > 70 \;&\Longrightarrow\; \texttt{idle\_hungry}\\ \text{energy} < 20 \;&\Longrightarrow\; \texttt{idle\_tired} \end{aligned}$$

3. Mood Gradient
   The emotional dial swings between 😊 , 😐 , and 😢 depending on morale. $$\begin{cases} \text{happiness} > 70 &\Rightarrow \texttt{idle\_happy}\\[4pt] \text{happiness} < 30 &\Rightarrow \texttt{idle\_sad}\\[4pt] \text{otherwise} &\Rightarrow \texttt{idle\_neutral} \end{cases}$$

4. Reinforcement
   Sustained affection lifts Pixl into brief, exuberant euphoria. $$(\text{pet}+\text{play})_{24h} > 5 \;\land\; \texttt{animation}=\texttt{idle\_happy} \;\Longrightarrow\; \texttt{idle\_ecstatic}$$

5. Scarcity of Kindness
   Limiting each action to three times per day turns care into a ritual rather than a click-spree. $$\forall\,a \in \{\text{feed, pet, play}\},\; \text{count}_{\text{day}}(a) \le 3$$

Maslow’s hierarchy distilled to five if statements—predictable yet expressive.² Skip one meal and you meet a grumbling blob; lavish attention and you earn that rare ecstatic bounce.

Portraits in Thirty-Two Squares

All art is plain SVG—$8\times8$ or $32\times32$ grids rendered with the property shapeRendering="crispEdges". The result are simple, pixel-perfect images that evoke the retro charm of early computer graphics.

A sleeping Pixl, eyes closed, dreaming of pixelated adventures.

A Walk Through the Source

Conceived as a single event-loop, Pixl’s logic is a few hundred lines of lightweight JavaScript. The core function, tick, runs every 30 seconds, updating the creature’s state and rendering the scene.

function tick(now):  
  stats ← loadStats()   # from localStorage  
  stats ← decay(stats)  # metabolic drift  
  scenery ← chooseScenery(now)  
  animation ← chooseAnimation(stats, now)  
  render(scenery, animation, stats)

A few key functions drive the experience:

• chooseScenery maps (month, hour) to spring morning, autumn night, or—on 25 December—christmas.
• chooseAnimation applies the five axioms above.
• Persistence is two keys in localStorage: one JSON object for stats, one ring-buffer for the last 100 interactions.

The entire illusion stands on ≈200 lines of logic and the viewer’s willingness to anthropomorphise.

Implementation in Brief

Want to expand the universe? Add a PR to the GitHub repo with some new clothing, behaviour, or scenery! Anything to keep Pixl’s world fresh and captivating.

Constraint as a Lens

The contemporary narrative says emergent behaviour requires a datacentre’s worth of silicon. Pixl demurs. Here, a single event-loop— armed only with a clock and three counters—displays recognisable moods, invites care, and even teaches patience through daily limits. The marvel is not that such simplicity suffices but that our minds long to complete the pattern.

Technology, at its most humane, is a conversation between what is specified and what is imagined. Pixl is my contribution to that conversation: a reminder that small, transparent mechanisms can still whisper stories.

As always, if you have any comments, want to chat, kill some time or cook some pancakes, you can always find me on Twitter: @humbertowoody.

Go play with Pixl right now at pixl.humbertowoody.xyz — the code lives on
GitHub if you want to fork, tweak, or time-travel.