chroma-noise 0.0.1

package/README.md

@@ -0,0 +1,12 @@
+# chroma-noise
+
+Gradient noise for Svelte 5.
+
+At an early stage of development.
+
+### Roadmap
+- [] docs
+- [] optimization
+
+### Site & playground
+https://chromanoise.netlify.app

package/dist/Gradient.svelte

@@ -0,0 +1,221 @@
+<script lang="ts">
+	import vert from './gradient.vert.glsl?raw';
+	import frag from './gradient.frag.glsl?raw';
+	import { onMount, onDestroy } from 'svelte';
+	import { hexToRgb } from 'ventoui-utils';
+	import { browser } from '$app/environment';
+
+	interface Props {
+		points?: { color: string; x: number; y: number }[];
+		radius?: number;
+		timeAmount?: number;
+		intensity?: number;
+		warpMode?: number;
+		warpSize?: number;
+		warpAmount?: number;
+		grainAmount?: number;
+		grainSize?: number;
+		seed?: number;
+	}
+
+	let {
+		points = [],
+		radius = 0.6,
+		timeAmount = 1.0,
+		intensity = 1.0,
+		warpMode = 0,
+		warpSize = 1.0,
+		warpAmount = 0.0,
+		grainAmount = 0.0,
+		grainSize = 1.0,
+		seed = Math.random()
+	}: Props = $props();
+
+	export const MAX_POINTS = 12;
+
+	let canvas: HTMLCanvasElement | undefined = $state();
+	let gl: WebGLRenderingContext | undefined = $state();
+	let program: WebGLProgram | undefined = $state();
+
+	let u_resolution: WebGLUniformLocation;
+	let u_time: WebGLUniformLocation;
+	let u_count: WebGLUniformLocation;
+	let u_colors: WebGLUniformLocation;
+	let u_positions: WebGLUniformLocation;
+	let u_radius: WebGLUniformLocation;
+	let u_intensity: WebGLUniformLocation;
+	let u_warpMode: WebGLUniformLocation;
+	let u_warpSize: WebGLUniformLocation;
+	let u_warpAmount: WebGLUniformLocation;
+	let u_grainAmount : WebGLUniformLocation;
+	let u_grainSize : WebGLUniformLocation;
+	let u_grainAnimate : WebGLUniformLocation;
+	let u_seed: WebGLUniformLocation;
+
+	let frameId: number;
+	let running = true;
+
+	let lastTime = 0;
+	let animTime = 0;
+
+	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(u_resolution, canvas.width, canvas.height);
+
+		const colorsArr = new Float32Array(MAX_POINTS * 3);
+		const posArr = new Float32Array(MAX_POINTS * 2);
+		for (let i = 0; i < points.length && i < MAX_POINTS; i++) {
+			const [r, g, b] = hexToRgb(points[i].color);
+			colorsArr[i * 3] = r;
+			colorsArr[i * 3 + 1] = g;
+			colorsArr[i * 3 + 2] = b;
+			posArr[i * 2] = points[i].x;
+			posArr[i * 2 + 1] = points[i].y;
+		}
+
+		gl.uniform3fv(u_colors, colorsArr);
+		gl.uniform2fv(u_positions, posArr);
+		gl.uniform1i(u_count, Math.min(points.length, MAX_POINTS));
+		gl.uniform1f(u_radius, radius);
+		gl.uniform1f(u_intensity, intensity);
+		gl.uniform1i(u_warpMode, warpMode);
+		gl.uniform1f(u_warpSize, warpSize);
+		gl.uniform1f(u_warpAmount, warpAmount);
+		gl.uniform1f(u_grainAmount, grainAmount);
+		gl.uniform1f(u_grainSize, grainSize);
+		gl.uniform1f(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 * timeAmount;
+
+		resizeCanvasToDisplaySize();
+		gl.viewport(0, 0, canvas.width, canvas.height);
+		gl.clearColor(0, 0, 0, 0);
+		gl.clear(gl.COLOR_BUFFER_BIT);
+
+		gl.useProgram(program);
+		if (u_time) gl.uniform1f(u_time, animTime);
+
+		updateUniforms();
+		gl.drawArrays(gl.TRIANGLES, 0, 6);
+
+		if (running) frameId = requestAnimationFrame(render);
+	}
+
+	onMount(() => {
+		if (!canvas || !browser) return;
+		gl = canvas.getContext('webgl', { antialias: true })!;
+		if (!gl) {
+			console.warn('WebGL not supported');
+			return;
+		}
+
+		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);
+
+		// @ts-ignore
+		u_resolution = gl.getUniformLocation(program, 'u_resolution');
+		// @ts-ignore
+		u_time = gl.getUniformLocation(program, 'u_time');
+		// @ts-ignore
+		u_count = gl.getUniformLocation(program, 'u_count');
+		// @ts-ignore
+		u_colors = gl.getUniformLocation(program, 'u_colors');
+		// @ts-ignore
+		u_positions = gl.getUniformLocation(program, 'u_positions');
+		// @ts-ignore
+		u_radius = gl.getUniformLocation(program, 'u_radius');
+		// @ts-ignore
+		u_intensity = gl.getUniformLocation(program, 'u_intensity');
+		// @ts-ignore
+		u_warpMode = gl.getUniformLocation(program, 'u_warpMode');
+		// @ts-ignore
+		u_warpSize = gl.getUniformLocation(program, 'u_warpSize');
+		// @ts-ignore
+		u_warpAmount = gl.getUniformLocation(program, 'u_warpAmount');
+		// @ts-ignore
+		u_grainAmount = gl.getUniformLocation(program, 'u_grainAmount');
+		// @ts-ignore
+		u_grainSize = gl.getUniformLocation(program, 'u_grainSize');
+		// @ts-ignore
+		u_grainAnimate = gl.getUniformLocation(program, 'u_grainAnimate');
+		// @ts-ignore
+		u_seed = gl.getUniformLocation(program, 'u_seed');
+
+		frameId = requestAnimationFrame(render);
+		window.addEventListener('resize', updateUniforms);
+	});
+
+	onDestroy(() => {
+		if (!browser) return;
+
+		running = false;
+		if (frameId) cancelAnimationFrame(frameId);
+		window.removeEventListener('resize', updateUniforms);
+	});
+
+	$effect(() => {
+		if (gl && program) {
+			updateUniforms();
+		}
+	});
+</script>
+
+<canvas bind:this={canvas}></canvas>
+
+<style>
+	canvas { width: 100%; height: 100%; display: block; }
+</style>

package/dist/Gradient.svelte.d.ts

@@ -0,0 +1,21 @@
+interface Props {
+    points?: {
+        color: string;
+        x: number;
+        y: number;
+    }[];
+    radius?: number;
+    timeAmount?: number;
+    intensity?: number;
+    warpMode?: number;
+    warpSize?: number;
+    warpAmount?: number;
+    grainAmount?: number;
+    grainSize?: number;
+    seed?: number;
+}
+declare const Gradient: import("svelte").Component<Props, {
+    MAX_POINTS: 12;
+}, "">;
+type Gradient = ReturnType<typeof Gradient>;
+export default Gradient;

package/dist/gradient.frag.glsl

@@ -0,0 +1,154 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+#define MAX_POINTS 12
+
+uniform vec2 u_resolution;
+uniform float u_time;        // теперь это интегрированное animTime из компонента
+uniform int u_count;
+uniform vec3 u_colors[MAX_POINTS];
+uniform vec2 u_positions[MAX_POINTS];
+uniform float u_radius;
+uniform float u_intensity;
+uniform float u_grainAmount;
+uniform float u_grainSize;
+
+// warp uniforms
+uniform int u_warpMode; // 0 = none, 1 = waves, 2 = simplex, 3 = fbm, 4 = ridged
+uniform float u_warpSize;
+uniform float u_warpAmount;
+uniform float u_seed; // новый
+
+// --- Simplex (from Ashima / webgl-noise) ---
+vec3 permute(vec3 x) {
+    return mod(((x * 34.0) + 1.0) * x, 289.0);
+}
+float snoise(vec2 v) {
+    const vec4 C = vec4(0.211324865405187,  /* (3.0-sqrt(3.0))/6.0 */
+                        0.366025403784439,  /*  (sqrt(3.0)-1.0)/2.0 */
+                        -0.577350269189626, /* -1.0 + 2.0 * C.x */
+                        0.024390243902439); /* 1.0 / 41.0 */
+    vec2 i  = floor(v + dot(v, C.yy) );
+    vec2 x0 = v -   i + dot(i, C.xx);
+
+    vec2 i1;
+    i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+    vec4 x12 = x0.xyxy + C.xxzz;
+    x12.xy -= i1;
+
+    i = mod(i, 289.0);
+    vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0) )
+                    + i.x + vec3(0.0, i1.x, 1.0) );
+
+    vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
+    m = m * m;
+    m = m * m;
+
+    vec3 x = 2.0 * fract(p * C.www) - 1.0;
+    vec3 h = abs(x) - 0.5;
+    vec3 ox = floor(x + 0.5);
+    vec3 a0 = x - ox;
+
+    m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
+
+    vec3 g;
+    g.x  = a0.x  * x0.x + h.x  * x0.y;
+    g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+
+    return 130.0 * dot(m, g);
+}
+
+// fbm helper
+float fbm(vec2 p) {
+    float f = 0.0;
+    float amp = 0.5;
+    for (int i = 0; i < 5; i++) {
+        f += amp * snoise(p);
+        p *= 2.0;
+        amp *= 0.5;
+    }
+    return f;
+}
+
+// Wave warp — теперь использует seed и animTime
+vec2 waveWarp(vec2 uv, float t, float seed) {
+    // phase field from noise so waves are not uniform / repeatless across seed
+    float phase = snoise(uv * (u_warpSize * 1.5 + 0.1) + vec2(seed * 5.0));
+    float w1 = sin((uv.y * u_warpSize * 10.0) + t * 0.6 + phase * 6.28318);
+    float w2 = cos((uv.x * u_warpSize * 8.0) + t * 0.4 - phase * 6.28318 * 0.5);
+    vec2 disp = vec2(w1, w2) * (u_warpAmount * 0.5);
+    // adjust for aspect
+    disp.x *= u_resolution.x / u_resolution.y;
+    return uv + disp;
+}
+
+void main() {
+    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+    vec2 centered = uv - 0.5;
+    // keep aspect-correct uv for distance calculations later
+    vec2 aspectUV = uv;
+    aspectUV.x *= u_resolution.x / u_resolution.y;
+
+    // --- Handle warp modes (use u_time as smooth animTime, and u_seed to randomize field) ---
+    if (u_warpMode == 1) {
+        uv = waveWarp(uv, u_time, u_seed);
+    } else if (u_warpMode == 2) {
+        // Simplex single-octave with seed; animated slowly (u_time influences motion but smoothly)
+        vec2 noiseUv = uv * (u_warpSize * 4.0 + 0.001) + vec2(u_seed * 10.0, u_seed * 20.0);
+        float n = snoise(noiseUv + vec2(u_time * 0.05)); // slow drift
+        vec2 disp = vec2(n, snoise(noiseUv + vec2(12.34))) * u_warpAmount * 0.8;
+        disp.x *= u_resolution.x / u_resolution.y;
+        uv += disp;
+    } else if (u_warpMode == 3) {
+        // fbm turbulence
+        vec2 noiseUv = uv * (u_warpSize * 3.0) + vec2(u_seed * 7.0);
+        float f = fbm(noiseUv + vec2(u_time * 0.02));
+        vec2 disp = vec2(f, fbm(noiseUv + vec2(31.4))) * u_warpAmount;
+        disp.x *= u_resolution.x / u_resolution.y;
+        uv += disp;
+    } else if (u_warpMode == 4) {
+        // ridged noise variation
+        vec2 nUv = uv * (u_warpSize * 2.5) + vec2(u_seed * 9.0);
+        float r = 1.0 - abs(fbm(nUv));
+        vec2 disp = vec2(r, r * 0.5) * (u_warpAmount * 1.2);
+        disp.x *= u_resolution.x / u_resolution.y;
+        uv += disp;
+    }
+
+    // --- Grain calculation (apply animation BEFORE sampling the pseudo-random) ---
+    vec2 grainUv = gl_FragCoord.xy / u_resolution.xy;
+    // grainSize: bigger -> larger grains. so invert (1/size)
+    float grainScale = max(u_grainSize, 0.0001);
+    grainUv *= 1.0 / grainScale;
+    // classic hash -> value in [0,1)
+    float grain = fract(sin(dot(grainUv, vec2(12.9898, 78.233))) * 43758.5453);
+    grain = grain - 0.5; // center at 0
+
+    // --- Accumulate colors from points ---
+    vec3 accum = vec3(0.0);
+    float totalWeight = 0.0;
+    for (int i = 0; i < MAX_POINTS; ++i) {
+        if (i >= u_count) break;
+        vec2 p = u_positions[i];
+        vec2 diff = (uv - p);
+        diff.x *= u_resolution.x / u_resolution.y;
+        float d = length(diff);
+        float w = exp(- (d * d) / (u_radius * u_radius)); // base gaussian weight in (0,1]
+        // intensity now controls sharpness/contrast via power:
+        float intensity = max(0.001, u_intensity);
+        w = pow(w, intensity); // intensity >1 -> sharper peaks; <1 -> broader
+        accum += u_colors[i] * w;
+        totalWeight += w;
+    }
+    vec3 color = totalWeight > 0.0 ? accum / totalWeight : vec3(0.95);
+
+    // simple vignette
+    float vign = 1.0 - smoothstep(0.6, 0.9, length(centered));
+    color *= mix(0.98, 1.02, vign);
+
+    // add grain
+    color += grain * u_grainAmount;
+
+    gl_FragColor = vec4(color, 1.0);
+}

package/dist/gradient.vert.glsl

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

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default as Gradient } from './Gradient.svelte';

package/dist/index.js

@@ -0,0 +1 @@
+export { default as Gradient } from './Gradient.svelte';

package/package.json

@@ -0,0 +1,66 @@
+{
+	"name": "chroma-noise",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check ."
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0",
+		"ventoui-utils": "^0.0.2",
+		"@sveltejs/kit": "^2.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^6.1.0",
+		"@sveltejs/adapter-netlify": "^5.2.4",
+		"@sveltejs/kit": "^2.43.2",
+		"@sveltejs/package": "^2.5.4",
+		"@sveltejs/vite-plugin-svelte": "^6.2.0",
+		"prettier": "^3.6.2",
+		"prettier-plugin-svelte": "^3.4.0",
+		"publint": "^0.3.13",
+		"svelte": "^5.39.5",
+		"svelte-check": "^4.3.2",
+		"typescript": "^5.9.2",
+		"vite": "^7.1.7"
+	},
+	"keywords": [
+		"svelte", "simplex", "noise", "gradient", "chroma"
+	],
+	"pnpm": {
+		"onlyBuiltDependencies": [
+			"esbuild"
+		]
+	},
+	"packageManager": "pnpm@10.12.1+sha512.f0dda8580f0ee9481c5c79a1d927b9164f2c478e90992ad268bbb2465a736984391d6333d2c327913578b2804af33474ca554ba29c04a8b13060a717675ae3ac",
+	"dependencies": {
+		"ventoui-button": "^0.0.2",
+		"ventoui-slider": "^0.0.1",
+		"ventoui-styles": "^0.0.2",
+		"ventoui-utils": "^0.0.2"
+	}
+}