help@rskworld.in +91 93305 39277
RSK World
  • Home
  • Development
    • Web Development
    • Mobile Apps
    • Software
    • Games
    • Project
  • Technologies
    • Data Science
    • AI Development
    • Cloud Development
    • Blockchain
    • Cyber Security
    • Dev Tools
    • Testing Tools
  • About
  • Contact

Theme Settings

Color Scheme
Display Options
Font Size
100%
Back to Project
RSK World
star-pattern-maker
/
js
RSK World
star-pattern-maker
Star Pattern Maker - HTML5 Canvas + 3D Rendering + Physics Simulation + AI Patterns + Generative Audio + Modern UI + Glassmorphism Design
js
  • 3d-engine.js3.8 KB
  • ai-patterns.js5.6 KB
  • animations.js1.4 KB
  • audio.js1.3 KB
  • controls.js12.2 KB
  • export.js3.9 KB
  • filters.js3.5 KB
  • fractals.js3.5 KB
  • gallery.js2.5 KB
  • main.js1.9 KB
  • particles.js1.4 KB
  • physics.js1.7 KB
  • presets.js2.8 KB
  • randomizer.js1.4 KB
  • renderer.js7 KB
  • shaders.js6.5 KB
  • shapes.js1.7 KB
  • sound-gen.js4.4 KB
  • state.js1.9 KB
  • symmetry.js3.9 KB
  • themes.js1.4 KB
  • timeline.js4.2 KB
  • utils.js546 B
export.js
js/export.js
Raw Download
Find: Go to:
/* 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

About RSK World

Founded by Molla Samser, with Designer & Tester Rima Khatun, RSK World is your one-stop destination for free programming resources, source code, and development tools.

Founder: Molla Samser
Designer & Tester: Rima Khatun

Development

  • Game Development
  • Web Development
  • Mobile Development
  • AI Development
  • Development Tools

Legal

  • Terms & Conditions
  • Privacy Policy
  • Disclaimer

Contact Info

Nutanhat, Mongolkote
Purba Burdwan, West Bengal
India, 713147

+91 93305 39277

hello@rskworld.in
support@rskworld.in

© 2026 RSK World. All rights reserved.

Content used for educational purposes only. View Disclaimer