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 canvas = document.querySelector("#mainCanvas");
|
||||||
const ctx = canvas.getContext("2d");
|
const ctx = canvas.getContext("2d");
|
||||||
|
|
||||||
@ -15,84 +17,4 @@ function resize() {
|
|||||||
|
|
||||||
window.addEventListener('resize', resize, false);
|
window.addEventListener('resize', resize, false);
|
||||||
|
|
||||||
|
reference(canvas, ctx);
|
||||||
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();
|
|
||||||
|
Loading…
Reference in New Issue
Block a user