Space Race — Colorized Starfield Demo

A polished example of a colorized, blinking starfield animation using the HTML5 Canvas API, perspective projection, motion streaks, and subtle glow effects.

Complete Space Race HTML Page

A self-contained HTML file demonstrating the full Colorized Blinking Starfield effect using Canvas and JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Colorized Starfield</title>

  <style>
    html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #000; }
    #space_race {
      position: fixed; inset: 0;
      width: 100vw; height: 100vh;
      z-index: 1; background: #000;
    }
    .content { position: relative; z-index: 10; }
  </style>
</head>

<body>

  <canvas id="space_race"></canvas>

  <div class="content">
    <h1 style="color: white; text-align:center; padding-top:2rem">
      Starfield Demo
    </h1>
  </div>

  <script>
    // Full starfield logic (see detailed JS card below)
  </script>

</body>
</html>

HTML5 Canvas JavaScript Animation

Core Starfield JavaScript Logic

The animation projects 3D star coordinates into 2D screen space using perspective math, then draws glowing particles with radial gradients:

const canvas = document.getElementById("space_race");
const ctx = canvas.getContext("2d");

let W = 0, H = 0;
let CENTER = { x: 0, y: 0 };
let stars = [];

const FOV = 300;     // focal length
const SPEED = 2;     // forward velocity
const MIN_Z = 60;    // nearby plane
const MAX_Z = 800;   // distant plane

function resize() {
  W = canvas.width = window.innerWidth;
  H = canvas.height = window.innerHeight;
  CENTER = { x: W / 2, y: H / 2 };
  initStars();
}

function initStars() {
  const COUNT = Math.min(900, Math.floor((W * H) / 1800));
  stars = new Array(COUNT).fill(0).map(() => newStar());
}

function newStar() {
  return {
    x: (Math.random() * 2 - 1) * MAX_Z,
    y: (Math.random() * 2 - 1) * MAX_Z,
    z: Math.random() * (MAX_Z - MIN_Z) + MIN_Z,
    hue: 180 + Math.random() * 120,
    tw: Math.random() * Math.PI * 2,
    sz: Math.random() * 1.3 + 0.7
  };
}

function animate() {
  ctx.fillStyle = "rgba(0,0,10,0.35)";
  ctx.fillRect(0, 0, W, H);

  for (const s of stars) {
    s.z -= SPEED * (1 + s.sz * 0.15);
    if (s.z < MIN_Z) Object.assign(s, newStar());

    s.tw += 0.1;
    const alpha = 0.6 + 0.4 * Math.sin(s.tw);

    const scale = FOV / s.z;
    const sx = s.x * scale + CENTER.x;
    const sy = s.y * scale + CENTER.y;

    const r = Math.max(0.7, s.sz * scale * 0.9);

    const grad = ctx.createRadialGradient(sx, sy, 0, sx, sy, r * 4);
    grad.addColorStop(0, `hsla(${s.hue}, 100%, 80%, ${alpha})`);
    grad.addColorStop(1, `hsla(${s.hue}, 100%, 50%, 0)`);

    ctx.fillStyle = grad;
    ctx.beginPath();
    ctx.arc(sx, sy, r * 3, 0, Math.PI * 2);
    ctx.fill();
  }

  requestAnimationFrame(animate);
}

window.addEventListener("resize", resize);

resize();
animate();

JavaScript Canvas API 3D Math Animation

How the Starfield Works

A breakdown of the animation technique behind the Space Race starfield:

1. 3D Coordinate System
Each star is initialized with (x, y, z) coordinates in a 3D cube around the camera.
2. Perspective Projection
Stars are projected onto the screen using:
screenX = (x * FOV) / z
3. Motion Simulation
Stars move forward (z decreases). When they pass the camera, they are respawned at the far plane.
4. Twinkling
Each star has a phase value updated every frame, giving it a soft blinking glow.
5. Glow Rendering
Radial gradients simulate luminous particles, fading smoothly into the background.
6. Trailing Motion Blur
A semi-transparent black fill over the canvas creates a smooth trailing effect as stars move.

The entire animation is real-time, running fully in the browser using only the 2D Canvas API.

Canvas 2D Glow Effects Animation Loop JavaScript