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
filters.js
js/filters.js
Raw Download
Find: Go to:
/* 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

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