A browser source overlay for winter vibes for your Live Streams or Videos
treybastian.com
1import {
2 CANVAS_WIDTH,
3 MAX_SIZE,
4 MAX_SPEED,
5 MIN_SIZE,
6 MIN_SPEED,
7} from "./config";
8
9/**
10 * @returns {Snowflake}
11 */
12export function createSnowflake() {
13 return {
14 x: Math.floor(Math.random() * CANVAS_WIDTH),
15 y: -1,
16 speed: Math.random() * (MIN_SPEED - MAX_SPEED) + MAX_SPEED,
17 size: Math.floor(Math.random() * (MIN_SIZE - MAX_SIZE) + MAX_SIZE),
18 };
19}
20
21/**
22 * @param {Object} snowflake
23 * @param {number} snowflake.x
24 * @param {number} snowflake.y
25 * @param {number} snowflake.size
26 * @param {CanvasRenderingContext2D} ctx
27 */
28export function drawSnowflake({ x, y, size }, ctx) {
29 ctx.beginPath();
30 ctx.rect(x, y, size, size);
31 ctx.fillStyle = "#fff";
32 ctx.fill();
33}
34
35/**
36 * @param {Snowflake} snowflake
37 * @param {number} delta
38 */
39export function moveSnowflake(snowflake, delta) {
40 snowflake.y += snowflake.speed * delta;
41}