Move reference code into separate module

This commit is contained in:
Greg Shuflin 2023-10-26 02:25:44 -07:00
parent 0f128c6e46
commit e5d0083629
2 changed files with 83 additions and 81 deletions

View 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)
}

View File

@ -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);