@basmilius/sparkle 2.4.0 → 2.5.0

package/src/neon/layer.ts

@@ -0,0 +1,213 @@
+import { parseColor } from '../color';
+import { Effect } from '../effect';
+import { DEFAULT_COLORS, MULBERRY } from './consts';
+import type { NeonTube, NeonTubeShape } from './types';
+
+export interface NeonConfig {
+    readonly count?: number;
+    readonly speed?: number;
+    readonly colors?: string[];
+    readonly flicker?: boolean;
+    readonly scale?: number;
+}
+
+export class Neon extends Effect<NeonConfig> {
+    readonly #scale: number;
+    #speed: number;
+    #flicker: boolean;
+    readonly #colors: string[];
+    #tubes: NeonTube[] = [];
+    #time: number = 0;
+    #initialized: boolean = false;
+    readonly #count: number;
+
+    constructor(config: NeonConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#speed = config.speed ?? 1;
+        this.#flicker = config.flicker ?? true;
+        this.#colors = config.colors ?? DEFAULT_COLORS;
+        this.#count = config.count ?? 8;
+    }
+
+    configure(config: Partial<NeonConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+        if (config.flicker !== undefined) {
+            this.#flicker = config.flicker;
+        }
+    }
+
+    onResize(width: number, height: number): void {
+        if (!this.#initialized && width > 0 && height > 0) {
+            this.#initialized = true;
+            this.#tubes = [];
+            for (let i = 0; i < this.#count; i++) {
+                this.#tubes.push(this.#createTube());
+            }
+        }
+    }
+
+    tick(dt: number, _width: number, _height: number): void {
+        this.#time += 0.01 * dt * this.#speed;
+
+        for (const tube of this.#tubes) {
+            tube.angle += tube.rotationSpeed * dt * this.#speed;
+
+            if (this.#flicker) {
+                if (!tube.flickering && MULBERRY.next() < 0.002) {
+                    tube.flickering = true;
+                    tube.flickerTarget = 0.15 + MULBERRY.next() * 0.25;
+                    tube.flickerProgress = 0;
+                }
+
+                if (tube.flickering) {
+                    tube.flickerProgress += dt * 0.008;
+
+                    if (tube.flickerProgress < 0.3) {
+                        tube.flickerAlpha = 1 - (1 - tube.flickerTarget) * (tube.flickerProgress / 0.3);
+                    } else if (tube.flickerProgress < 0.6) {
+                        tube.flickerAlpha = tube.flickerTarget;
+                    } else if (tube.flickerProgress < 1) {
+                        tube.flickerAlpha = tube.flickerTarget + (1 - tube.flickerTarget) * ((tube.flickerProgress - 0.6) / 0.4);
+                    } else {
+                        tube.flickerAlpha = 1;
+                        tube.flickering = false;
+                        tube.flickerProgress = 0;
+                    }
+                }
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        ctx.globalCompositeOperation = 'lighter';
+
+        for (const tube of this.#tubes) {
+            const alpha = tube.flickerAlpha;
+            const parsed = parseColor(tube.color);
+            const r = parsed.r;
+            const g = parsed.g;
+            const b = parsed.b;
+
+            ctx.save();
+            ctx.translate(tube.x * width, tube.y * height);
+            ctx.rotate(tube.angle);
+
+            const canvasScale = Math.min(width, height) / 600;
+            const size = tube.size * this.#scale * canvasScale;
+
+            // Outer blurry glow
+            ctx.lineWidth = size * 0.18;
+            ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${0.06 * alpha})`;
+            ctx.lineJoin = 'round';
+            ctx.lineCap = 'round';
+            this.#drawTubeShape(ctx, tube, size, this.#time);
+
+            // Medium glow
+            ctx.lineWidth = size * 0.1;
+            ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${0.25 * alpha})`;
+            this.#drawTubeShape(ctx, tube, size, this.#time);
+
+            // Inner glow
+            ctx.lineWidth = size * 0.055;
+            ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${0.55 * alpha})`;
+            this.#drawTubeShape(ctx, tube, size, this.#time);
+
+            // Bright core
+            ctx.lineWidth = size * 0.022;
+            ctx.strokeStyle = `rgba(255, 255, 255, ${0.9 * alpha})`;
+            this.#drawTubeShape(ctx, tube, size, this.#time);
+
+            ctx.restore();
+        }
+
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.globalAlpha = 1;
+        ctx.resetTransform();
+    }
+
+    #drawTubeShape(ctx: CanvasRenderingContext2D, tube: NeonTube, size: number, time: number): void {
+        ctx.beginPath();
+
+        switch (tube.shape) {
+            case 'circle': {
+                const cx = Math.cos(time * 0.3 + tube.phaseOffset) * size * 0.08;
+                const cy = Math.sin(time * 0.2 + tube.phaseOffset) * size * 0.08;
+                ctx.arc(cx, cy, size * 0.45, 0, Math.PI * 2);
+                break;
+            }
+
+            case 'wave': {
+                const steps = 32;
+                const halfW = size * 0.55;
+                for (let i = 0; i <= steps; i++) {
+                    const tx = (i / steps) * halfW * 2 - halfW;
+                    const ty = Math.sin((i / steps) * Math.PI * 2 * tube.frequency + time * tube.frequency * 0.5 + tube.phaseOffset) * size * tube.amplitude;
+                    if (i === 0) {
+                        ctx.moveTo(tx, ty);
+                    } else {
+                        ctx.lineTo(tx, ty);
+                    }
+                }
+                break;
+            }
+
+            case 'zigzag': {
+                const zigSteps = 8;
+                const zigW = size * 0.55;
+                for (let i = 0; i <= zigSteps; i++) {
+                    const tx = (i / zigSteps) * zigW * 2 - zigW;
+                    const ty = (i % 2 === 0 ? 1 : -1) * size * 0.28;
+                    if (i === 0) {
+                        ctx.moveTo(tx, ty);
+                    } else {
+                        ctx.lineTo(tx, ty);
+                    }
+                }
+                break;
+            }
+
+            case 'curve': {
+                const cx1 = -size * 0.55;
+                const cy1 = Math.sin(time * 0.5 + tube.phaseOffset) * size * 0.35;
+                const cx2 = size * 0.55;
+                const cy2 = Math.sin(time * 0.5 + tube.phaseOffset + Math.PI) * size * 0.35;
+                const cp1x = -size * 0.2;
+                const cp1y = size * 0.4 * tube.amplitude;
+                const cp2x = size * 0.2;
+                const cp2y = -size * 0.4 * tube.amplitude;
+                ctx.moveTo(cx1, cy1);
+                ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, cx2, cy2);
+                break;
+            }
+        }
+
+        ctx.stroke();
+    }
+
+    #createTube(): NeonTube {
+        const shapes: NeonTubeShape[] = ['circle', 'wave', 'zigzag', 'curve'];
+        const shape = shapes[Math.floor(MULBERRY.next() * shapes.length)];
+        const color = this.#colors[Math.floor(MULBERRY.next() * this.#colors.length)];
+
+        return {
+            shape,
+            color,
+            x: 0.1 + MULBERRY.next() * 0.8,
+            y: 0.1 + MULBERRY.next() * 0.8,
+            size: 80 + MULBERRY.next() * 120,
+            angle: MULBERRY.next() * Math.PI * 2,
+            rotationSpeed: (MULBERRY.next() - 0.5) * 0.0008,
+            phaseOffset: MULBERRY.next() * Math.PI * 2,
+            flickerAlpha: 1,
+            flickering: false,
+            flickerTarget: 1,
+            flickerProgress: 0,
+            amplitude: 0.2 + MULBERRY.next() * 0.25,
+            frequency: 1 + Math.floor(MULBERRY.next() * 3)
+        };
+    }
+}

package/src/neon/types.ts

@@ -0,0 +1,18 @@
+export type NeonTubeShape = 'circle' | 'wave' | 'zigzag' | 'curve';
+
+export type NeonTube = {
+    shape: NeonTubeShape;
+    color: string;
+    x: number;
+    y: number;
+    size: number;
+    angle: number;
+    rotationSpeed: number;
+    phaseOffset: number;
+    flickerAlpha: number;
+    flickering: boolean;
+    flickerTarget: number;
+    flickerProgress: number;
+    amplitude: number;
+    frequency: number;
+};

package/src/petals/layer.ts

@@ -98,7 +98,8 @@ export class Petals extends Effect<PetalsConfig> {
             const cos = Math.cos(petal.rotation);
             const sin = Math.sin(petal.rotation);
 
-            ctx.setTransform(cos * scaleX, sin * scaleX, -sin, cos, px, py);
+            ctx.save();
+            ctx.transform(cos * scaleX, sin * scaleX, -sin, cos, px, py);
             ctx.globalAlpha = 0.4 + petal.depth * 0.6;
             ctx.drawImage(
                 this.#sprites[petal.colorIndex % this.#sprites.length],
@@ -107,9 +108,9 @@ export class Petals extends Effect<PetalsConfig> {
                 displaySize,
                 displaySize
             );
+            ctx.restore();
         }
 
-        ctx.resetTransform();
         ctx.globalAlpha = 1;
     }
 

package/src/pollen/consts.ts

@@ -0,0 +1,3 @@
+import { type Mulberry32, mulberry32 } from '@basmilius/utils';
+
+export const MULBERRY: Mulberry32 = mulberry32(13);

package/src/pollen/index.ts

@@ -0,0 +1,10 @@
+import { Pollen } from './layer';
+import type { PollenConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createPollen(config?: PollenConfig): Effect<PollenConfig> {
+    return new Pollen(config);
+}
+
+export type { PollenConfig };
+export type { PollenParticle } from './types';

package/src/pollen/layer.ts

@@ -0,0 +1,181 @@
+import { Effect } from '../effect';
+import { MULBERRY } from './consts';
+import type { PollenParticle } from './types';
+
+const TAU = Math.PI * 2;
+const SPRITE_SIZE = 64;
+const SPRITE_CENTER = SPRITE_SIZE / 2;
+const SPRITE_RADIUS = SPRITE_SIZE / 2;
+
+export interface PollenConfig {
+    readonly count?: number;
+    readonly speed?: number;
+    readonly size?: number;
+    readonly color?: string;
+    readonly glowSize?: number;
+    readonly wind?: number;
+    readonly scale?: number;
+}
+
+export class Pollen extends Effect<PollenConfig> {
+    readonly #scale: number;
+    readonly #size: number;
+    readonly #glowSize: number;
+    #speed: number;
+    #wind: number;
+    #maxCount: number;
+    #time: number = 0;
+    #particles: PollenParticle[] = [];
+    #sprite: HTMLCanvasElement;
+    #width: number = 0;
+    #height: number = 0;
+
+    constructor(config: PollenConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#maxCount = config.count ?? 40;
+        this.#size = (config.size ?? 3) * this.#scale;
+        this.#speed = config.speed ?? 0.5;
+        this.#wind = config.wind ?? 0.3;
+        this.#glowSize = config.glowSize ?? 2;
+
+        if (innerWidth < 991) {
+            this.#maxCount = Math.floor(this.#maxCount / 2);
+        }
+
+        const {r, g, b} = this.#parseColor(config.color ?? '#fff8e1');
+        this.#sprite = this.#createSprite(r, g, b);
+    }
+
+    configure(config: Partial<PollenConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+        if (config.wind !== undefined) {
+            this.#wind = config.wind;
+        }
+    }
+
+    onResize(width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+
+        this.#particles = [];
+
+        for (let idx = 0; idx < this.#maxCount; ++idx) {
+            this.#particles.push(this.#createParticle(
+                MULBERRY.next() * width,
+                MULBERRY.next() * height
+            ));
+        }
+    }
+
+    tick(dt: number, width: number, height: number): void {
+        this.#time += 0.02 * dt * this.#speed;
+
+        const windForce = this.#wind * this.#speed;
+
+        for (const particle of this.#particles) {
+            // Brownian-like motion with gentle drift.
+            const brownianX = Math.sin(this.#time * 3 + particle.phase) * 0.4;
+            const brownianY = Math.cos(this.#time * 2.5 + particle.phase * 1.3) * 0.3;
+
+            particle.x += (windForce + brownianX) * particle.drift * dt * 0.5;
+            particle.y += (-0.2 * particle.speed * this.#speed + brownianY) * dt * 0.5;
+
+            // Pulsing opacity (catching sunlight).
+            particle.opacity = 0.3 + 0.7 * Math.abs(Math.sin(this.#time * particle.phaseSpeed + particle.phase));
+
+            // Recycle particles that leave bounds.
+            if (particle.x > width + 20) {
+                particle.x = -10;
+                particle.y = MULBERRY.next() * height;
+            } else if (particle.x < -20) {
+                particle.x = width + 10;
+                particle.y = MULBERRY.next() * height;
+            }
+
+            if (particle.y < -20) {
+                particle.y = height + 10;
+                particle.x = MULBERRY.next() * width;
+            } else if (particle.y > height + 20) {
+                particle.y = -10;
+                particle.x = MULBERRY.next() * width;
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, _width: number, _height: number): void {
+        ctx.globalCompositeOperation = 'lighter';
+
+        for (const particle of this.#particles) {
+            if (particle.opacity < 0.05) {
+                continue;
+            }
+
+            const displaySize = particle.size * this.#glowSize * 2;
+
+            ctx.globalAlpha = particle.opacity;
+            ctx.drawImage(
+                this.#sprite,
+                particle.x - displaySize / 2,
+                particle.y - displaySize / 2,
+                displaySize,
+                displaySize
+            );
+        }
+
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.globalAlpha = 1;
+    }
+
+    #parseColor(color: string): { r: number; g: number; b: number } {
+        const canvas = document.createElement('canvas');
+        canvas.width = 1;
+        canvas.height = 1;
+        const ctx = canvas.getContext('2d')!;
+        ctx.fillStyle = color;
+        ctx.fillRect(0, 0, 1, 1);
+        const data = ctx.getImageData(0, 0, 1, 1).data;
+        return {r: data[0], g: data[1], b: data[2]};
+    }
+
+    #createSprite(r: number, g: number, b: number): HTMLCanvasElement {
+        const canvas = document.createElement('canvas');
+        canvas.width = SPRITE_SIZE;
+        canvas.height = SPRITE_SIZE;
+        const ctx = canvas.getContext('2d')!;
+
+        const gradient = ctx.createRadialGradient(
+            SPRITE_CENTER, SPRITE_CENTER, 0,
+            SPRITE_CENTER, SPRITE_CENTER, SPRITE_RADIUS
+        );
+
+        gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, 1)`);
+        gradient.addColorStop(0.15, `rgba(${r}, ${g}, ${b}, 0.6)`);
+        gradient.addColorStop(0.4, `rgba(${r}, ${g}, ${b}, 0.2)`);
+        gradient.addColorStop(0.7, `rgba(${r}, ${g}, ${b}, 0.05)`);
+        gradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`);
+
+        ctx.fillStyle = gradient;
+        ctx.beginPath();
+        ctx.arc(SPRITE_CENTER, SPRITE_CENTER, SPRITE_RADIUS, 0, TAU);
+        ctx.fill();
+
+        return canvas;
+    }
+
+    #createParticle(px: number, py: number): PollenParticle {
+        return {
+            x: px,
+            y: py,
+            size: (MULBERRY.next() * 0.6 + 0.7) * this.#size,
+            speed: 0.3 + MULBERRY.next() * 0.7,
+            phase: MULBERRY.next() * TAU,
+            phaseSpeed: 0.5 + MULBERRY.next() * 1.5,
+            opacity: MULBERRY.next(),
+            drift: 0.5 + MULBERRY.next() * 1
+        };
+    }
+}

package/src/pollen/types.ts

@@ -0,0 +1,10 @@
+export type PollenParticle = {
+    x: number;
+    y: number;
+    size: number;
+    speed: number;
+    phase: number;
+    phaseSpeed: number;
+    opacity: number;
+    drift: number;
+};

package/src/popcorn/consts.ts

@@ -0,0 +1,3 @@
+import { type Mulberry32, mulberry32 } from '@basmilius/utils';
+
+export const MULBERRY: Mulberry32 = mulberry32(13);

package/src/popcorn/index.ts

@@ -0,0 +1,10 @@
+import { Popcorn } from './layer';
+import type { PopcornConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createPopcorn(config?: PopcornConfig): Effect<PopcornConfig> {
+    return new Popcorn(config);
+}
+
+export type { PopcornConfig };
+export type { PopcornKernel } from './types';

package/src/popcorn/layer.ts

@@ -0,0 +1,218 @@
+import { hexToRGB } from '@basmilius/utils';
+import { Effect } from '../effect';
+import { MULBERRY } from './consts';
+import type { PopcornKernel } from './types';
+
+export interface PopcornConfig {
+    readonly count?: number;
+    readonly speed?: number;
+    readonly gravity?: number;
+    readonly bounciness?: number;
+    readonly color?: string;
+    readonly popRate?: number;
+    readonly scale?: number;
+}
+
+export class Popcorn extends Effect<PopcornConfig> {
+    readonly #scale: number;
+    readonly #maxCount: number;
+    readonly #bounciness: number;
+    readonly #colorRGB: [number, number, number];
+    #speed: number;
+    #gravity: number;
+    #popRate: number;
+    #kernels: PopcornKernel[] = [];
+    #spawnAccumulator: number = 0;
+
+    constructor(config: PopcornConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#maxCount = config.count ?? 25;
+        this.#speed = config.speed ?? 1;
+        this.#gravity = config.gravity ?? 1;
+        this.#bounciness = config.bounciness ?? 0.6;
+        this.#popRate = config.popRate ?? 2;
+        this.#colorRGB = hexToRGB(config.color ?? '#fff8dc');
+    }
+
+    configure(config: Partial<PopcornConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+        if (config.gravity !== undefined) {
+            this.#gravity = config.gravity;
+        }
+        if (config.popRate !== undefined) {
+            this.#popRate = config.popRate;
+        }
+    }
+
+    tick(dt: number, width: number, height: number): void {
+        const speed = this.#speed;
+        const gravity = this.#gravity;
+        const bounciness = this.#bounciness;
+        const groundY = height * 0.95;
+        const scale = this.#scale;
+
+        this.#spawnAccumulator += this.#popRate * speed * dt / 60;
+
+        while (this.#spawnAccumulator >= 1 && this.#kernels.length < this.#maxCount) {
+            this.#spawnAccumulator -= 1;
+            this.#kernels.push(this.#createKernel(width, height));
+        }
+
+        if (this.#spawnAccumulator >= 1) {
+            this.#spawnAccumulator = 0;
+        }
+
+        let alive = 0;
+
+        for (let idx = 0; idx < this.#kernels.length; idx++) {
+            const kernel = this.#kernels[idx];
+
+            if (kernel.settled) {
+                kernel.opacity -= 0.005 * speed * dt;
+
+                if (kernel.opacity <= 0) {
+                    continue;
+                }
+
+                this.#kernels[alive++] = kernel;
+                continue;
+            }
+
+            kernel.vy += 0.15 * gravity * scale * speed * dt;
+            kernel.x += kernel.vx * speed * dt;
+            kernel.y += kernel.vy * speed * dt;
+            kernel.rotation += kernel.rotationSpeed * speed * dt;
+
+            if (!kernel.popped && kernel.vy < 0) {
+                kernel.popped = true;
+                kernel.size *= 2.2;
+            }
+
+            if (kernel.y >= groundY) {
+                kernel.y = groundY;
+                kernel.vy = -Math.abs(kernel.vy) * bounciness;
+                kernel.vx *= 0.8;
+                kernel.bounces++;
+
+                if (kernel.bounces > 3) {
+                    kernel.settled = true;
+                    kernel.vy = 0;
+                    kernel.vx = 0;
+                }
+            }
+
+            if (kernel.x < -50 || kernel.x > width + 50) {
+                continue;
+            }
+
+            this.#kernels[alive++] = kernel;
+        }
+
+        this.#kernels.length = alive;
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        const [red, green, blue] = this.#colorRGB;
+
+        for (let idx = 0; idx < this.#kernels.length; idx++) {
+            const kernel = this.#kernels[idx];
+            const alpha = kernel.opacity;
+
+            if (alpha <= 0) {
+                continue;
+            }
+
+            ctx.globalAlpha = alpha;
+
+            if (!kernel.popped) {
+                this.#drawUnpopped(ctx, kernel, red, green, blue);
+            } else {
+                this.#drawPopped(ctx, kernel, red, green, blue);
+            }
+        }
+
+        ctx.globalAlpha = 1;
+    }
+
+    #drawUnpopped(ctx: CanvasRenderingContext2D, kernel: PopcornKernel, red: number, green: number, blue: number): void {
+        const size = kernel.size;
+        const cos = Math.cos(kernel.rotation);
+        const sin = Math.sin(kernel.rotation);
+
+        ctx.save();
+        ctx.transform(cos, sin, -sin, cos, kernel.x, kernel.y);
+        ctx.beginPath();
+        ctx.arc(0, 0, size, 0, Math.PI * 2);
+        ctx.fillStyle = `rgb(${(red * 0.7) | 0}, ${(green * 0.7) | 0}, ${(blue * 0.5) | 0})`;
+        ctx.fill();
+        ctx.restore();
+    }
+
+    #drawPopped(ctx: CanvasRenderingContext2D, kernel: PopcornKernel, red: number, green: number, blue: number): void {
+        const size = kernel.size;
+        const cos = Math.cos(kernel.rotation);
+        const sin = Math.sin(kernel.rotation);
+
+        ctx.save();
+        ctx.transform(cos, sin, -sin, cos, kernel.x, kernel.y);
+        ctx.beginPath();
+
+        const lobes = 5;
+
+        for (let idx = 0; idx < lobes; idx++) {
+            const angle = (idx / lobes) * Math.PI * 2;
+            const lumpRadius = size * (0.7 + 0.3 * Math.sin(idx * 2.7 + kernel.rotation));
+            const lx = Math.cos(angle) * lumpRadius;
+            const ly = Math.sin(angle) * lumpRadius;
+            const cpAngle = ((idx + 0.5) / lobes) * Math.PI * 2;
+            const cpRadius = size * 1.1;
+            const cpx = Math.cos(cpAngle) * cpRadius;
+            const cpy = Math.sin(cpAngle) * cpRadius;
+
+            if (idx === 0) {
+                ctx.moveTo(lx, ly);
+            }
+
+            const nextIdx = (idx + 1) % lobes;
+            const nextAngle = (nextIdx / lobes) * Math.PI * 2;
+            const nextLumpRadius = size * (0.7 + 0.3 * Math.sin(nextIdx * 2.7 + kernel.rotation));
+            const nlx = Math.cos(nextAngle) * nextLumpRadius;
+            const nly = Math.sin(nextAngle) * nextLumpRadius;
+
+            ctx.quadraticCurveTo(cpx, cpy, nlx, nly);
+        }
+
+        ctx.closePath();
+        ctx.fillStyle = `rgb(${red}, ${green}, ${blue})`;
+        ctx.fill();
+
+        ctx.beginPath();
+        ctx.arc(-size * 0.2, -size * 0.2, size * 0.3, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(255, 255, 255, 0.3)`;
+        ctx.fill();
+
+        ctx.restore();
+    }
+
+    #createKernel(width: number, height: number): PopcornKernel {
+        const scale = this.#scale;
+
+        return {
+            x: width * (0.15 + MULBERRY.next() * 0.7),
+            y: height * (0.7 + MULBERRY.next() * 0.25),
+            vx: (MULBERRY.next() - 0.5) * 2 * scale,
+            vy: -(3 + MULBERRY.next() * 5) * scale,
+            size: (3 + MULBERRY.next() * 3) * scale,
+            rotation: MULBERRY.next() * Math.PI * 2,
+            rotationSpeed: (MULBERRY.next() - 0.5) * 0.15,
+            popped: false,
+            opacity: 1,
+            settled: false,
+            bounces: 0
+        };
+    }
+}