RELEASE_NOTES.md code_converter.py index.html PROJECT_OVERVIEW.md code_reviewer.py .gitignore CMakeLists.txt README.md

index.html

<!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

.gitignore

Raw Download

node_modules/
.DS_Store
*.log
.env
.vscode/
.idea/
dist/
build/
*.swp
*.swo
*~
.cache/

13 lines•87 B

text

README.md

Raw Download

README.md

# ⭐ Star Pattern Maker

A professional-grade generative art platform built with pure HTML5 Canvas. Create infinite unique patterns with 120+ features including 3D rendering, physics simulation, AI-inspired patterns, and generative audio.

![Version](https://img.shields.io/badge/version-15.0-blue)
![License](https://img.shields.io/badge/license-MIT-green)
![JavaScript](https://img.shields.io/badge/javascript-ES6+-yellow)

## 📸 Showcase

![Cyberpunk Style]
*Cyberpunk aesthetic with neon glow effects and motion trails*

![Sacred Geometry]
*Sacred geometry mandala with fractal details and bloom effects*

![3D Effects]
*3D rotation with chromatic aberration and retro CRT effects*

![Feature Showcase]
*Multiple pattern modes: Kaleidoscope, Spiral, Neural Network, and Voronoi*

## 🌟 Features

### Core Capabilities
- **23 Modular Components** - Clean ES6 architecture
- **120+ Unique Features** - From basic geometry to quantum effects
- **Multiple Rendering Modes** - Single, Wallpaper, Kaleidoscope, Fractal, Mandala, Spiral
- **Export Options** - PNG, GIF, WebM video
- **Gallery System** - Save and manage patterns locally

### Advanced Effects
- **3D Rendering** - True 3D rotation with perspective projection
- **Physics Simulation** - Gravity pull, orbital motion
- **Post-Processing** - Glitch, scanlines, vignette, bloom, chromatic aberration
- **AI Patterns** - Neural networks, L-Systems, Voronoi diagrams
- **Generative Audio** - Pattern sonification, color-to-frequency mapping
- **Timeline Animations** - Keyframe system with easing functions

### Visual Effects (V8-V15)
- Rainbow Flow, Cosmic Pulse, Mouse Parallax
- Motion Trails, Shadow Echoes
- Fractal Recursion (depth 1-4)
- Warp Field, Edge Glow, Wave Distortion
- Color Grading, Depth Field

## 🚀 Quick Start

### Installation
1. Clone or download this repository
2. Open `index.html` in a modern web browser
3. Start creating!

**Note**: For best experience, run from a local server (e.g., using Laragon, XAMPP, or `python -m http.server`)

### Basic Usage
1. **Adjust Geometry** - Use sliders to control spikes, radius, curvature
2. **Choose Mode** - Try Wallpaper, Kaleidoscope, or Fractal
3. **Apply Effects** - Enable filters, animations, or physics
4. **Export** - Save as PNG, GIF, or Video

### Keyboard Shortcuts
| Key | Action |
|-----|--------|
| `R` | Randomize (Chaos Mode) |
| `S` | Quick Save to Gallery |
| `Space` | Pause/Play Animation |

## 📦 Project Structure

```
star-pattern-maker/
├── index.html # Main HTML file
├── style.css # Application styles
├── js/
│ ├── main.js # Entry point
│ ├── state.js # Global state management
│ ├── renderer.js # Canvas rendering engine
│ ├── controls.js # UI interaction handler
│ ├── shapes.js # Star geometry
│ ├── particles.js # Background particles
│ ├── audio.js # Web Audio API
│ ├── export.js # Export functionality
│ ├── gallery.js # LocalStorage patterns
│ ├── utils.js # Helper functions
│ ├── themes.js # Color presets (V9)
│ ├── fractals.js # Recursive rendering (V9)
│ ├── randomizer.js # Chaos mode (V10)
│ ├── physics.js # Gravity & orbit (V12)
│ ├── presets.js # Full state presets (V12)
│ ├── filters.js # Post-processing (V13)
│ ├── animations.js # Animation sequencer (V13)
│ ├── symmetry.js # Advanced patterns (V13)
│ ├── shaders.js # Shader effects (V14)
│ ├── ai-patterns.js # Procedural generation (V14)
│ ├── timeline.js # Keyframe system (V14)
│ ├── 3d-engine.js # 3D rendering (V15)
│ └── sound-gen.js # Audio synthesis (V15)
└── README.md # This file
```

## 🎨 Feature Versions

- **V7**: Foundation - Modular architecture, gallery, particles
- **V8**: Unique FX - Rainbow, pulse, parallax
- **V9**: Expansion - Fractals, theme presets
- **V10**: Efficiency - Chaos mode, keyboard shortcuts
- **V11**: Cosmic FX - Motion trails, shadow echoes
- **V12**: Quantum Effects - Physics, full presets
- **V13**: Neural Canvas - Filters, animations, symmetry
- **V14**: Quantum Nexus - Shaders, AI patterns, timeline
- **V15**: Infinite Canvas - 3D rendering, generative audio

## 💡 Usage Examples

### Cyberpunk Aesthetic
```
Enable: Glitch + Scanlines + Chromatic Aberration
Theme: Neon
Effects: Rainbow Flow + Edge Glow
```

### Sacred Geometry
```
Mode: Mandala
Enable: Fractal (depth 3) + Shadow Echoes + Bloom
```

### 3D Cosmic Animation
```
Enable: 3D Rotation + Orbital Motion + Spiral Mode
Effects: Warp Field + Motion Trails + Vignette
```

### Audio-Visual Experience
```
Mode: Neural Pattern
Enable: Sound Generation + Color Shift + Morph
Effects: All filters
```

## ⚡ Performance Tips

- Reduce canvas size for better FPS
- Disable unused effects
- Use lower recursion depths for fractals
- Limit particle count on slower devices
- Export at high quality, preview at lower quality

## 🛠️ Technical Details

### Technologies
- HTML5 Canvas API
- JavaScript ES6 Modules
- Web Audio API
- MediaRecorder API
- LocalStorage API
- gif.js library

### Browser Support
- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
- Opera 76+

### Requirements
- Modern browser with ES6 support
- JavaScript enabled
- LocalStorage enabled (for gallery)
- Microphone permission (for audio reactivity, optional)

## 📊 Statistics

- **Total Modules**: 23 JavaScript files
- **Total Features**: 120+
- **Lines of Code**: ~7,000+
- **State Properties**: 80+
- **Rendering Modes**: 10+
- **Export Formats**: 4

## 🤝 Contributing

This is a complete, standalone project. Feel free to:
- Fork and modify for your own use
- Create derivative works
- Use as a learning resource
- Integrate into other projects

## 📄 License

MIT License - See LICENSE file for details

## 🙏 Acknowledgments

- Font Awesome for icons
- Google Fonts (Outfit)
- gif.js library for GIF export
- Web Audio API for audio features

## 📞 Support

For issues or questions:
1. Check the complete documentation in `COMPLETE_DOCUMENTATION.md`
2. Review the implementation plans in the `brain` folder
3. Inspect browser console for errors

## 🎯 Future Possibilities

Beyond V15, the following would require:
- **Backend**: Collaborative editing, cloud storage
- **External Libraries**: Advanced 3D (Three.js), ML (TensorFlow.js)
- **Hardware**: VR/AR support, GPU acceleration

---

**Star Pattern Maker** - From Simple Geometry to Infinite Possibilities 🌌✨

*Version 15.0 - Complete*

Theme Settings

Color Scheme

Display Options

Font Size

README.md

Theme Settings

Color Scheme

Display Options

Font Size

README.md

🚀 Support RSK World