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
3d-engine.js
js/3d-engine.js
Raw Download
Find: Go to:
/* V15 3D Engine Module - Pseudo-3D Rendering */
import { state } from './state.js';

/**
 * 3D Point class
 */
class Point3D {
    constructor(x, y, z) {
        this.x = x;
        this.y = y;
        this.z = z;
    }
}

/**
 * Project 3D point to 2D screen coordinates
 */
export function project3D(point, fov = 500, distance = 1000) {
    const scale = fov / (fov + point.z + distance);
    return {
        x: point.x * scale,
        y: point.y * scale,
        scale: scale
    };
}

/**
 * Rotate point around X axis
 */
function rotateX(point, angle) {
    const rad = angle * Math.PI / 180;
    const cos = Math.cos(rad);
    const sin = Math.sin(rad);

    return new Point3D(
        point.x,
        point.y * cos - point.z * sin,
        point.y * sin + point.z * cos
    );
}

/**
 * Rotate point around Y axis
 */
function rotateY(point, angle) {
    const rad = angle * Math.PI / 180;
    const cos = Math.cos(rad);
    const sin = Math.sin(rad);

    return new Point3D(
        point.x * cos + point.z * sin,
        point.y,
        -point.x * sin + point.z * cos
    );
}

/**
 * Rotate point around Z axis
 */
function rotateZ(point, angle) {
    const rad = angle * Math.PI / 180;
    const cos = Math.cos(rad);
    const sin = Math.sin(rad);

    return new Point3D(
        point.x * cos - point.y * sin,
        point.x * sin + point.y * cos,
        point.z
    );
}

/**
 * Apply all 3D rotations
 */
export function rotate3D(point, angleX, angleY, angleZ) {
    let p = point;
    if (angleX !== 0) p = rotateX(p, angleX);
    if (angleY !== 0) p = rotateY(p, angleY);
    if (angleZ !== 0) p = rotateZ(p, angleZ);
    return p;
}

/**
 * Generate 3D star points
 */
export function generate3DStarPoints(spikes, outerRadius, innerRadius) {
    const points = [];
    const step = Math.PI / spikes;

    for (let i = 0; i < spikes * 2; i++) {
        const angle = i * step - Math.PI / 2;
        const radius = i % 2 === 0 ? outerRadius : innerRadius;

        points.push(new Point3D(
            Math.cos(angle) * radius,
            Math.sin(angle) * radius,
            0
        ));
    }

    return points;
}

/**
 * Draw 3D star with rotation
 */
export function draw3DStar(ctx, w, h, rOuter, rInner) {
    const cx = w / 2;
    const cy = h / 2;

    // Generate star points
    let points = generate3DStarPoints(state.spikes, rOuter, rInner);

    // Apply 3D rotations
    points = points.map(p => rotate3D(
        p,
        state.rotation3DX || 0,
        state.rotation3DY || 0,
        state.rotation3DZ || 0
    ));

    // Project to 2D
    const projected = points.map(p => project3D(p));

    // Sort by Z-depth (painter's algorithm)
    const avgZ = points.reduce((sum, p) => sum + p.z, 0) / points.length;

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

    ctx.beginPath();
    projected.forEach((p, i) => {
        if (i === 0) {
            ctx.moveTo(p.x, p.y);
        } else {
            ctx.lineTo(p.x, p.y);
        }
    });
    ctx.closePath();

    // Apply lighting based on Z-depth
    const brightness = 1 + (avgZ / 500);
    ctx.globalAlpha = Math.max(0.3, Math.min(1, brightness));

    ctx.fill();
    if (state.lineWidth > 0) ctx.stroke();

    ctx.restore();
}

/**
 * Update 3D rotation (called from animation loop)
 */
export function update3DRotation() {
    if (state.auto3DRotation) {
        state.rotation3DX = (state.rotation3DX || 0) + 0.5;
        state.rotation3DY = (state.rotation3DY || 0) + 0.3;
        state.rotation3DZ = (state.rotation3DZ || 0) + 0.2;

        // Keep angles in 0-360 range
        state.rotation3DX %= 360;
        state.rotation3DY %= 360;
        state.rotation3DZ %= 360;
    }
}
167 lines•3.8 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