@nexart/ui-renderer 0.1.0

package/README.md

@@ -0,0 +1,202 @@
+# @nexart/ui-renderer
+
+Version: 0.1.0
+
+**Browser-first UI renderer for exploratory generative art.**
+
+---
+
+> ⚠️ **IMPORTANT DISCLAIMER**
+>
+> **This SDK is for exploration and UI rendering only.**
+> **Canonical, archival output is produced exclusively by @nexart/codemode-sdk.**
+>
+> This renderer is:
+> - **NOT canonical**
+> - **NOT archival**
+> - **NOT protocol-authoritative**
+>
+> Use it for demos, playgrounds, miniapps, and experimentation.
+
+---
+
+## What This SDK Is
+
+A lightweight, browser-first renderer for NexArt-style generative art:
+
+- Works in browsers, Vite, React, plain HTML
+- Uses deterministic PRNG for reproducible visuals
+- Renders abstract flow fields, vortices, and orbital motion
+- Zero dependencies
+- No Node.js required
+
+## What This SDK Is NOT
+
+- **Not canonical** — Does not produce archival-quality output
+- **Not for NFT minting** — Use `@nexart/codemode-sdk` for production mints
+- **Not protocol-enforcing** — Best-effort determinism only
+
+---
+
+## Install
+
+```bash
+npm install @nexart/ui-renderer
+```
+
+Or use directly in HTML:
+```html
+<script type="module">
+  import { createUIRenderer } from 'https://unpkg.com/@nexart/ui-renderer/dist/index.js';
+</script>
+```
+
+---
+
+## Quick Start
+
+```typescript
+import { createUIRenderer } from '@nexart/ui-renderer';
+
+const canvas = document.getElementById('canvas') as HTMLCanvasElement;
+
+const renderer = createUIRenderer({
+  canvas,
+  seed: Date.now(),
+  mode: 'static',
+  width: 800,
+  height: 800,
+});
+
+// Render once
+renderer.render();
+
+// Or start animation loop
+// renderer.start();
+```
+
+---
+
+## API
+
+### `createUIRenderer(options)`
+
+Create a renderer instance.
+
+```typescript
+const renderer = createUIRenderer({
+  canvas: HTMLCanvasElement,  // Required: target canvas
+  seed: number,               // Required: PRNG seed
+  mode: 'static' | 'loop',    // Required: render mode
+  width?: number,             // Optional: canvas width (default: canvas.width)
+  height?: number,            // Optional: canvas height (default: canvas.height)
+});
+```
+
+### Renderer Methods
+
+| Method | Description |
+|--------|-------------|
+| `render()` | Render a single static frame |
+| `start()` | Start animation loop (loop mode) |
+| `stop()` | Stop animation loop |
+| `setSeed(newSeed)` | Change seed and re-render |
+| `destroy()` | Clean up resources |
+
+### Renderer Properties
+
+| Property | Value | Description |
+|----------|-------|-------------|
+| `isCanonical` | `false` | Always false - this is not canonical |
+| `isArchival` | `false` | Always false - this is not archival |
+
+---
+
+## Examples
+
+### Static Render
+
+```typescript
+const renderer = createUIRenderer({
+  canvas: document.querySelector('canvas'),
+  seed: 12345,
+  mode: 'static',
+});
+
+renderer.render();
+```
+
+### Animated Loop
+
+```typescript
+const renderer = createUIRenderer({
+  canvas: document.querySelector('canvas'),
+  seed: Date.now(),
+  mode: 'loop',
+});
+
+renderer.start();
+
+// Stop after 10 seconds
+setTimeout(() => renderer.stop(), 10000);
+```
+
+### Re-render with New Seed
+
+```typescript
+// Generate new art every 30 seconds
+setInterval(() => {
+  renderer.setSeed(Date.now());
+}, 30000);
+```
+
+---
+
+## Visual Style
+
+The renderer produces abstract generative art featuring:
+
+- **Flow fields** — Particle traces following noise-based vector fields
+- **Vortex patterns** — Spiral motion around canvas center
+- **Orbital elements** — Dots moving in elliptical paths
+- **Central glow** — Radial gradient for depth
+
+Colors are derived from the seed, creating unique palettes per render.
+
+---
+
+## Browser Compatibility
+
+Works in all modern browsers:
+- Chrome 80+
+- Firefox 75+
+- Safari 13+
+- Edge 80+
+
+No polyfills required.
+
+---
+
+## Comparison with @nexart/codemode-sdk
+
+| Feature | @nexart/ui-renderer | @nexart/codemode-sdk |
+|---------|---------------------|----------------------|
+| Environment | Browser only | Node.js / Server |
+| Purpose | Exploration / Demos | Production / NFT minting |
+| Canonical | ❌ No | ✅ Yes |
+| Archival | ❌ No | ✅ Yes |
+| Output | Canvas rendering | PNG / MP4 buffers |
+| Determinism | Best-effort | Strict |
+
+---
+
+## License
+
+MIT License
+
+Copyright (c) 2024 NexArt
+
+---
+
+> **Reminder:** This SDK is about access, not authority.
+> For canonical output, always use `@nexart/codemode-sdk`.

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @nexart/ui-renderer
+ * Version: 0.1.0
+ *
+ * Browser-first UI renderer for exploratory generative art.
+ *
+ * ⚠️ WARNING: This SDK is for exploration and UI rendering only.
+ * Canonical, archival output is produced exclusively by @nexart/codemode-sdk.
+ *
+ * This renderer is:
+ * - NOT canonical
+ * - NOT archival
+ * - NOT protocol-authoritative
+ *
+ * Use it for demos, playgrounds, miniapps, and experimentation.
+ */
+export { createUIRenderer } from './renderer';
+export type { UIRendererOptions, UIRenderer } from './renderer';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,17 @@
+/**
+ * @nexart/ui-renderer
+ * Version: 0.1.0
+ *
+ * Browser-first UI renderer for exploratory generative art.
+ *
+ * ⚠️ WARNING: This SDK is for exploration and UI rendering only.
+ * Canonical, archival output is produced exclusively by @nexart/codemode-sdk.
+ *
+ * This renderer is:
+ * - NOT canonical
+ * - NOT archival
+ * - NOT protocol-authoritative
+ *
+ * Use it for demos, playgrounds, miniapps, and experimentation.
+ */
+export { createUIRenderer } from './renderer';

package/dist/renderer.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @nexart/ui-renderer - Core Renderer
+ * Version: 0.1.0
+ *
+ * Browser-first generative art renderer.
+ * Uses deterministic PRNG for reproducible (but non-canonical) output.
+ */
+export interface UIRendererOptions {
+    canvas: HTMLCanvasElement;
+    seed: number;
+    mode: 'static' | 'loop';
+    width?: number;
+    height?: number;
+}
+export interface UIRenderer {
+    render: () => void;
+    start: () => void;
+    stop: () => void;
+    setSeed: (newSeed: number) => void;
+    destroy: () => void;
+    isCanonical: false;
+    isArchival: false;
+}
+/**
+ * Create a UI renderer instance.
+ *
+ * ⚠️ This renderer is NOT canonical and NOT archival.
+ * For production NFT minting, use @nexart/codemode-sdk.
+ */
+export declare function createUIRenderer(options: UIRendererOptions): UIRenderer;
+//# sourceMappingURL=renderer.d.ts.map

package/dist/renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,KAAK,CAAC;IACnB,UAAU,EAAE,KAAK,CAAC;CACnB;AAiBD;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,iBAAiB,GAAG,UAAU,CAgOvE"}

package/dist/renderer.js

@@ -0,0 +1,210 @@
+/**
+ * @nexart/ui-renderer - Core Renderer
+ * Version: 0.1.0
+ *
+ * Browser-first generative art renderer.
+ * Uses deterministic PRNG for reproducible (but non-canonical) output.
+ */
+/**
+ * Deterministic PRNG (Mulberry32)
+ * Fast, simple, good distribution
+ */
+function createPRNG(seed) {
+    let state = seed;
+    return () => {
+        state |= 0;
+        state = (state + 0x6d2b79f5) | 0;
+        let t = Math.imul(state ^ (state >>> 15), 1 | state);
+        t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+}
+/**
+ * Create a UI renderer instance.
+ *
+ * ⚠️ This renderer is NOT canonical and NOT archival.
+ * For production NFT minting, use @nexart/codemode-sdk.
+ */
+export function createUIRenderer(options) {
+    const { canvas, mode } = options;
+    let { seed } = options;
+    const width = options.width ?? canvas.width ?? 800;
+    const height = options.height ?? canvas.height ?? 800;
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    let animationId = null;
+    let frameCount = 0;
+    let random;
+    // Initialize PRNG
+    const initRandom = () => {
+        random = createPRNG(seed);
+        frameCount = 0;
+    };
+    initRandom();
+    // Utility functions
+    const map = (value, start1, stop1, start2, stop2) => {
+        return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
+    };
+    const lerp = (a, b, t) => a + (b - a) * t;
+    const noise2D = (x, y) => {
+        // Simple value noise using PRNG
+        const xi = Math.floor(x);
+        const yi = Math.floor(y);
+        const xf = x - xi;
+        const yf = y - yi;
+        const hash = (px, py) => {
+            const n = Math.sin(px * 12.9898 + py * 78.233 + seed * 0.001) * 43758.5453;
+            return n - Math.floor(n);
+        };
+        const v00 = hash(xi, yi);
+        const v10 = hash(xi + 1, yi);
+        const v01 = hash(xi, yi + 1);
+        const v11 = hash(xi + 1, yi + 1);
+        const sx = xf * xf * (3 - 2 * xf);
+        const sy = yf * yf * (3 - 2 * yf);
+        return lerp(lerp(v00, v10, sx), lerp(v01, v11, sx), sy);
+    };
+    /**
+     * Render a single frame
+     * Style: Abstract flow field / vortex art
+     */
+    const renderFrame = (t = 0) => {
+        // Clear with dark background
+        ctx.fillStyle = `hsl(${(seed % 360)}, 15%, 8%)`;
+        ctx.fillRect(0, 0, width, height);
+        // Re-seed for deterministic frame
+        random = createPRNG(seed + frameCount);
+        // Draw flow field particles
+        const particleCount = 2000;
+        const scale = 0.003;
+        for (let i = 0; i < particleCount; i++) {
+            // Particle position based on PRNG
+            let x = random() * width;
+            let y = random() * height;
+            // Particle color from seed
+            const hue = (seed + i * 0.1 + t * 50) % 360;
+            const sat = 60 + random() * 30;
+            const light = 50 + random() * 30;
+            const alpha = 0.3 + random() * 0.4;
+            ctx.strokeStyle = `hsla(${hue}, ${sat}%, ${light}%, ${alpha})`;
+            ctx.lineWidth = 0.5 + random() * 1.5;
+            ctx.beginPath();
+            ctx.moveTo(x, y);
+            // Trace flow line
+            const steps = 20 + Math.floor(random() * 30);
+            for (let s = 0; s < steps; s++) {
+                // Flow field angle using noise
+                const noiseVal = noise2D(x * scale, y * scale + t * 0.5);
+                const angle = noiseVal * Math.PI * 4;
+                // Add vortex influence
+                const cx = width / 2;
+                const cy = height / 2;
+                const dx = x - cx;
+                const dy = y - cy;
+                const dist = Math.sqrt(dx * dx + dy * dy);
+                const vortexStrength = map(dist, 0, width / 2, 0.8, 0.2);
+                const vortexAngle = Math.atan2(dy, dx) + Math.PI / 2;
+                const finalAngle = lerp(angle, vortexAngle, vortexStrength);
+                x += Math.cos(finalAngle) * 3;
+                y += Math.sin(finalAngle) * 3;
+                ctx.lineTo(x, y);
+                // Stop if out of bounds
+                if (x < 0 || x > width || y < 0 || y > height)
+                    break;
+            }
+            ctx.stroke();
+        }
+        // Draw orbital elements
+        const orbits = 3 + Math.floor(random() * 4);
+        for (let o = 0; o < orbits; o++) {
+            const orbitRadius = 100 + random() * (Math.min(width, height) / 3);
+            const orbitSpeed = 0.5 + random() * 1.5;
+            const dotCount = 20 + Math.floor(random() * 40);
+            const orbitHue = (seed + o * 60 + t * 30) % 360;
+            for (let d = 0; d < dotCount; d++) {
+                const angle = (d / dotCount) * Math.PI * 2 + t * orbitSpeed + o;
+                const wobble = Math.sin(angle * 3 + t * 2) * 20;
+                const x = width / 2 + Math.cos(angle) * (orbitRadius + wobble);
+                const y = height / 2 + Math.sin(angle) * (orbitRadius + wobble);
+                const size = 2 + random() * 4;
+                const alpha = 0.4 + random() * 0.4;
+                ctx.beginPath();
+                ctx.arc(x, y, size, 0, Math.PI * 2);
+                ctx.fillStyle = `hsla(${orbitHue}, 70%, 60%, ${alpha})`;
+                ctx.fill();
+            }
+        }
+        // Central glow
+        const gradient = ctx.createRadialGradient(width / 2, height / 2, 0, width / 2, height / 2, width / 3);
+        const glowHue = (seed + t * 20) % 360;
+        gradient.addColorStop(0, `hsla(${glowHue}, 80%, 60%, 0.15)`);
+        gradient.addColorStop(0.5, `hsla(${glowHue}, 60%, 40%, 0.05)`);
+        gradient.addColorStop(1, 'transparent');
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, width, height);
+        frameCount++;
+    };
+    /**
+     * Render static image
+     */
+    const render = () => {
+        initRandom();
+        renderFrame(0);
+    };
+    /**
+     * Start animation loop
+     */
+    const start = () => {
+        if (mode !== 'loop') {
+            console.warn('start() called but mode is "static". Use render() instead.');
+            render();
+            return;
+        }
+        stop();
+        initRandom();
+        let startTime = performance.now();
+        const loop = () => {
+            const elapsed = (performance.now() - startTime) / 1000;
+            const t = (elapsed % 10) / 10; // 10 second loop
+            renderFrame(t);
+            animationId = requestAnimationFrame(loop);
+        };
+        animationId = requestAnimationFrame(loop);
+    };
+    /**
+     * Stop animation loop
+     */
+    const stop = () => {
+        if (animationId !== null) {
+            cancelAnimationFrame(animationId);
+            animationId = null;
+        }
+    };
+    /**
+     * Set new seed and re-render
+     */
+    const setSeed = (newSeed) => {
+        seed = newSeed;
+        initRandom();
+        if (mode === 'static' || animationId === null) {
+            render();
+        }
+    };
+    /**
+     * Clean up resources
+     */
+    const destroy = () => {
+        stop();
+        ctx.clearRect(0, 0, width, height);
+    };
+    return {
+        render,
+        start,
+        stop,
+        setSeed,
+        destroy,
+        isCanonical: false,
+        isArchival: false,
+    };
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@nexart/ui-renderer",
+  "version": "0.1.0",
+  "description": "Browser-first UI renderer for exploratory generative art (non-canonical)",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0"
+  },
+  "keywords": [
+    "generative-art",
+    "canvas",
+    "browser",
+    "renderer",
+    "exploratory",
+    "creative-coding"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/artnames/nexart-ui-renderer.git"
+  },
+  "author": "NexArt",
+  "publishConfig": {
+    "access": "public"
+  }
+}