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
symmetry.js
js/symmetry.js
Raw Download
Find: Go to:
/* V13 Symmetry Module - Advanced Symmetry Patterns */
import { state } from './state.js';
import { drawStarPath } from './shapes.js';
import { renderRecursiveFractal } from './fractals.js';

/**
 * Draw Mandala pattern - Radial + reflective symmetry
 */
export function drawMandala(ctx, w, h, rOuter, rInner, dynamicFill) {
    const cx = w / 2;
    const cy = h / 2;
    const layers = 3; // Number of concentric layers

    ctx.save();
    ctx.translate(cx, cy);

    for (let layer = 0; layer < layers; layer++) {
        const layerRadius = rOuter * (1 - layer * 0.3);
        const layerInner = rInner * (1 - layer * 0.3);
        const segments = 8 + layer * 4; // More segments in outer layers

        for (let i = 0; i < segments; i++) {
            ctx.save();
            ctx.rotate((Math.PI * 2 * i) / segments);

            // Draw star at this position
            ctx.beginPath();
            drawStarPath(ctx, state.spikes, layerRadius / 2, layerInner / 2, state.curve, state.twist);
            ctx.fill();
            if (state.lineWidth > 0) ctx.stroke();

            ctx.restore();
        }
    }

    ctx.restore();
}

/**
 * Draw Spiral pattern - Fibonacci/golden spiral
 */
export function drawSpiral(ctx, w, h, rOuter, rInner, dynamicFill) {
    const cx = w / 2;
    const cy = h / 2;
    const spiralTurns = 3;
    const starsPerTurn = 12;
    const totalStars = spiralTurns * starsPerTurn;

    ctx.save();
    ctx.translate(cx, cy);

    for (let i = 0; i < totalStars; i++) {
        const progress = i / totalStars;
        const angle = progress * spiralTurns * Math.PI * 2;
        const radius = progress * Math.max(w, h) / 2;

        const x = Math.cos(angle) * radius;
        const y = Math.sin(angle) * radius;

        const scale = 1 - progress * 0.7; // Stars get smaller

        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.scale(scale, scale);

        ctx.beginPath();
        drawStarPath(ctx, state.spikes, rOuter / 3, rInner / 3, state.curve, state.twist);
        ctx.fill();
        if (state.lineWidth > 0) ctx.stroke();

        ctx.restore();
    }

    ctx.restore();
}

/**
 * Draw Tessellation - Repeating geometric tiles
 */
export function drawTessellation(ctx, w, h, rOuter, rInner, dynamicFill) {
    const tileSize = rOuter * 2;
    const cols = Math.ceil(w / tileSize) + 1;
    const rows = Math.ceil(h / tileSize) + 1;

    for (let row = 0; row < rows; row++) {
        for (let col = 0; col < cols; col++) {
            const x = col * tileSize - tileSize / 2;
            const y = row * tileSize - tileSize / 2;

            // Offset every other row for hexagonal pattern
            const offsetX = (row % 2) * (tileSize / 2);

            ctx.save();
            ctx.translate(x + offsetX, y);
            ctx.rotate(state.rotation);

            ctx.beginPath();
            drawStarPath(ctx, state.spikes, rOuter / 2, rInner / 2, state.curve, state.twist);
            ctx.fill();
            if (state.lineWidth > 0) ctx.stroke();

            ctx.restore();
        }
    }
}

/**
 * Draw Mirror pattern - Bilateral symmetry
 */
export function drawMirror(ctx, w, h, rOuter, rInner, dynamicFill) {
    const cx = w / 2;
    const cy = h / 2;

    // Draw original
    ctx.save();
    ctx.translate(cx - rOuter, cy);
    ctx.rotate(state.rotation);

    ctx.beginPath();
    drawStarPath(ctx, state.spikes, rOuter, rInner, state.curve, state.twist);
    ctx.fill();
    if (state.lineWidth > 0) ctx.stroke();
    ctx.restore();

    // Draw mirrored
    ctx.save();
    ctx.translate(cx + rOuter, cy);
    ctx.scale(-1, 1); // Flip horizontally
    ctx.rotate(state.rotation);

    ctx.beginPath();
    drawStarPath(ctx, state.spikes, rOuter, rInner, state.curve, state.twist);
    ctx.fill();
    if (state.lineWidth > 0) ctx.stroke();
    ctx.restore();
}
138 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