@nexart/codemode-sdk 1.1.0 → 1.1.1

package/dist/noise-sketches/fractalNoise.js

@@ -0,0 +1,121 @@
+/**
+ * Fractal Noise - Code Mode Sketch
+ *
+ * This sketch implements Perlin FBM and Cellular noise rendering
+ * through the Code Mode p5-runtime. Uses N.* globals for all parameters.
+ *
+ * Original: client/src/components/noise-canvas-simple.tsx
+ */
+export const FRACTAL_NOISE_SKETCH = `
+// Fractal Noise - Code Mode Sketch
+// Uses N.* noise globals and standard p5-like functions
+
+function setup() {
+  // Set seeded random for reproducibility
+  randomSeed(N.seed);
+  noiseSeed(N.seed);
+  
+  // Set background color
+  background(N.bgR, N.bgG, N.bgB);
+  
+  // Noise rendering parameters
+  const adjustedScale = N.scale * (1 / N.zoom) * 0.05;
+  const cellSize = 4; // Fixed for quality
+  
+  // Generate cellular points if needed
+  const numPoints = Math.floor(20 + N.cellDensity * 180);
+  const cellPoints = [];
+  for (let i = 0; i < numPoints; i++) {
+    cellPoints.push([random(0, width), random(0, height)]);
+  }
+  
+  // Helper: Perlin FBM (Fractional Brownian Motion)
+  function perlinFBM(x, y, scale) {
+    let value = 0;
+    let amplitude = 1;
+    let frequency = 1;
+    let maxValue = 0;
+    
+    const oct = Math.min(N.octaves, 6); // Cap for performance
+    
+    for (let i = 0; i < oct; i++) {
+      value += noise(x * scale * frequency, y * scale * frequency) * amplitude;
+      maxValue += amplitude;
+      amplitude *= N.persistence;
+      frequency *= N.lacunarity;
+    }
+    
+    return value / maxValue;
+  }
+  
+  // Helper: Cellular noise (Worley)
+  function cellularNoise(x, y, points) {
+    let sampleX = x;
+    let sampleY = y;
+    
+    // Warp distortion if using warp mode
+    if (N.isWarp && N.cellDistortion > 0) {
+      const distortionAmount = N.cellDistortion * 100;
+      sampleX += noise(x * 0.01, y * 0.01) * distortionAmount;
+      sampleY += noise(y * 0.01, x * 0.01) * distortionAmount;
+    }
+    
+    // Find distances to closest points
+    let minDist = 999999;
+    let secondMinDist = 999999;
+    
+    for (let i = 0; i < points.length; i++) {
+      const px = points[i][0];
+      const py = points[i][1];
+      const dx = sampleX - px;
+      const dy = sampleY - py;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      
+      if (dist < minDist) {
+        secondMinDist = minDist;
+        minDist = dist;
+      } else if (dist < secondMinDist) {
+        secondMinDist = dist;
+      }
+    }
+    
+    // Normalize distance
+    return Math.min(1.0, (secondMinDist - minDist) / 50);
+  }
+  
+  // Render the noise grid
+  noStroke();
+  
+  for (let y = 0; y < height; y += cellSize) {
+    for (let x = 0; x < width; x += cellSize) {
+      // Calculate Perlin value
+      const perlinValue = perlinFBM(x, y, adjustedScale);
+      
+      // Calculate final value based on blend mode
+      let finalValue = perlinValue;
+      
+      if (!N.isPerlinOnly) {
+        const cellValue = cellularNoise(x, y, cellPoints);
+        
+        if (N.isBlend) {
+          finalValue = perlinValue * cellValue;
+        } else if (N.isWarp) {
+          finalValue = (perlinValue + cellValue) / 2;
+        } else if (N.isInterleave) {
+          finalValue = (Math.floor(x / 20) + Math.floor(y / 20)) % 2 === 0
+            ? perlinValue
+            : cellValue;
+        }
+      }
+      
+      // Set opacity based on noise value
+      const alpha = map(finalValue, 0, 1, 0, 255);
+      
+      // Fill with noise color and calculated alpha
+      fill(N.noiseR, N.noiseG, N.noiseB, alpha);
+      rect(x, y, cellSize, cellSize);
+    }
+  }
+}
+`;
+export default FRACTAL_NOISE_SKETCH;

package/dist/noise-sketches/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Noise Sketches Index
+ *
+ * Exports all available noise sketch generators for the Code Mode runtime.
+ */
+import FRACTAL_NOISE_SKETCH from './fractalNoise';
+export type NoiseSketchName = 'fractalNoise';
+/**
+ * Get a noise sketch by name
+ */
+export declare function getNoiseSketch(name: NoiseSketchName): string;
+/**
+ * Check if a sketch name is valid
+ */
+export declare function isValidNoiseSketch(name: string): name is NoiseSketchName;
+/**
+ * Get list of all available noise sketch names
+ */
+export declare function getAvailableNoiseSketchNames(): NoiseSketchName[];
+export { FRACTAL_NOISE_SKETCH };
+//# sourceMappingURL=index.d.ts.map

package/dist/noise-sketches/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../noise-sketches/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,oBAAoB,MAAM,gBAAgB,CAAC;AAElD,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC;AAM7C;;GAEG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,eAAe,GAAG,MAAM,CAE5D;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,IAAI,eAAe,CAExE;AAED;;GAEG;AACH,wBAAgB,4BAA4B,IAAI,eAAe,EAAE,CAEhE;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/noise-sketches/index.js

@@ -0,0 +1,28 @@
+/**
+ * Noise Sketches Index
+ *
+ * Exports all available noise sketch generators for the Code Mode runtime.
+ */
+import FRACTAL_NOISE_SKETCH from './fractalNoise';
+const NOISE_SKETCHES = {
+    fractalNoise: FRACTAL_NOISE_SKETCH,
+};
+/**
+ * Get a noise sketch by name
+ */
+export function getNoiseSketch(name) {
+    return NOISE_SKETCHES[name];
+}
+/**
+ * Check if a sketch name is valid
+ */
+export function isValidNoiseSketch(name) {
+    return name in NOISE_SKETCHES;
+}
+/**
+ * Get list of all available noise sketch names
+ */
+export function getAvailableNoiseSketchNames() {
+    return Object.keys(NOISE_SKETCHES);
+}
+export { FRACTAL_NOISE_SKETCH };

package/dist/p5-runtime.d.ts

@@ -1,11 +1,41 @@
 /**
  * NexArt Code Mode Runtime SDK - p5-like Runtime
- * Version: 0.1.1
  *
- * Minimal p5.js-like runtime for deterministic generative art execution.
- * This is a headless runtime - no UI dependencies.
+ * ╔══════════════════════════════════════════════════════════════════════════╗
+ * ║  CODE MODE PROTOCOL v1.0.0 (Phase 1) — LOCKED                            ║
+ * ║                                                                          ║
+ * ║  Status: HARD PROTOCOL ENFORCEMENT                                       ║
+ * ║  This is the stable, canonical execution surface.                        ║
+ * ║  SDKs, ByX, and external builders can depend on this API.                ║
+ * ║                                                                          ║
+ * ║  Phase 1 Surface:                                                        ║
+ * ║  - VAR[0..9]: 10 read-only protocol variables (0-100 range)              ║
+ * ║  - Drawing: line, rect, ellipse, circle, triangle, quad, arc, etc.       ║
+ * ║  - Style: fill, stroke, colorMode, strokeWeight                          ║
+ * ║  - Transform: push, pop, translate, rotate, scale                        ║
+ * ║  - Random: random(), randomSeed(), randomGaussian() (seeded)             ║
+ * ║  - Noise: noise(), noiseSeed(), noiseDetail() (seeded)                   ║
+ * ║  - Math: map, constrain, lerp, lerpColor, dist, mag, norm                ║
+ * ║  - Color: Full CSS format support, color extraction functions            ║
+ * ║  - Time: frameCount, t, time, tGlobal                                    ║
+ * ║                                                                          ║
+ * ║  Determinism Guarantees:                                                 ║
+ * ║  - Same code + same seed + same VARs = identical output                  ║
+ * ║  - No external state, no browser entropy, no time-based drift            ║
+ * ║  - Randomness ONLY from: random(), noise() (both seeded)                 ║
+ * ║                                                                          ║
+ * ║  ⚠️  Future changes require Phase 2+                                     ║
+ * ╚══════════════════════════════════════════════════════════════════════════╝
  */
 import type { TimeVariables } from './types';
+/**
+ * Code Mode Protocol Version
+ * This constant defines the locked protocol version.
+ * Changes to the execution surface require a version bump.
+ */
+export declare const CODE_MODE_PROTOCOL_VERSION = "1.0.0";
+export declare const CODE_MODE_PROTOCOL_PHASE = 1;
+export declare const CODE_MODE_ENFORCEMENT: "HARD";
 export interface P5Runtime {
     [key: string]: any;
     width: number;
@@ -16,6 +46,28 @@ export interface P5Runtime {
     HALF_PI: number;
     QUARTER_PI: number;
 }
-export declare function createP5Runtime(canvas: HTMLCanvasElement, width: number, height: number): P5Runtime;
+export interface P5RuntimeConfig {
+    seed?: number;
+}
+export declare function createP5Runtime(canvas: HTMLCanvasElement, width: number, height: number, config?: P5RuntimeConfig): P5Runtime;
 export declare function injectTimeVariables(p: P5Runtime, time: TimeVariables): void;
+/**
+ * VAR Protocol Constants (Phase 1 — Protocol v1.0.0)
+ * SDK v1.0.2: VAR input is optional (0-10 elements), but runtime always has 10
+ */
+export declare const VAR_COUNT = 10;
+export declare const VAR_MIN = 0;
+export declare const VAR_MAX = 100;
+/**
+ * Create a protected, read-only VAR array for protocol execution.
+ *
+ * SDK v1.0.2 Rules (Protocol v1.0.0):
+ * - Input accepts 0-10 elements
+ * - Runtime VAR is ALWAYS 10 elements (padded with zeros)
+ * - Values are numeric, must be in 0-100 range (validated upstream)
+ * - Read-only: writes throw descriptive errors
+ * - Available in both setup() and draw()
+ */
+export declare function createProtocolVAR(vars?: number[]): readonly number[];
+export declare function injectProtocolVariables(p: P5Runtime, vars?: number[]): void;
 //# sourceMappingURL=p5-runtime.d.ts.map

package/dist/p5-runtime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"p5-runtime.d.ts","sourceRoot":"","sources":["../p5-runtime.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,MAAM,WAAW,SAAS;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,eAAe,CAC7B,MAAM,EAAE,iBAAiB,EACzB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,GACb,SAAS,CAqVX;AAED,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,GAAG,IAAI,CAE3E"}
+{"version":3,"file":"p5-runtime.d.ts","sourceRoot":"","sources":["../p5-runtime.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C;;;;GAIG;AACH,eAAO,MAAM,0BAA0B,UAAU,CAAC;AAClD,eAAO,MAAM,wBAAwB,IAAI,CAAC;AAC1C,eAAO,MAAM,qBAAqB,EAAG,MAAe,CAAC;AAErD,MAAM,WAAW,SAAS;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;CACpB;AAmED,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,eAAe,CAC7B,MAAM,EAAE,iBAAiB,EACzB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,MAAM,CAAC,EAAE,eAAe,GACvB,SAAS,CA0hBX;AAED,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,GAAG,IAAI,CAE3E;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,KAAK,CAAC;AAC5B,eAAO,MAAM,OAAO,IAAI,CAAC;AACzB,eAAO,MAAM,OAAO,MAAM,CAAC;AAE3B;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,MAAM,EAAE,CAmCpE;AAED,wBAAgB,uBAAuB,CAAC,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAE3E"}

package/dist/p5-runtime.js

@@ -1,11 +1,97 @@
 /**
  * NexArt Code Mode Runtime SDK - p5-like Runtime
- * Version: 0.1.1
  *
- * Minimal p5.js-like runtime for deterministic generative art execution.
- * This is a headless runtime - no UI dependencies.
+ * ╔══════════════════════════════════════════════════════════════════════════╗
+ * ║  CODE MODE PROTOCOL v1.0.0 (Phase 1) — LOCKED                            ║
+ * ║                                                                          ║
+ * ║  Status: HARD PROTOCOL ENFORCEMENT                                       ║
+ * ║  This is the stable, canonical execution surface.                        ║
+ * ║  SDKs, ByX, and external builders can depend on this API.                ║
+ * ║                                                                          ║
+ * ║  Phase 1 Surface:                                                        ║
+ * ║  - VAR[0..9]: 10 read-only protocol variables (0-100 range)              ║
+ * ║  - Drawing: line, rect, ellipse, circle, triangle, quad, arc, etc.       ║
+ * ║  - Style: fill, stroke, colorMode, strokeWeight                          ║
+ * ║  - Transform: push, pop, translate, rotate, scale                        ║
+ * ║  - Random: random(), randomSeed(), randomGaussian() (seeded)             ║
+ * ║  - Noise: noise(), noiseSeed(), noiseDetail() (seeded)                   ║
+ * ║  - Math: map, constrain, lerp, lerpColor, dist, mag, norm                ║
+ * ║  - Color: Full CSS format support, color extraction functions            ║
+ * ║  - Time: frameCount, t, time, tGlobal                                    ║
+ * ║                                                                          ║
+ * ║  Determinism Guarantees:                                                 ║
+ * ║  - Same code + same seed + same VARs = identical output                  ║
+ * ║  - No external state, no browser entropy, no time-based drift            ║
+ * ║  - Randomness ONLY from: random(), noise() (both seeded)                 ║
+ * ║                                                                          ║
+ * ║  ⚠️  Future changes require Phase 2+                                     ║
+ * ╚══════════════════════════════════════════════════════════════════════════╝
  */
-export function createP5Runtime(canvas, width, height) {
+/**
+ * Code Mode Protocol Version
+ * This constant defines the locked protocol version.
+ * Changes to the execution surface require a version bump.
+ */
+export const CODE_MODE_PROTOCOL_VERSION = '1.0.0';
+export const CODE_MODE_PROTOCOL_PHASE = 1;
+export const CODE_MODE_ENFORCEMENT = 'HARD';
+/**
+ * Create a seeded random number generator (Mulberry32)
+ * Same algorithm used in SoundArt for consistency
+ */
+function createSeededRNG(seed = 123456) {
+    let a = seed >>> 0;
+    return () => {
+        a += 0x6D2B79F5;
+        let t = Math.imul(a ^ (a >>> 15), a | 1);
+        t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+}
+/**
+ * Create improved Perlin-like noise with seeding support
+ */
+function createSeededNoise(seed = 0) {
+    const permutation = [];
+    const rng = createSeededRNG(seed);
+    for (let i = 0; i < 256; i++) {
+        permutation[i] = i;
+    }
+    for (let i = 255; i > 0; i--) {
+        const j = Math.floor(rng() * (i + 1));
+        [permutation[i], permutation[j]] = [permutation[j], permutation[i]];
+    }
+    for (let i = 0; i < 256; i++) {
+        permutation[256 + i] = permutation[i];
+    }
+    const fade = (t) => t * t * t * (t * (t * 6 - 15) + 10);
+    const lerp = (a, b, t) => a + t * (b - a);
+    const grad = (hash, x, y, z) => {
+        const h = hash & 15;
+        const u = h < 8 ? x : y;
+        const v = h < 4 ? y : h === 12 || h === 14 ? x : z;
+        return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v);
+    };
+    return (x, y = 0, z = 0) => {
+        const X = Math.floor(x) & 255;
+        const Y = Math.floor(y) & 255;
+        const Z = Math.floor(z) & 255;
+        x -= Math.floor(x);
+        y -= Math.floor(y);
+        z -= Math.floor(z);
+        const u = fade(x);
+        const v = fade(y);
+        const w = fade(z);
+        const A = permutation[X] + Y;
+        const AA = permutation[A] + Z;
+        const AB = permutation[A + 1] + Z;
+        const B = permutation[X + 1] + Y;
+        const BA = permutation[B] + Z;
+        const BB = permutation[B + 1] + Z;
+        return (lerp(lerp(lerp(grad(permutation[AA], x, y, z), grad(permutation[BA], x - 1, y, z), u), lerp(grad(permutation[AB], x, y - 1, z), grad(permutation[BB], x - 1, y - 1, z), u), v), lerp(lerp(grad(permutation[AA + 1], x, y, z - 1), grad(permutation[BA + 1], x - 1, y, z - 1), u), lerp(grad(permutation[AB + 1], x, y - 1, z - 1), grad(permutation[BB + 1], x - 1, y - 1, z - 1), u), v), w) + 1) / 2;
+    };
+}
+export function createP5Runtime(canvas, width, height, config) {
     const ctx = canvas.getContext('2d', { willReadFrequently: true });
     let currentFill = 'rgba(255, 255, 255, 1)';
     let currentStroke = 'rgba(0, 0, 0, 1)';
@@ -14,14 +100,119 @@ export function createP5Runtime(canvas, width, height) {
     let currentStrokeWeight = 1;
     let colorModeSettings = { mode: 'RGB', maxR: 255, maxG: 255, maxB: 255, maxA: 255 };
     let shapeStarted = false;
+    // Seeded random state
+    let randomSeedValue = config?.seed ?? Math.floor(Math.random() * 2147483647);
+    let rng = createSeededRNG(randomSeedValue);
+    // Seeded noise state
+    let noiseSeedValue = config?.seed ?? 0;
+    let noiseFunc = createSeededNoise(noiseSeedValue);
+    let noiseOctaves = 4;
+    let noiseFalloff = 0.5;
+    /**
+     * Parse CSS color string to normalized RGBA values
+     * Supports: hex (#RGB, #RRGGBB, #RRGGBBAA), rgb(), rgba(), hsl(), hsla()
+     */
+    const parseCssColor = (str) => {
+        const s = str.trim();
+        // Hex format: #RGB, #RRGGBB, #RRGGBBAA
+        if (s.startsWith('#')) {
+            const hex = s.slice(1);
+            if (hex.length === 3) {
+                const r = parseInt(hex[0] + hex[0], 16);
+                const g = parseInt(hex[1] + hex[1], 16);
+                const b = parseInt(hex[2] + hex[2], 16);
+                return { r, g, b, a: 1 };
+            }
+            else if (hex.length === 6) {
+                const r = parseInt(hex.slice(0, 2), 16);
+                const g = parseInt(hex.slice(2, 4), 16);
+                const b = parseInt(hex.slice(4, 6), 16);
+                return { r, g, b, a: 1 };
+            }
+            else if (hex.length === 8) {
+                const r = parseInt(hex.slice(0, 2), 16);
+                const g = parseInt(hex.slice(2, 4), 16);
+                const b = parseInt(hex.slice(4, 6), 16);
+                const a = parseInt(hex.slice(6, 8), 16) / 255;
+                return { r, g, b, a };
+            }
+        }
+        // rgb(r, g, b) or rgb(r g b)
+        const rgbMatch = s.match(/^rgb\s*\(\s*(\d+)\s*[,\s]\s*(\d+)\s*[,\s]\s*(\d+)\s*\)$/i);
+        if (rgbMatch) {
+            return {
+                r: parseInt(rgbMatch[1]),
+                g: parseInt(rgbMatch[2]),
+                b: parseInt(rgbMatch[3]),
+                a: 1
+            };
+        }
+        // rgba(r, g, b, a) or rgba(r g b / a)
+        const rgbaMatch = s.match(/^rgba\s*\(\s*(\d+)\s*[,\s]\s*(\d+)\s*[,\s]\s*(\d+)\s*[,\/\s]\s*([\d.]+)\s*\)$/i);
+        if (rgbaMatch) {
+            return {
+                r: parseInt(rgbaMatch[1]),
+                g: parseInt(rgbaMatch[2]),
+                b: parseInt(rgbaMatch[3]),
+                a: parseFloat(rgbaMatch[4])
+            };
+        }
+        // hsl(h, s%, l%) or hsla(h, s%, l%, a)
+        const hslMatch = s.match(/^hsla?\s*\(\s*([\d.]+)\s*[,\s]\s*([\d.]+)%?\s*[,\s]\s*([\d.]+)%?\s*(?:[,\/\s]\s*([\d.]+))?\s*\)$/i);
+        if (hslMatch) {
+            const h = parseFloat(hslMatch[1]) / 360;
+            const sat = parseFloat(hslMatch[2]) / 100;
+            const l = parseFloat(hslMatch[3]) / 100;
+            const a = hslMatch[4] ? parseFloat(hslMatch[4]) : 1;
+            // HSL to RGB conversion
+            let r, g, b;
+            if (sat === 0) {
+                r = g = b = l;
+            }
+            else {
+                const hue2rgb = (p, q, t) => {
+                    if (t < 0)
+                        t += 1;
+                    if (t > 1)
+                        t -= 1;
+                    if (t < 1 / 6)
+                        return p + (q - p) * 6 * t;
+                    if (t < 1 / 2)
+                        return q;
+                    if (t < 2 / 3)
+                        return p + (q - p) * (2 / 3 - t) * 6;
+                    return p;
+                };
+                const q = l < 0.5 ? l * (1 + sat) : l + sat - l * sat;
+                const p = 2 * l - q;
+                r = hue2rgb(p, q, h + 1 / 3);
+                g = hue2rgb(p, q, h);
+                b = hue2rgb(p, q, h - 1 / 3);
+            }
+            return {
+                r: Math.round(r * 255),
+                g: Math.round(g * 255),
+                b: Math.round(b * 255),
+                a
+            };
+        }
+        return null;
+    };
     const parseColor = (...args) => {
         if (args.length === 0)
             return 'rgba(0, 0, 0, 1)';
         const { mode, maxR, maxG, maxB, maxA } = colorModeSettings;
         if (args.length === 1) {
             const val = args[0];
-            if (typeof val === 'string')
+            if (typeof val === 'string') {
+                // Try to parse CSS color formats
+                const parsed = parseCssColor(val);
+                if (parsed) {
+                    return `rgba(${parsed.r}, ${parsed.g}, ${parsed.b}, ${parsed.a})`;
+                }
+                // Return as-is for named colors (canvas handles them)
                 return val;
+            }
             if (mode === 'HSB') {
                 return `hsla(${val}, 100%, 50%, 1)`;
             }
@@ -112,7 +303,71 @@ export function createP5Runtime(canvas, width, height) {
         },
         color: (...args) => parseColor(...args),
         lerpColor: (c1, c2, amt) => {
-            return c1; // Simplified - full implementation would blend colors
+            // Parse both colors
+            const color1 = parseCssColor(c1) || { r: 0, g: 0, b: 0, a: 1 };
+            const color2 = parseCssColor(c2) || { r: 255, g: 255, b: 255, a: 1 };
+            // Linearly interpolate each channel
+            const r = Math.round(color1.r + (color2.r - color1.r) * amt);
+            const g = Math.round(color1.g + (color2.g - color1.g) * amt);
+            const b = Math.round(color1.b + (color2.b - color1.b) * amt);
+            const a = color1.a + (color2.a - color1.a) * amt;
+            return `rgba(${r}, ${g}, ${b}, ${a})`;
+        },
+        red: (color) => {
+            const parsed = parseCssColor(color);
+            return parsed ? parsed.r : 0;
+        },
+        green: (color) => {
+            const parsed = parseCssColor(color);
+            return parsed ? parsed.g : 0;
+        },
+        blue: (color) => {
+            const parsed = parseCssColor(color);
+            return parsed ? parsed.b : 0;
+        },
+        alpha: (color) => {
+            const parsed = parseCssColor(color);
+            return parsed ? parsed.a * 255 : 255;
+        },
+        brightness: (color) => {
+            const parsed = parseCssColor(color);
+            if (!parsed)
+                return 0;
+            return Math.max(parsed.r, parsed.g, parsed.b) / 255 * 100;
+        },
+        saturation: (color) => {
+            const parsed = parseCssColor(color);
+            if (!parsed)
+                return 0;
+            const max = Math.max(parsed.r, parsed.g, parsed.b);
+            const min = Math.min(parsed.r, parsed.g, parsed.b);
+            if (max === 0)
+                return 0;
+            return ((max - min) / max) * 100;
+        },
+        hue: (color) => {
+            const parsed = parseCssColor(color);
+            if (!parsed)
+                return 0;
+            const { r, g, b } = parsed;
+            const max = Math.max(r, g, b);
+            const min = Math.min(r, g, b);
+            if (max === min)
+                return 0;
+            let h = 0;
+            const d = max - min;
+            switch (max) {
+                case r:
+                    h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                    break;
+                case g:
+                    h = ((b - r) / d + 2) / 6;
+                    break;
+                case b:
+                    h = ((r - g) / d + 4) / 6;
+                    break;
+            }
+            return h * 360;
         },
         // Shape functions
         ellipse: (x, y, w, h) => {
@@ -242,30 +497,53 @@ export function createP5Runtime(canvas, width, height) {
         resetMatrix: () => {
             ctx.setTransform(1, 0, 0, 1, 0, 0);
         },
-        // Math functions
+        // Math functions - SEEDED for determinism
         random: (min, max) => {
+            // Support random() with arrays
+            if (Array.isArray(min)) {
+                return min[Math.floor(rng() * min.length)];
+            }
             if (min === undefined)
-                return Math.random();
+                return rng();
             if (max === undefined)
-                return Math.random() * min;
-            return min + Math.random() * (max - min);
+                return rng() * min;
+            return min + rng() * (max - min);
         },
         randomSeed: (seed) => {
-            // Simplified - would need proper seeded random
+            randomSeedValue = seed;
+            rng = createSeededRNG(seed);
+        },
+        randomGaussian: (mean = 0, sd = 1) => {
+            // Box-Muller transform for Gaussian distribution
+            const u1 = rng();
+            const u2 = rng();
+            const z0 = Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2);
+            return z0 * sd + mean;
         },
         noise: (x, y, z) => {
-            // Simplified Perlin-like noise
-            const hash = (n) => {
-                const s = Math.sin(n) * 43758.5453123;
-                return s - Math.floor(s);
-            };
-            const xVal = x ?? 0;
-            const yVal = y ?? 0;
-            const zVal = z ?? 0;
-            return hash(xVal * 12.9898 + yVal * 78.233 + zVal * 37.719);
+            // Use seeded Perlin noise with octaves
+            let total = 0;
+            let frequency = 1;
+            let amplitude = 1;
+            let maxValue = 0;
+            for (let i = 0; i < noiseOctaves; i++) {
+                total += noiseFunc(x * frequency, (y ?? 0) * frequency, (z ?? 0) * frequency) * amplitude;
+                maxValue += amplitude;
+                amplitude *= noiseFalloff;
+                frequency *= 2;
+            }
+            return total / maxValue;
+        },
+        noiseSeed: (seed) => {
+            noiseSeedValue = seed;
+            noiseFunc = createSeededNoise(seed);
+        },
+        noiseDetail: (lod, falloff) => {
+            noiseOctaves = Math.max(1, Math.min(8, lod));
+            if (falloff !== undefined) {
+                noiseFalloff = Math.max(0, Math.min(1, falloff));
+            }
         },
-        noiseSeed: (seed) => { },
-        noiseDetail: (lod, falloff) => { },
         map: (value, start1, stop1, start2, stop2) => {
             return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
         },
@@ -316,3 +594,51 @@ export function createP5Runtime(canvas, width, height) {
 export function injectTimeVariables(p, time) {
     p.frameCount = time.frameCount;
 }
+/**
+ * VAR Protocol Constants (Phase 1 — Protocol v1.0.0)
+ * SDK v1.0.2: VAR input is optional (0-10 elements), but runtime always has 10
+ */
+export const VAR_COUNT = 10; // Exactly 10 protocol variables: VAR[0..9]
+export const VAR_MIN = 0; // Minimum value
+export const VAR_MAX = 100; // Maximum value (normalized range)
+/**
+ * Create a protected, read-only VAR array for protocol execution.
+ *
+ * SDK v1.0.2 Rules (Protocol v1.0.0):
+ * - Input accepts 0-10 elements
+ * - Runtime VAR is ALWAYS 10 elements (padded with zeros)
+ * - Values are numeric, must be in 0-100 range (validated upstream)
+ * - Read-only: writes throw descriptive errors
+ * - Available in both setup() and draw()
+ */
+export function createProtocolVAR(vars) {
+    // Create frozen 10-element array (upstream normalizeVars ensures this)
+    const normalizedVars = [];
+    for (let i = 0; i < VAR_COUNT; i++) {
+        normalizedVars[i] = vars?.[i] ?? 0;
+    }
+    // Freeze the array to prevent modifications
+    const frozenVars = Object.freeze(normalizedVars);
+    // Wrap in Proxy for descriptive error messages on write attempts
+    return new Proxy(frozenVars, {
+        set(_target, prop, _value) {
+            const propName = typeof prop === 'symbol' ? prop.toString() : prop;
+            throw new Error(`[Code Mode Protocol Error] VAR is read-only. ` +
+                `Cannot write to VAR[${propName}]. ` +
+                `VAR[0..9] are protocol inputs, not sketch state.`);
+        },
+        deleteProperty(_target, prop) {
+            const propName = typeof prop === 'symbol' ? prop.toString() : prop;
+            throw new Error(`[Code Mode Protocol Error] VAR is read-only. ` +
+                `Cannot delete VAR[${propName}].`);
+        },
+        defineProperty(_target, prop) {
+            const propName = typeof prop === 'symbol' ? prop.toString() : prop;
+            throw new Error(`[Code Mode Protocol Error] Cannot define new VAR properties. ` +
+                `VAR is fixed at 10 elements (VAR[0..9]). Attempted: ${propName}`);
+        },
+    });
+}
+export function injectProtocolVariables(p, vars) {
+    p.VAR = createProtocolVAR(vars);
+}