RSK World - Star Pattern Maker - Project Files Browser | RSK World

js/export.js

/* V7 Export Logic */
import { state } from './state.js';
import { draw } from './renderer.js';

/* PNG Export */
export function exportPNG(canvas) {
    const link = document.createElement('a');
    link.download = `star-pattern-${Date.now()}.png`;
    link.href = canvas.toDataURL();
    link.click();
}

/* Video Recording */
let mediaRecorder = null;
let recordedChunks = [];
let isRecording = false;

export function toggleVideoRecording(canvas, btn) {
    if (!isRecording) {
        const stream = canvas.captureStream(30);
        try { mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm;codecs=vp9' }); }
        catch (e) { mediaRecorder = new MediaRecorder(stream); }

        recordedChunks = [];
        mediaRecorder.ondataavailable = (e) => { if (e.data.size > 0) recordedChunks.push(e.data); };
        mediaRecorder.onstop = () => {
            const blob = new Blob(recordedChunks, { type: 'video/webm' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `star-pattern-video-${Date.now()}.webm`;
            a.click();
        };
        mediaRecorder.start();
        isRecording = true;
        btn.innerHTML = '<i class="fas fa-stop"></i> Stop Recording';
        btn.classList.add('recording-active');
    } else {
        mediaRecorder.stop();
        isRecording = false;
        btn.innerHTML = '<i class="fas fa-video"></i> Record Video';
        btn.classList.remove('recording-active');
    }
}

/* GIF Recording */
export function recordGIF(canvas, btn) {
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Recording...';
    btn.disabled = true;

    // We assume the worker is in the same folder or CDN. 
    // Since we are modular now, we might need a workaround for worker path.
    // Let's use the Blob approach again.

    fetch('https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.worker.js')
        .then(resp => resp.text())
        .then(workerCode => {
            const workerBlob = new Blob([workerCode], { type: "text/javascript" });
            const workerUrl = URL.createObjectURL(workerBlob);

            const gif = new GIF({
                workers: 2,
                quality: 10,
                workerScript: workerUrl,
                width: canvas.width,
                height: canvas.height
            });

            const framesToCapture = 60;
            let captured = 0;
            const simSpeed = (state.speed === 0) ? 5 : state.speed;

            const captureInterval = setInterval(() => {
                state.rotation += (simSpeed * 0.05);
                // We must redraw synchronously for GIF
                const ctx = canvas.getContext('2d');
                draw(ctx, canvas);

                gif.addFrame(canvas, { copy: true, delay: 33 });

                captured++;
                if (captured >= framesToCapture) {
                    clearInterval(captureInterval);
                    gif.render();
                    btn.innerHTML = '<i class="fas fa-cog fa-spin"></i> Encoding...';
                }
            }, 10);

            gif.on('finished', (blob) => {
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = `star-pattern-${Date.now()}.gif`;
                a.click();
                btn.innerHTML = '<i class="fas fa-film"></i> Record GIF';
                btn.disabled = false;
            });
        })
        .catch(err => {
            alert("GIF Worker Error: " + err);
            btn.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Error';
        });
}

/* SVG Export (Simplified) */
export function exportSVG(canvas) {
    alert("Vector Export is temporarily disabled in V7 Architecture. Please use high-res PNG.");
}

109 lines•3.9 KB

javascript

js/3d-engine.js

Raw Download

/* V15 3D Engine Module - Pseudo-3D Rendering */
import { state } from './state.js';

/**
 * 3D Point class
 */
class Point3D {
    constructor(x, y, z) {
        this.x = x;
        this.y = y;
        this.z = z;
    }
}

/**
 * Project 3D point to 2D screen coordinates
 */
export function project3D(point, fov = 500, distance = 1000) {
    const scale = fov / (fov + point.z + distance);
    return {
        x: point.x * scale,
        y: point.y * scale,
        scale: scale
    };
}

/**
 * Rotate point around X axis
 */
function rotateX(point, angle) {
    const rad = angle * Math.PI / 180;
    const cos = Math.cos(rad);
    const sin = Math.sin(rad);

    return new Point3D(
        point.x,
        point.y * cos - point.z * sin,
        point.y * sin + point.z * cos
    );
}

/**
 * Rotate point around Y axis
 */
function rotateY(point, angle) {
    const rad = angle * Math.PI / 180;
    const cos = Math.cos(rad);
    const sin = Math.sin(rad);

    return new Point3D(
        point.x * cos + point.z * sin,
        point.y,
        -point.x * sin + point.z * cos
    );
}

/**
 * Rotate point around Z axis
 */
function rotateZ(point, angle) {
    const rad = angle * Math.PI / 180;
    const cos = Math.cos(rad);
    const sin = Math.sin(rad);

    return new Point3D(
        point.x * cos - point.y * sin,
        point.x * sin + point.y * cos,
        point.z
    );
}

/**
 * Apply all 3D rotations
 */
export function rotate3D(point, angleX, angleY, angleZ) {
    let p = point;
    if (angleX !== 0) p = rotateX(p, angleX);
    if (angleY !== 0) p = rotateY(p, angleY);
    if (angleZ !== 0) p = rotateZ(p, angleZ);
    return p;
}

/**
 * Generate 3D star points
 */
export function generate3DStarPoints(spikes, outerRadius, innerRadius) {
    const points = [];
    const step = Math.PI / spikes;

    for (let i = 0; i < spikes * 2; i++) {
        const angle = i * step - Math.PI / 2;
        const radius = i % 2 === 0 ? outerRadius : innerRadius;

        points.push(new Point3D(
            Math.cos(angle) * radius,
            Math.sin(angle) * radius,
            0
        ));
    }

    return points;
}

/**
 * Draw 3D star with rotation
 */
export function draw3DStar(ctx, w, h, rOuter, rInner) {
    const cx = w / 2;
    const cy = h / 2;

    // Generate star points
    let points = generate3DStarPoints(state.spikes, rOuter, rInner);

    // Apply 3D rotations
    points = points.map(p => rotate3D(
        p,
        state.rotation3DX || 0,
        state.rotation3DY || 0,
        state.rotation3DZ || 0
    ));

    // Project to 2D
    const projected = points.map(p => project3D(p));

    // Sort by Z-depth (painter's algorithm)
    const avgZ = points.reduce((sum, p) => sum + p.z, 0) / points.length;

    // Draw
    ctx.save();
    ctx.translate(cx, cy);

    ctx.beginPath();
    projected.forEach((p, i) => {
        if (i === 0) {
            ctx.moveTo(p.x, p.y);
        } else {
            ctx.lineTo(p.x, p.y);
        }
    });
    ctx.closePath();

    // Apply lighting based on Z-depth
    const brightness = 1 + (avgZ / 500);
    ctx.globalAlpha = Math.max(0.3, Math.min(1, brightness));

    ctx.fill();
    if (state.lineWidth > 0) ctx.stroke();

    ctx.restore();
}

/**
 * Update 3D rotation (called from animation loop)
 */
export function update3DRotation() {
    if (state.auto3DRotation) {
        state.rotation3DX = (state.rotation3DX || 0) + 0.5;
        state.rotation3DY = (state.rotation3DY || 0) + 0.3;
        state.rotation3DZ = (state.rotation3DZ || 0) + 0.2;

        // Keep angles in 0-360 range
        state.rotation3DX %= 360;
        state.rotation3DY %= 360;
        state.rotation3DZ %= 360;
    }
}

167 lines•3.8 KB

javascript

Theme Settings

Color Scheme

Display Options

Font Size