2023-11-09 22:14:37 +00:00
|
|
|
let width: number, height: number
|
|
|
|
let canvas: HTMLCanvasElement
|
|
|
|
let ctx: CanvasRenderingContext2D
|
|
|
|
|
|
|
|
export function handleResize() {
|
2023-11-13 19:11:34 +00:00
|
|
|
const oldWidth = width
|
|
|
|
const oldHeight = height
|
|
|
|
|
|
|
|
// update canvas dimensions
|
2024-05-21 19:09:23 +00:00
|
|
|
width = window.innerWidth / 4
|
|
|
|
height = window.innerHeight / 4
|
2023-11-09 22:14:37 +00:00
|
|
|
canvas.width = width
|
|
|
|
canvas.height = height
|
2023-11-13 19:11:34 +00:00
|
|
|
|
|
|
|
// update max point positions
|
|
|
|
Point.maxX = width
|
|
|
|
Point.maxY = height
|
|
|
|
// scale point dimensions according to change
|
|
|
|
const widthScalar = width / oldWidth
|
|
|
|
const heightScalar = height / oldHeight
|
|
|
|
Point.all.forEach((point) => {
|
|
|
|
point.scalePosition(widthScalar, heightScalar)
|
|
|
|
})
|
|
|
|
|
2023-11-10 05:35:01 +00:00
|
|
|
updateDrawVars()
|
2023-11-13 19:11:34 +00:00
|
|
|
renderFrame()
|
2023-11-09 22:14:37 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export function initCanvas(_canvas: HTMLCanvasElement) {
|
2024-05-21 19:09:23 +00:00
|
|
|
width = window.innerWidth / 4
|
|
|
|
height = window.innerHeight / 4
|
2023-11-09 22:14:37 +00:00
|
|
|
|
|
|
|
canvas = _canvas
|
|
|
|
canvas.width = width
|
|
|
|
canvas.height = height
|
|
|
|
ctx = canvas.getContext('2d')!
|
2023-11-13 19:11:34 +00:00
|
|
|
initPoints()
|
2023-11-10 05:35:01 +00:00
|
|
|
initDrawVars(ctx)
|
2023-11-09 22:14:37 +00:00
|
|
|
}
|
|
|
|
|
2024-05-21 19:09:23 +00:00
|
|
|
function initPoints(numPoints: number = 50, maxSpeed: number = 0.125) {
|
2023-11-09 22:14:37 +00:00
|
|
|
Point.all = []
|
|
|
|
Point.maxX = width
|
|
|
|
Point.maxY = height
|
|
|
|
Point.maxSpeed = maxSpeed
|
|
|
|
|
|
|
|
Array.from({ length: numPoints }).forEach(() => new Point())
|
|
|
|
}
|
|
|
|
|
|
|
|
export function renderFrame() {
|
|
|
|
ctx.clearRect(0, 0, width, height)
|
|
|
|
|
|
|
|
Point.all.forEach(point => point.step())
|
|
|
|
Point.all.forEach(point => point.render())
|
|
|
|
}
|