chroma-noise 0.0.2 → 0.0.4

package/README.md

@@ -1,12 +1,6 @@
 # chroma-noise
 
-Gradient noise for Svelte 5.
-
-### New in 0.0.2
-- types
-- new modes: swirl and radial waves
-- removed unused dependencies
-
+Gradient noise for Svelte. With warp and grain.
 
 ### Site & playground
 https://chromanoise.netlify.app

package/dist/Gradient.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import vert from './gradient.vert.glsl?raw';
-	import frag from './gradient.frag.glsl?raw';
-	import { hexToRgb } from 'ventoui-utils';
+	import frag from './fragment.txt?raw';
 	import { onMount, onDestroy } from 'svelte';
 	import type { Warp, Grain, GradientOptions } from './index.js';
+	import { hexToRgb, isBrowser } from './utils.js';
+	import gradientWorker from './gradient.worker.js?url';
 
 	let {
 		points = [],
@@ -14,6 +14,8 @@
 		grain: initialGrain = {},
 		maxPoints = 12,
 		seed = Math.random(),
+		currentState = $bindable('loading'),
+		class: c = '',
 		...rest
 	}: GradientOptions = $props();
 
@@ -22,69 +24,17 @@
 
 	const warp: Required<Warp> = $derived({ ...defaultWarp, ...initialWarp });
 	const grain: Required<Grain> = $derived({ ...defaultGrain, ...initialGrain });
-	const browser = () => typeof window !== 'undefined' && typeof document !== 'undefined';
 
 	let canvas: HTMLCanvasElement | undefined = $state();
-	let gl: WebGLRenderingContext | undefined = $state();
-	let program: WebGLProgram | undefined = $state();
-
-	let uniforms: Record<string, WebGLUniformLocation> = {} as Record<string, WebGLUniformLocation>;
-	let frameId: number;
+	let worker: Worker | undefined = $state();
+	let frame: number;
 	let running = true;
 	let lastTime = 0;
 	let animTime = 0;
 
-	const shaderUniforms = ['u_resolution',
-		'u_time', 'u_count', 'u_colors',
-		'u_positions', 'u_radius', 'u_intensity',
-		'u_warpMode', 'u_warpSize', 'u_warpAmount',
-		'u_grainAmount', 'u_grainSize', 'u_seed'
-	];
-
-	function createShader(gl: WebGLRenderingContext, type: number, src: string) {
-		const s = gl.createShader(type)!;
-		gl.shaderSource(s, src);
-		gl.compileShader(s);
-		if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
-			console.error(gl.getShaderInfoLog(s));
-			gl.deleteShader(s);
-			throw new Error('Shader compile error');
-		}
-		return s;
-	}
-
-	function createProgram(gl: WebGLRenderingContext, vsSrc: string, fsSrc: string) {
-		const vs = createShader(gl, gl.VERTEX_SHADER, vsSrc);
-		const fs = createShader(gl, gl.FRAGMENT_SHADER, fsSrc);
-		const p = gl.createProgram()!;
-		gl.attachShader(p, vs);
-		gl.attachShader(p, fs);
-		gl.linkProgram(p);
-		if (!gl.getProgramParameter(p, gl.LINK_STATUS)) {
-			console.error(gl.getProgramInfoLog(p));
-			gl.deleteProgram(p);
-			throw new Error('Program link error');
-		}
-		return p;
-	}
-
-	function resizeCanvasToDisplaySize() {
-		if (!canvas) return false;
-		const dpr = Math.max(1, window.devicePixelRatio || 1);
-		const width = Math.floor(canvas.clientWidth * dpr);
-		const height = Math.floor(canvas.clientHeight * dpr);
-		if (canvas.width !== width || canvas.height !== height) {
-			canvas.width = width;
-			canvas.height = height;
-			return true;
-		}
-		return false;
-	}
 
 	function updateUniforms() {
-		if (!gl || !program || !canvas) return;
-		gl.useProgram(program);
-		gl.uniform2f(uniforms.u_resolution, canvas.width, canvas.height);
+		if (!worker) return;
 
 		const colorsArr = new Float32Array(maxPoints * 3);
 		const posArr = new Float32Array(maxPoints * 2);
@@ -95,83 +45,127 @@
 			posArr.set([points[i].x, points[i].y], i * 2);
 		}
 
-		gl.uniform3fv(uniforms.u_colors, colorsArr);
-		gl.uniform2fv(uniforms.u_positions, posArr);
-		gl.uniform1i(uniforms.u_count, Math.min(points.length, maxPoints));
-		gl.uniform1f(uniforms.u_radius, radius);
-		gl.uniform1f(uniforms.u_intensity, intensity);
-		gl.uniform1i(uniforms.u_warpMode, warp.mode);
-		gl.uniform1f(uniforms.u_warpSize, warp.size);
-		gl.uniform1f(uniforms.u_warpAmount, warp.amount);
-		gl.uniform1f(uniforms.u_grainAmount, grain.amount);
-		gl.uniform1f(uniforms.u_grainSize, grain.size);
-		gl.uniform1f(uniforms.u_seed, seed);
+		worker.postMessage({
+			type: 'updateUniforms',
+			uniforms: {
+				u_colors: colorsArr,
+				u_positions: posArr,
+				u_count: Math.min(points.length, maxPoints),
+				u_radius: radius,
+				u_intensity: intensity,
+				u_warpMode: warp.mode,
+				u_warpSize: warp.size,
+				u_warpAmount: warp.amount,
+				u_grainAmount: grain.amount,
+				u_grainSize: grain.size,
+				u_seed: seed
+			}
+		});
 	}
 
-	function render(time: number) {
-		if (!gl || !program || !canvas) return;
-		if (lastTime === 0) lastTime = time;
-		const dt = (time - lastTime) * 0.001;
-		lastTime = time;
-		animTime += dt * speed;
-
-		resizeCanvasToDisplaySize();
-		gl.viewport(0, 0, canvas.width, canvas.height);
-		gl.clearColor(0, 0, 0, 0);
-		gl.clear(gl.COLOR_BUFFER_BIT);
-
-		gl.useProgram(program);
-		gl.uniform1f(uniforms.u_time, animTime);
-		updateUniforms();
-		gl.drawArrays(gl.TRIANGLES, 0, 6);
-
-		if (running) frameId = requestAnimationFrame(render);
+	function updateResolution() {
+		if (!worker || !canvas) return;
+		const dpr = Math.max(1, window.devicePixelRatio || 1);
+		const width = Math.floor(canvas.clientWidth * dpr);
+		const height = Math.floor(canvas.clientHeight * dpr);
+		worker.postMessage({
+			type: 'updateUniforms',
+			uniforms: {
+				u_resolution: [width, height]
+			}
+		});
 	}
 
-	function getUniform(gl: WebGLRenderingContext, program: WebGLProgram, name: string): WebGLUniformLocation {
-		const loc = gl.getUniformLocation(program, name);
-		if (!loc) throw new Error(`Uniform ${name} not found`);
-		return loc;
+	function render(time: number) {
+		if (worker) {
+			if (lastTime === 0) lastTime = time;
+			const dt = (time - lastTime) * 0.001;
+			lastTime = time;
+			animTime += dt * speed;
+
+			worker.postMessage({
+				type: 'render',
+				time: animTime
+			});
+
+			if (running) {
+				currentState = 'playing';
+				frame = requestAnimationFrame(render);
+			} else {
+				currentState = 'paused';
+			}
+		}
 	}
 
 	onMount(() => {
-		if (!canvas || !browser) return;
-		gl = canvas.getContext('webgl', { antialias: true })!;
-		if (!gl) return console.warn('WebGL not supported');
-
-		program = createProgram(gl, vert, frag);
-		gl.useProgram(program);
-
-		const verts = new Float32Array([-1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1]);
-		const vbo = gl.createBuffer();
-		gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
-		gl.bufferData(gl.ARRAY_BUFFER, verts, gl.STATIC_DRAW);
-		const a_pos = gl.getAttribLocation(program, 'a_pos');
-		gl.enableVertexAttribArray(a_pos);
-		gl.vertexAttribPointer(a_pos, 2, gl.FLOAT, false, 0, 0);
-
-		for (const name of shaderUniforms) {
-			uniforms[name] = getUniform(gl, program, name);
-		}
+		if (!canvas || !isBrowser()) return;
+		currentState = 'loading';
+
+			worker = new Worker(gradientWorker, {
+				type: 'module'
+			});
+			
+			worker.onmessage = (event: MessageEvent) => {
+				const { type } = event.data;
+				if (type === 'ready') {
+					updateUniforms();
+					currentState = 'playing';
+				} else if (type === 'rendering') {
+					currentState = 'playing';
+				} else if (type === 'paused') {
+					currentState = 'paused';
+				} else if (type === 'error') {
+					console.error('Worker error:', event.data.error);
+					currentState = 'paused';
+				}
+			};
+
+			const dpr = Math.max(1, window.devicePixelRatio || 1);
+			const width = Math.floor(canvas.clientWidth * dpr);
+			const height = Math.floor(canvas.clientHeight * dpr);
+			canvas.width = width;
+			canvas.height = height;
 
-		frameId = requestAnimationFrame(render);
-		window.addEventListener('resize', updateUniforms);
+			try {
+				const offscreenCanvas = canvas.transferControlToOffscreen();
+				worker.postMessage({
+					type: 'init',
+					offscreenCanvas,
+					fragShader: frag,
+					speed
+				}, [offscreenCanvas]);
+
+				const resizeObserver = new ResizeObserver(() => {
+				updateResolution();
+			});
+			resizeObserver.observe(canvas);
+			frame = requestAnimationFrame(render);
+			} catch (error) {
+				console.error('Could not transfer canvas to worker: ', error);
+			}
 	});
 
 	onDestroy(() => {
 		running = false;
-		if (!canvas || !browser) return;
-		if (frameId) cancelAnimationFrame(frameId);
-		window.removeEventListener('resize', updateUniforms);
+		if (!isBrowser()) return;
+		
+		if (worker) {
+			worker.postMessage({ type: 'destroy' });
+			worker.terminate();
+		}
 	});
 
 	$effect(() => {
-		if (gl && program) updateUniforms();
+		if(worker && (points.length || radius || intensity || warp || grain || seed)) {
+			updateUniforms();
+		}
 	});
 </script>
 
-<canvas bind:this={canvas} {...rest}></canvas>
+<canvas bind:this={canvas} {...rest} class="{c} {currentState}"></canvas>
 
 <style>
-	canvas { width: 100%; height: 100%; display: block; }
+	canvas { width: 100%; height: 100%; display: block; transition: opacity 1s ease-out }
+	canvas.loading { opacity: 0; }
+	canvas.playing { opacity: 1; }
 </style>

package/dist/Gradient.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { GradientOptions } from './index.js';
-declare const Gradient: import("svelte").Component<GradientOptions, {}, "">;
+declare const Gradient: import("svelte").Component<GradientOptions, {}, "currentState">;
 type Gradient = ReturnType<typeof Gradient>;
 export default Gradient;

package/dist/{gradient.frag.glsl → fragment.txt}

@@ -92,24 +92,26 @@ vec2 warpSwirl(vec2 uv, float t) {
     vec2 centered = uv - 0.5;
     float radius = length(centered);
     float angle = radius * u_warpSize * 5.0 - t * 0.5;
-    float s = sin(angle) * u_warpAmount;
-    float c = cos(angle) * u_warpAmount;
-    centered = vec2(c * centered.x - s * centered.y, s * centered.x + c * centered.y);
-    centered.x *= u_resolution.x / u_resolution.y;
-    return centered + 0.5;
+    float s = sin(angle);
+    float c = cos(angle);
+    vec2 warped = vec2(c * centered.x - s * centered.y, s * centered.x + c * centered.y);
+    warped.x *= u_resolution.x / u_resolution.y;
+    warped = warped + 0.5;
+    return mix(uv, warped, u_warpAmount);
 }
 
 vec2 warpRadial(vec2 uv, float t) {
     vec2 centered = uv - 0.5;
     float r = length(centered);
     float theta = atan(centered.y, centered.x);
-    float wave = sin(r * u_warpSize * 20.0 - t * 2.0) * u_warpAmount;
-    r += wave;
+    float wave = sin(r * u_warpSize * 20.0 - t * 2.0);
+    float r_warped = r + wave;
     vec2 p;
-    p.x = r * cos(theta);
-    p.y = r * sin(theta);
+    p.x = r_warped * cos(theta);
+    p.y = r_warped * sin(theta);
     p.x *= u_resolution.x / u_resolution.y;
-    return p + 0.5;
+    p = p + 0.5;
+    return mix(uv, p, u_warpAmount);
 }
 
 vec2 applyWarp(vec2 uv) {
@@ -152,4 +154,4 @@ void main() {
     color *= mix(0.98, 1.02, vign);
     color += g * u_grainAmount;
     gl_FragColor = vec4(color, 1.0);
-}
+}

package/dist/gradient.worker.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/gradient.worker.js

@@ -0,0 +1,83 @@
+import { SHADER_UNIFORMS, VERTEX_SHADER, createProgram, getUniform, setupQuadBuffer, setUniform } from './utils.js';
+let gl = null;
+let program = null;
+let uniforms = {};
+let currentUniforms = {};
+function initWorker(offscreenCanvas, fragShader) {
+    try {
+        gl = offscreenCanvas.getContext('webgl2', { antialias: true });
+        if (!gl) {
+            throw new Error('WebGL2 not supported');
+        }
+        program = createProgram(gl, VERTEX_SHADER, fragShader);
+        gl.useProgram(program);
+        setupQuadBuffer(gl, program);
+        for (const name of SHADER_UNIFORMS) {
+            uniforms[name] = getUniform(gl, program, name);
+        }
+        self.postMessage({ type: 'ready' });
+    }
+    catch (error) {
+        self.postMessage({ type: 'error', error: error.message });
+    }
+}
+function performRender(time) {
+    if (!gl || !program || Object.keys(currentUniforms).length === 0) {
+        return;
+    }
+    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.useProgram(program);
+    gl.uniform1f(uniforms.u_time, time);
+    for (const [key, value] of Object.entries(currentUniforms)) {
+        const uniform = uniforms[key];
+        if (uniform)
+            setUniform(gl, uniform, key, value);
+    }
+    gl.drawArrays(gl.TRIANGLES, 0, 6);
+}
+self.onmessage = (event) => {
+    const { type } = event.data;
+    switch (type) {
+        case 'init': {
+            const { offscreenCanvas, fragShader } = event.data;
+            if (offscreenCanvas && fragShader) {
+                initWorker(offscreenCanvas, fragShader);
+            }
+            break;
+        }
+        case 'render': {
+            const { time } = event.data;
+            if (time !== undefined) {
+                performRender(time);
+            }
+            break;
+        }
+        case 'updateUniforms': {
+            const { uniforms: newUniforms } = event.data;
+            if (newUniforms) {
+                currentUniforms = newUniforms;
+            }
+            break;
+        }
+        case 'resize': {
+            const { width, height, dpr } = event.data;
+            if (gl && width && height && dpr) {
+                const scaledWidth = Math.floor(width);
+                const scaledHeight = Math.floor(height);
+                gl.canvas.width = scaledWidth;
+                gl.canvas.height = scaledHeight;
+                currentUniforms = {
+                    ...currentUniforms,
+                    u_resolution: [scaledWidth, scaledHeight]
+                };
+            }
+            break;
+        }
+        case 'destroy': {
+            break;
+        }
+    }
+};
+export {};

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Gradient } from './Gradient.svelte';
 export type * from './types.js';
+export * from './utils.js';

package/dist/index.js

@@ -1 +1,2 @@
 export { default as Gradient } from './Gradient.svelte';
+export * from './utils.js';

package/dist/types.d.ts

@@ -29,6 +29,7 @@ export interface Grain {
     /** Grain size, default: 1 */
     size?: number;
 }
+export type shaderState = 'loading' | 'playing' | 'paused';
 /**
  * Configuration for the gradient.
  */
@@ -49,4 +50,19 @@ export interface GradientOptions {
     seed?: number;
     /** Grain effect configuration */
     grain?: Grain;
+    /** Current state: 'loading', 'playing', or 'paused' */
+    currentState?: shaderState;
+    /** Class applied to the canvas element **/
+    class?: string;
+}
+export interface RenderMessage {
+    type: 'init' | 'render' | 'resize' | 'updateUniforms' | 'destroy';
+    offscreenCanvas?: OffscreenCanvas;
+    fragShader?: string;
+    width?: number;
+    height?: number;
+    dpr?: number;
+    uniforms?: Record<string, any>;
+    time?: number;
+    speed?: number;
 }

package/dist/utils.d.ts

@@ -0,0 +1,22 @@
+export declare function hexToRgb(hex: string): [number, number, number];
+export declare const SHADER_UNIFORMS: readonly ["u_resolution", "u_time", "u_count", "u_colors", "u_positions", "u_radius", "u_intensity", "u_warpMode", "u_warpSize", "u_warpAmount", "u_grainAmount", "u_grainSize", "u_seed"];
+export declare const VERTEX_SHADER = "attribute vec2 a_pos;void main() {gl_Position = vec4(a_pos, 0.0, 1.0);}";
+export declare const FULLSCREEN_QUAD: Float32Array<ArrayBuffer>;
+export declare function createShader(gl: WebGL2RenderingContext | WebGLRenderingContext, type: number, src: string): WebGLShader;
+export declare function createProgram(gl: WebGL2RenderingContext | WebGLRenderingContext, vsSrc: string, fsSrc: string): WebGLProgram;
+export declare function getUniform(gl: WebGL2RenderingContext | WebGLRenderingContext, program: WebGLProgram, name: string): WebGLUniformLocation;
+export declare function setupQuadBuffer(gl: WebGL2RenderingContext | WebGLRenderingContext, program: WebGLProgram): void;
+export declare function getCanvasSize(canvas: HTMLCanvasElement): {
+    width: number;
+    height: number;
+    dpr: number;
+};
+export declare const isBrowser: () => boolean;
+/**
+ * Uniform type metadata for WebGL setters
+ */
+export declare const UNIFORM_TYPES: Record<string, 'vec2' | 'vec3f' | 'vec2f' | 'i32' | 'f32'>;
+/**
+ * Set a WebGL uniform based on its type
+ */
+export declare function setUniform(gl: WebGL2RenderingContext, uniform: WebGLUniformLocation, key: string, value: any): void;

package/dist/utils.js

@@ -0,0 +1,115 @@
+export function hexToRgb(hex) {
+    hex = hex.replace('#', '');
+    if (hex.length === 3)
+        hex = hex.split('').map(c => c + c).join('');
+    const num = parseInt(hex, 16);
+    const r = ((num >> 16) & 255) / 255;
+    const g = ((num >> 8) & 255) / 255;
+    const b = (num & 255) / 255;
+    return [r, g, b];
+}
+export const SHADER_UNIFORMS = [
+    'u_resolution',
+    'u_time',
+    'u_count',
+    'u_colors',
+    'u_positions',
+    'u_radius',
+    'u_intensity',
+    'u_warpMode',
+    'u_warpSize',
+    'u_warpAmount',
+    'u_grainAmount',
+    'u_grainSize',
+    'u_seed'
+];
+export const VERTEX_SHADER = `attribute vec2 a_pos;void main() {gl_Position = vec4(a_pos, 0.0, 1.0);}`;
+export const FULLSCREEN_QUAD = new Float32Array([-1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1]);
+export function createShader(gl, type, src) {
+    const s = gl.createShader(type);
+    gl.shaderSource(s, src);
+    gl.compileShader(s);
+    if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
+        const error = gl.getShaderInfoLog(s);
+        gl.deleteShader(s);
+        throw new Error(`Shader compile error: ${error}`);
+    }
+    return s;
+}
+export function createProgram(gl, vsSrc, fsSrc) {
+    const vs = createShader(gl, gl.VERTEX_SHADER, vsSrc);
+    const fs = createShader(gl, gl.FRAGMENT_SHADER, fsSrc);
+    const p = gl.createProgram();
+    gl.attachShader(p, vs);
+    gl.attachShader(p, fs);
+    gl.linkProgram(p);
+    if (!gl.getProgramParameter(p, gl.LINK_STATUS)) {
+        const error = gl.getProgramInfoLog(p);
+        gl.deleteProgram(p);
+        throw new Error(`Program link error: ${error}`);
+    }
+    return p;
+}
+export function getUniform(gl, program, name) {
+    const loc = gl.getUniformLocation(program, name);
+    if (!loc)
+        throw new Error(`Uniform ${name} not found`);
+    return loc;
+}
+export function setupQuadBuffer(gl, program) {
+    const vbo = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+    gl.bufferData(gl.ARRAY_BUFFER, FULLSCREEN_QUAD, gl.STATIC_DRAW);
+    const a_pos = gl.getAttribLocation(program, 'a_pos');
+    gl.enableVertexAttribArray(a_pos);
+    gl.vertexAttribPointer(a_pos, 2, gl.FLOAT, false, 0, 0);
+}
+export function getCanvasSize(canvas) {
+    const dpr = Math.max(1, window.devicePixelRatio || 1);
+    const width = Math.floor(canvas.clientWidth * dpr);
+    const height = Math.floor(canvas.clientHeight * dpr);
+    return { width, height, dpr };
+}
+export const isBrowser = () => typeof window !== 'undefined' && typeof document !== 'undefined';
+/**
+ * Uniform type metadata for WebGL setters
+ */
+export const UNIFORM_TYPES = {
+    u_resolution: 'vec2',
+    u_colors: 'vec3f',
+    u_positions: 'vec2f',
+    u_count: 'i32',
+    u_warpMode: 'i32',
+    u_radius: 'f32',
+    u_intensity: 'f32',
+    u_warpSize: 'f32',
+    u_warpAmount: 'f32',
+    u_grainAmount: 'f32',
+    u_grainSize: 'f32',
+    u_seed: 'f32'
+};
+/**
+ * Set a WebGL uniform based on its type
+ */
+export function setUniform(gl, uniform, key, value) {
+    const type = UNIFORM_TYPES[key];
+    if (!type)
+        return;
+    switch (type) {
+        case 'vec2':
+            gl.uniform2f(uniform, value[0], value[1]);
+            break;
+        case 'vec3f':
+            gl.uniform3fv(uniform, value);
+            break;
+        case 'vec2f':
+            gl.uniform2fv(uniform, value);
+            break;
+        case 'i32':
+            gl.uniform1i(uniform, value);
+            break;
+        case 'f32':
+            gl.uniform1f(uniform, value);
+            break;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "chroma-noise",
-	"version": "0.0.2",
+	"version": "0.0.4",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -30,8 +30,7 @@
 		}
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0",
-		"ventoui-utils": "^0.0.2"
+		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^6.1.0",

package/dist/gradient.vert.glsl

@@ -1,4 +0,0 @@
-attribute vec2 a_pos;
-void main() {
-gl_Position = vec4(a_pos, 0.0, 1.0);
-}