👻 ✨ Twinkling Stars with Hue:
Three Languages, Three New Ideas

The broken first attempt updated hue as 0.01 * frameCount. Because frameCount grows every frame, the increment grows too — slow at frame 10, frantic at frame 5000. The fix is a float accumulator: a variable that gains a fixed amount each frame.

JS/Java: globalHue = (globalHue + HUE_SPEED) % 360 Python: global_hue = (global_hue + HUE_SPEED) % 360

HUE_SPEED = 0.3 means 9°/sec at 30 fps — a full color wheel cycle every 40 seconds. Change one constant; the speed changes everywhere.

The other bug in the broken version: STAR_HUE was mutated inside the per-star loop. With 500 stars and an increment per iteration, every star landed at a different hue in the same frame — a full rainbow.

The fix is simple: advance the accumulator once, before the loop, then read that single value in every iteration:

globalHue = (globalHue + HUE_SPEED) % 360; // once var starHue = floor(globalHue); // snap for (var i ...) { star.h = starHue; ... } // read

This is a general rule: any value that should be the same for all iterations must be computed outside the loop.

This version defines Star and Sinusoid classes in all three languages, making the OOP pattern directly comparable. The data model is identical; only the declaration syntax differs:

Java: class Star { float x, y, sw, h, s, b; int offset; } JS: class Star { constructor(x, y, sw, h, s, b, offset) {...} } Python: class Star: def __init__(self, x, y, sw, h, s, b, offset): ...

Sinusoid is the cleaner teaching object for classes: it has stable data (A, B, C set once in setup()) and reusable behavior (f(x) called every frame — exactly the pattern a class earns its keep on). Star teaches containers: seven related fields grouped under one name.

Compare with v1: the original cross-training page used Python dicts, JS object literals, and a Java class — deliberately different to show each language’s natural container idiom. This page shows that all three can use classes; v1 shows what they use by default. Read both for the full picture.

New to sinusoids? Before digging into the class, visit the SketchWave Sinusoid Wave Demo ↗ — an interactive control panel where you can slide amplitude, period, phase shift, and vertical offset and watch the wave respond in real time. Ten minutes there makes the A, B, C parameters in Sinusoid immediately recognizable.

Stars with saturation near 0 are almost gray — they cannot show a hue change. Raising the minimum from 0 to 20 ensures every star participates in the color drift. A floor of 20 still allows pale stars; it just rules out colorless ones.

JS: s: random(20, 100) Java: random(20, 100) // saturation arg Python: 's': random(20, 100)

Hue drift and twinkling are independent animations that compose: hue advances every frame regardless of the toggle; alpha modulation activates only when twinkling is on. Each animation has its own variable (globalHue vs. shouldTwinkle) and its own logic path. They share only the stroke() call that combines their results.