vizcore 0.1.0 → 1.1.0

data/docs/assets/vj-tunnel.js

@@ -0,0 +1,159 @@
+const canvas = document.querySelector("#vj-field");
+
+if (canvas) {
+  const context = canvas.getContext("2d", { alpha: true });
+  const reducedMotionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+  const state = {
+    width: 0,
+    height: 0,
+    ratio: 1,
+    pointerX: 0,
+    pointerY: 0,
+    reduced: reducedMotionQuery.matches,
+    animationFrame: 0
+  };
+  const palette = ["#22c55e", "#38bdf8", "#a3e635", "#facc15", "#fb7185", "#8b5cf6"];
+
+  const resize = () => {
+    state.ratio = Math.min(window.devicePixelRatio || 1, 2);
+    state.width = Math.max(1, canvas.clientWidth);
+    state.height = Math.max(1, canvas.clientHeight);
+    canvas.width = Math.floor(state.width * state.ratio);
+    canvas.height = Math.floor(state.height * state.ratio);
+    context.setTransform(state.ratio, 0, 0, state.ratio, 0, 0);
+    draw(performance.now());
+  };
+
+  const color = (index, alpha) => {
+    const hex = palette[index % palette.length];
+    const red = Number.parseInt(hex.slice(1, 3), 16);
+    const green = Number.parseInt(hex.slice(3, 5), 16);
+    const blue = Number.parseInt(hex.slice(5, 7), 16);
+    return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+  };
+
+  const drawTunnel = (time) => {
+    const centerX = state.width * (0.62 + state.pointerX * 0.08);
+    const centerY = state.height * (0.48 + state.pointerY * 0.08);
+    const radiusMax = Math.hypot(state.width, state.height) * 0.72;
+
+    context.save();
+    context.globalCompositeOperation = "lighter";
+    for (let ring = 1; ring <= 24; ring += 1) {
+      const progress = ring / 24;
+      const radius = progress * radiusMax;
+      const pulse = Math.sin(time * 0.0024 + ring * 0.72) * 14;
+      context.beginPath();
+      for (let point = 0; point <= 96; point += 1) {
+        const theta = (point / 96) * Math.PI * 2;
+        const wobble = Math.sin(theta * 5 + time * 0.0018 + ring) * 18 * progress;
+        const x = centerX + Math.cos(theta + time * 0.0004) * (radius + pulse + wobble);
+        const y = centerY + Math.sin(theta - time * 0.0003) * (radius * 0.62 + pulse + wobble);
+        if (point === 0) {
+          context.moveTo(x, y);
+        } else {
+          context.lineTo(x, y);
+        }
+      }
+      context.closePath();
+      context.lineWidth = Math.max(1.4, 6 - progress * 4);
+      context.strokeStyle = color(ring, 0.32 + progress * 0.42);
+      context.stroke();
+    }
+    context.restore();
+  };
+
+  const drawLasers = (time) => {
+    const centerX = state.width * (0.62 + state.pointerX * 0.06);
+    const centerY = state.height * (0.5 + state.pointerY * 0.06);
+    const length = Math.hypot(state.width, state.height);
+
+    context.save();
+    context.globalCompositeOperation = "lighter";
+    for (let index = 0; index < 42; index += 1) {
+      const angle = index * 0.42 + time * 0.00065;
+      const start = Math.sin(time * 0.001 + index) * 34;
+      context.beginPath();
+      context.moveTo(centerX + Math.cos(angle) * start, centerY + Math.sin(angle) * start);
+      context.lineTo(centerX + Math.cos(angle) * length, centerY + Math.sin(angle) * length);
+      context.lineWidth = index % 7 === 0 ? 3 : 1.2;
+      context.strokeStyle = color(index + 2, index % 7 === 0 ? 0.62 : 0.28);
+      context.stroke();
+    }
+    context.restore();
+  };
+
+  const drawSpectrum = (time) => {
+    const bars = 46;
+    const baseline = state.height * 0.86;
+    const barWidth = state.width / bars;
+
+    context.save();
+    context.globalCompositeOperation = "lighter";
+    for (let index = 0; index < bars; index += 1) {
+      const wave = Math.sin(time * 0.004 + index * 0.55);
+      const kick = Math.sin(time * 0.0016 + index * 0.17);
+      const height = 22 + Math.abs(wave * kick) * state.height * 0.24;
+      const x = index * barWidth;
+      context.fillStyle = color(index, 0.16 + Math.abs(wave) * 0.32);
+      context.fillRect(x, baseline - height, Math.max(2, barWidth - 4), height);
+    }
+    context.restore();
+  };
+
+  const drawNoise = (time) => {
+    context.save();
+    context.globalAlpha = 0.2;
+    context.fillStyle = "#ffffff";
+    for (let index = 0; index < 120; index += 1) {
+      const x = (Math.sin(index * 43.12 + time * 0.0017) * 0.5 + 0.5) * state.width;
+      const y = (Math.cos(index * 27.33 + time * 0.0011) * 0.5 + 0.5) * state.height;
+      context.fillRect(x, y, 1.2, 1.2);
+    }
+    context.restore();
+  };
+
+  const draw = (time) => {
+    context.clearRect(0, 0, state.width, state.height);
+    context.fillStyle = "rgba(8, 10, 15, 0.76)";
+    context.fillRect(0, 0, state.width, state.height);
+
+    const gradient = context.createLinearGradient(0, 0, state.width, state.height);
+    gradient.addColorStop(0, "rgba(34, 197, 94, 0.24)");
+    gradient.addColorStop(0.45, "rgba(56, 189, 248, 0.14)");
+    gradient.addColorStop(1, "rgba(139, 92, 246, 0.18)");
+    context.fillStyle = gradient;
+    context.fillRect(0, 0, state.width, state.height);
+
+    drawLasers(time);
+    drawTunnel(time);
+    drawSpectrum(time);
+    drawNoise(time);
+
+    if (!state.reduced) {
+      state.animationFrame = window.requestAnimationFrame(draw);
+    }
+  };
+
+  const start = () => {
+    window.cancelAnimationFrame(state.animationFrame);
+    draw(performance.now());
+  };
+
+  window.addEventListener("resize", resize, { passive: true });
+  window.addEventListener(
+    "pointermove",
+    (event) => {
+      state.pointerX = event.clientX / Math.max(1, state.width) - 0.5;
+      state.pointerY = event.clientY / Math.max(1, state.height) - 0.5;
+    },
+    { passive: true }
+  );
+
+  reducedMotionQuery.addEventListener("change", (event) => {
+    state.reduced = event.matches;
+    start();
+  });
+
+  resize();
+}

data/docs/index.html

@@ -0,0 +1,225 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="Vizcore is a Ruby gem for audio-reactive VJ visuals, scene DSL, beat analysis, MIDI control, and browser rendering." />
+  <meta name="theme-color" content="#080a0f" />
+  <link rel="canonical" href="https://ydah.github.io/vizcore/" />
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content="Vizcore - Ruby DSL for Audio-Reactive VJ Visuals" />
+  <meta property="og:description" content="Ruby DSL, audio analysis, MIDI control, and browser-rendered VJ visuals." />
+  <meta property="og:url" content="https://ydah.github.io/vizcore/" />
+  <meta property="og:image" content="https://ydah.github.io/vizcore/assets/vizcore-poster.png" />
+  <title>Vizcore - Ruby DSL for Audio-Reactive VJ Visuals</title>
+  <link rel="stylesheet" href="assets/site.css" />
+  <script src="assets/vj-tunnel.js" defer></script>
+</head>
+<body>
+  <a class="skip-link" href="#main">Skip to content</a>
+
+  <header class="site-header" aria-label="Site header">
+    <a class="brand" href="#top" aria-label="Vizcore home">Vizcore</a>
+    <nav class="site-nav" aria-label="Primary navigation">
+      <a href="#signal">Signal</a>
+      <a href="#dsl">DSL</a>
+      <a href="#examples">Examples</a>
+      <a href="#install">Install</a>
+      <a href="playground.html">Playground</a>
+    </nav>
+    <a class="nav-cta" href="https://github.com/ydah/vizcore">GitHub</a>
+  </header>
+
+  <section class="hero" id="top" aria-labelledby="hero-title">
+    <canvas id="vj-field" aria-hidden="true"></canvas>
+    <div class="hero-grid" aria-hidden="true"></div>
+    <div class="hero-copy">
+      <p class="kicker">Ruby DSL / Audio Analysis / Browser Renderer</p>
+      <h1 id="hero-title">Vizcore</h1>
+      <p class="hero-title-sub">Ruby DSL for audio-reactive VJ visuals.</p>
+      <p class="hero-lede">
+        Vizcore connects scene definitions, FFT analysis, beat detection, MIDI control,
+        and WebSocket streaming into one Ruby-first workflow for live visuals.
+      </p>
+      <div class="hero-actions" aria-label="Primary actions">
+        <a class="button is-primary" href="playground.html">Open playground</a>
+        <a class="button is-secondary" href="https://github.com/ydah/vizcore">View source</a>
+      </div>
+      <div class="hero-meta" aria-label="Vizcore highlights">
+        <span><strong>Scene DSL</strong> Ruby-first show files</span>
+        <span><strong>Realtime</strong> FFT, beats, MIDI</span>
+        <span><strong>Browser</strong> GLSL and canvas output</span>
+      </div>
+      <div class="terminal-strip" aria-label="Quick start commands">
+        <span class="terminal-line"><span class="prompt">$</span> gem install vizcore</span>
+        <span class="terminal-line"><span class="prompt">$</span> vizcore start examples/basic.rb</span>
+        <span class="terminal-line"><span class="prompt">&gt;</span> open http://127.0.0.1:4567</span>
+      </div>
+    </div>
+    <a class="scroll-cue" href="#signal">Signal chain</a>
+  </section>
+
+  <main id="main">
+    <section class="section" id="signal" aria-labelledby="signal-title">
+      <div class="section-inner signal-layout">
+        <div class="section-copy">
+          <p class="section-kicker">Signal Chain</p>
+          <h2 id="signal-title">Turn sound into frames, then frames into light.</h2>
+          <p>
+            Analyze microphones, WAV, MP3, FLAC, dummy sources, and MIDI events,
+            then stream amplitude, frequency bands, BPM, beats, and scene data into
+            the browser renderer.
+          </p>
+          <div class="signal-steps" aria-label="Vizcore signal flow">
+            <div class="signal-step">
+              <strong>Input</strong>
+              <span>mic / file / dummy / MIDI</span>
+            </div>
+            <div class="signal-step">
+              <strong>Analyze</strong>
+              <span>amplitude / FFT / bands / beat</span>
+            </div>
+            <div class="signal-step">
+              <strong>Render</strong>
+              <span>GLSL / video / particles / spectrogram</span>
+            </div>
+          </div>
+        </div>
+        <figure class="poster">
+          <img src="assets/vizcore-demo.gif" width="640" height="360" loading="lazy" alt="Animated Vizcore demo where detected beats expand concentric rings" />
+          <figcaption>readme_demo.rb: beat_pulse -> ring radius</figcaption>
+        </figure>
+      </div>
+    </section>
+
+    <section class="section section-dark" id="dsl" aria-labelledby="dsl-title">
+      <div class="section-inner split-layout">
+        <div class="section-copy">
+          <p class="section-kicker">Scene DSL</p>
+          <h2 id="dsl-title">Write the show structure in Ruby.</h2>
+          <p>
+            Define layers, shaders, transitions, and audio mappings with a Ruby DSL.
+            Connect peaks, low-end pressure, high-frequency motion, and beat counts
+            directly to visual parameters.
+          </p>
+          <ul class="feature-list">
+            <li>Use scenes and transitions to script the flow of a live set.</li>
+            <li>Map frequency_band, amplitude, and beat? into visual parameters.</li>
+            <li>Switch scenes and tune intensity with MIDI notes and CC values.</li>
+          </ul>
+        </div>
+        <div class="code-stage" aria-label="Ruby scene DSL example">
+<pre><code>Vizcore.define do
+  scene :drop do
+    layer :bg do
+      shader :kaleidoscope
+      effect :glitch
+      map frequency_band(:low) =&gt; :rotation_speed
+      map frequency_band(:high) =&gt; :effect_intensity
+    end
+
+    layer :storm do
+      type :particle_field
+      count 9000
+      blend :add
+      map amplitude =&gt; :speed
+      map beat? =&gt; :flash
+    end
+
+    layer :scope do
+      type :waveform
+      source :audio
+      style :ribbon
+      map amplitude, to: :height
+    end
+
+    layer :waterfall do
+      type :spectrogram
+      scroll :vertical
+      map amplitude, to: :gain
+    end
+
+    layer :rings do
+      circle count: 8 do
+        radius 100
+        map bass, to: :radius
+      end
+    end
+
+    layer :footage do
+      type :video
+      file "assets/loop.mp4"
+      map beat? =&gt; :invert
+    end
+  end
+end</code></pre>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="examples" aria-labelledby="examples-title">
+      <div class="section-inner">
+        <div class="section-head">
+          <p class="section-kicker">Show Files</p>
+          <h2 id="examples-title">Scenes you can launch now.</h2>
+          <p>
+            Start with a wireframe cube, beat-synced drops, file playback, MIDI
+            switching, and custom GLSL scenes built for pre-show testing.
+          </p>
+        </div>
+        <div class="example-grid">
+          <article class="example-item">
+            <h3>readme_demo.rb</h3>
+            <p>One beat mapping expands concentric rings.</p>
+            <code>vizcore start examples/readme_demo.rb --audio-source file</code>
+          </article>
+          <article class="example-item">
+            <h3>intro_drop.rb</h3>
+            <p>A beat-counted transition from intro into drop.</p>
+            <code>vizcore start examples/intro_drop.rb</code>
+          </article>
+          <article class="example-item">
+            <h3>complex_audio_showcase.rb</h3>
+            <p>Layered rings, grid, particles, wireframe, and glitch energy.</p>
+            <code>vizcore start examples/complex_audio_showcase.rb --audio-source file</code>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section section-dark" id="install" aria-labelledby="install-title">
+      <div class="section-inner install-panel">
+        <div class="section-copy">
+          <p class="section-kicker">Install</p>
+          <h2 id="install-title">Boot it with Ruby 3.2+.</h2>
+          <p>
+            Install PortAudio and ffmpeg on macOS, or libportaudio and ffmpeg on
+            Linux, then add the gem. fftw3 is optional and speeds up FFT analysis
+            when it is available.
+          </p>
+        </div>
+        <div class="install-commands" aria-label="Install commands">
+<pre><code>gem install vizcore
+vizcore start examples/basic.rb
+
+# macOS
+brew install portaudio ffmpeg
+brew install fftw
+
+# Ubuntu / Debian
+sudo apt install -y libportaudio2 libportaudio-dev ffmpeg
+sudo apt install -y libfftw3-dev</code></pre>
+        </div>
+        <div class="install-actions">
+          <a class="button is-primary" href="https://rubygems.org/gems/vizcore">RubyGems</a>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer class="site-footer">
+    <span>Vizcore</span>
+    <a href="https://github.com/ydah/vizcore">github.com/ydah/vizcore</a>
+  </footer>
+</body>
+</html>

data/docs/playground.html

@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="Vizcore Ruby wasm playground for editing Ruby scene DSL and previewing audio-reactive visuals in the browser." />
+  <meta name="theme-color" content="#08110f" />
+  <link rel="canonical" href="https://ydah.github.io/vizcore/playground.html" />
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content="Vizcore Playground" />
+  <meta property="og:description" content="Edit Vizcore Ruby DSL and preview audio-reactive scenes in the browser." />
+  <meta property="og:url" content="https://ydah.github.io/vizcore/playground.html" />
+  <meta property="og:image" content="https://ydah.github.io/vizcore/assets/vizcore-poster.png" />
+  <title>Vizcore Playground</title>
+  <link rel="stylesheet" href="assets/playground.css" />
+</head>
+<body>
+  <a class="skip-link" href="#editor">Skip to editor</a>
+
+  <header class="topbar" aria-label="Playground header">
+    <a class="brand" href="index.html">Vizcore</a>
+    <nav class="topbar-nav" aria-label="Playground navigation">
+      <a href="index.html">Home</a>
+      <a href="https://github.com/ydah/vizcore">GitHub</a>
+    </nav>
+  </header>
+
+  <main class="playground-shell">
+    <section class="editor-panel" aria-labelledby="editor-title">
+      <div class="panel-header">
+        <div>
+          <p class="eyebrow">Ruby wasm</p>
+          <h1 id="editor-title">Playground</h1>
+        </div>
+        <div class="toolbar">
+          <label class="preset-label" for="preset-select">Preset</label>
+          <select id="preset-select" class="preset-select"></select>
+          <button id="run-button" class="button primary" type="button">Run</button>
+          <button id="reset-button" class="button secondary" type="button">Reset</button>
+        </div>
+      </div>
+
+      <textarea id="editor" class="code-editor" spellcheck="false" autocomplete="off" autocapitalize="off"></textarea>
+
+      <div class="output-row">
+        <div class="status-line" aria-live="polite">
+          <span id="ruby-status">Ruby wasm idle</span>
+          <span id="compile-status">Waiting</span>
+        </div>
+        <details class="json-output">
+          <summary>Scene JSON</summary>
+          <pre id="json-output">{}</pre>
+        </details>
+      </div>
+    </section>
+
+    <section class="preview-panel" aria-labelledby="preview-title">
+      <div class="preview-header">
+        <div>
+          <p class="eyebrow">Canvas preview</p>
+          <h2 id="preview-title">Output</h2>
+        </div>
+        <div id="scene-tabs" class="scene-tabs" aria-label="Scenes"></div>
+      </div>
+
+      <div class="canvas-wrap">
+        <canvas id="preview-canvas" width="1280" height="720" aria-label="Vizcore visual preview"></canvas>
+        <div class="preview-meter" aria-live="polite">
+          <span id="scene-stat">Scene: --</span>
+          <span id="audio-stat">Amplitude: --</span>
+          <span id="beat-stat">Beat: --</span>
+        </div>
+      </div>
+
+      <div id="error-output" class="error-output" role="alert" hidden></div>
+    </section>
+  </main>
+
+  <script type="module" src="assets/playground.js"></script>
+</body>
+</html>