RSK World - Star Pattern Maker - Project Files Browser | RSK World

js/filters.js

/* V13 Filters Module - Post-Processing Effects */
import { state } from './state.js';

/**
 * Apply all enabled filters to the canvas
 */
export function applyFilters(ctx, canvas) {
    if (state.glitchEnabled) {
        applyGlitch(ctx, canvas);
    }

    if (state.scanlinesEnabled) {
        applyScanlines(ctx, canvas);
    }

    if (state.vignetteEnabled) {
        applyVignette(ctx, canvas);
    }

    if (state.bloomEnabled) {
        applyBloom(ctx, canvas);
    }

    if (state.pixelateEnabled) {
        applyPixelate(ctx, canvas);
    }

    if (state.invertEnabled) {
        applyInvert(ctx, canvas);
    }
}

/**
 * Glitch Effect - RGB channel separation
 */
function applyGlitch(ctx, canvas) {
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Random offset
    const offset = Math.floor(Math.random() * 10) - 5;

    // Shift red channel
    for (let i = 0; i < data.length; i += 4) {
        if (i + offset * 4 >= 0 && i + offset * 4 < data.length) {
            data[i] = data[i + offset * 4]; // R
        }
    }

    ctx.putImageData(imageData, 0, 0);
}

/**
 * Scanlines - CRT monitor effect
 */
function applyScanlines(ctx, canvas) {
    ctx.globalAlpha = 0.1;
    ctx.fillStyle = '#000000';

    for (let y = 0; y < canvas.height; y += 4) {
        ctx.fillRect(0, y, canvas.width, 2);
    }

    ctx.globalAlpha = 1.0;
}

/**
 * Vignette - Darkened edges
 */
function applyVignette(ctx, canvas) {
    const cx = canvas.width / 2;
    const cy = canvas.height / 2;
    const radius = Math.max(canvas.width, canvas.height) / 2;

    const gradient = ctx.createRadialGradient(cx, cy, radius * 0.3, cx, cy, radius);
    gradient.addColorStop(0, 'rgba(0,0,0,0)');
    gradient.addColorStop(1, 'rgba(0,0,0,0.7)');

    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

/**
 * Bloom - Glow overflow effect
 * Note: This is a simplified version. True bloom requires multiple passes.
 */
function applyBloom(ctx, canvas) {
    ctx.save();
    ctx.globalCompositeOperation = 'screen';
    ctx.globalAlpha = 0.3;
    ctx.filter = 'blur(20px)';
    ctx.drawImage(canvas, 0, 0);
    ctx.filter = 'none';
    ctx.restore();
}

/**
 * Pixelate - Retro pixel art look
 */
function applyPixelate(ctx, canvas) {
    const pixelSize = 8;
    const w = canvas.width;
    const h = canvas.height;

    // Get current canvas
    const imageData = ctx.getImageData(0, 0, w, h);

    // Downsample
    ctx.imageSmoothingEnabled = false;
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = Math.floor(w / pixelSize);
    tempCanvas.height = Math.floor(h / pixelSize);
    const tempCtx = tempCanvas.getContext('2d');
    tempCtx.drawImage(canvas, 0, 0, tempCanvas.width, tempCanvas.height);

    // Upsample
    ctx.clearRect(0, 0, w, h);
    ctx.drawImage(tempCanvas, 0, 0, w, h);
    ctx.imageSmoothingEnabled = true;
}

/**
 * Invert Colors - Negative image
 */
function applyInvert(ctx, canvas) {
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    for (let i = 0; i < data.length; i += 4) {
        data[i] = 255 - data[i];         // R
        data[i + 1] = 255 - data[i + 1]; // G
        data[i + 2] = 255 - data[i + 2]; // B
        // Alpha unchanged
    }

    ctx.putImageData(imageData, 0, 0);
}

138 lines•3.5 KB

javascript

js/3d-engine.js

Raw Download

/* 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

Theme Settings

Color Scheme

Display Options

Font Size