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
RSK World
star-pattern-maker
Star Pattern Maker - HTML5 Canvas + 3D Rendering + Physics Simulation + AI Patterns + Generative Audio + Modern UI + Glassmorphism Design
star-pattern-maker
  • js
  • .gitignore87 B
  • LICENSE1.5 KB
  • README.md6.9 KB
  • index.html20.4 KB
  • script.js22.3 KB
  • style.css7.9 KB
index.html
index.html
Raw Download
Find: Go to:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Star Pattern Maker - RSK World (V7)</title>

    <!-- Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <link rel="stylesheet" href="style.css?v=7.1">

    <!-- GIF.js Library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.js"></script>
</head>

<body>

    <div class="app-container">
        <!-- HEADER -->
        <header class="app-header">
            <div class="logo">
                <i class="fas fa-star-of-life fa-spin"></i>
                <h1>Star Pattern Maker <span class="badge">V7</span></h1>
            </div>
            <div class="rsk-branding">
                <span>By RSK World</span>
                <a href="https://rskworld.in" target="_blank">rskworld.in</a>
            </div>
        </header>

        <!-- MAIN LAYOUT -->
        <main class="workspace">

            <!-- LEFT: CONTROLS -->
            <aside class="controls-panel">

                <div class="control-group">
                    <h3><i class="fas fa-shapes"></i> Geometry</h3>
                    <div class="input-wrapper">
                        <label>Points (Spikes) <span class="value" id="spikesVal">5</span></label>
                        <input type="range" id="spikes" min="4" max="24" value="5">
                    </div>
                    <div class="input-wrapper">
                        <label>Outer Radius <span class="value" id="outerRadiusVal">150</span></label>
                        <input type="range" id="outerRadius" min="50" max="300" value="150">
                    </div>
                    <div class="input-wrapper">
                        <label>Inner Radius <span class="value" id="innerRadiusVal">75</span></label>
                        <input type="range" id="innerRadius" min="10" max="200" value="75">
                    </div>
                    <div class="input-wrapper">
                        <label>Curvature <span class="value" id="curveVal">0</span></label>
                        <input type="range" id="curve" min="-100" max="100" value="0">
                    </div>
                    <div class="input-wrapper">
                        <label>Twist <span class="value" id="twistVal">0</span></label>
                        <input type="range" id="twist" min="-90" max="90" value="0">
                    </div>
                </div>

                <div class="control-group">
                    <h3><i class="fas fa-magic"></i> New Features (V7)</h3>
                    <div class="input-wrapper">
                        <label style="justify-content:flex-start; gap:0.5rem">
                            <input type="checkbox" id="particlesEnabled" style="width:auto; height:auto;" checked>
                            Particle Background
                        </label>
                    </div>
                    <div style="display:grid; grid-template-columns: 1fr 1fr; gap:0.5rem; margin-top:0.5rem;">
                        <button id="randomizeBtn" class="btn btn-primary" title="Randomize (R)">
                            <i class="fas fa-dice"></i> Chaos
                        </button>
                        <button id="savePatternBtn" class="btn btn-outline">
                            <i class="fas fa-save"></i> Save
                        </button>
                    </div>
                </div>

                <div class="control-group">
                    <h3><i class="fas fa-bolt"></i> Effects</h3>
                    <div class="input-wrapper">
                        <label>Glow Strength <span class="value" id="glowVal">0</span></label>
                        <input type="range" id="glow" min="0" max="50" value="0">
                    </div>
                    <div class="input-wrapper">
                        <label>Jitter (Sketch) <span class="value" id="jitterVal">0</span></label>
                        <input type="range" id="jitter" min="0" max="20" value="0">
                    </div>
                    <div class="input-wrapper">
                        <label>Rotation Speed <span class="value" id="speedVal">0</span></label>
                        <input type="range" id="speed" min="0" max="20" value="0">
                    </div>
                </div>

                <!-- Kaleidoscope & Wallpaper (V6) -->
                <div class="control-group">
                    <h3><i class="fas fa-layer-group"></i> Modes</h3>

                    <div class="input-wrapper">
                        <label style="justify-content:flex-start; gap:0.5rem">
                            <input type="checkbox" id="wallpaperMode" style="width:auto; height:auto;">
                            Wallpaper (Tiling)
                        </label>
                    </div>
                    <div class="input-wrapper">
                        <label>H Grid <span class="value" id="colsVal">3</span></label>
                        <input type="range" id="cols" min="1" max="10" value="3">
                    </div>
                    <div class="input-wrapper">
                        <label>V Grid <span class="value" id="rowsVal">3</span></label>
                        <input type="range" id="rows" min="1" max="10" value="3">
                    </div>

                    <hr style="border:0; border-top:1px solid var(--border-color); margin:1rem 0;">

                    <div class="input-wrapper">
                        <label style="justify-content:flex-start; gap:0.5rem">
                            <input type="checkbox" id="kaleidoscopeMode" style="width:auto; height:auto;">
                            Kaleidoscope
                        </label>
                    </div>
                    <div class="input-wrapper">
                        <label>Segments <span class="value" id="segmentsVal">6</span></label>
                        <input type="range" id="segments" min="2" max="12" value="6">
                    </div>
                </div>

                <div class="control-group">
                    <h3><i class="fas fa-music"></i> Audio</h3>
                    <div class="input-wrapper">
                        <label style="justify-content:flex-start; gap:0.5rem">
                            <input type="checkbox" id="audioMode" style="width:auto; height:auto;">
                            Pulse to Music
                        </label>
                    </div>
                </div>

                <div class="control-group">
                    <h3><i class="fas fa-sparkles"></i> Unique FX (V8)</h3>

                    <div class="input-wrapper">
                        <label style="justify-content:flex-start; gap:0.5rem">
                            <input type="checkbox" id="rainbowMode" style="width:auto; height:auto;">
                            Rainbow Flow 🌈
                        </label>
                    </div>

                    <div class="input-wrapper">
                        <label style="justify-content:flex-start; gap:0.5rem">
                            <input type="checkbox" id="pulseEnabled" style="width:auto; height:auto;">
                            Cosmic Pulse
                        </label>
                    </div>

                    <div class="input-wrapper">
                        <label style="justify-content:flex-start; gap:0.5rem">
                            <input type="checkbox" id="parallaxEnabled" style="width:auto; height:auto;">
                            Interactive 3D Tilt
                        </label>
                    </div>
                </div>

                <div class="control-group">
                    <h3><i class="fas fa-snowflake"></i> V9 Expansion</h3>

                    <div class="input-wrapper">
                        <label style="justify-content:flex-start; gap:0.5rem">
                            <input type="checkbox" id="fractalMode" style="width:auto; height:auto;">
                            Fractal Mode (Recursive)
                        </label>
                    </div>
                    <div class="input-wrapper">
                        <label>Recursion Depth <span class="value" id="depthVal">2</span></label>
                        <input type="range" id="fractalDepth" min="1" max="4" value="2">
                    </div>

                    <h4
                        style="margin:1rem 0 0.5rem 0; font-size:0.9rem; text-transform:uppercase; color:var(--text-secondary); letter-spacing:1px;">
                        Quick Themes</h4>
                    <div id="themeGrid"
                        style="display:grid; grid-template-columns: repeat(5, 1fr); gap:10px; margin-top:0.5rem;">
                        <!-- Injected via JS -->
                    </div>
                </div>

                <div class="control-group">
                    <h3><i class="fas fa-meteor"></i> Cosmic FX (V11)</h3>

                    <div class="input-wrapper">
                        <label style="justify-content:flex-start; gap:0.5rem">
                            <input type="checkbox" id="trailEnabled" style="width:auto; height:auto;">
                            Motion Trails
                        </label>
                    </div>

                    <div class="input-wrapper">
                        <label style="justify-content:flex-start; gap:0.5rem">
                            <input type="checkbox" id="echoEnabled" style="width:auto; height:auto;">
                            Shadow Echoes
                        </label>
                    </div>
                </div>

                <div class="control-group">
                    <h3><i class="fas fa-atom"></i> Quantum FX (V12)</h3>

                    <div class="input-wrapper">
                        <label style="justify-content:flex-start; gap:0.5rem">
                            <input type="checkbox" id="gravityEnabled" style="width:auto; height:auto;">
                            Gravity Pull
                        </label>
                    </div>

                    <div class="input-wrapper">
                        <label style="justify-content:flex-start; gap:0.5rem">
                            <input type="checkbox" id="orbitEnabled" style="width:auto; height:auto;">
                            Orbital Motion
                        </label>
                    </div>

                    <div class="input-wrapper">
                        <label style="justify-content:flex-start; gap:0.5rem">
                            <input type="checkbox" id="chromaticAberration" style="width:auto; height:auto;">
                            Chromatic Glitch
                        </label>
                    </div>

                    <div class="input-wrapper">
                        <label style="justify-content:flex-start; gap:0.5rem">
                            <input type="checkbox" id="holographicMode" style="width:auto; height:auto;">
                            Holographic Shimmer
                        </label>
                    </div>

                    <h4
                        style="margin:1rem 0 0.5rem 0; font-size:0.9rem; text-transform:uppercase; color:var(--text-secondary); letter-spacing:1px;">
                        Quick Presets</h4>
                    <div id="presetGrid" style="display:flex; flex-direction:column; gap:0.5rem; margin-top:0.5rem;">
                        <!-- Injected via JS -->
                    </div>
                </div>

                <div class="control-group">
                    <h3><i class="fas fa-brain"></i> Neural Canvas (V13)</h3>

                    <h4 style="margin:0.5rem 0; font-size:0.85rem; color:var(--text-secondary);">Post-Processing</h4>
                    <div class="input-wrapper">
                        <label style="justify-content:flex-start; gap:0.5rem">
                            <input type="checkbox" id="glitchEnabled" style="width:auto; height:auto;">
                            Glitch Effect
                        </label>
                    </div>
                    <div class="input-wrapper">
                        <label style="justify-content:flex-start; gap:0.5rem">
                            <input type="checkbox" id="scanlinesEnabled" style="width:auto; height:auto;">
                            Scanlines (CRT)
                        </label>
                    </div>
                    <div class="input-wrapper">
                        <label style="justify-content:flex-start; gap:0.5rem">
                            <input type="checkbox" id="vignetteEnabled" style="width:auto; height:auto;">
                            Vignette
                        </label>
                    </div>
                    <div class="input-wrapper">
                        <label style="justify-content:flex-start; gap:0.5rem">
                            <input type="checkbox" id="bloomEnabled" style="width:auto; height:auto;">
                            Bloom/Glow
                        </label>
                    </div>

                    <h4 style="margin:1rem 0 0.5rem 0; font-size:0.85rem; color:var(--text-secondary);">Animations</h4>
                    <div class="input-wrapper">
                        <label style="justify-content:flex-start; gap:0.5rem">
                            <input type="checkbox" id="morphEnabled" style="width:auto; height:auto;">
                            Morph (Spike Shift)
                        </label>
                    </div>
                    <div class="input-wrapper">
                        <label style="justify-content:flex-start; gap:0.5rem">
                            <input type="checkbox" id="colorShiftEnabled" style="width:auto; height:auto;">
                            Color Shift
                        </label>
                    </div>

                    <h4 style="margin:1rem 0 0.5rem 0; font-size:0.85rem; color:var(--text-secondary);">Symmetry Modes
                    </h4>
                    <div class="input-wrapper">
                        <label style="justify-content:flex-start; gap:0.5rem">
                            <input type="checkbox" id="mandalaMode" style="width:auto; height:auto;">
                            Mandala
                        </label>
                    </div>
                    <div class="input-wrapper">
                        <label style="justify-content:flex-start; gap:0.5rem">
                            <input type="checkbox" id="spiralMode" style="width:auto; height:auto;">
                            Spiral
                        </label>
                    </div>
                </div>

                <div class="control-group">
                    <h3><i class="fas fa-palette"></i> Style</h3>
                    <div class="color-inputs">
                        <div class="color-wrapper">
                            <label>Core</label>
                            <input type="color" id="fillColor" value="#6366f1">
                        </div>
                        <div class="color-wrapper">
                            <label>Outer (Grad)</label>
                            <input type="color" id="fillColor2" value="#ec4899">
                        </div>
                        <div class="input-wrapper" style="margin-top:0.5rem">
                            <label style="font-size:0.8rem; justify-content: flex-start; gap: 0.5rem;">
                                <input type="checkbox" id="useGradient" checked style="width:auto;"> Use Gradient Fill
                            </label>
                        </div>
                    </div>
                    <div class="color-inputs" style="margin-top:1rem;">
                        <div class="color-wrapper">
                            <label>Stroke</label>
                            <input type="color" id="strokeColor" value="#ffffff">
                        </div>
                        <div class="input-wrapper">
                            <label>Width <span class="value" id="lineWidthVal">5</span></label>
                            <input type="range" id="lineWidth" min="0" max="20" value="5">
                        </div>
                    </div>
                    <div class="color-wrapper" style="margin-top:1rem;">
                        <label>Background</label>
                        <input type="color" id="bgColor" value="#000000">
                    </div>
                </div>

            </aside>

            <!-- CENTER: PREVIEW -->
            <section class="preview-area" id="previewContainer">
                <canvas id="starCanvas"></canvas>
                <div class="canvas-stats">
                    <span id="canvasDims">800 x 600</span>
                </div>
            </section>

            <!-- RIGHT: GALLERY & ACTIONS -->
            <aside class="controls-panel" style="border-left:1px solid var(--border-color); border-right:none;">

                <div class="control-group">
                    <h3><i class="fas fa-images"></i> Saved Patterns</h3>
                    <div id="galleryContainer" class="gallery-grid">
                        <!-- Loaded via JS -->
                    </div>
                </div>

                <div class="action-buttons-vertical">
                    <button id="exportBtn" class="btn btn-primary">
                        <i class="fas fa-file-image"></i> PNG
                    </button>
                    <button id="recordBtn" class="btn btn-outline">
                        <i class="fas fa-video"></i> Video (WebM)
                    </button>
                    <button id="recordGifBtn" class="btn btn-outline">
                        <i class="fas fa-film"></i> GIF
                    </button>
                    <button id="exportSvgBtn" class="btn btn-outline" disabled title="Disabled in V7">
                        <i class="fas fa-vector-square"></i> SVG
                    </button>
                </div>

                <div style="margin-top:2rem; font-size:0.8rem; color:var(--text-secondary); text-align:center;">
                    <p>RSK World Project</p>
                    <p>+91 93305 39277</p>
                </div>
            </aside>

        </main>
    </div>

    <!-- MAIN MODULE (Versioned for cache busting) -->
    <script type="module" src="js/main.js?v=7.1"
        onerror="alert('Error loading main.js! Check Console.'); document.body.style.border='5px solid red';"></script>

    <!-- FILE PROTOCOL WARNING (Added for V7) -->
    <div id="cors-error"
        style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(15,23,42,0.98); z-index:9999; color:white; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:2rem;">
        <i class="fas fa-server" style="font-size:4rem; color:#f472b6; margin-bottom:1.5rem;"></i>
        <h2 style="font-size:2rem; margin-bottom:1rem;">V7 Requires a Server</h2>
        <p style="max-width:500px; line-height:1.6; color:#cbd5e1; margin-bottom:2rem; font-size:1.1rem;">
            Because of the new <strong>V7 Modular Architecture</strong> (Security Policy), this app cannot run properly
            by just double-clicking the file.
            <br><br>
            Please use <strong>Laragon</strong> or any Local Server.
        </p>
        <a id="localhost-link" href="#" class="btn btn-primary"
            style="text-decoration:none; display:inline-flex; width:auto; padding:1rem 2rem; font-size:1.2rem;">
            <i class="fas fa-rocket"></i>&nbsp; Open on Localhost
        </a>
        <p style="margin-top:2rem; font-size:0.9rem; color:#94a3b8;">
            (Path: c:/laragon/www/project/multi-language-projects/star-pattern-maker/star-pattern-maker/)
        </p>
    </div>

    <script>
        // Check protocol and show warning if needed
        if (window.location.protocol === 'file:') {
            document.getElementById('cors-error').style.display = 'flex';

            // Hardcode the link based on user config
            document.getElementById('localhost-link').href = "http://localhost/project/multi-language-projects/star-pattern-maker/star-pattern-maker/index.html";
        }
    </script>
</body>

</html>
416 lines•20.4 KB
markup

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