Grayson’s Twinkle Animation
400 stars. 400 independent twinkles. One formula.
An animated night sky inspired by “Twinkle, Twinkle, Little Star” —
built with sin(), map(),
and randomSeed().
A Night Sky That Breathes
Grayson animated the classic children’s song “Twinkle, Twinkle, Little Star” entirely from p5.js drawing primitives. The result is a living night sky: 400 stars that twinkle independently, a crescent moon that drifts across the canvas, a central star that rotates, pulses, and cycles through every color of the spectrum, rolling green hills, and the song’s lyrics glowing softly in the foreground.
Unlike Grayson’s earlier bicolor orb, which called noLoop() and drew a
single static frame, this sketch is fully animated — draw() runs continuously,
updating every element on every frame. The twinkling logic is the pedagogical heart of the piece:
a single line of code that makes 400 stars twinkle independently without a single extra variable
per star.
randomSeed() for reproducible star positions •
sin(frameCount * 0.05 + ndx) for independent per-star twinkling •
map() to convert the sin range [−1, 1] to brightness [30, 100] •
push() / pop() with translate(), rotate(), scale() •
(starHue + 1) % 360 for cyclic hue cycling •
Custom drawStar() via polar-coordinate trigonometry •
Crescent moon via overlapping circles
randomSeed(100) resets the random number generator to the same state every
frame — so stars never jump to new positions. Then map(sin(frameCount * 0.05 + ndx), -1, 1, 30, 100)
oscillates each star’s brightness between dim and bright. The + ndx phase offset
ensures every star is at a different point in its cycle — some brightening, some dimming,
some mid-glow. One formula. 400 independent lights. See the S.P.A.R.K. Chat Log for the full
tutorial.
random()? That is pseudo-random number generation at work.
Entry #089
explains exactly how a seeded PRNG produces repeatable sequences, why that is not an
oxymoron, and how Java’s Random class does the same thing.
Live Animation
Runs continuously — draw() loops at 60 fps.
Each of the 400 stars twinkles on its own independent cycle.