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
renderer.js
js/renderer.js
Raw Download
Find: Go to:
/* V7 Renderer Module */
import { state } from './state.js';
import { drawStarPath } from './shapes.js';
import { drawParticles } from './particles.js';
import { getAudioData } from './audio.js';
import { renderRecursiveFractal } from './fractals.js';
import { applyGravity, calculateOrbit } from './physics.js';
import { applyFilters } from './filters.js';
import { drawMandala, drawSpiral } from './symmetry.js';

export function draw(ctx, canvas) {
    const width = canvas.width;
    const height = canvas.height;

    // Clear & BG
    if (state.trailEnabled && state.speed > 0) {
        // Transparent clear for trails
        ctx.fillStyle = state.bgColor + '1a'; // ~10% opacity
        ctx.fillRect(0, 0, width, height);
    } else {
        ctx.clearRect(0, 0, width, height);
        if (state.bgColor) {
            ctx.fillStyle = state.bgColor;
            ctx.fillRect(0, 0, width, height);
        }
    }

    // Ambient Particles (Behind)
    drawParticles(ctx, width, height);

    // Core Styles
    ctx.lineJoin = 'round';
    ctx.strokeStyle = state.strokeColor;
    ctx.lineWidth = state.lineWidth;

    // Audio Mod
    let rOuter = state.outerRadius;
    let rInner = state.innerRadius;
    let glowVal = state.glow;

    if (state.audioMode) {
        const audio = getAudioData();
        if (audio) {
            const bassBoost = (audio.bass / 255) * 50;
            rOuter += bassBoost;
            rInner += (bassBoost / 2);
            if (state.glow > 0) glowVal += (audio.avg / 5);
        }
    }

    // Glow
    if (glowVal > 0) {
        ctx.shadowBlur = glowVal;
        ctx.shadowColor = state.strokeColor;
    } else {
        ctx.shadowBlur = 0;
        ctx.shadowColor = 'transparent';
    }

    // V8 Rainbow Flow (Dynamic Fill)
    let dynamicFill = null;
    if (state.rainbowMode) {
        const hue = (Date.now() / 20) % 360;
        dynamicFill = `hsl(${hue}, 70%, 50%)`;
    }

    // V8 Cosmic Pulse (Scale Mod)
    let pulseScale = 1;
    if (state.pulseEnabled) {
        pulseScale = 1 + Math.sin(Date.now() * 0.002) * 0.05;
    }

    // Apply pulse to radii
    rOuter *= pulseScale;
    rInner *= pulseScale;

    // V12 Physics (Gravity & Orbit)
    let physicsOffsetX = 0;
    let physicsOffsetY = 0;

    if (state.gravityEnabled) {
        const gravity = applyGravity(width, height);
        physicsOffsetX += gravity.x;
        physicsOffsetY += gravity.y;
    }

    if (state.orbitEnabled) {
        const orbit = calculateOrbit(Date.now(), 80);
        physicsOffsetX += orbit.x;
        physicsOffsetY += orbit.y;
    }

    // Draw Mode with Echoes (V11)
    const echoes = state.echoEnabled ? state.echoCount : 1;

    for (let i = 0; i < echoes; i++) {
        ctx.save();

        if (state.echoEnabled && i > 0) {
            const scale = 1 - (i * 0.1);
            const alpha = 1 - (i / echoes);
            ctx.scale(scale, scale);
            ctx.globalAlpha = alpha;
        }

        // V13 Symmetry Modes
        if (state.mandalaMode) {
            drawMandala(ctx, width, height, rOuter, rInner, dynamicFill);
        }
        else if (state.spiralMode) {
            drawSpiral(ctx, width, height, rOuter, rInner, dynamicFill);
        }
        // V6+ Modes
        else if (state.kaleidoscopeMode) {
            drawKaleidoscope(ctx, width, height, rOuter, rInner, dynamicFill, physicsOffsetX, physicsOffsetY);
        }
        else if (state.wallpaperMode) {
            drawWallpaper(ctx, width, height, rOuter, rInner, dynamicFill, physicsOffsetX, physicsOffsetY);
        } else {
            drawSingleStar(ctx, width, height, rOuter, rInner, dynamicFill, physicsOffsetX, physicsOffsetY);
        }

        ctx.restore();
    }

    // V13 Post-Processing Filters
    applyFilters(ctx, canvas);
}



function drawSingleStar(ctx, w, h, rOuter, rInner, dynamicFill, offsetX = 0, offsetY = 0) {
    const cx = w / 2 + offsetX;
    const cy = h / 2 + offsetY;

    ctx.fillStyle = getFillStyle(ctx, cx, cy, rOuter, dynamicFill);

    // V8 Mouse Parallax
    if (state.parallaxEnabled) {
        const px = (state.mouseX / w - 0.5) * 30;
        const py = (state.mouseY / h - 0.5) * 30;
        ctx.translate(px, py);
    }

    ctx.save();
    ctx.translate(cx, cy);
    ctx.rotate(state.rotation);

    ctx.rotate(state.rotation);

    if (state.fractalMode) {
        renderRecursiveFractal(ctx, w, h, rOuter, rInner);
    } else {
        drawStarPath(ctx, state.spikes, rOuter, rInner, state.curve, state.twist);
        ctx.fill();
        if (state.lineWidth > 0) ctx.stroke();
    }

    ctx.restore();
}

function drawKaleidoscope(ctx, w, h, rOuter, rInner, dynamicFill, offsetX = 0, offsetY = 0) {
    const cx = w / 2;
    const cy = h / 2;
    const segs = state.segments;
    const angle = (Math.PI * 2) / segs;

    for (let i = 0; i < segs; i++) {
        ctx.save();
        ctx.translate(cx, cy);
        ctx.rotate(i * angle);
        ctx.translate(rOuter / 2, 0);
        ctx.rotate(state.rotation);

        const scale = 3 / segs;
        ctx.scale(scale, scale);

        ctx.fillStyle = getFillStyle(ctx, 0, 0, rOuter, dynamicFill);

        if (state.fractalMode) {
            renderRecursiveFractal(ctx, w, h, rOuter, rInner);
        } else {
            drawStarPath(ctx, state.spikes, rOuter, rInner, state.curve, state.twist);
            ctx.fill();
            if (state.lineWidth > 0) ctx.stroke();
        }

        ctx.restore();
    }

    // Center Star
    drawSingleStar(ctx, w, h, rOuter / 2, rInner / 2, dynamicFill);
}

function drawWallpaper(ctx, w, h, rOuter, rInner, dynamicFill, offsetX = 0, offsetY = 0) {
    const rows = state.rows;
    const cols = state.cols;
    const cellW = w / cols;
    const cellH = h / rows;

    for (let r = 0; r < rows; r++) {
        for (let c = 0; c < cols; c++) {
            const cx = (c * cellW) + (cellW / 2);
            const cy = (r * cellH) + (cellH / 2);

            ctx.fillStyle = getFillStyle(ctx, cx, cy, rOuter, dynamicFill);

            ctx.save();
            ctx.translate(cx, cy);
            ctx.rotate(state.rotation);

            if (state.fractalMode) {
                renderRecursiveFractal(ctx, w, h, rOuter, rInner);
            } else {
                drawStarPath(ctx, state.spikes, rOuter, rInner, state.curve, state.twist);
                ctx.fill();
                if (state.lineWidth > 0) ctx.stroke();
            }

            ctx.restore();
        }
    }
}

function getFillStyle(ctx, cx, cy, r, dynamicFill) {
    const color1 = dynamicFill || state.fillColor;
    const color2 = state.rainbowMode ? `hsl(${(Date.now() / 20 + 180) % 360}, 70%, 50%)` : state.fillColor2;

    if (state.useGradient) {
        const gradient = ctx.createRadialGradient(cx, cy, state.innerRadius / 4, cx, cy, r);
        gradient.addColorStop(0, color1);
        gradient.addColorStop(1, color2);
        return gradient;
    }
    return color1;
}
237 lines•7 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