diff --git a/src/starfield/reference.ts b/src/starfield/reference.ts new file mode 100644 index 0000000..e4523a2 --- /dev/null +++ b/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) +} + diff --git a/src/starfield/starfield.ts b/src/starfield/starfield.ts index 5f0286c..d8fcce8 100644 --- a/src/starfield/starfield.ts +++ b/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);