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

js/fractals.js

/* V9 Fractal Logic */
import { state } from './state.js';
import { drawStarPath } from './shapes.js';
import { getJitter } from './utils.js';

export function drawFractalStar(ctx, rOuter, rInner, depth) {
    if (depth <= 0) return;

    // Draw Main Star at current level
    drawStarPath(ctx, state.spikes, rOuter, rInner, state.curve, state.twist);

    // We only stroke/fill at the leaf level or complex composite?
    // Let's just draw paths. The caller fills/strokes.
    // Actually, to make it visible, we need to recurse at the TIPS (outer points).

    // Calculate tip positions
    const spikes = state.spikes;
    const step = Math.PI / spikes;
    let rot = Math.PI / 2 * 3;

    // We need to iterate coordinates manually here to translate to them
    // This replicates shapes.js logic but just for finding points

    for (let i = 0; i < spikes; i++) {
        // Outer Point (Tip)
        let outerRot = rot + step;
        // Note: shapes.js logic is slightly offset. 
        // Let's rely on standard geometry:
        // Angle = rot

        // Wait, drawStarPath handles the path. 
        // To draw recursive stars, we need to Translate to the tip, Transform, and Draw again.

        let cx = Math.cos(outerRot + step) * rOuter; // shapes.js loop is weird.
        // Let's simplify: Standard Polars.
        // Tip angles are: -PI/2 + (i * 2PI/spikes)

        const angle = -Math.PI / 2 + (i * (Math.PI * 2) / spikes);
        const x = Math.cos(angle) * rOuter;
        const y = Math.sin(angle) * rOuter;

        ctx.save();
        ctx.translate(x, y);
        ctx.scale(0.4, 0.4); // Scale down
        ctx.rotate(angle + Math.PI / 2); // Align?

        // Recurse
        drawFractalStar(ctx, rOuter, rInner, depth - 1);

        ctx.restore();
    }
}

// Alternative: A dedicated recursive render function that handles Fill/Stroke per level?
// It's cleaner to just generate one complex path? 
// No, separate stars look better for snowflakes.

export function renderRecursiveFractal(ctx, w, h, rOuter, rInner) {
    const depth = state.fractalDepth || 0;

    // Helper recursive function
    function recurse(d, rO, rI) {
        if (d <= 0) return;

        // Draw current star
        ctx.beginPath();
        drawStarPath(ctx, state.spikes, rO, rI, state.curve, state.twist);
        ctx.fill();
        if (state.lineWidth > 0) ctx.stroke();

        // If we want recursion at tips
        const angleStep = (Math.PI * 2) / state.spikes;

        for (let i = 0; i < state.spikes; i++) {
            const angle = -Math.PI / 2 + (i * angleStep);
            // The tip position
            const startAngle = (Math.PI / 2 * 3); // shapes.js start
            // shapes.js logic is: outer point is at `rot + step`
            // i=0: outerRot = start + PI/spikes. 

            // Let's calculate tip x,y based on shapes.js logic to be consistent
            let rot = startAngle + (i * angleStep);
            let outerRot = rot + (Math.PI / state.spikes);

            let tipX = Math.cos(outerRot) * rO;
            let tipY = Math.sin(outerRot) * rO;

            ctx.save();
            ctx.translate(tipX, tipY);
            ctx.scale(0.4, 0.4);
            ctx.rotate(outerRot + Math.PI / 2); // Align with spoke

            recurse(d - 1, rO, rI);

            ctx.restore();
        }
    }

    // Start recursion
    // We need loop for main star? No, recurse handles it.
    // Center logic handled by renderer.js transform.
    recurse(depth, rOuter, rInner);
}

104 lines•3.5 KB

javascript

js/controls.js

Raw Download

/* V7 Controls Logic */
import { state } from './state.js';
import { exportPNG, toggleVideoRecording, recordGIF, exportSVG } from './export.js';
import { initAudio } from './audio.js';
import { savePattern } from './gallery.js';
import { THEMES, applyTheme } from './themes.js';
import { randomizeState } from './randomizer.js';
import { PRESETS, applyPreset } from './presets.js';
import { updateAnimations } from './animations.js';

export function initControls(canvas, ctx) {
    const controls = {
        spikes: document.getElementById('spikes'),
        outerRadius: document.getElementById('outerRadius'),
        innerRadius: document.getElementById('innerRadius'),
        curve: document.getElementById('curve'),
        twist: document.getElementById('twist'),
        lineWidth: document.getElementById('lineWidth'),
        glow: document.getElementById('glow'),
        jitter: document.getElementById('jitter'),
        speed: document.getElementById('speed'),

        wallpaperMode: document.getElementById('wallpaperMode'),
        cols: document.getElementById('cols'),
        rows: document.getElementById('rows'),

        kaleidoscopeMode: document.getElementById('kaleidoscopeMode'),
        segments: document.getElementById('segments'),

        audioMode: document.getElementById('audioMode'),

        fillColor: document.getElementById('fillColor'),
        fillColor2: document.getElementById('fillColor2'),
        useGradient: document.getElementById('useGradient'),
        strokeColor: document.getElementById('strokeColor'),
        bgColor: document.getElementById('bgColor'),

        // New Particles
        particlesEnabled: document.getElementById('particlesEnabled'),

        // V8 FX
        rainbowMode: document.getElementById('rainbowMode'),
        pulseEnabled: document.getElementById('pulseEnabled'),
        pulseEnabled: document.getElementById('pulseEnabled'),
        parallaxEnabled: document.getElementById('parallaxEnabled'),

        // V9
        fractalMode: document.getElementById('fractalMode'),
        fractalDepth: document.getElementById('fractalDepth'),

        // V11
        trailEnabled: document.getElementById('trailEnabled'),
        echoEnabled: document.getElementById('echoEnabled'),

        // V12
        gravityEnabled: document.getElementById('gravityEnabled'),
        orbitEnabled: document.getElementById('orbitEnabled'),
        chromaticAberration: document.getElementById('chromaticAberration'),
        holographicMode: document.getElementById('holographicMode'),

        // V13
        glitchEnabled: document.getElementById('glitchEnabled'),
        scanlinesEnabled: document.getElementById('scanlinesEnabled'),
        vignetteEnabled: document.getElementById('vignetteEnabled'),
        bloomEnabled: document.getElementById('bloomEnabled'),
        morphEnabled: document.getElementById('morphEnabled'),
        colorShiftEnabled: document.getElementById('colorShiftEnabled'),
        mandalaMode: document.getElementById('mandalaMode'),
        spiralMode: document.getElementById('spiralMode')
    };

    const displays = {
        spikes: document.getElementById('spikesVal'),
        outerRadius: document.getElementById('outerRadiusVal'),
        innerRadius: document.getElementById('innerRadiusVal'),
        curve: document.getElementById('curveVal'),
        twist: document.getElementById('twistVal'),
        lineWidth: document.getElementById('lineWidthVal'),
        glow: document.getElementById('glowVal'),
        jitter: document.getElementById('jitterVal'),
        speed: document.getElementById('speedVal'),
        cols: document.getElementById('colsVal'),
        rows: document.getElementById('rowsVal'),
        segments: document.getElementById('segmentsVal'),
        fractalDepth: document.getElementById('depthVal')
    };

    function updateState(key, value) {
        if (['useGradient', 'wallpaperMode', 'kaleidoscopeMode', 'audioMode', 'particlesEnabled', 'rainbowMode', 'pulseEnabled', 'parallaxEnabled', 'fractalMode', 'trailEnabled', 'echoEnabled', 'gravityEnabled', 'orbitEnabled', 'chromaticAberration', 'holographicMode', 'glitchEnabled', 'scanlinesEnabled', 'vignetteEnabled', 'bloomEnabled', 'morphEnabled', 'colorShiftEnabled', 'mandalaMode', 'spiralMode'].includes(key)) {
            state[key] = value;
        } else {
            state[key] = (key.includes('Color')) ? value : parseInt(value);
        }

        if (displays[key]) displays[key].textContent = state[key];

        if (key === 'audioMode' && value === true) initAudio();

        // Trigger draw if window._triggerDraw exists
        if (window._triggerDraw) window._triggerDraw();

        // Start loop if needed
        const needsLoop = state.speed > 0 || state.audioMode || state.particlesEnabled;
        if (needsLoop && window._triggerLoop) window._triggerLoop();
    }

    // Attach Listeners
    Object.keys(controls).forEach(key => {
        const input = controls[key];
        if (!input) return;

        const eventType = (input.type === 'checkbox' || input.type.includes('color')) ? 'input' : 'input';

        input.addEventListener(eventType, (e) => {
            const val = (input.type === 'checkbox') ? input.checked : input.value;
            updateState(key, val);
        });
    });

    // Buttons
    document.getElementById('exportBtn').addEventListener('click', () => exportPNG(canvas));
    document.getElementById('recordBtn').addEventListener('click', (e) => toggleVideoRecording(canvas, e.target));
    document.getElementById('recordGifBtn').addEventListener('click', (e) => recordGIF(canvas, e.target));
    document.getElementById('exportSvgBtn').addEventListener('click', () => exportSVG(canvas));

    // Gallery Save
    // Gallery Save (V10 - Auto Name)
    function triggerSave() {
        const name = `Pattern ${new Date().toLocaleString()}`;
        savePattern(name, canvas.toDataURL('image/png', 0.2));

        // Simple Toast Feedback (Console for now, or UI)
        const btn = document.getElementById('savePatternBtn');
        const originalText = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-check"></i> Saved!';
        setTimeout(() => btn.innerHTML = originalText, 1500);
    }
    document.getElementById('savePatternBtn').addEventListener('click', triggerSave);

    // Randomize (V10)
    function triggerRandom() {
        randomizeState(state);
        // Sync UI toggles/inputs
        Object.keys(controls).forEach(k => {
            if (controls[k]) {
                if (controls[k].type === 'checkbox') controls[k].checked = state[k];
                else controls[k].value = state[k];
                if (displays[k]) displays[k].textContent = state[k];
            }
        });
        if (window._triggerDraw) window._triggerDraw();
    }
    // Bind if button exists (we need to add it to HTML)
    const rndBtn = document.getElementById('randomizeBtn');
    if (rndBtn) rndBtn.addEventListener('click', triggerRandom);

    // Keyboard Shortcuts (V10)
    window.addEventListener('keydown', (e) => {
        // Ignore if typing in an input
        if (e.target.tagName === 'INPUT') return;

        switch (e.key.toLowerCase()) {
            case ' ': // Space: Toggle Animation
                state.speed = state.speed > 0 ? 0 : 2;
                if (controls.speed) controls.speed.value = state.speed;
                if (displays.speed) displays.speed.textContent = state.speed;
                if (state.speed > 0 && window._triggerLoop) window._triggerLoop();
                e.preventDefault();
                break;
            case 'r': // R: Randomize
                triggerRandom();
                break;
            case 's': // S: Save
                if (e.ctrlKey || e.metaKey) { // Ctrl+S usually saves page, let's override? 
                    e.preventDefault();
                    triggerSave();
                } else {
                    triggerSave();
                }
                break;
        }
    });

    // Listen for Load Event
    window.addEventListener('loadPattern', (e) => {
        const id = e.detail;
        // logic is handled in gallery.js loading to State, but we need to update UI controls
        // This is tricky. Reactivity usually handles this.
        // We need to sync Controls -> State.
        // Let's reload page? No.
        // Let's manually require a sync function.
        import('./gallery.js').then(({ loadPattern }) => {
            if (loadPattern(id)) {
                // Sync UI
                Object.keys(controls).forEach(k => {
                    if (controls[k]) {
                        if (controls[k].type === 'checkbox') controls[k].checked = state[k];
                        else controls[k].value = state[k];
                        if (displays[k]) displays[k].textContent = state[k];
                    }
                });
                if (window._triggerDraw) window._triggerDraw();
            }
        });
    });

    // Parallax Mouse Tracking (V8)
    const previewArea = document.getElementById('previewContainer');
    if (previewArea) {
        previewArea.addEventListener('mousemove', (e) => {
            if (!state.parallaxEnabled) return;

            const rect = previewArea.getBoundingClientRect();
            // Normalize -1 to 1
            const x = (e.clientX - rect.left) / rect.width;
            const y = (e.clientY - rect.top) / rect.height;

            state.mouseX = (x - 0.5) * 2;
            state.mouseY = (y - 0.5) * 2;

            if (window._triggerDraw) window._triggerDraw();
        });

        previewArea.addEventListener('mouseleave', () => {
            state.mouseX = 0;
            state.mouseY = 0;
            if (window._triggerDraw) window._triggerDraw();
        });
    }

    // Generate Themes (V9)
    const themeGrid = document.getElementById('themeGrid');
    if (themeGrid) {
        THEMES.forEach((t, i) => {
            const btn = document.createElement('div');
            btn.style.width = '30px';
            btn.style.height = '30px';
            btn.style.borderRadius = '50%';
            btn.style.background = `linear-gradient(135deg, ${t.fillColor}, ${t.fillColor2})`;
            btn.style.border = '2px solid rgba(255,255,255,0.2)';
            btn.style.cursor = 'pointer';
            btn.title = t.name;
            btn.onclick = () => applyTheme(i);
            themeGrid.appendChild(btn);
        });
    }

    // Listen for Theme Change to Sync UI
    window.addEventListener('themeChanged', (e) => {
        const t = e.detail;
        if (controls.fillColor) controls.fillColor.value = t.fillColor;
        if (controls.fillColor2) controls.fillColor2.value = t.fillColor2;
        if (controls.strokeColor) controls.strokeColor.value = t.strokeColor;
        if (controls.bgColor) controls.bgColor.value = t.bgColor;
        if (controls.glow) controls.glow.value = t.glow;
        if (displays.glow) displays.glow.textContent = t.glow;

        if (window._triggerDraw) window._triggerDraw();
    });

    // Generate Presets (V12)
    const presetGrid = document.getElementById('presetGrid');
    if (presetGrid) {
        PRESETS.forEach((p, i) => {
            const btn = document.createElement('button');
            btn.className = 'btn btn-outline';
            btn.style.width = '100%';
            btn.style.padding = '0.5rem';
            btn.style.fontSize = '0.85rem';
            btn.textContent = p.name;
            btn.onclick = () => {
                applyPreset(i);
                // Sync UI
                Object.keys(controls).forEach(k => {
                    if (controls[k] && state.hasOwnProperty(k)) {
                        if (controls[k].type === 'checkbox') controls[k].checked = state[k];
                        else if (controls[k].type === 'range' || controls[k].type === 'color') controls[k].value = state[k];
                        if (displays[k]) displays[k].textContent = state[k];
                    }
                });
                if (window._triggerDraw) window._triggerDraw();
            };
            presetGrid.appendChild(btn);
        });
    }
}

287 lines•12.2 KB

javascript

Theme Settings

Color Scheme

Display Options

Font Size