@nexart/ui-renderer 0.3.1 → 0.4.0

package/dist/preview/primitives/sketch.js

@@ -1,407 +0,0 @@
-/**
- * @nexart/ui-renderer v0.2.1 - Sketch Primitive Renderer
- *
- * Executes raw Code Mode p5-like sketches.
- * This is NOT canonical output - for preview/exploration only.
- */
-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;
-    };
-}
-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;
-    };
-}
-function createP5Runtime(ctx, width, height, seed) {
-    let currentFill = 'rgba(255, 255, 255, 1)';
-    let currentStroke = 'rgba(0, 0, 0, 1)';
-    let strokeEnabled = true;
-    let fillEnabled = true;
-    let currentStrokeWeight = 1;
-    let colorModeSettings = { mode: 'RGB', maxR: 255, maxG: 255, maxB: 255, maxA: 255 };
-    let shapeStarted = false;
-    let rng = createSeededRNG(seed);
-    let noiseFunc = createSeededNoise(seed);
-    let noiseOctaves = 4;
-    let noiseFalloff = 0.5;
-    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')
-                return val;
-            if (mode === 'HSB') {
-                return `hsla(${val}, 100%, 50%, 1)`;
-            }
-            const gray = Math.round((val / maxR) * 255);
-            return `rgba(${gray}, ${gray}, ${gray}, 1)`;
-        }
-        if (args.length === 2) {
-            const [gray, alpha] = args;
-            const g = Math.round((gray / maxR) * 255);
-            const a = alpha / maxA;
-            return `rgba(${g}, ${g}, ${g}, ${a})`;
-        }
-        if (args.length === 3) {
-            const [r, g, b] = args;
-            if (mode === 'HSB') {
-                return `hsla(${(r / maxR) * 360}, ${(g / maxG) * 100}%, ${(b / maxB) * 100}%, 1)`;
-            }
-            return `rgba(${Math.round((r / maxR) * 255)}, ${Math.round((g / maxG) * 255)}, ${Math.round((b / maxB) * 255)}, 1)`;
-        }
-        if (args.length === 4) {
-            const [r, g, b, a] = args;
-            if (mode === 'HSB') {
-                return `hsla(${(r / maxR) * 360}, ${(g / maxG) * 100}%, ${(b / maxB) * 100}%, ${a / maxA})`;
-            }
-            return `rgba(${Math.round((r / maxR) * 255)}, ${Math.round((g / maxG) * 255)}, ${Math.round((b / maxB) * 255)}, ${a / maxA})`;
-        }
-        return 'rgba(0, 0, 0, 1)';
-    };
-    const p = {
-        width,
-        height,
-        frameCount: 0,
-        PI: Math.PI,
-        TWO_PI: Math.PI * 2,
-        HALF_PI: Math.PI / 2,
-        QUARTER_PI: Math.PI / 4,
-        CORNER: 'corner',
-        CENTER: 'center',
-        CORNERS: 'corners',
-        RADIUS: 'radius',
-        ROUND: 'round',
-        SQUARE: 'square',
-        PROJECT: 'project',
-        MITER: 'miter',
-        BEVEL: 'bevel',
-        CLOSE: 'close',
-        background: (...args) => {
-            ctx.save();
-            ctx.fillStyle = parseColor(...args);
-            ctx.fillRect(0, 0, width, height);
-            ctx.restore();
-        },
-        clear: () => {
-            ctx.clearRect(0, 0, width, height);
-        },
-        fill: (...args) => {
-            fillEnabled = true;
-            currentFill = parseColor(...args);
-            ctx.fillStyle = currentFill;
-        },
-        noFill: () => {
-            fillEnabled = false;
-        },
-        stroke: (...args) => {
-            strokeEnabled = true;
-            currentStroke = parseColor(...args);
-            ctx.strokeStyle = currentStroke;
-        },
-        noStroke: () => {
-            strokeEnabled = false;
-        },
-        strokeWeight: (weight) => {
-            currentStrokeWeight = weight;
-            ctx.lineWidth = weight;
-        },
-        colorMode: (mode, max1, max2, max3, maxA) => {
-            colorModeSettings = {
-                mode: mode.toUpperCase(),
-                maxR: max1 ?? 255,
-                maxG: max2 ?? max1 ?? 255,
-                maxB: max3 ?? max1 ?? 255,
-                maxA: maxA ?? 255,
-            };
-        },
-        color: (...args) => parseColor(...args),
-        lerpColor: (c1, c2, amt) => c1,
-        ellipse: (x, y, w, h) => {
-            const rw = w / 2;
-            const rh = (h ?? w) / 2;
-            ctx.beginPath();
-            ctx.ellipse(x, y, rw, rh, 0, 0, Math.PI * 2);
-            if (fillEnabled)
-                ctx.fill();
-            if (strokeEnabled)
-                ctx.stroke();
-        },
-        circle: (x, y, d) => {
-            p.ellipse(x, y, d, d);
-        },
-        rect: (x, y, w, h, r) => {
-            const height = h ?? w;
-            ctx.beginPath();
-            if (r && r > 0) {
-                ctx.roundRect(x, y, w, height, r);
-            }
-            else {
-                ctx.rect(x, y, w, height);
-            }
-            if (fillEnabled)
-                ctx.fill();
-            if (strokeEnabled)
-                ctx.stroke();
-        },
-        square: (x, y, s, r) => {
-            p.rect(x, y, s, s, r);
-        },
-        line: (x1, y1, x2, y2) => {
-            ctx.beginPath();
-            ctx.moveTo(x1, y1);
-            ctx.lineTo(x2, y2);
-            if (strokeEnabled)
-                ctx.stroke();
-        },
-        point: (x, y) => {
-            ctx.beginPath();
-            ctx.arc(x, y, currentStrokeWeight / 2, 0, Math.PI * 2);
-            ctx.fillStyle = currentStroke;
-            ctx.fill();
-        },
-        triangle: (x1, y1, x2, y2, x3, y3) => {
-            ctx.beginPath();
-            ctx.moveTo(x1, y1);
-            ctx.lineTo(x2, y2);
-            ctx.lineTo(x3, y3);
-            ctx.closePath();
-            if (fillEnabled)
-                ctx.fill();
-            if (strokeEnabled)
-                ctx.stroke();
-        },
-        quad: (x1, y1, x2, y2, x3, y3, x4, y4) => {
-            ctx.beginPath();
-            ctx.moveTo(x1, y1);
-            ctx.lineTo(x2, y2);
-            ctx.lineTo(x3, y3);
-            ctx.lineTo(x4, y4);
-            ctx.closePath();
-            if (fillEnabled)
-                ctx.fill();
-            if (strokeEnabled)
-                ctx.stroke();
-        },
-        arc: (x, y, w, h, start, stop, mode) => {
-            ctx.beginPath();
-            ctx.ellipse(x, y, w / 2, h / 2, 0, start, stop);
-            if (mode === 'pie' || mode === 'PIE') {
-                ctx.lineTo(x, y);
-                ctx.closePath();
-            }
-            else if (mode === 'chord' || mode === 'CHORD') {
-                ctx.closePath();
-            }
-            if (fillEnabled)
-                ctx.fill();
-            if (strokeEnabled)
-                ctx.stroke();
-        },
-        beginShape: () => {
-            ctx.beginPath();
-            shapeStarted = false;
-        },
-        vertex: (x, y) => {
-            if (!shapeStarted) {
-                ctx.moveTo(x, y);
-                shapeStarted = true;
-            }
-            else {
-                ctx.lineTo(x, y);
-            }
-        },
-        endShape: (mode) => {
-            if (mode === 'close' || mode === 'CLOSE') {
-                ctx.closePath();
-            }
-            if (fillEnabled)
-                ctx.fill();
-            if (strokeEnabled)
-                ctx.stroke();
-            shapeStarted = false;
-        },
-        push: () => {
-            ctx.save();
-        },
-        pop: () => {
-            ctx.restore();
-            ctx.fillStyle = currentFill;
-            ctx.strokeStyle = currentStroke;
-            ctx.lineWidth = currentStrokeWeight;
-        },
-        translate: (x, y) => {
-            ctx.translate(x, y);
-        },
-        rotate: (angle) => {
-            ctx.rotate(angle);
-        },
-        scale: (sx, sy) => {
-            ctx.scale(sx, sy ?? sx);
-        },
-        resetMatrix: () => {
-            ctx.setTransform(1, 0, 0, 1, 0, 0);
-        },
-        random: (min, max) => {
-            if (Array.isArray(min)) {
-                return min[Math.floor(rng() * min.length)];
-            }
-            if (min === undefined)
-                return rng();
-            if (max === undefined)
-                return rng() * min;
-            return min + rng() * (max - min);
-        },
-        randomSeed: (seed) => {
-            rng = createSeededRNG(seed);
-        },
-        randomGaussian: (mean = 0, sd = 1) => {
-            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) => {
-            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) => {
-            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));
-            }
-        },
-        map: (value, start1, stop1, start2, stop2) => {
-            return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
-        },
-        constrain: (n, low, high) => {
-            return Math.max(low, Math.min(high, n));
-        },
-        lerp: (start, stop, amt) => {
-            return start + (stop - start) * amt;
-        },
-        dist: (x1, y1, x2, y2) => {
-            return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
-        },
-        mag: (x, y) => {
-            return Math.sqrt(x * x + y * y);
-        },
-        norm: (value, start, stop) => {
-            return (value - start) / (stop - start);
-        },
-        sin: Math.sin,
-        cos: Math.cos,
-        tan: Math.tan,
-        asin: Math.asin,
-        acos: Math.acos,
-        atan: Math.atan,
-        atan2: Math.atan2,
-        radians: (degrees) => degrees * (Math.PI / 180),
-        degrees: (radians) => radians * (180 / Math.PI),
-        abs: Math.abs,
-        ceil: Math.ceil,
-        floor: Math.floor,
-        round: Math.round,
-        sqrt: Math.sqrt,
-        pow: Math.pow,
-        exp: Math.exp,
-        log: Math.log,
-        min: Math.min,
-        max: Math.max,
-        noLoop: () => { },
-        loop: () => { },
-        redraw: () => { },
-        frameRate: (fps) => { },
-    };
-    return p;
-}
-export function createSketchRenderer(element, ctx, width, height, seed) {
-    const p5 = createP5Runtime(ctx, width, height, seed);
-    let setupFn = null;
-    let drawFn = null;
-    let setupExecuted = false;
-    const runtimeKeys = Object.keys(p5);
-    const destructure = runtimeKeys.map(key => `var ${key} = p5.${key};`).join('\n');
-    try {
-        const wrappedCode = `
-      ${destructure}
-      ${element.code}
-      return { setup: typeof setup === 'function' ? setup : null, draw: typeof draw === 'function' ? draw : null };
-    `;
-        const factory = new Function('p5', wrappedCode);
-        const result = factory(p5);
-        setupFn = result.setup;
-        drawFn = result.draw;
-    }
-    catch (e) {
-        console.error('[NexArt SDK] Sketch compilation error:', e);
-    }
-    return {
-        render: (frameCount) => {
-            p5.frameCount = frameCount;
-            if (!setupExecuted && setupFn) {
-                setupFn();
-                setupExecuted = true;
-            }
-            if (drawFn) {
-                drawFn();
-            }
-        },
-        hasSetup: setupFn !== null,
-        hasDraw: drawFn !== null,
-    };
-}