A browser source overlay for winter vibes for your Live Streams or Videos
treybastian.com
1/**
2 * @param {string} slug
3 * @returns {Promise<Sprite>}
4 */
5export async function loadSprite(slug) {
6 const image = new Image();
7 image.src = `./assets/${slug}.png`;
8
9 const { frames } = await fetch(`./assets/${slug}.json`).then((res) =>
10 res.json(),
11 );
12 return {
13 image,
14 width: frames[0].frame.w,
15 height: frames[0].frame.h,
16 currentFrame: -1,
17 lastUpdate: 0,
18 frames: frames.map(({ frame: { x, y }, duration }) => ({
19 x,
20 y,
21 duration,
22 })),
23 };
24}
25
26/**
27 * @param {CanvasRenderingContext2D} ctx
28 * @param {Sprite} sprite
29 * @param {number} x
30 * @param {number} y
31 * @param {DOMHighResTimeStamp} timestamp
32 */
33export function drawSprite(ctx, sprite, x, y, scale, timestamp) {
34 if (
35 sprite.currentFrame === -1 ||
36 timestamp - sprite.lastUpdate > sprite.frames[sprite.currentFrame].duration
37 ) {
38 sprite.currentFrame = (sprite.currentFrame + 1) % sprite.frames.length;
39 sprite.lastUpdate = timestamp;
40 }
41 const frame = sprite.frames[sprite.currentFrame];
42 ctx.drawImage(
43 sprite.image,
44 frame.x,
45 frame.y,
46 sprite.width,
47 sprite.height,
48 x,
49 y,
50 sprite.width * scale,
51 sprite.height * scale,
52 );
53}