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
  • Blog
  • 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
code_formatter.cpython-313.pycstyle.csscode_reviewer.cpython-313.pycutils.jsexport.js
js/utils.js
Raw Download
Find: Go to:
/* V7 Utilities */
import { state } from './state.js';

export function getJitter() {
    if (state.jitter === 0) return 0;
    return (Math.random() - 0.5) * state.jitter * 2;
}

export function resizeCanvas(canvas, container, stats) {
    const rect = container.getBoundingClientRect();
    canvas.width = rect.width;
    canvas.height = rect.height;
    if (stats) stats.textContent = `${Math.round(canvas.width)} x ${Math.round(canvas.height)}`;
}

export function hexToRgb(hex) {
    // helper if needed
    return hex;
}
20 lines•546 B
javascript
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
🚀 Support RSK World

Subscribe to our YouTube channel for latest tutorials & updates!



Click subscribe & support our work ❤️

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