Formula Generator Studio

Live generative coding editor. Modulate variables, customize mathematical algorithms, and test in real-time.

💻 Live Code Studio

Preset Catalog:

Live Canvas 60 FPS Runtime

formula-editor.js

// 001 - Organic Wave (organic)
// 1:1 Original algorithm engine source
function createOrganicWave() {
  let gridPointsX = 0;
  let gridPointsY = 0;
  const spacing = 14;
  return {
    setup(context) {
      gridPointsX = Math.ceil(context.width / spacing) + 2;
      gridPointsY = Math.ceil(context.height / spacing) + 2;
    },
    render(context, timeState, params) {
      const { ctx, width, height } = context;
      const t = timeState.time * Number(params.speed || 1);
      const freq = Number(params.frequency || 0.02);
      const amp = Number(params.amplitude || 35);
      const hueBase = Number(params.hue || 195);
      ctx.fillStyle = "rgba(8, 9, 13, 0.25)";
      ctx.fillRect(0, 0, width, height);
      const cx = width * 0.5;
      const cy = height * 0.5;
      for (let y = 0; y < gridPointsY; y++) {
        const py = (y - 1) * spacing;
        ctx.beginPath();
        for (let x = 0; x < gridPointsX; x++) {
          const px = (x - 1) * spacing;
          const dx = px - cx;
          const dy = py - cy;
          const d = Math.sqrt(dx * dx + dy * dy);
          const wave1 = Math.sin(px * freq + t) * Math.cos(py * freq * 0.7 + t * 0.5);
          const wave2 = Math.sin(d * freq * 1.5 - t * 2) * 0.5;
          const offset = (wave1 + wave2) * amp;
          const renderX = px + dx / (d + 1) * offset * 0.3;
          const renderY = py + offset;
          if (x === 0) {
            ctx.moveTo(renderX, renderY);
          } else {
            ctx.lineTo(renderX, renderY);
          }
        }
        const normY = y / gridPointsY;
        const hue = (hueBase + normY * 60 + Math.sin(t) * 20) % 360;
        ctx.strokeStyle = hsla(hue, 85, 60, 0.5);
        ctx.lineWidth = 1.2;
        ctx.stroke();
      }
    }
  };
}

// Default parameters from content metadata
const defaultParams = [
  {
    "key": "frequency",
    "label": "Spatial Frequency",
    "type": "range",
    "min": 0.005,
    "max": 0.05,
    "step": 0.001,
    "defaultValue": 0.02,
    "description": "Controls wavelength spacing"
  },
  {
    "key": "amplitude",
    "label": "Wave Amplitude",
    "type": "range",
    "min": 10,
    "max": 80,
    "step": 1,
    "defaultValue": 35,
    "description": "Height of the crests"
  },
  {
    "key": "speed",
    "label": "Oscillation Speed",
    "type": "range",
    "min": 0.2,
    "max": 3,
    "step": 0.1,
    "defaultValue": 1,
    "description": "Temporal propagation rate"
  },
  {
    "key": "hue",
    "label": "Base Hue",
    "type": "range",
    "min": 0,
    "max": 360,
    "step": 1,
    "defaultValue": 195,
    "description": "Base color spectrum"
  }
];

if (!window.__art_instances) window.__art_instances = {};
if (!window.__art_instances['organic-wave']) {
  const inst = typeof createOrganicWave === 'function' ? createOrganicWave() : null;
  if (inst && inst.setup) {
    inst.setup({ ctx, width, height, dpr: 1, aspectRatio: width / height }, defaultParams);
  }
  window.__art_instances['organic-wave'] = inst;
}

const instance = window.__art_instances['organic-wave'];
if (instance && instance.render) {
  instance.render(
    { ctx, width, height, dpr: 1, aspectRatio: width / height },
    { time, deltaTime: dt, frameCount: Math.floor(time * 60), fps: 60 },
    defaultParams
  );
}

Passes ctx, width, height, time Auto-evaluated on run

Sandbox Preview 60 FPS

Isolated Runtime