CC 3D Starfield

The 3D starfield is probably the oldest trick in the demoscene book. Every home computer from the C64 to the Amiga had one, and it was often the very first effect a budding demo coder would attempt — on the Atari ST it was practically a must-have, appearing in almost every demo and intro from the late 1980s onward. The idea is dead simple: scatter points in 3D space, project them onto the screen with perspective division, and scroll the Z axis to fly through them.

This version adds a twist — literally: the entire star field rotates around the view axis using a sine/cosine rotation, so instead of just flying straight ahead you spiral through the stars. Four different star sprites (from large and bright to small and dim) are selected based on depth, giving a convincing sense of distance without any actual lighting calculation. The coordinate space wraps around using bitwise masking, so the field is effectively infinite — stars that fly past the camera reappear in front. The flight direction drifts automatically, slowly changing between forward, left, right and center, giving the effect a life of its own even without interaction.

Keyboard controls let you steer in all directions and change the rotation speed, turning the starfield into a tiny interactive flight simulator.

Originally a Java applet (1996). The original Java applet code was transpiled to JavaScript/Canvas in 2026 so the effect can run in modern browsers without a Java plugin. The JavaScript version calculates the star sprites procedurally using radial gradients at startup instead of loading external GIF images — this produces cleaner anti-aliased results without depending on any image files. Rendering uses 2×2 pixel doubling for an oldschool chunky look true to the era.

Features

Perspective-projected 3D starfield with depth-based sprites
Continuous rotation around the view axis (sine/cosine)
Auto-drifting flight direction — slowly wanders between forward, left, right and center
Mouse/touch interaction — move the cursor to influence the rotation direction
2×2 pixel doubling for an oldschool chunky retro look
Wrapping coordinate space for an infinite starfield
Calculated star sprites — generated procedurally with radial gradients, no image files needed
Keyboard controls for movement and rotation
Click to re-randomize star positions

Applet Parameters

Name	Type	Description	Default	Required
`stars`	int	Number of stars to render	60	no

Parameters (STARFIELD_CFG)

Name	Type	Description	Default
`stars`	int	Number of stars to render	`60`
`rotSpeed`	int	Base rotation speed	`2`
`pixelScale`	int	Pixel size multiplier (2 = chunky retro look)	`2`

Keyboard Controls

Key	Action
`↑` / `8`	Fly backward (decrease Z speed)
`↓` / `2`	Fly forward (increase Z speed)
`←` / `4`	Strafe left
`→` / `6`	Strafe right
`PgUp` / `7`	Move up
`PgDn` / `1`	Move down
`9`	Rotate counter-clockwise
`3`	Rotate clockwise
`5`	Center (stop horizontal/vertical drift)

Mouse Interaction

Moving the mouse (or touching) over the canvas influences the rotation direction. Moving the cursor to the left rotates counter-clockwise, moving it to the right rotates clockwise. The effect smoothly blends with the base rotation and decays when the cursor leaves the canvas.

Applet Code Example

<applet archive="Starfield.jar"
  code="ccStarfield.class" width="300" height="300">
  <param name="stars" value="80">
</applet>

JavaScript Canvas Version

<canvas id="game" width="300" height="300"></canvas>
<script>var STARFIELD_CFG = { stars: 80 };</script>
<script src="starfield.min.js"></script>