Move reference code into separate module

src/starfield/reference.ts

@@ -0,0 +1,80 @@
+
+export function reference(canvas, ctx) {
+    let middle = { x: canvas.width / 2, y: canvas.height / 2 }
+
+    // Each star is stored as an { x, y } object representing
+    // its offset from the middle of the screen
+
+    function canvasStarPosition(star) {
+        return { x: middle.x + star.x,
+            y: middle.y + star.y }
+    }
+
+    function starSize(star) {
+        // Size is proportional to distance from the middle
+        return Math.max(Math.abs(star.x), Math.abs(star.y)) / 100
+    }
+
+    function drawStar(ctx, star) {
+        let { x, y } = canvasStarPosition(star)
+        let r = starSize(star)
+        ctx.fillStyle = 'white'
+        ctx.beginPath()
+        ctx.arc(x, y, r, 0, 2*Math.PI)
+        ctx.fill()
+    }
+
+    let start = 0
+    let stars = []
+    let timeSinceLastStar = Infinity
+    let starInterval = 10000 // milliseconds
+
+    function makeStar() {
+        let angle = Math.random() * 2*Math.PI
+        stars.push({
+            x : Math.cos(angle),
+            y : Math.sin(angle),
+            // The multiplier affects how quickly the star moves.
+            // Varying this makes some stars appear closer (faster
+            // movement), some further (slower movement).
+            multiplier : 1.01 + Math.random() * 0.04
+        })
+    }
+
+    function step(timestamp) {
+        if (!start) start = timestamp
+            var progress = timestamp - start
+
+        // Create a new star if it's been long enough since
+        // the previous one
+        timeSinceLastStar += progress
+        if (timeSinceLastStar > starInterval) {
+            timeSinceLastStar = 0
+            makeStar()
+        }
+
+        // Clear the screen.
+        // If you want the hyperspace effect, skip this.
+        ctx.clearRect(0,0,canvas.width, canvas.height)
+
+        stars.forEach((s) => {
+            // Increase the star's distance from the middle
+            // proportionally to its current distance
+            s.x *= s.multiplier
+            s.y *= s.multiplier
+            drawStar(ctx, s)
+        })
+
+        // Remove stars outside the view boundary
+        let i = stars.length;
+        while (--i) {
+            let {x, y} = canvasStarPosition(stars[i])
+            if (x < 0 || x > canvas.width || y < 0 || y > canvas.height) {
+                stars.splice(i, 1)
+            }
+        }  
+        window.requestAnimationFrame(step)
+    }
+    window.requestAnimationFrame(step)
+}
+

src/starfield/starfield.ts

@@ -1,3 +1,5 @@
+import { reference } from "./reference.ts"
+
 const canvas = document.querySelector("#mainCanvas");
 const ctx = canvas.getContext("2d");
 
@@ -15,84 +17,4 @@ function resize() {
 
 window.addEventListener('resize', resize, false);
 
-
-function reference() {
-let middle = { x: canvas.width / 2, y: canvas.height / 2 }
-
-// Each star is stored as an { x, y } object representing
-// its offset from the middle of the screen
-
-function canvasStarPosition(star) {
-  return { x: middle.x + star.x,
-           y: middle.y + star.y }
-}
-
-function starSize(star) {
-  // Size is proportional to distance from the middle
-  return Math.max(Math.abs(star.x), Math.abs(star.y)) / 100
-}
-
-function drawStar(ctx, star) {
-  let { x, y } = canvasStarPosition(star)
-  let r = starSize(star)
-  ctx.fillStyle = 'white'
-  ctx.beginPath()
-  ctx.arc(x, y, r, 0, 2*Math.PI)
-  ctx.fill()
-}
-
-let start = 0
-let stars = []
-let timeSinceLastStar = Infinity
-let starInterval = 10000 // milliseconds
-
-function makeStar() {
-  let angle = Math.random() * 2*Math.PI
-  stars.push({
-    x : Math.cos(angle),
-    y : Math.sin(angle),
-    // The multiplier affects how quickly the star moves.
-    // Varying this makes some stars appear closer (faster
-    // movement), some further (slower movement).
-    multiplier : 1.01 + Math.random() * 0.04
-  })
-}
-
-function step(timestamp) {
-  if (!start) start = timestamp
-  var progress = timestamp - start
-  
-  // Create a new star if it's been long enough since
-  // the previous one
-  timeSinceLastStar += progress
-  if (timeSinceLastStar > starInterval) {
-    timeSinceLastStar = 0
-    makeStar()
-  }
-  
-  // Clear the screen.
-  // If you want the hyperspace effect, skip this.
-  ctx.clearRect(0,0,canvas.width, canvas.height)
-  
-  stars.forEach((s) => {
-    // Increase the star's distance from the middle
-    // proportionally to its current distance
-    s.x *= s.multiplier
-    s.y *= s.multiplier
-    drawStar(ctx, s)
-  })
-
-  // Remove stars outside the view boundary
-  let i = stars.length;
-  while (--i) {
-    let {x, y} = canvasStarPosition(stars[i])
-    if (x < 0 || x > canvas.width || y < 0 || y > canvas.height) {
-      stars.splice(i, 1)
-    }
-  }  
-  window.requestAnimationFrame(step)
-}
-window.requestAnimationFrame(step)
-}
-
-reference();
+reference(canvas, ctx);