Move reference code into separate module
This commit is contained in:
parent
0f128c6e46
commit
e5d0083629
80
src/starfield/reference.ts
Normal file
80
src/starfield/reference.ts
Normal file
@ -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)
|
||||
}
|
||||
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user