@guinetik/gcanvas 1.0.4 → 2.0.0

package/src/sound/index.js

@@ -15,3 +15,16 @@ export { SynthEnvelope } from "./synth.envelope.js";
 export { SynthNoise } from "./synth.noise.js";
 export { SynthMusical } from "./synth.musical.js";
 export { SynthAnalyzer } from "./synth.analyzer.js";
+
+// Audio effect primitives
+export {
+  Flanger,
+  DJFilter,
+  EQFilterBank,
+  HighShelf,
+  AdvancedDelay,
+  AdvancedDistortion,
+  AdvancedTremolo,
+  Limiter,
+  MasterGain,
+} from "./effects.js";

package/src/webgl/index.js

@@ -6,4 +6,11 @@
  */
 
 export { WebGLRenderer } from "./webgl-renderer.js";
+export { WebGLParticleRenderer } from "./webgl-particle-renderer.js";
+export { WebGLLineRenderer } from "./webgl-line-renderer.js";
+export { WebGLDeJongRenderer } from "./webgl-dejong-renderer.js";
+export { WebGLCliffordRenderer } from "./webgl-clifford-renderer.js";
 export { SPHERE_SHADERS } from "./shaders/sphere-shaders.js";
+export * from "./shaders/point-sprite-shaders.js";
+export * from "./shaders/dejong-point-shaders.js";
+export * from "./shaders/clifford-point-shaders.js";

package/src/webgl/shaders/clifford-point-shaders.js

@@ -0,0 +1,131 @@
+/**
+ * @module webgl/shaders/clifford-point-shaders
+ * @description Procedural Clifford attractor shaders (GL_POINTS).
+ *
+ * This shader iterates the Clifford map directly in the vertex shader.
+ * The attribute buffer contains random seeds in \([-1,1]\).
+ *
+ * Unlike `point-sprite-shaders.js` (which expects CPU-provided screen-space points),
+ * these shaders generate positions procedurally on the GPU.
+ *
+ * Clifford equations:
+ *   x_{n+1} = sin(a·y_n) + c·cos(a·x_n)
+ *   y_{n+1} = sin(b·x_n) + d·cos(b·y_n)
+ */
+
+import {
+  POINT_SPRITE_CIRCLE_FRAGMENT,
+  POINT_SPRITE_GLOW_FRAGMENT,
+  POINT_SPRITE_SOFT_SQUARE_FRAGMENT,
+  POINT_SPRITE_SQUARE_FRAGMENT,
+} from "./point-sprite-shaders.js";
+
+/**
+ * Maximum iterations supported by the vertex shader.
+ * Increase carefully: higher values cost GPU time.
+ * @type {number}
+ */
+export const CLIFFORD_MAX_ITERATIONS = 200;
+
+/**
+ * Procedural Clifford vertex shader.
+ *
+ * Uniforms:
+ * - `uTime`: seconds
+ * - `uParams`: vec4(a,b,c,d)
+ * - `uIterations`: number of iterations to apply (0..CLIFFORD_MAX_ITERATIONS)
+ * - `uTransform`: 2D transform in clip space (mat3)
+ * - `uZoom`: zoom factor (multiplies the attractor)
+ * - `uPointScale`: base scale mapping attractor space to clip space
+ * - `uPointSize`: gl_PointSize (pixels)
+ * - `uColorMode`: 0 = flat `uColor`, 1 = Lorenz-style speed→hue ramp
+ * - `uColor`: RGBA (0..1) used when `uColorMode=0`
+ * - `uHueRange`: vec2(minHue, maxHue) degrees (fast→slow mapping like Lorenz)
+ * - `uMaxSpeed`: speed normalization threshold
+ * - `uSaturation`: 0..1
+ * - `uLightness`: 0..1
+ * - `uAlpha`: 0..1
+ * - `uHueOffset`: degrees (e.g. time*hueShiftSpeed)
+ */
+export const CLIFFORD_POINT_VERTEX = `
+precision highp float;
+
+attribute vec2 aPosition; // random seed in [-1, 1]
+
+uniform float uTime;
+uniform vec4 uParams;      // (a, b, c, d)
+uniform int uIterations;   // 0..${CLIFFORD_MAX_ITERATIONS}
+uniform mat3 uTransform;   // clip-space transform
+uniform float uZoom;
+uniform float uPointScale;
+uniform float uPointSize;
+uniform int uColorMode;
+uniform vec4 uColor;       // non-premultiplied RGBA (0..1)
+uniform vec2 uHueRange;    // (minHue, maxHue)
+uniform float uMaxSpeed;
+uniform float uSaturation; // 0..1
+uniform float uLightness;  // 0..1
+uniform float uAlpha;      // 0..1
+uniform float uHueOffset;  // degrees
+
+varying vec4 vColor;
+
+// HSL to RGB (all 0..1). Based on a compact shader formulation.
+vec3 hsl2rgb(vec3 hsl) {
+  vec3 rgb = clamp(abs(mod(hsl.x * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);
+  rgb = rgb * rgb * (3.0 - 2.0 * rgb);
+  float c = (1.0 - abs(2.0 * hsl.z - 1.0)) * hsl.y;
+  return (rgb - 0.5) * c + hsl.z;
+}
+
+void main() {
+  vec2 p = aPosition;
+  vec2 lastDelta = vec2(0.0);
+
+  // Clifford iterative map
+  // x' = sin(a*y) + c*cos(a*x)
+  // y' = sin(b*x) + d*cos(b*y)
+  for (int i = 0; i < ${CLIFFORD_MAX_ITERATIONS}; i++) {
+    if (i >= uIterations) break;
+    vec2 prev = p;
+    float x = sin(uParams.x * p.y) + uParams.z * cos(uParams.x * p.x);
+    float y = sin(uParams.y * p.x) + uParams.w * cos(uParams.y * p.y);
+    p = vec2(x, y);
+    lastDelta = p - prev;
+  }
+
+  // Map attractor space into clip space
+  vec3 transformed = uTransform * vec3(p * uPointScale * uZoom, 1.0);
+  gl_Position = vec4(transformed.xy, 0.0, 1.0);
+  gl_PointSize = uPointSize;
+
+  // Color
+  vec4 c;
+  if (uColorMode == 1) {
+    float speed = length(lastDelta);
+    float speedNorm = clamp(speed / max(uMaxSpeed, 0.0001), 0.0, 1.0);
+    float baseHue = uHueRange.y - speedNorm * (uHueRange.y - uHueRange.x);
+    float hue = mod(baseHue + uHueOffset, 360.0);
+    vec3 rgb = hsl2rgb(vec3(hue / 360.0, clamp(uSaturation, 0.0, 1.0), clamp(uLightness, 0.0, 1.0)));
+    c = vec4(rgb, clamp(uAlpha, 0.0, 1.0));
+  } else {
+    c = uColor;
+  }
+
+  // Premultiply in shader (renderer uses premultipliedAlpha for compositing)
+  c.rgb *= c.a;
+  vColor = c;
+}
+`;
+
+/**
+ * Fragment shaders for procedural points.
+ * Re-uses the point sprite shapes.
+ */
+export const CLIFFORD_POINT_FRAGMENTS = {
+  circle: POINT_SPRITE_CIRCLE_FRAGMENT,
+  glow: POINT_SPRITE_GLOW_FRAGMENT,
+  square: POINT_SPRITE_SQUARE_FRAGMENT,
+  softSquare: POINT_SPRITE_SOFT_SQUARE_FRAGMENT,
+};
+

package/src/webgl/shaders/dejong-point-shaders.js

@@ -0,0 +1,131 @@
+/**
+ * @module webgl/shaders/dejong-point-shaders
+ * @description Procedural De Jong attractor shaders (GL_POINTS).
+ *
+ * This shader iterates the De Jong map directly in the vertex shader.
+ * The attribute buffer contains random seeds in \([-1,1]\).
+ *
+ * Unlike `point-sprite-shaders.js` (which expects CPU-provided screen-space points),
+ * these shaders generate positions procedurally on the GPU.
+ *
+ * References:
+ * - `D:/Developer/studies/DeJong-Attractor` (GPU iteration workflow)
+ */
+
+import {
+  POINT_SPRITE_CIRCLE_FRAGMENT,
+  POINT_SPRITE_GLOW_FRAGMENT,
+  POINT_SPRITE_SOFT_SQUARE_FRAGMENT,
+  POINT_SPRITE_SQUARE_FRAGMENT,
+} from "./point-sprite-shaders.js";
+
+/**
+ * Maximum iterations supported by the vertex shader.
+ * Increase carefully: higher values cost GPU time.
+ * @type {number}
+ */
+export const DEJONG_MAX_ITERATIONS = 200;
+
+/**
+ * Procedural De Jong vertex shader.
+ *
+ * Uniforms:
+ * - `uTime`: seconds
+ * - `uParams`: vec4(a,b,c,d)
+ * - `uIterations`: number of iterations to apply (0..DEJONG_MAX_ITERATIONS)
+ * - `uTransform`: 2D transform in clip space (mat3)
+ * - `uZoom`: zoom factor (multiplies the attractor)
+ * - `uPointScale`: base scale mapping attractor space to clip space (like 0.5 in the reference)
+ * - `uPointSize`: gl_PointSize (pixels)
+ * - `uColorMode`: 0 = flat `uColor`, 1 = Lorenz-style speed→hue ramp
+ * - `uColor`: RGBA (0..1) used when `uColorMode=0`
+ * - `uHueRange`: vec2(minHue, maxHue) degrees (fast→slow mapping like Lorenz)
+ * - `uMaxSpeed`: speed normalization threshold
+ * - `uSaturation`: 0..1
+ * - `uLightness`: 0..1
+ * - `uAlpha`: 0..1
+ * - `uHueOffset`: degrees (e.g. time*hueShiftSpeed)
+ */
+export const DEJONG_POINT_VERTEX = `
+precision highp float;
+
+attribute vec2 aPosition; // random seed in [-1, 1]
+
+uniform float uTime;
+uniform vec4 uParams;      // (a, b, c, d)
+uniform int uIterations;   // 0..${DEJONG_MAX_ITERATIONS}
+uniform mat3 uTransform;   // clip-space transform
+uniform float uZoom;
+uniform float uPointScale;
+uniform float uPointSize;
+uniform int uColorMode;
+uniform vec4 uColor;       // non-premultiplied RGBA (0..1)
+uniform vec2 uHueRange;    // (minHue, maxHue)
+uniform float uMaxSpeed;
+uniform float uSaturation; // 0..1
+uniform float uLightness;  // 0..1
+uniform float uAlpha;      // 0..1
+uniform float uHueOffset;  // degrees
+
+varying vec4 vColor;
+
+// HSL to RGB (all 0..1). Based on a compact shader formulation.
+vec3 hsl2rgb(vec3 hsl) {
+  vec3 rgb = clamp(abs(mod(hsl.x * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);
+  rgb = rgb * rgb * (3.0 - 2.0 * rgb);
+  float c = (1.0 - abs(2.0 * hsl.z - 1.0)) * hsl.y;
+  return (rgb - 0.5) * c + hsl.z;
+}
+
+void main() {
+  vec2 p = aPosition;
+  vec2 lastDelta = vec2(0.0);
+
+  // De Jong iterative map
+  // x' = sin(a*y) - cos(b*x)
+  // y' = sin(c*x) - cos(d*y)
+  for (int i = 0; i < ${DEJONG_MAX_ITERATIONS}; i++) {
+    if (i >= uIterations) break;
+    vec2 prev = p;
+    float x = sin(uParams.x * p.y) - cos(uParams.y * p.x);
+    float y = sin(uParams.z * p.x) - cos(uParams.w * p.y);
+    p = vec2(x, y);
+    lastDelta = p - prev;
+  }
+
+  // Map attractor space into clip space
+  vec3 transformed = uTransform * vec3(p * uPointScale * uZoom, 1.0);
+  gl_Position = vec4(transformed.xy, 0.0, 1.0);
+  gl_PointSize = uPointSize;
+
+  // Color
+  vec4 c;
+  if (uColorMode == 1) {
+    // Lorenz-like mapping: slow → maxHue, fast → minHue
+    float speed = length(lastDelta);
+    float speedNorm = clamp(speed / max(uMaxSpeed, 0.0001), 0.0, 1.0);
+    float baseHue = uHueRange.y - speedNorm * (uHueRange.y - uHueRange.x);
+    float hue = mod(baseHue + uHueOffset, 360.0);
+    vec3 rgb = hsl2rgb(vec3(hue / 360.0, clamp(uSaturation, 0.0, 1.0), clamp(uLightness, 0.0, 1.0)));
+    c = vec4(rgb, clamp(uAlpha, 0.0, 1.0));
+  } else {
+    c = uColor;
+  }
+
+  // Premultiply in shader (renderer uses premultipliedAlpha for compositing)
+  c.rgb *= c.a;
+  vColor = c;
+}
+`;
+
+/**
+ * Fragment shaders for DeJong procedural points.
+ * Re-uses the point sprite shapes.
+ */
+export const DEJONG_POINT_FRAGMENTS = {
+  circle: POINT_SPRITE_CIRCLE_FRAGMENT,
+  glow: POINT_SPRITE_GLOW_FRAGMENT,
+  square: POINT_SPRITE_SQUARE_FRAGMENT,
+  softSquare: POINT_SPRITE_SOFT_SQUARE_FRAGMENT,
+};
+

package/src/webgl/shaders/point-sprite-shaders.js

@@ -0,0 +1,152 @@
+/**
+ * Point Sprite Shaders for WebGL Particle Rendering
+ *
+ * These shaders render particles as GL_POINTS with gl_PointSize.
+ * Used by WebGLParticleRenderer for GPU-accelerated particle systems.
+ */
+
+// =============================================================================
+// VERTEX SHADER
+// =============================================================================
+
+/**
+ * Point sprite vertex shader
+ * Takes screen-space positions (already projected by Camera3D on CPU)
+ * and converts to clip space for rendering.
+ */
+export const POINT_SPRITE_VERTEX = `
+precision highp float;
+
+attribute vec2 aPosition;   // Screen position (pixels, already projected)
+attribute float aSize;      // Point size in pixels
+attribute vec4 aColor;      // RGBA color (0-1 range)
+
+varying vec4 vColor;
+
+uniform vec2 uResolution;   // Canvas dimensions
+
+void main() {
+    // Convert from pixel coords to clip space (-1 to 1)
+    vec2 clipPos = (aPosition / uResolution) * 2.0 - 1.0;
+    clipPos.y = -clipPos.y;  // Flip Y (canvas Y is down, GL Y is up)
+
+    gl_Position = vec4(clipPos, 0.0, 1.0);
+    gl_PointSize = aSize;
+    vColor = aColor;
+}
+`;
+
+// =============================================================================
+// FRAGMENT SHADERS
+// =============================================================================
+
+/**
+ * Circle fragment shader with soft anti-aliased edge
+ * Most common particle shape - smooth circular particles
+ */
+export const POINT_SPRITE_CIRCLE_FRAGMENT = `
+precision mediump float;
+
+varying vec4 vColor;
+
+void main() {
+    // gl_PointCoord is 0-1 UV within the point quad
+    vec2 coord = gl_PointCoord - vec2(0.5);
+    float dist = length(coord);
+
+    // Discard pixels outside circle
+    if (dist > 0.5) {
+        discard;
+    }
+
+    // Soft edge for anti-aliasing
+    float alpha = vColor.a * (1.0 - smoothstep(0.4, 0.5, dist));
+    gl_FragColor = vec4(vColor.rgb, alpha);
+}
+`;
+
+/**
+ * Circle fragment shader with glow effect
+ * Particles have a bright core that fades outward
+ */
+export const POINT_SPRITE_GLOW_FRAGMENT = `
+precision mediump float;
+
+varying vec4 vColor;
+
+void main() {
+    vec2 coord = gl_PointCoord - vec2(0.5);
+    float dist = length(coord);
+
+    if (dist > 0.5) {
+        discard;
+    }
+
+    // Radial falloff for glow effect
+    float glow = 1.0 - (dist * 2.0);
+    glow = glow * glow;  // Quadratic falloff
+
+    float alpha = vColor.a * glow;
+    vec3 color = vColor.rgb * (0.5 + glow * 0.5);  // Brighten center
+
+    gl_FragColor = vec4(color, alpha);
+}
+`;
+
+/**
+ * Square fragment shader (no clipping)
+ * Fastest option - just outputs the color directly
+ */
+export const POINT_SPRITE_SQUARE_FRAGMENT = `
+precision mediump float;
+
+varying vec4 vColor;
+
+void main() {
+    gl_FragColor = vColor;
+}
+`;
+
+/**
+ * Soft square fragment shader with rounded corners
+ */
+export const POINT_SPRITE_SOFT_SQUARE_FRAGMENT = `
+precision mediump float;
+
+varying vec4 vColor;
+
+void main() {
+    vec2 coord = abs(gl_PointCoord - vec2(0.5)) * 2.0;  // 0 at center, 1 at edge
+    float d = max(coord.x, coord.y);
+
+    // Soft edge
+    float alpha = vColor.a * (1.0 - smoothstep(0.8, 1.0, d));
+    gl_FragColor = vec4(vColor.rgb, alpha);
+}
+`;
+
+// =============================================================================
+// SHADER PRESETS
+// =============================================================================
+
+/**
+ * Pre-configured shader combinations for common use cases
+ */
+export const POINT_SPRITE_PRESETS = {
+    circle: {
+        vertex: POINT_SPRITE_VERTEX,
+        fragment: POINT_SPRITE_CIRCLE_FRAGMENT,
+    },
+    glow: {
+        vertex: POINT_SPRITE_VERTEX,
+        fragment: POINT_SPRITE_GLOW_FRAGMENT,
+    },
+    square: {
+        vertex: POINT_SPRITE_VERTEX,
+        fragment: POINT_SPRITE_SQUARE_FRAGMENT,
+    },
+    softSquare: {
+        vertex: POINT_SPRITE_VERTEX,
+        fragment: POINT_SPRITE_SOFT_SQUARE_FRAGMENT,
+    },
+};