@nexart/codemode-sdk 1.5.0 → 1.6.0

package/dist/soundart-sketches/prismFlowFields.d.ts

@@ -0,0 +1,3 @@
+export declare const PRISM_FLOW_FIELDS_SKETCH = "\nfunction setup() {\n  const bgMode = typeof backgroundMode !== 'undefined' ? backgroundMode : 'rgb';\n  if (bgMode === 'white') background(245, 245, 245);\n  else if (bgMode === 'black') background(10, 10, 10);\n  else {\n    const r = Math.floor((S.brightness / 100) * 255);\n    const g = Math.floor((S.rhythmicity / 100) * 255);\n    const b = Math.floor((S.harmonicity / 100) * 255);\n    background(r, g, b);\n  }\n\n  const particleCount = Math.floor(map(S.volume, 0, 100, 1500, 8200));\n  const maxSteps = Math.floor(map(S.rhythmicity, 0, 100, 200, 680));\n  const weightMin = map(S.volume, 0, 100, 0.5, 1.8);\n  const weightMax = map(S.treble, 0, 100, 1.2, 3.2);\n  const angleMult = map(max(0, S.harmonicity - 5), 0, 95, 2.5, 7.0);\n  const stepJitter = map(S.aggression, 0, 100, 0.5, 2.5);\n  const skewOffset = map(S.hue, 0, 100, -PI / 6, PI / 6);\n  const alphaBase = map(S.brightness, 0, 100, 0.4, 0.7);\n  const scaleF = map(S.harmonicity, 0, 100, 0.0001, 0.0024);\n\n  noFill();\n\n  for (let i = 0; i < particleCount; i++) {\n    let x = random() * width;\n    let y = random() * height;\n    const hueShift = (i / particleCount) * 360 + (S.hue * 3.6);\n    const h = hueShift % 360;\n    const sat = map(S.aggression, 0, 100, 70, 100);\n    const bri = map(S.brightness, 0, 100, 60, 100);\n    \n    stroke('hsla(' + h + ',' + sat + '%,' + bri + '%,' + alphaBase + ')');\n    strokeWeight(map(random(), 0, 1, weightMin, weightMax));\n    \n    beginShape();\n    vertex(x, y);\n    for (let j = 0; j < maxSteps; j++) {\n      const angle = noise(x * scaleF, y * scaleF) * PI * 4 + skewOffset;\n      const dx = cos(angle) * (angleMult + (random() - 0.5) * stepJitter);\n      const dy = sin(angle) * (angleMult + (random() - 0.5) * stepJitter);\n      x += dx;\n      y += dy;\n      if (x < 0 || x > width || y < 0 || y > height) break;\n      vertex(x, y);\n    }\n    endShape();\n  }\n}\n";
+export default PRISM_FLOW_FIELDS_SKETCH;
+//# sourceMappingURL=prismFlowFields.d.ts.map

package/dist/soundart-sketches/prismFlowFields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prismFlowFields.d.ts","sourceRoot":"","sources":["../../soundart-sketches/prismFlowFields.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,wBAAwB,43DAiDpC,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

package/dist/soundart-sketches/prismFlowFields.js

@@ -0,0 +1,51 @@
+export const PRISM_FLOW_FIELDS_SKETCH = `
+function setup() {
+  const bgMode = typeof backgroundMode !== 'undefined' ? backgroundMode : 'rgb';
+  if (bgMode === 'white') background(245, 245, 245);
+  else if (bgMode === 'black') background(10, 10, 10);
+  else {
+    const r = Math.floor((S.brightness / 100) * 255);
+    const g = Math.floor((S.rhythmicity / 100) * 255);
+    const b = Math.floor((S.harmonicity / 100) * 255);
+    background(r, g, b);
+  }
+
+  const particleCount = Math.floor(map(S.volume, 0, 100, 1500, 8200));
+  const maxSteps = Math.floor(map(S.rhythmicity, 0, 100, 200, 680));
+  const weightMin = map(S.volume, 0, 100, 0.5, 1.8);
+  const weightMax = map(S.treble, 0, 100, 1.2, 3.2);
+  const angleMult = map(max(0, S.harmonicity - 5), 0, 95, 2.5, 7.0);
+  const stepJitter = map(S.aggression, 0, 100, 0.5, 2.5);
+  const skewOffset = map(S.hue, 0, 100, -PI / 6, PI / 6);
+  const alphaBase = map(S.brightness, 0, 100, 0.4, 0.7);
+  const scaleF = map(S.harmonicity, 0, 100, 0.0001, 0.0024);
+
+  noFill();
+
+  for (let i = 0; i < particleCount; i++) {
+    let x = random() * width;
+    let y = random() * height;
+    const hueShift = (i / particleCount) * 360 + (S.hue * 3.6);
+    const h = hueShift % 360;
+    const sat = map(S.aggression, 0, 100, 70, 100);
+    const bri = map(S.brightness, 0, 100, 60, 100);
+    
+    stroke('hsla(' + h + ',' + sat + '%,' + bri + '%,' + alphaBase + ')');
+    strokeWeight(map(random(), 0, 1, weightMin, weightMax));
+    
+    beginShape();
+    vertex(x, y);
+    for (let j = 0; j < maxSteps; j++) {
+      const angle = noise(x * scaleF, y * scaleF) * PI * 4 + skewOffset;
+      const dx = cos(angle) * (angleMult + (random() - 0.5) * stepJitter);
+      const dy = sin(angle) * (angleMult + (random() - 0.5) * stepJitter);
+      x += dx;
+      y += dy;
+      if (x < 0 || x > width || y < 0 || y > height) break;
+      vertex(x, y);
+    }
+    endShape();
+  }
+}
+`;
+export default PRISM_FLOW_FIELDS_SKETCH;

package/dist/soundart-sketches/radialBurst.d.ts

@@ -0,0 +1,3 @@
+export declare const RADIAL_BURST_SKETCH = "\nfunction setup() {\n  const bgMode = typeof backgroundMode !== 'undefined' ? backgroundMode : 'rgb';\n  if (bgMode === 'white') background(245, 245, 245);\n  else if (bgMode === 'black') background(10, 10, 10);\n  else {\n    const r = Math.floor((S.brightness / 100) * 255);\n    const g = Math.floor((S.rhythmicity / 100) * 255);\n    const b = Math.floor((S.harmonicity / 100) * 255);\n    background(r, g, b);\n  }\n\n  const centerX = width / 2;\n  const centerY = height / 2;\n  const baseN = Math.floor(map(S.rhythmicity, 0, 100, 90, 320));\n  const rhythmMask = 0.4 + (S.rhythmicity / 100) * 0.6;\n\n  const palette = [];\n  const mainHue = (S.brightness * 3.6) % 360;\n  for (let i = 0; i < 16; i++) {\n    const h = (mainHue + i * 22.5) % 360;\n    const sat = map(S.treble, 0, 100, 60, 90);\n    const bri = map(S.bass, 0, 100, 70, 95);\n    palette.push('hsl(' + h + ',' + sat + '%,' + bri + '%)');\n  }\n\n  noFill();\n\n  for (let i = 0; i < baseN; i++) {\n    if ((i % 3) && random() > rhythmMask) continue;\n\n    const angle = (i / baseN) * PI * 2;\n    const col = palette[i % palette.length];\n\n    const lenJit = map(S.dynamicRange, 0, 100, 0, height * 2.45);\n    const rayLength = (S.amplitude / 100) * (height * 1.65) + random() * lenJit;\n\n    const waveAmp = map(S.harmonicity, 0, 100, 0, 42);\n    const waveFreq = map(S.treble, 0, 100, 1, 48);\n    const segments = 28;\n\n    const thickness = 1.2 + (S.attack / 100) * 7 + (S.aggression / 100) * 5 + sin(i * 0.9) * 1.4;\n\n    stroke(col);\n    strokeWeight(thickness);\n\n    beginShape();\n    for (let s = 0; s <= segments; s++) {\n      const t = s / segments;\n      const radius = t * rayLength;\n      const wobble = sin(t * PI * waveFreq + i * 0.2) * waveAmp * (1 - t);\n      const wx = centerX + cos(angle + wobble * 0.01) * radius;\n      const wy = centerY + sin(angle + wobble * 0.01) * radius;\n      vertex(wx, wy);\n    }\n    endShape();\n  }\n}\n";
+export default RADIAL_BURST_SKETCH;
+//# sourceMappingURL=radialBurst.d.ts.map

package/dist/soundart-sketches/radialBurst.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radialBurst.d.ts","sourceRoot":"","sources":["../../soundart-sketches/radialBurst.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,+5DA0D/B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/soundart-sketches/radialBurst.js

@@ -0,0 +1,60 @@
+export const RADIAL_BURST_SKETCH = `
+function setup() {
+  const bgMode = typeof backgroundMode !== 'undefined' ? backgroundMode : 'rgb';
+  if (bgMode === 'white') background(245, 245, 245);
+  else if (bgMode === 'black') background(10, 10, 10);
+  else {
+    const r = Math.floor((S.brightness / 100) * 255);
+    const g = Math.floor((S.rhythmicity / 100) * 255);
+    const b = Math.floor((S.harmonicity / 100) * 255);
+    background(r, g, b);
+  }
+
+  const centerX = width / 2;
+  const centerY = height / 2;
+  const baseN = Math.floor(map(S.rhythmicity, 0, 100, 90, 320));
+  const rhythmMask = 0.4 + (S.rhythmicity / 100) * 0.6;
+
+  const palette = [];
+  const mainHue = (S.brightness * 3.6) % 360;
+  for (let i = 0; i < 16; i++) {
+    const h = (mainHue + i * 22.5) % 360;
+    const sat = map(S.treble, 0, 100, 60, 90);
+    const bri = map(S.bass, 0, 100, 70, 95);
+    palette.push('hsl(' + h + ',' + sat + '%,' + bri + '%)');
+  }
+
+  noFill();
+
+  for (let i = 0; i < baseN; i++) {
+    if ((i % 3) && random() > rhythmMask) continue;
+
+    const angle = (i / baseN) * PI * 2;
+    const col = palette[i % palette.length];
+
+    const lenJit = map(S.dynamicRange, 0, 100, 0, height * 2.45);
+    const rayLength = (S.amplitude / 100) * (height * 1.65) + random() * lenJit;
+
+    const waveAmp = map(S.harmonicity, 0, 100, 0, 42);
+    const waveFreq = map(S.treble, 0, 100, 1, 48);
+    const segments = 28;
+
+    const thickness = 1.2 + (S.attack / 100) * 7 + (S.aggression / 100) * 5 + sin(i * 0.9) * 1.4;
+
+    stroke(col);
+    strokeWeight(thickness);
+
+    beginShape();
+    for (let s = 0; s <= segments; s++) {
+      const t = s / segments;
+      const radius = t * rayLength;
+      const wobble = sin(t * PI * waveFreq + i * 0.2) * waveAmp * (1 - t);
+      const wx = centerX + cos(angle + wobble * 0.01) * radius;
+      const wy = centerY + sin(angle + wobble * 0.01) * radius;
+      vertex(wx, wy);
+    }
+    endShape();
+  }
+}
+`;
+export default RADIAL_BURST_SKETCH;

package/dist/soundart-sketches/resonantSoundBodies.d.ts

@@ -0,0 +1,3 @@
+export declare const RESONANT_SOUND_BODIES_SKETCH = "\nfunction setup() {\n  const bgMode = typeof backgroundMode !== 'undefined' ? backgroundMode : 'rgb';\n  if (bgMode === 'white') background(245, 245, 245);\n  else if (bgMode === 'black') background(10, 10, 10);\n  else {\n    const r = Math.floor((S.brightness / 100) * 255);\n    const g = Math.floor((S.rhythmicity / 100) * 255);\n    const b = Math.floor((S.harmonicity / 100) * 255);\n    background(r, g, b);\n  }\n\n  const cx = width / 2;\n  const cy = height / 2;\n  const maxR = min(width, height) * 0.45;\n  const shapeSeed = S.bass * 17.3 + S.treble * 23.7 + S.rhythmicity * 11.1;\n\n  const numBodies = Math.floor(8 + (S.volume / 100) * 12 + (S.bass / 100) * 8);\n  \n  noFill();\n\n  for (let i = 0; i < numBodies; i++) {\n    const t = i / numBodies;\n    const radius = maxR * (0.15 + t * 0.85);\n    \n    const hue = (((S.hue / 100) + t * 0.3 + (S.harmonicity / 100) * 0.2) % 1) * 360;\n    const sat = lerp(50, 80, S.brightness / 100);\n    const lum = lerp(30, 60, S.brightness / 100);\n    \n    const alpha = lerp(0.4, 0.15, t) * (0.5 + (S.volume / 100) * 0.5);\n    stroke('hsla(' + hue + ',' + sat + '%,' + lum + '%,' + alpha + ')');\n    strokeWeight(lerp(3, 1, t) * (1 + (S.aggression / 100) * 2));\n    \n    beginShape();\n    const points = Math.floor(64 + (S.aggression / 100) * 64);\n    \n    for (let j = 0; j <= points; j++) {\n      const angle = (j / points) * PI * 2;\n      \n      const wobble = noise(\n        cos(angle) * 3 + i * 0.5 + shapeSeed * 0.001,\n        sin(angle) * 3 + i * 0.5\n      );\n      \n      const bassWobble = sin(angle * (2 + Math.floor((S.bass / 100) * 6))) * (S.bass / 100) * 0.15;\n      const trebleWobble = sin(angle * (8 + Math.floor((S.treble / 100) * 12))) * (S.treble / 100) * 0.08;\n      \n      const r = radius * (1 + (wobble - 0.5) * 0.3 * (S.aggression / 100) + bassWobble + trebleWobble);\n      \n      const x = cx + cos(angle) * r;\n      const y = cy + sin(angle) * r;\n      \n      vertex(x, y);\n    }\n    endShape(CLOSE);\n    \n    if (i % 3 === 0) {\n      const fillAlpha = alpha * 0.1;\n      fill('hsla(' + hue + ',' + sat + '%,' + lum + '%,' + fillAlpha + ')');\n      beginShape();\n      for (let j = 0; j <= points; j++) {\n        const angle = (j / points) * PI * 2;\n        const wobble = noise(cos(angle) * 3 + i * 0.5 + shapeSeed * 0.001, sin(angle) * 3 + i * 0.5);\n        const bodyR = radius * (1 + (wobble - 0.5) * 0.3 * (S.aggression / 100));\n        vertex(cx + cos(angle) * bodyR, cy + sin(angle) * bodyR);\n      }\n      endShape(CLOSE);\n      noFill();\n    }\n  }\n\n  const numNodes = Math.floor(12 + (S.rhythmicity / 100) * 20);\n  for (let i = 0; i < numNodes; i++) {\n    const angle = (i / numNodes) * PI * 2 + shapeSeed * 0.001;\n    const dist = maxR * (0.3 + noise(i * 0.1, shapeSeed * 0.001) * 0.6);\n    \n    const x = cx + cos(angle) * dist;\n    const y = cy + sin(angle) * dist;\n    \n    const nodeSize = lerp(2, 8, S.volume / 100) * (1 + (S.bass / 100) * 2);\n    const hue = ((((S.hue / 100) + i * 0.05 + (S.treble / 100) * 0.3) % 1)) * 360;\n    \n    fill('hsla(' + hue + ',70%,' + lerp(40, 70, S.brightness / 100) + '%,' + lerp(0.3, 0.7, S.harmonicity / 100) + ')');\n    noStroke();\n    ellipse(x, y, nodeSize * 2, nodeSize * 2);\n  }\n}\n";
+export default RESONANT_SOUND_BODIES_SKETCH;
+//# sourceMappingURL=resonantSoundBodies.d.ts.map

package/dist/soundart-sketches/resonantSoundBodies.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resonantSoundBodies.d.ts","sourceRoot":"","sources":["../../soundart-sketches/resonantSoundBodies.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,4BAA4B,wtGAuFxC,CAAC;AAEF,eAAe,4BAA4B,CAAC"}

package/dist/soundart-sketches/resonantSoundBodies.js

@@ -0,0 +1,89 @@
+export const RESONANT_SOUND_BODIES_SKETCH = `
+function setup() {
+  const bgMode = typeof backgroundMode !== 'undefined' ? backgroundMode : 'rgb';
+  if (bgMode === 'white') background(245, 245, 245);
+  else if (bgMode === 'black') background(10, 10, 10);
+  else {
+    const r = Math.floor((S.brightness / 100) * 255);
+    const g = Math.floor((S.rhythmicity / 100) * 255);
+    const b = Math.floor((S.harmonicity / 100) * 255);
+    background(r, g, b);
+  }
+
+  const cx = width / 2;
+  const cy = height / 2;
+  const maxR = min(width, height) * 0.45;
+  const shapeSeed = S.bass * 17.3 + S.treble * 23.7 + S.rhythmicity * 11.1;
+
+  const numBodies = Math.floor(8 + (S.volume / 100) * 12 + (S.bass / 100) * 8);
+  
+  noFill();
+
+  for (let i = 0; i < numBodies; i++) {
+    const t = i / numBodies;
+    const radius = maxR * (0.15 + t * 0.85);
+    
+    const hue = (((S.hue / 100) + t * 0.3 + (S.harmonicity / 100) * 0.2) % 1) * 360;
+    const sat = lerp(50, 80, S.brightness / 100);
+    const lum = lerp(30, 60, S.brightness / 100);
+    
+    const alpha = lerp(0.4, 0.15, t) * (0.5 + (S.volume / 100) * 0.5);
+    stroke('hsla(' + hue + ',' + sat + '%,' + lum + '%,' + alpha + ')');
+    strokeWeight(lerp(3, 1, t) * (1 + (S.aggression / 100) * 2));
+    
+    beginShape();
+    const points = Math.floor(64 + (S.aggression / 100) * 64);
+    
+    for (let j = 0; j <= points; j++) {
+      const angle = (j / points) * PI * 2;
+      
+      const wobble = noise(
+        cos(angle) * 3 + i * 0.5 + shapeSeed * 0.001,
+        sin(angle) * 3 + i * 0.5
+      );
+      
+      const bassWobble = sin(angle * (2 + Math.floor((S.bass / 100) * 6))) * (S.bass / 100) * 0.15;
+      const trebleWobble = sin(angle * (8 + Math.floor((S.treble / 100) * 12))) * (S.treble / 100) * 0.08;
+      
+      const r = radius * (1 + (wobble - 0.5) * 0.3 * (S.aggression / 100) + bassWobble + trebleWobble);
+      
+      const x = cx + cos(angle) * r;
+      const y = cy + sin(angle) * r;
+      
+      vertex(x, y);
+    }
+    endShape(CLOSE);
+    
+    if (i % 3 === 0) {
+      const fillAlpha = alpha * 0.1;
+      fill('hsla(' + hue + ',' + sat + '%,' + lum + '%,' + fillAlpha + ')');
+      beginShape();
+      for (let j = 0; j <= points; j++) {
+        const angle = (j / points) * PI * 2;
+        const wobble = noise(cos(angle) * 3 + i * 0.5 + shapeSeed * 0.001, sin(angle) * 3 + i * 0.5);
+        const bodyR = radius * (1 + (wobble - 0.5) * 0.3 * (S.aggression / 100));
+        vertex(cx + cos(angle) * bodyR, cy + sin(angle) * bodyR);
+      }
+      endShape(CLOSE);
+      noFill();
+    }
+  }
+
+  const numNodes = Math.floor(12 + (S.rhythmicity / 100) * 20);
+  for (let i = 0; i < numNodes; i++) {
+    const angle = (i / numNodes) * PI * 2 + shapeSeed * 0.001;
+    const dist = maxR * (0.3 + noise(i * 0.1, shapeSeed * 0.001) * 0.6);
+    
+    const x = cx + cos(angle) * dist;
+    const y = cy + sin(angle) * dist;
+    
+    const nodeSize = lerp(2, 8, S.volume / 100) * (1 + (S.bass / 100) * 2);
+    const hue = ((((S.hue / 100) + i * 0.05 + (S.treble / 100) * 0.3) % 1)) * 360;
+    
+    fill('hsla(' + hue + ',70%,' + lerp(40, 70, S.brightness / 100) + '%,' + lerp(0.3, 0.7, S.harmonicity / 100) + ')');
+    noStroke();
+    ellipse(x, y, nodeSize * 2, nodeSize * 2);
+  }
+}
+`;
+export default RESONANT_SOUND_BODIES_SKETCH;

package/dist/soundart-sketches/rings.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Flow Grid Rings - SoundArt Style as Code Mode Sketch
+ *
+ * This is the first SoundArt style converted to a Code Mode sketch.
+ * It uses S.* globals (sound snapshot) instead of direct sound data.
+ *
+ * Original: client/src/pages/soundart/engine/styles_impl.ts - drawFlowGridRings
+ */
+export declare const RINGS_SKETCH = "\n// Flow Grid Rings - SoundArt Style\n// Uses S.* sound globals and standard p5-like functions\n\nfunction setup() {\n  // Set background based on mode (rgb derived from sound, black, or white)\n  const bgMode = typeof backgroundMode !== 'undefined' ? backgroundMode : 'rgb';\n  \n  if (bgMode === 'white') {\n    background(245, 245, 245);\n  } else if (bgMode === 'black') {\n    background(10, 10, 10);\n  } else {\n    // Deterministic RGB background derived from sound snapshot\n    // Previously used clock time, now uses sound parameters for reproducibility\n    const r = Math.floor((S.brightness / 100) * 255);\n    const g = Math.floor((S.rhythmicity / 100) * 255);\n    const b = Math.floor((S.harmonicity / 100) * 255);\n    background(r, g, b);\n  }\n  \n  // Grid dimensions based on sound volume\n  const cols = Math.floor(map(S.volume, 0, 100, 2, 32));\n  const rows = Math.floor(cols * 1.5);\n  const margin = map(S.length, 0, 100, width * 0.05, width * 0.1);\n  const innerW = width - margin * 2;\n  const innerH = height - margin * 2;\n  const cellW = innerW / cols;\n  const cellH = innerH / rows;\n  const gap = Math.min(cellW, cellH) * 0.25;\n  const maxRadius = (Math.min(cellW, cellH) - gap) / 2;\n  \n  // Palette Harmony based on sound\n  const mainHue = (S.brightness * 3.6) % 360;\n  const hueShift = map(S.harmonicity, 0, 100, 20, 60);\n  const sat = map(S.treble, 0, 100, 60, 90);\n  const bri = map(S.bass, 0, 100, 70, 95);\n  \n  // Generate palette\n  const palette = [\n    hslColor(mainHue, sat, bri),\n    hslColor((mainHue + hueShift) % 360, sat - 10, bri + 5),\n    hslColor((mainHue - hueShift + 360) % 360, sat - 10, bri + 5),\n    hslColor((mainHue + 180) % 360, sat - 20, bri - 10),\n    hslColor((mainHue + 120) % 360, sat, bri - 5),\n    hslColor((mainHue + 240) % 360, sat, bri - 5),\n  ];\n  \n  // Flow field parameters\n  const noiseScale = 0.15;\n  const noiseStrength = map(S.aggression, 0, 100, 0.5, 4.0);\n  const jitter = map(S.rhythmicity, 0, 100, 0, 0.15);\n  const ringBias = map(S.attack, 0, 100, 0.85, 1.15);\n  \n  noStroke();\n  \n  // Render Grid\n  for (let gx = 0; gx < cols; gx++) {\n    for (let gy = 0; gy < rows; gy++) {\n      const cx = margin + gx * cellW + cellW / 2 + (random() - 0.5) * jitter * cellW;\n      const cy = margin + gy * cellH + cellH / 2 + (random() - 0.5) * jitter * cellH;\n      \n      const n = noise(gx * noiseScale, gy * noiseScale);\n      const angle = n * PI * 2 * noiseStrength;\n      const rings = Math.max(1, Math.floor(map(sin(angle), -1, 1, 1, 6)));\n      const step = (maxRadius / rings) * ringBias * 0.9;\n      \n      for (let i = rings; i > 0; i--) {\n        fill(palette[(rings - i) % palette.length]);\n        ellipse(cx, cy, i * step * 2, i * step * 2);\n      }\n    }\n  }\n}\n\n// Helper function for HSL colors\nfunction hslColor(h, s, l) {\n  return 'hsl(' + h + ',' + s + '%,' + l + '%)';\n}\n";
+export default RINGS_SKETCH;
+//# sourceMappingURL=rings.d.ts.map

package/dist/soundart-sketches/rings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rings.d.ts","sourceRoot":"","sources":["../../soundart-sketches/rings.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,eAAO,MAAM,YAAY,u2FA+ExB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/soundart-sketches/rings.js

@@ -0,0 +1,89 @@
+/**
+ * Flow Grid Rings - SoundArt Style as Code Mode Sketch
+ *
+ * This is the first SoundArt style converted to a Code Mode sketch.
+ * It uses S.* globals (sound snapshot) instead of direct sound data.
+ *
+ * Original: client/src/pages/soundart/engine/styles_impl.ts - drawFlowGridRings
+ */
+export const RINGS_SKETCH = `
+// Flow Grid Rings - SoundArt Style
+// Uses S.* sound globals and standard p5-like functions
+
+function setup() {
+  // Set background based on mode (rgb derived from sound, black, or white)
+  const bgMode = typeof backgroundMode !== 'undefined' ? backgroundMode : 'rgb';
+  
+  if (bgMode === 'white') {
+    background(245, 245, 245);
+  } else if (bgMode === 'black') {
+    background(10, 10, 10);
+  } else {
+    // Deterministic RGB background derived from sound snapshot
+    // Previously used clock time, now uses sound parameters for reproducibility
+    const r = Math.floor((S.brightness / 100) * 255);
+    const g = Math.floor((S.rhythmicity / 100) * 255);
+    const b = Math.floor((S.harmonicity / 100) * 255);
+    background(r, g, b);
+  }
+  
+  // Grid dimensions based on sound volume
+  const cols = Math.floor(map(S.volume, 0, 100, 2, 32));
+  const rows = Math.floor(cols * 1.5);
+  const margin = map(S.length, 0, 100, width * 0.05, width * 0.1);
+  const innerW = width - margin * 2;
+  const innerH = height - margin * 2;
+  const cellW = innerW / cols;
+  const cellH = innerH / rows;
+  const gap = Math.min(cellW, cellH) * 0.25;
+  const maxRadius = (Math.min(cellW, cellH) - gap) / 2;
+  
+  // Palette Harmony based on sound
+  const mainHue = (S.brightness * 3.6) % 360;
+  const hueShift = map(S.harmonicity, 0, 100, 20, 60);
+  const sat = map(S.treble, 0, 100, 60, 90);
+  const bri = map(S.bass, 0, 100, 70, 95);
+  
+  // Generate palette
+  const palette = [
+    hslColor(mainHue, sat, bri),
+    hslColor((mainHue + hueShift) % 360, sat - 10, bri + 5),
+    hslColor((mainHue - hueShift + 360) % 360, sat - 10, bri + 5),
+    hslColor((mainHue + 180) % 360, sat - 20, bri - 10),
+    hslColor((mainHue + 120) % 360, sat, bri - 5),
+    hslColor((mainHue + 240) % 360, sat, bri - 5),
+  ];
+  
+  // Flow field parameters
+  const noiseScale = 0.15;
+  const noiseStrength = map(S.aggression, 0, 100, 0.5, 4.0);
+  const jitter = map(S.rhythmicity, 0, 100, 0, 0.15);
+  const ringBias = map(S.attack, 0, 100, 0.85, 1.15);
+  
+  noStroke();
+  
+  // Render Grid
+  for (let gx = 0; gx < cols; gx++) {
+    for (let gy = 0; gy < rows; gy++) {
+      const cx = margin + gx * cellW + cellW / 2 + (random() - 0.5) * jitter * cellW;
+      const cy = margin + gy * cellH + cellH / 2 + (random() - 0.5) * jitter * cellH;
+      
+      const n = noise(gx * noiseScale, gy * noiseScale);
+      const angle = n * PI * 2 * noiseStrength;
+      const rings = Math.max(1, Math.floor(map(sin(angle), -1, 1, 1, 6)));
+      const step = (maxRadius / rings) * ringBias * 0.9;
+      
+      for (let i = rings; i > 0; i--) {
+        fill(palette[(rings - i) % palette.length]);
+        ellipse(cx, cy, i * step * 2, i * step * 2);
+      }
+    }
+  }
+}
+
+// Helper function for HSL colors
+function hslColor(h, s, l) {
+  return 'hsl(' + h + ',' + s + '%,' + l + '%)';
+}
+`;
+export default RINGS_SKETCH;

package/dist/soundart-sketches/squares.d.ts

@@ -0,0 +1,3 @@
+export declare const SQUARES_SKETCH = "\nfunction setup() {\n  const bgMode = typeof backgroundMode !== 'undefined' ? backgroundMode : 'rgb';\n  if (bgMode === 'white') background(245, 245, 245);\n  else if (bgMode === 'black') background(10, 10, 10);\n  else {\n    const r = Math.floor((S.brightness / 100) * 255);\n    const g = Math.floor((S.rhythmicity / 100) * 255);\n    const b = Math.floor((S.harmonicity / 100) * 255);\n    background(r, g, b);\n  }\n\n  const numSquares = Math.floor(map(S.length, 0, 100, 40, 300));\n  let size = Math.min(width, height) * 0.9;\n  const shrinkFactor = map(S.dynamicRange, 0, 100, 0.92, 1.08);\n  const rotationStep = map(S.aggression, 0, 100, 0.01, 0.07);\n  const strokeMin = map(S.volume, 0, 100, 1.0, 6.0);\n  const strokeMax = map(S.bass, 0, 100, 2.0, 8.0);\n\n  const colors = [];\n  for (let i = 0; i < 5; i++) {\n    const baseHue = (S.hue + i * 60 + random() * 20) % 360;\n    const sat = constrain(map(S.treble, 0, 100, 60, 95), 50, 100);\n    const bri = constrain(map(S.brightness, 0, 100, 40, 85), 30, 90);\n    colors.push(hslColor(baseHue, sat, bri));\n  }\n\n  noFill();\n  translate(width / 2, height / 2);\n\n  let angle = 0;\n  for (let i = 0; i < numSquares; i++) {\n    const strokeW = strokeMin + (i / numSquares) * (strokeMax - strokeMin);\n    strokeWeight(strokeW);\n    stroke(colors[i % colors.length]);\n\n    push();\n    rotate(angle);\n    rect(-size / 2, -size / 2, size, size);\n    pop();\n\n    angle += rotationStep;\n    size *= shrinkFactor;\n    if (size < 4) break;\n  }\n}\n\nfunction hslColor(h, s, l) {\n  return 'hsl(' + h + ',' + s + '%,' + l + '%)';\n}\n";
+export default SQUARES_SKETCH;
+//# sourceMappingURL=squares.d.ts.map

package/dist/soundart-sketches/squares.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"squares.d.ts","sourceRoot":"","sources":["../../soundart-sketches/squares.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,0kDAkD1B,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/soundart-sketches/squares.js

@@ -0,0 +1,52 @@
+export const SQUARES_SKETCH = `
+function setup() {
+  const bgMode = typeof backgroundMode !== 'undefined' ? backgroundMode : 'rgb';
+  if (bgMode === 'white') background(245, 245, 245);
+  else if (bgMode === 'black') background(10, 10, 10);
+  else {
+    const r = Math.floor((S.brightness / 100) * 255);
+    const g = Math.floor((S.rhythmicity / 100) * 255);
+    const b = Math.floor((S.harmonicity / 100) * 255);
+    background(r, g, b);
+  }
+
+  const numSquares = Math.floor(map(S.length, 0, 100, 40, 300));
+  let size = Math.min(width, height) * 0.9;
+  const shrinkFactor = map(S.dynamicRange, 0, 100, 0.92, 1.08);
+  const rotationStep = map(S.aggression, 0, 100, 0.01, 0.07);
+  const strokeMin = map(S.volume, 0, 100, 1.0, 6.0);
+  const strokeMax = map(S.bass, 0, 100, 2.0, 8.0);
+
+  const colors = [];
+  for (let i = 0; i < 5; i++) {
+    const baseHue = (S.hue + i * 60 + random() * 20) % 360;
+    const sat = constrain(map(S.treble, 0, 100, 60, 95), 50, 100);
+    const bri = constrain(map(S.brightness, 0, 100, 40, 85), 30, 90);
+    colors.push(hslColor(baseHue, sat, bri));
+  }
+
+  noFill();
+  translate(width / 2, height / 2);
+
+  let angle = 0;
+  for (let i = 0; i < numSquares; i++) {
+    const strokeW = strokeMin + (i / numSquares) * (strokeMax - strokeMin);
+    strokeWeight(strokeW);
+    stroke(colors[i % colors.length]);
+
+    push();
+    rotate(angle);
+    rect(-size / 2, -size / 2, size, size);
+    pop();
+
+    angle += rotationStep;
+    size *= shrinkFactor;
+    if (size < 4) break;
+  }
+}
+
+function hslColor(h, s, l) {
+  return 'hsl(' + h + ',' + s + '%,' + l + '%)';
+}
+`;
+export default SQUARES_SKETCH;

package/dist/soundart-sketches/waveStripes.d.ts

@@ -0,0 +1,3 @@
+export declare const WAVE_STRIPES_SKETCH = "\nfunction setup() {\n  const bgMode = typeof backgroundMode !== 'undefined' ? backgroundMode : 'rgb';\n  if (bgMode === 'white') background(245, 245, 245);\n  else if (bgMode === 'black') background(10, 10, 10);\n  else {\n    const r = Math.floor((S.brightness / 100) * 255);\n    const g = Math.floor((S.rhythmicity / 100) * 255);\n    const b = Math.floor((S.harmonicity / 100) * 255);\n    background(r, g, b);\n  }\n\n  const numLines = Math.floor(map(S.length, 0, 100, 5, 100));\n  const amp = map(S.volume, 0, 100, 0.012, 0.09);\n  const lineNoise = map(S.harmonicity, 0, 100, 0.1, 0.8);\n  const freqNoise = map(S.aggression, 0, 100, 0.004, 0.02);\n  const waveFreq = map(S.rhythmicity, 0, 100, 0.0003, 0.003);\n  const strokeW = map(S.bass, 0, 100, 2, 6.0);\n  const vividBoost = constrain(map(S.brightness, 0, 100, 0.6, 1.2), 0.6, 1.4);\n\n  noFill();\n  strokeWeight(strokeW);\n\n  for (let j = 0; j < numLines; j++) {\n    const yBase = map(j, 0, numLines - 1, 0.05 * height, 0.95 * height);\n    const lineTreble = constrain(S.treble + noise(j, 99) * 20 - 10, 0, 100);\n    const hue = ((map(lineTreble, 60, 100, 0, 360) + map(S.attack, 0, 100, 0, 120) + noise(j, 100) * 20 - 10) % 360 + 360) % 360;\n    \n    stroke('hsl(' + hue + ',85%,' + constrain(vividBoost * 55, 40, 70) + '%)');\n    \n    beginShape();\n    const pointSpacing = constrain(map(S.harmonicity, 0, 100, 20, 4), 4, 20);\n    for (let i = 0; i <= width; i += pointSpacing) {\n      const shimmer = sin(i * 0.05 + j * 0.1) * 0.05;\n      const offsetY = sin(i * waveFreq + j * 0.2 + shimmer) * amp * height;\n      const localNoiseVal = (noise(i * freqNoise, j * lineNoise) - 0.5) * amp * height;\n      const y = yBase + offsetY + localNoiseVal;\n      vertex(i, y);\n    }\n    endShape();\n  }\n}\n";
+export default WAVE_STRIPES_SKETCH;
+//# sourceMappingURL=waveStripes.d.ts.map

package/dist/soundart-sketches/waveStripes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"waveStripes.d.ts","sourceRoot":"","sources":["../../soundart-sketches/waveStripes.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,6vDA0C/B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/soundart-sketches/waveStripes.js

@@ -0,0 +1,44 @@
+export const WAVE_STRIPES_SKETCH = `
+function setup() {
+  const bgMode = typeof backgroundMode !== 'undefined' ? backgroundMode : 'rgb';
+  if (bgMode === 'white') background(245, 245, 245);
+  else if (bgMode === 'black') background(10, 10, 10);
+  else {
+    const r = Math.floor((S.brightness / 100) * 255);
+    const g = Math.floor((S.rhythmicity / 100) * 255);
+    const b = Math.floor((S.harmonicity / 100) * 255);
+    background(r, g, b);
+  }
+
+  const numLines = Math.floor(map(S.length, 0, 100, 5, 100));
+  const amp = map(S.volume, 0, 100, 0.012, 0.09);
+  const lineNoise = map(S.harmonicity, 0, 100, 0.1, 0.8);
+  const freqNoise = map(S.aggression, 0, 100, 0.004, 0.02);
+  const waveFreq = map(S.rhythmicity, 0, 100, 0.0003, 0.003);
+  const strokeW = map(S.bass, 0, 100, 2, 6.0);
+  const vividBoost = constrain(map(S.brightness, 0, 100, 0.6, 1.2), 0.6, 1.4);
+
+  noFill();
+  strokeWeight(strokeW);
+
+  for (let j = 0; j < numLines; j++) {
+    const yBase = map(j, 0, numLines - 1, 0.05 * height, 0.95 * height);
+    const lineTreble = constrain(S.treble + noise(j, 99) * 20 - 10, 0, 100);
+    const hue = ((map(lineTreble, 60, 100, 0, 360) + map(S.attack, 0, 100, 0, 120) + noise(j, 100) * 20 - 10) % 360 + 360) % 360;
+    
+    stroke('hsl(' + hue + ',85%,' + constrain(vividBoost * 55, 40, 70) + '%)');
+    
+    beginShape();
+    const pointSpacing = constrain(map(S.harmonicity, 0, 100, 20, 4), 4, 20);
+    for (let i = 0; i <= width; i += pointSpacing) {
+      const shimmer = sin(i * 0.05 + j * 0.1) * 0.05;
+      const offsetY = sin(i * waveFreq + j * 0.2 + shimmer) * amp * height;
+      const localNoiseVal = (noise(i * freqNoise, j * lineNoise) - 0.5) * amp * height;
+      const y = yBase + offsetY + localNoiseVal;
+      vertex(i, y);
+    }
+    endShape();
+  }
+}
+`;
+export default WAVE_STRIPES_SKETCH;

package/dist/static-engine.d.ts

@@ -7,6 +7,13 @@
  *
  * Determinism Guarantee:
  * Same code + same seed + same VARs = identical PNG output
+ *
+ * Security:
+ * All external entropy sources are blocked at runtime via execution sandbox.
+ *
+ * Oracle Support:
+ * When returnImageData is true, returns raw ImageData for determinism hashing.
+ * Works in both browser (HTMLCanvasElement) and Node (canvas package) environments.
  */
 import type { EngineConfig, RunOptions } from './types';
 export declare function runStaticMode(config: EngineConfig, options: RunOptions): Promise<void>;

package/dist/static-engine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"static-engine.d.ts","sourceRoot":"","sources":["../static-engine.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAgB,MAAM,SAAS,CAAC;AAItE,wBAAsB,aAAa,CACjC,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,UAAU,GAClB,OAAO,CAAC,IAAI,CAAC,CAmGf"}
+{"version":3,"file":"static-engine.d.ts","sourceRoot":"","sources":["../static-engine.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAgB,MAAM,SAAS,CAAC;AAoCtE,wBAAsB,aAAa,CACjC,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,UAAU,GAClB,OAAO,CAAC,IAAI,CAAC,CA6Hf"}

package/dist/static-engine.js

@@ -7,11 +7,44 @@
  *
  * Determinism Guarantee:
  * Same code + same seed + same VARs = identical PNG output
+ *
+ * Security:
+ * All external entropy sources are blocked at runtime via execution sandbox.
+ *
+ * Oracle Support:
+ * When returnImageData is true, returns raw ImageData for determinism hashing.
+ * Works in both browser (HTMLCanvasElement) and Node (canvas package) environments.
  */
+import { createRequire } from 'module';
 import { DEFAULT_CONFIG } from './types';
 import { createP5Runtime, injectTimeVariables, injectProtocolVariables } from './p5-runtime';
+import { FORBIDDEN_APIS, createSafeMath } from './execution-sandbox';
+const require = createRequire(import.meta.url);
+/**
+ * Create a runtime canvas that works in both browser and Node environments.
+ * Browser: uses HTMLCanvasElement
+ * Node/Headless: uses `canvas` npm package
+ */
+function createRuntimeCanvas(width, height) {
+    // Browser environment
+    if (typeof document !== 'undefined' && typeof document.createElement === 'function') {
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        return canvas;
+    }
+    // Node / headless environment (oracle, CI)
+    try {
+        const { createCanvas } = require('canvas');
+        return createCanvas(width, height);
+    }
+    catch (err) {
+        throw new Error('[Code Mode Protocol Error] Headless canvas unavailable. ' +
+            'Install `canvas` for oracle execution.');
+    }
+}
 export async function runStaticMode(config, options) {
-    const { code, seed, vars, onPreview, onProgress, onComplete, onError } = options;
+    const { code, seed, vars, onPreview, onProgress, onComplete, onError, returnImageData } = options;
     const width = config.width ?? DEFAULT_CONFIG.width;
     const height = config.height ?? DEFAULT_CONFIG.height;
     try {
@@ -20,10 +53,8 @@ export async function runStaticMode(config, options) {
             percent: 0,
             message: 'Initializing canvas...',
         });
-        // Create offscreen canvas
-        const canvas = document.createElement('canvas');
-        canvas.width = width;
-        canvas.height = height;
+        // Create runtime canvas (browser or Node)
+        const canvas = createRuntimeCanvas(width, height);
         // Create p5 runtime with optional seed for determinism
         const p = createP5Runtime(canvas, width, height, { seed });
         // Inject time variables (static = frame 0, t = 0, totalFrames = 1)
@@ -56,18 +87,43 @@ export async function runStaticMode(config, options) {
             percent: 30,
             message: 'Executing setup()...',
         });
-        // Create wrapped setup function with p5 context and VAR
-        const wrappedSetup = new Function('p', 'frameCount', 't', 'time', 'tGlobal', 'VAR', `with(p) { ${setupCode} }`);
-        // Execute setup() only
-        wrappedSetup(p, 0, 0, 0, 0, p.VAR);
+        // Create sandboxed execution context
+        // All forbidden APIs are injected as parameters to override globals
+        const safeMath = createSafeMath();
+        const forbiddenKeys = Object.keys(FORBIDDEN_APIS);
+        // Create wrapped setup function with p5 context, VAR, and blocked globals
+        const wrappedSetup = new Function('p', 'frameCount', 't', 'time', 'tGlobal', 'VAR', 'Math', ...forbiddenKeys, `with(p) { ${setupCode} }`);
+        // Execute setup() only with sandboxed context
+        const forbiddenValues = forbiddenKeys.map(k => FORBIDDEN_APIS[k]);
+        wrappedSetup(p, 0, 0, 0, 0, p.VAR, safeMath, ...forbiddenValues);
         // Provide preview callback
         onPreview?.(canvas);
         onProgress?.({
             phase: 'encoding',
             percent: 70,
-            message: 'Capturing PNG...',
+            message: returnImageData ? 'Capturing ImageData...' : 'Capturing PNG...',
         });
-        // Capture as PNG
+        // Get 2D context for pixel access
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            throw new Error('Failed to acquire 2D context');
+        }
+        // Always capture pixel data first
+        const imageData = ctx.getImageData(0, 0, width, height);
+        // ORACLE / NODE PATH — MUST NOT TOUCH toBlob
+        if (returnImageData) {
+            onProgress?.({
+                phase: 'complete',
+                percent: 100,
+                message: 'Complete',
+            });
+            onComplete({
+                type: 'image',
+                imageData,
+            });
+            return; // Early return - never touch toBlob in oracle mode
+        }
+        // BROWSER / UI PATH ONLY
         const blob = await new Promise((resolve, reject) => {
             canvas.toBlob((b) => b ? resolve(b) : reject(new Error('Failed to capture PNG')), 'image/png');
         });
@@ -76,11 +132,10 @@ export async function runStaticMode(config, options) {
             percent: 100,
             message: 'Complete',
         });
-        const result = {
+        onComplete({
             type: 'image',
             blob,
-        };
-        onComplete(result);
+        });
     }
     catch (error) {
         const err = error instanceof Error ? error : new Error(String(error));