👻 ⭐ Henry’s Ghost Saga:
Twinkling Stars with P5JS
A sinusoidal star field ported from Python Processing to JavaScript p5.js.
Same math, same HSB color mode, same click-to-toggle — also in Java.
See the App Comparison for all three languages side by side.
The Same Sketch, a Different Language
This page hosts a JavaScript p5.js port of
twinkleStarSketch.py, a standalone Python Processing sketch.
100 yellow-family stars are placed randomly across a deep-purple night sky.
Each star's alpha (opacity) is driven by a sine wave with a unique
per-star phase offset, so they all twinkle independently. Clicking the canvas
toggles the effect on and off.
The logic — the math, the HSB color mode, the sinusoid formula, the star list, the
click handler — is identical in both versions.
The differences are purely syntactic: Python dicts become JS objects,
star['x'] becomes star.x, size()
becomes createCanvas(), and snake_case becomes camelCase.
colorMode(HSB, 360, 100, 100, 100) •
stroke(h, s, b, alpha) with per-frame alpha •
point() for stars •
sinusoidal twinkling via sin(B × (frameCount + offset)) •
createCanvas().parent('id') to embed the canvas in the page layout
Live sketch requires a larger screen.
Try rotating to landscape.
Live Sketch
Click the canvas to toggle twinkling.
Each star samples the same sine wave at a different phase offset.
Cross-Training Note — Python vs JavaScript
The Python Processing version (twinkleStarSketch.py) and this p5.js version
are line-for-line equivalent in logic. Reading them side by side is one of the clearest
demonstrations that the algorithm is language-independent: the sine wave
math, the phase-offset trick, and the HSB color strategy work identically in both ecosystems
because both speak the same Processing vocabulary.
- Python:
star['x']• JavaScript:star.x— dict vs object - Python:
size(CW, CH)• JavaScript:createCanvas(CW, CH).parent('id') - Python:
should_twinkle = not should_twinkle• JavaScript:shouldTwinkle = !shouldTwinkle - Identical in both:
colorMode(HSB, 360, 100, 100, 100)•background()•stroke(h,s,b,a)•point()•sin()•TWO_PI•frameCount•mouseX/mouseY
App Comparison (JS / Java / Python) • Python source • Movie clip