chroma-noise 0.0.5 → 0.0.6

package/dist/Gradient.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
 	import frag from './fragment.txt?raw';
 	import { onMount, onDestroy } from 'svelte';
+	import { hexToRgb, isBrowser, createGradientWorker, getTargetSize } from './index.js';
 	import type { Warp, Grain, GradientOptions } from './index.js';
-	import { hexToRgb, isBrowser } from './utils.js';
-	import gradientWorker from './gradient.worker.js?worker&module';
 
 	let {
 		points = [],
@@ -16,6 +15,8 @@
 		seed = Math.random(),
 		currentState = $bindable('loading'),
 		class: c = '',
+		resolution = {},
+		blendMode = 'legacy',
 		...rest
 	}: GradientOptions = $props();
 
@@ -27,11 +28,13 @@
 
 	let canvas: HTMLCanvasElement | undefined = $state();
 	let worker: Worker | undefined = $state();
-	let frame: number;
-	let running = true;
+	let running = $state(false);
 	let lastTime = 0;
 	let animTime = 0;
+	let frame: number | null = null;
+	let currentCanvasSize = $state({ width: 0, height: 0 });
 
+	let lastUniforms = $state<Record<string, any>>({});
 
 	function updateUniforms() {
 		if (!worker) return;
@@ -45,55 +48,80 @@
 			posArr.set([points[i].x, points[i].y], i * 2);
 		}
 
-		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
+		const newUniforms = {
+			u_colors: colorsArr,
+			u_positions: posArr,
+			u_count: Math.min(points.length, maxPoints),
+			u_radius: radius,
+			u_intensity: intensity,
+			u_warpMode: Number(warp.mode),
+			u_warpSize: warp.size,
+			u_warpAmount: warp.amount,
+			u_grainAmount: grain.amount,
+			u_grainSize: grain.size,
+			u_seed: seed,
+			u_blendMode: blendMode === 'new' ? 0 : 1
+		};
+
+		const changedUniforms: Record<string, any> = {};
+		for (const [key, value] of Object.entries(newUniforms)) {
+			if (JSON.stringify(lastUniforms[key]) !== JSON.stringify(value)) {
+				changedUniforms[key] = value;
 			}
-		});
-	}
+		}
 
-	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]
-			}
-		});
+		if (Object.keys(changedUniforms).length > 0) {
+			worker.postMessage({
+				type: 'updateUniforms',
+				uniforms: changedUniforms
+			});
+			lastUniforms = { ...newUniforms };
+		}
 	}
 
-	function render(time: number) {
-		if (worker) {
-			if (lastTime === 0) lastTime = time;
-			const dt = (time - lastTime) * 0.001;
-			lastTime = time;
-			animTime += dt * speed;
+	function resizeCanvasToDisplaySize() {
+		if (!canvas || !worker) return;
+		
+		const { width, height } = getTargetSize(canvas, resolution);
 
+		if (currentCanvasSize.width !== width || currentCanvasSize.height !== height) {
+			currentCanvasSize = { width, height };
 			worker.postMessage({
-				type: 'render',
-				time: animTime
+				type: 'resize',
+				width,
+				height
 			});
+		}
+	}
 
-			if (running) {
-				currentState = 'playing';
-				frame = requestAnimationFrame(render);
-			} else {
-				currentState = 'paused';
-			}
+	$effect(() => {
+		if (worker) {
+			updateUniforms();
+		}
+	});
+	
+	$effect(() => {
+		if (worker) {
+			resizeCanvasToDisplaySize();
+		}
+	});
+
+	function render(time: number) {
+		if (!worker) return;
+
+		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);
 		}
 	}
 
@@ -101,52 +129,45 @@
 		if (!canvas || !isBrowser()) return;
 		currentState = 'loading';
 
-			worker = new gradientWorker();
-			
-			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;
-
-			try {
-				const offscreenCanvas = canvas.transferControlToOffscreen();
-				worker.postMessage({
-					type: 'init',
-					offscreenCanvas,
-					fragShader: frag,
-					speed
-				}, [offscreenCanvas]);
+		worker = createGradientWorker();
 
-				const resizeObserver = new ResizeObserver(() => {
-				updateResolution();
-			});
-			resizeObserver.observe(canvas);
-			frame = requestAnimationFrame(render);
-			} catch (error) {
-				console.error('Could not transfer canvas to worker: ', error);
+		worker.onmessage = (event: MessageEvent) => {
+			const { type } = event.data;
+			if (type === 'ready') {
+				updateUniforms();
+				currentState = 'playing';
+				frame = requestAnimationFrame(render);
+			} else if (type === 'error') {
+				console.error('Worker error:', event.data.error);
+				currentState = 'paused';
 			}
+		};
+
+		const { width, height } = getTargetSize(canvas, resolution);
+		currentCanvasSize = { width, height };
+
+		try {
+			const offscreenCanvas = canvas.transferControlToOffscreen();
+			worker.postMessage(
+				{
+					type: 'init',
+					offscreenCanvas,
+					fragShader: frag
+				},
+				[offscreenCanvas]
+			);
+			worker.postMessage({ type: 'resize', width, height });
+			running = true;
+		} catch (error) {
+			console.error('Could not transfer canvas to worker: ', error);
+		}
 	});
 
 	onDestroy(() => {
 		running = false;
 		if (!isBrowser()) return;
-		
+
+		if (frame) cancelAnimationFrame(frame);
 		if (worker) {
 			worker.postMessage({ type: 'destroy' });
 			worker.terminate();
@@ -154,16 +175,25 @@
 	});
 
 	$effect(() => {
-		if(worker && (points.length || radius || intensity || warp || grain || seed)) {
+		if (worker && (points.length || radius || intensity || warp || grain || seed)) {
 			updateUniforms();
 		}
 	});
 </script>
 
-<canvas bind:this={canvas} {...rest} class="{c} {currentState}"></canvas>
+<canvas bind:this={canvas} {...rest} class="{currentState} {c}"></canvas>
 
 <style>
-	canvas { width: 100%; height: 100%; display: block; transition: opacity 1s ease-out }
-	canvas.loading { opacity: 0; }
-	canvas.playing { opacity: 1; }
+	canvas {
+		width: 100%;
+		height: 100%;
+		display: block;
+		transition: opacity 1s ease-out;
+	}
+	canvas.loading {
+		opacity: 0;
+	}
+	canvas.playing {
+		opacity: 1;
+	}
 </style>

package/dist/fragment.txt

@@ -17,6 +17,7 @@ uniform int u_warpMode;
 uniform float u_warpSize;
 uniform float u_warpAmount;
 uniform float u_seed;
+uniform int u_blendMode;
 
 vec3 permute(vec3 x) {
     return mod(((x * 34.0) + 1.0) * x, 289.0);
@@ -136,6 +137,10 @@ void main() {
 
     float g = grain(gl_FragCoord.xy / u_resolution.xy);
 
+    float radiusToUse = (u_blendMode == 0) 
+        ? u_radius * min(u_resolution.x / u_resolution.y, 1.0) 
+        : u_radius;
+
     vec3 accum = vec3(0.0);
     float totalWeight = 0.0;
     for (int i = 0; i < MAX_POINTS; ++i) {
@@ -143,7 +148,7 @@ void main() {
         vec2 diff = uv - u_positions[i];
         diff.x *= u_resolution.x / u_resolution.y;
         float d = length(diff);
-        float w = exp(- (d * d) / (u_radius * u_radius));
+        float w = exp(- (d * d) / (radiusToUse * radiusToUse));
         w = pow(w, max(0.001, u_intensity));
         accum += u_colors[i] * w;
         totalWeight += w;

package/dist/gradient.worker.js

@@ -57,13 +57,18 @@ self.onmessage = (event) => {
         case 'updateUniforms': {
             const { uniforms: newUniforms } = event.data;
             if (newUniforms) {
-                currentUniforms = newUniforms;
+                console.log('Worker received uniforms:', newUniforms);
+                currentUniforms = {
+                    ...currentUniforms,
+                    ...newUniforms
+                };
+                console.log('Current uniforms after update:', currentUniforms);
             }
             break;
         }
         case 'resize': {
-            const { width, height, dpr } = event.data;
-            if (gl && width && height && dpr) {
+            const { width, height } = event.data;
+            if (gl && width && height) {
                 const scaledWidth = Math.floor(width);
                 const scaledHeight = Math.floor(height);
                 gl.canvas.width = scaledWidth;

package/dist/index.d.ts

@@ -1,3 +1,5 @@
 export { default as Gradient } from './Gradient.svelte';
 export type * from './types.js';
 export * from './utils.js';
+export { createGradientWorker } from './workerFactory.js';
+export type { Resolution, BlendMode } from './types.js';

package/dist/index.js

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

package/dist/types.d.ts

@@ -30,6 +30,21 @@ export interface Grain {
     size?: number;
 }
 export type shaderState = 'loading' | 'playing' | 'paused';
+/**
+ * Blend modes for gradient rendering
+ */
+export type BlendMode = 'new' | 'legacy';
+/** Configuration for resolution. */
+export interface Resolution {
+    /** Canvas resolution width, default: canvas.clientWidth */
+    width?: number;
+    /** Canvas resolution height, default: canvas.clientHeight */
+    height?: number;
+    /** Canvas resolution modifier, default: 1, min: 0.01, max: 2 */
+    modifier?: number;
+    /** Determines whether to use DPR, default: false */
+    useDPR?: boolean;
+}
 /**
  * Configuration for the gradient.
  */
@@ -54,6 +69,10 @@ export interface GradientOptions {
     currentState?: shaderState;
     /** Class applied to the canvas element **/
     class?: string;
+    /** Resolution settings */
+    resolution?: Resolution;
+    /** Blend mode for gradient rendering */
+    blendMode?: BlendMode;
 }
 export interface RenderMessage {
     type: 'init' | 'render' | 'resize' | 'updateUniforms' | 'destroy';

package/dist/utils.d.ts

@@ -1,15 +1,17 @@
 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 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", "u_blendMode"];
 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): {
+/**
+ * Calculate target canvas size based on resolution settings
+ */
+export declare function getTargetSize(canvas: HTMLCanvasElement, resolution: import('./types.js').Resolution): {
     width: number;
     height: number;
-    dpr: number;
 };
 export declare const isBrowser: () => boolean;
 /**

package/dist/utils.js

@@ -21,7 +21,8 @@ export const SHADER_UNIFORMS = [
     'u_warpAmount',
     'u_grainAmount',
     'u_grainSize',
-    'u_seed'
+    'u_seed',
+    'u_blendMode'
 ];
 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]);
@@ -64,11 +65,34 @@ export function setupQuadBuffer(gl, program) {
     gl.enableVertexAttribArray(a_pos);
     gl.vertexAttribPointer(a_pos, 2, gl.FLOAT, false, 0, 0);
 }
-export function getCanvasSize(canvas) {
+/**
+ * Calculate target canvas size based on resolution settings
+ */
+export function getTargetSize(canvas, resolution) {
     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 };
+    const clientWidth = canvas.clientWidth;
+    const clientHeight = canvas.clientHeight;
+    let width = clientWidth;
+    let height = clientHeight;
+    if (resolution.width !== undefined) {
+        width = resolution.width;
+    }
+    if (resolution.height !== undefined) {
+        height = resolution.height;
+    }
+    if (resolution.modifier !== undefined) {
+        const modifier = Math.max(0.01, Math.min(2.0, resolution.modifier));
+        width = width * modifier;
+        height = height * modifier;
+    }
+    if (resolution.useDPR !== false) {
+        width = width * dpr;
+        height = height * dpr;
+    }
+    return {
+        width: Math.floor(width),
+        height: Math.floor(height)
+    };
 }
 export const isBrowser = () => typeof window !== 'undefined' && typeof document !== 'undefined';
 /**
@@ -86,7 +110,8 @@ export const UNIFORM_TYPES = {
     u_warpAmount: 'f32',
     u_grainAmount: 'f32',
     u_grainSize: 'f32',
-    u_seed: 'f32'
+    u_seed: 'f32',
+    u_blendMode: 'i32'
 };
 /**
  * Set a WebGL uniform based on its type

package/dist/workerFactory.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Worker factory that creates a gradient rendering worker as a Blob
+ * This approach ensures the worker works correctly
+ */
+export declare function createGradientWorker(): Worker;

package/dist/workerFactory.js

@@ -0,0 +1,196 @@
+/**
+ * Worker factory that creates a gradient rendering worker as a Blob
+ * This approach ensures the worker works correctly
+ */
+export function createGradientWorker() {
+    const workerCode = `
+		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'
+		];
+
+		const VERTEX_SHADER = 'attribute vec2 a_pos;void main() {gl_Position = vec4(a_pos, 0.0, 1.0);}';
+		const FULLSCREEN_QUAD = new Float32Array([-1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1]);
+
+		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'
+		};
+
+		let gl = null;
+		let program = null;
+		let uniforms = {};
+		let currentUniforms = {};
+
+		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;
+		}
+
+		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;
+		}
+
+		function getUniform(gl, program, name) {
+			const loc = gl.getUniformLocation(program, name);
+			if (!loc) throw new Error(\`Uniform \${name} not found\`);
+			return loc;
+		}
+
+		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);
+		}
+
+		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;
+			}
+		}
+
+		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) {
+				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);
+			gl.uniform2f(uniforms.u_resolution, gl.canvas.width, gl.canvas.height);
+
+			for (const [key, value] of Object.entries(currentUniforms)) {
+				const uniform = uniforms[key];
+				if (uniform && key !== 'u_resolution') 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 = { ...currentUniforms, ...newUniforms };
+					}
+					break;
+				}
+				case 'resize': {
+					const { width, height } = event.data;
+					if (gl && width && height) {
+						gl.canvas.width = width;
+						gl.canvas.height = height;
+					}
+					break;
+				}
+				case 'destroy': {
+					break;
+				}
+			}
+		};
+	`;
+    const blob = new Blob([workerCode], { type: 'application/javascript' });
+    const workerUrl = URL.createObjectURL(blob);
+    return new Worker(workerUrl);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "chroma-noise",
-	"version": "0.0.5",
+	"version": "0.0.6",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -38,6 +38,7 @@
 		"@sveltejs/kit": "^2.43.2",
 		"@sveltejs/package": "^2.5.4",
 		"@sveltejs/vite-plugin-svelte": "^6.2.0",
+		"patch-package": "^8.0.1",
 		"prettier": "^3.6.2",
 		"prettier-plugin-svelte": "^3.4.0",
 		"publint": "^0.3.13",