Here you can try out a new tool I'm currently developing. This is a work in progress, so you may encounter bugs, unfinished features, or quirky controls along the way — it’s all part of the process!

Your feedback, bug reports, or ideas for improvement would be greatly appreciated and can help refine the tool before its release. Feel free to share your thoughts with me using the contact form.

---

About the Tool:

FILTR (working title) is a web-based tool built with p5.js and WebGL, designed for processing images and video using a modular stack of GPU-accelerated shader effects. It allows you to build complex visual pipelines by combining passes, masks, and animated parameters in a clear, structured workflow.

At its core, FILTR uses a classic ping-pong framebuffer pipeline with two framebuffers (FBOs). Each module in the stack reads from the current framebuffer, applies its effect or mask, and writes the result into the other framebuffer. On the next step, the buffers swap roles, and the process continues. This approach ensures a stable and predictable stack, where the output of one module becomes the input for the next, and the order of modules fully defines the final result.

Modules

Modules can be selected from the Module List in the Modules Section panel and added to the Module Stack. The Module Stack (left) is where you organize the processing sequence: add modules, reorder them via drag-and-drop, toggle visibility, clone, or remove items.

To edit parameters, select a module in the Module Stack — its settings appear in the Module Controls panel (right). This panel shows only the controls for the currently selected module and includes a Reset button to restore that module’s default settings.

There are two types of modules:

• Pass — the main type, responsible for generating or processing effects. Each pass takes input from the previous FBO, applies a shader operation, and writes the result into the next FBO.
  
  
• Mask — a special type of module that uses an image or video as a texture mask. A mask is rendered into its own offscreen buffer and used to control how strongly the modules assigned to that mask affect different areas of the image.

Key Features

• Modular stack workflow — a growing library of ready-made modules that cover common image/video processing tasks and building blocks. Modules can be quickly added to a top-to-bottom Module Stack, where each module processes the result of the previous one — so the stack order defines the final output. Supports drag-and-drop reordering and quick actions for toggling, cloning, and removal, while module parameters and resets are handled in the Module Controls panel.
   
  
• Module Controls — select any module in the stack to edit its parameters in a dedicated right-side panel, with a Reset button to restore defaults for the selected module.
  
  
• Masks — masks use an image or video to generate a per-pixel influence map that controls how strongly the assigned modules are applied across the canvas. Masks can group modules directly in the stack via drag-and-drop, similar to grouping in design tools. Grouped modules are visually marked with a purple indicator and a counter for clarity, and the UI highlights valid drop positions while dragging.
  
  
• Media Pool — manage media files and import any number of images (and supported videos) via drag-and-drop for use as sources or masks in compatible modules. Safari: video sources are currently not supported.
  
  
• Export System — a dedicated class for capturing output from the canvas, supporting multiple export formats: rendered video (MP4), frame sequences (PNG, JPG, WEBP), and single still frames. Includes convenient controls and statistics for monitoring the export process.
  
  
• Animation Control — pause/resume animation. Pause switches FILTR to “render-on-change” mode: no continuous redraw, only updates on parameter changes. This reduces CPU/GPU usage and energy consumption, and is ideal for static work or high-resolution preview/export. Includes Frame Seek for previewing a specific frame.
  
  
• Presets — save and load the full stack configuration and parameters. User media files are not persisted between sessions and are not embedded in presets. Presets store only file references (names) and reconnect once matching files are re-imported.
  
  
• Canvas — An interactive canvas with configurable aspect ratios and resolution in the Canvas panel, along with flexible zoom controls via menu options and hotkeys.
  

Mask

Masks are special modules that provide a per-pixel influence map (a weight in the 0–1 range) for the modules assigned to that mask. For every affected module, the mask is used as a blend factor between the unmodified input and the module’s result:

• Black (0) — the module has no influence in that area (the input passes through).
  
• White (1) — the module is applied fully.
  
• Gray values — partial influence with smooth transitions.
  

This makes masks work as a general “modulator” for the whole module output. For distortion and processing effects, it scales the strength of the effect per pixel, and for modules that introduce or composite imagery, it also controls how strongly that module contributes to the final image in each area (including transparency/visibility when the module output contains alpha).

Technically, FILTR lets you choose which channel of the mask texture is used to compute the influence map: Luma, Alpha, R, G, or B. The overall masking intensity can be adjusted with the Mask Threshold parameter, which remaps/blends the mask values to make the influence softer or more pronounced.

Texture Wrapping Modes

Additionally, some modules feature a “Texture Wrap” mode, which defines how an image or video behaves when it is scaled or when its texture coordinates extend beyond the original bounds. This setting is especially important in modules like Fill: Media File or Mask: Media File, where the texture may not fully match the canvas size.

FILTR supports four modes:

• CLAMP – stretches the edge pixels of the texture outward to fill the scaled area. This avoids hard borders but can create visible “smearing” at the edges.
  
  
• REPEAT – tiles the texture repeatedly in both directions. Works well for patterns or when seamless repetition is desired.
  
  
• MIRROR – similar to Repeat, but every alternate tile is flipped like a mirror, producing a more continuous tiling effect.
  
  
• TRANSPARENT – leaves areas outside the original texture empty (transparent). This mode is useful when you want to preserve the texture’s native size during scaling without stretching or repeating, while still keeping alpha for compositing.

Video Export (MP4)

FILTR supports exporting animations as MP4 video files with two encoder options: WebCodecs and H.264 Encoder. Both are available in Chrome, Firefox, and Edge, while Safari supports only H.264. Each option has its own strengths and limitations:

WebCodecs:

• Fast — rendering usually runs 1.25–2.5× faster than real-time playback, depending on parameters.
• Preserves correct color representation.
• Image quality can fluctuate depending on codec level support and scene complexity, even with the maximum bitrate set. Very detailed or fast-moving content may show brief softness and blocky “square” artifacts between keyframes (around every 10 frames).
• Limited by maximum frame size, typically up to 4K, but the exact cap depends on your hardware/drivers and the browser’s current state/load, and it can change during a session.
  
• Not supported in Safari.
  

H.264 Encoder:

• Slow — rendering typically runs at 0.2× or less of real-time playback speed.
• Color reproduction may differ visually (slight desaturation) due to color space differences
• Bitrate is controlled by compression settings (sweet spot: 18–22). At minimal compression, quality is excellent, but file sizes can be very large.
• Virtually no frame size limitations, making it suitable for high-resolution exports
• Supported in all major browsers, including Safari.
  

---

Change Log:

0.22.1 (Dec 21, 2025)

• Canvas Viewer: added new version of CanvasViewer API, with adjusted configuration options
  

0.22.0 (Dec 19, 2025)

• Total UI & Workflow Redesign
• Module Panels Split: module management is now separated into two dedicated panels
  - Module Stack (left): add, reorder, and manage modules and mask (visibility, cloning, removing, drag & drop)
  - Module Controls (right): displays controls for the currently selected module, with a Reset button to restore default settings
• Simplified Mask Workflow:
  - mask grouping is now fully drag & drop–based, similar to common design tools 
  - added clear visual helpers: color highlights and a mask marker, extending to all masked modules
• Visual UI Refresh: 
  - new font and cleaner typography
  - updated icons, state markers, and section headers
  - improved spacing, alignment, and overall visual hierarchy
• Presets & Stability:
  - presets updated to a new internal format for better reliability
  - preset application now waits until the workspace is fully ready
  - improved media and mask compatibility across sessions

Note: 
Older presets need re-saving to fully align with the new mask behavior.

0.21.5 (Dec 14, 2025)

• Modules: cleaned up internal redundant defaults
• Preset Export: improved serialization so runtime media slot data is no longer stored
  
• Media Slots: fixed media slots issues on exporting presets

0.21.4 (Dec 12, 2025)

• Media Pool: upgraded p5MediaPool to v0.1.3
  
• Media Previews: added .webp preview images for all media types for quicker loading of the tool
• Media Slots:
  - refactored media slot handling to support previews vs full media loading
  - modules and UI updated to use the new media slot structure
• Loader UI: improved loading screen with real progress tracking
  

0.21.3 (Dec 10, 2025)

• New Module: added a Gradient Map feature to support mapping image luminance to a custom gradient
• Presets: several presets updated to use Gradient Map

0.21.2 (Dec 10, 2025)

• Fill Noise Update: Gaussian, Motion, Noise
  - shader now uses value noise to get smoother grain
  - added a new contrast parameter to control grain intensity
  - removed the old soft parameter
• Presets: updated all presets using Fill Noise to reflect the new contrast control

0.21.1 (Dec 9, 2025)

• Blur Upgrades: Gaussian, Motion, Noise
  - added blend modes and mix (opacity) controls
  - removed texture-quality mode for Gaussian Blur, it now always renders in maximum quality
• New Module: Warp Grid
  - thee grid modes: 1D, 2D, 2D separated
  - cell softening for smoother distortion
  - falloff mode with tweakable intensity controls
  
• Presets: added a new preset + updated several existing presets

0.21.0 (Dec 5, 2025)

• New Effects: added three new modules
  - RGB Shift — chromatic aberration with adjustable profile
  - Lens Grid — refractive grid with blur, light, and shadow options
  - Blue-Noise Blur — fast blur based on blue-noise stochastic algorithm
  
• UI: support for point3d / point4d controls
  
• Modules: updated labels, defaults, and internal math
  
• Gaussian Blur: kernel radius now capped to shader limits for safer buffer scaling
  
• Presets: updated multiple presets with new effects and added two new ones

0.20.7 (Nov 25, 2025)

• Blur Pipeline: FBOs are now reused, preventing buffer overflow issues
• Blur Quality: Remapped to indexed-scale helpers with safer defaults. Older presets may not match exactly - set the quality setting manually if needed
  
• Gradient Fill: Improved dithering, removing noise artifacts, and reducing banding
  
• Simplex Noise: Patching displacement error (fixes thin-line artifacts)
  
• Presets: Two new + updated a few old presets with new effects

0.20.6 (Nov 23, 2025)

• Emboss Effect: fully updated module, shader, and UI
  - new options for height source (luma/alpha)
  - new controls for depth, size, and softness
  - improved normal calculation and lighting response
  

Important note (behavior change)

• The embossEffect algorithm has been redesigned, so custom presets may appear noticeably different, and achieving a matching previous look needs manual adjustments.

0.20.5 (Nov 21, 2025)

• Blur Logic: now uses the average canvas dimension for more consistent, scale-independent results
• Blur Control: reduced maximum blur radius in the UI from 100 → 50
  

0.20.4 (Nov 20, 2025)

• Gradient Direction: added a new Reverse parameter to flip the gradient colors
  
• Gradient Modes: introduced a new Triangle gradient mode
  
• Gradient Points: increased maximum number of gradient points from 6 → 8

0.20.3 (Nov 19, 2025)

• Color Correction: added a new module featuring brightness, contrast, and saturation controls
  
• Luma Bands: refactored with blend mode support, animation parameters, and improved contrast logic
  
• Presets: updated definitions and added support for the new parameters and modules

Important notes (behavior change)

• Luma Bands algorithm was redesigned to remove black-level artifacts
  
• Saturation and brightness controls were removed from Luma Bands
  
• Because of these changes, custom presets using Luma Bands may look different and need to be re-tuned manually

0.20.2 (Nov 18, 2025)

• Alpha Mode: added new alphaMode parameter to Fill Color, Fill Gradient, and Fill Noise modules lets you choose how the source alpha from previous passes is interpreted (ignore/fade) for more flexible compositing
• Assets: refreshed example images — text samples now come on transparent backgrounds 
  

0.20.1 (Nov 17, 2025)

• Export / Webcodecs: switched to High codec profile and constant bitrate for more stable export quality 
• Export Handling: Added safer error handling (logs a warning instead of stopping the session),  blocked seeking and playback actions while recording
• UI: refactored pane structure for cleaner organization (tabbed sections for Canvas and Export)
  

0.20.0 (Nov 14, 2025)

• New Module: added Fill Gradient, supports various gradient types with multiple color stops and blend modes
  
• Precision: framebuffer creation now uses HALF_FLOAT for improved graphics smoothness
  
• Color: unified color logic, replaced all alpha parameters with mix and refactored color helpers

• Presets: updated existing preset definitions and added new ones demonstrating the gradient module
• Breaking changes (manual preset updates needed). Some module parameters were renamed or received new value ranges. Older presets will not load correctly without manual edits.
  Update your preset JSON as follows:
  
  • fillMedia — alpha (0..100) → mix (0..1)
    
  • fillColor — alpha (0..100) → mix (0..1)
    
  • fillNoise — mix (0..100) → mix (0..1)
  • maskMedia — mix → maskRange

0.19.5 (Nov 4, 2025)

• UI Panels: migrated to Tweakpane v4
• Controls: internal refactor to the new API
  
• Styling: updated CSS variables/selectors for v4 compatibility

0.19.4 (Oct 31, 2025)

• Export / Video: improved playback sync — autoplay is blocked during export, start offsets are preserved, and your previous playback state is restored after export
• UI: refreshed instance panels; better conditional visibility for media controls
• Stability: more reliable video export
• Defaults: adjusted default wrap mode
  

0.19.3 (Oct 28, 2025)

• Emboss: new module with Gray and Color variants
• Presets: several new/updated presets showcasing new effects
  
• Mask: mix now supports min/max range
  
• Displace modules:
  - Sine: trimmed to 3 modes; vector angle removed
  - Simplex: added vector angle and domain rotation controls
  - Texture: added position to set X / Y offsets for texture positioning
  
• UI/UX: minor style tweaks; improved parameter structure and small usability fixes

0.19.2 (Oct 20, 2025)

• Consistent names: all displacement/generator modules now use the Displace prefix.
  
• New module: Fill Noise — random-noise fill for backgrounds/textures with blending modes.
  
• Presets: existing presets updated + added a few new ones to demo the changes.

• Older presets won’t load automatically because module/shader IDs were renamed.
  If you want to use them, manually rename IDs in your preset JSON:
  
  • sineWave → displaceSine
    
  • cubicWave → displaceCubic
    
  • noiseSimplex → displaceSimplex
    

0.19.1 (Oct 16, 2025)

• Generator (Cubic Wave): new module for cubic-wave distortion
• Presets: added a preset showcasing the new module
  
• Media controls: fixed update/refresh bug 

0.19.0 (Oct 13, 2025)

• Displace (Texture): new module that offsets pixels using an internal pass / external texture map
  
• Displace (Luma): new module that drives displacement (depth-like distortions) based on image luma/chrominance
  
• Presets: added 2 new presets showcasing both displacement modes

0.18.2 (Oct 7-8, 2025)

• UI: reworked module layouts, moved control buttons for easier access
• UI: added visual markers when using masks on modules
  
• Mask Module: fixed the issue with multiple masks behavior
• Minor changes (names/presets)
  
  

0.18.0 (Oct 2, 2025)

• Canvas: added animation control module and improved status window
  
• Export: new class for exporting graphics (MP4 video, frame sequence, single frame)
  
• UI: updated tool menu, reorganized into functional blocks, and positioned on both sides of the canvas

0.17.2 (Sep 30, 2025)

• Presets: updated parameter application logic
  
• Presets: added export class
  
• Minor fixes

0.17.1 (Sep 17, 2025)

• Mask Module: added option to use various channels as mask sources
  
• Updated assets: symbols now come with transparent backgrounds

0.17.0 (Sep 15, 2025)

• Released as a WIP tool

0.10-0.16 (Jul 14 - Sep 14, 2025)

• Initial prototype development