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, designed for processing graphics (images or video) using a variety of WebGL shader filters. The tool also supports masks, which can be used to softly limit or modulate the influence of effects.

At its core, FILTR uses a classic rendering scheme with two framebuffers (ping-pong pipeline). In this process, two FBOs alternate roles on each step: one serves as the input (source), and the other as the output (target). Each module in the stack (pass) reads from the current FBO, applies the selected effect or mask, and writes the result into the other FBO. On the next step, their roles are swapped, and the sequence continues. This mechanism enables the safe and consistent construction of a stack of effects, where the output of one pass becomes the input for the next. The order of modules in the stack defines the order in which effects are applied.

Modules

Modules can be selected from the Module List in the Modules Section panel and added to the Stack Sequence. In this main area, modules appear as collapsible panels in the UI with adjustable parameters. Each module can be reordered via drag-and-drop, toggled on/off, cloned, or removed.

Currently, 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. The system generates an isolated FBO for the mask, which is blended into the rendering pipeline for a specified number of passes, influencing the effects applied below it in the stack.
  

Key Features

• A library of ready-made filter modules that can be quickly added to the Stack Sequence as adjustable panels, with support for drag-and-drop reordering, and quick access buttons for toggling, cloning, resetting to defaults, and removal.
  
  
• Media Pool — a built-in class for managing media files, supporting drag-and-drop import of any number of images or videos for use in modules that support media files.
  
  
• 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 — a toggle for pausing and resuming animation on the canvas. Useful for working in a static mode when animation is not needed, and also for resource optimization: when paused, rendering is performed only when parameters are changed. Includes a Frame Seek parameter, which allows jumping to and previewing a specific frame in the animation.
  
  
• A preset system that allows saving the current configuration of filters and parameters, as well as loading user-created presets.
  
  
• An interactive canvas with configurable aspect ratios and resolution in the Canvas panel, along with flexible zoom controls via menu options and hotkeys.
  

Workflow Notes

• The panels in the stack are executed in sequence, where each pass processes the result of the previous one. This makes the order of panels critical, as it directly defines how effects are layered and combined. Use drag-and-drop to rearrange the stack, and toggle panels on or off to preview their influence on the final result.
  
  
• To optimize performance, it is recommended to work with moderate canvas resolutions during editing and only switch to a higher resolution before exporting the final output. When working with static images or when animation is not required, you can pause the canvas animation — this reduces energy consumption and makes it easier to preview and export graphics at high resolutions.
  
  
• Some effects are resolution-dependent and may change when the canvas size is increased. For example, blur strength is measured in pixels, so the same settings can look much stronger or softer if the canvas is scaled up. For consistent results, it’s best to preview effects at the resolution intended for export.
  
  
• Media files can be added via drag-and-drop onto the canvas (or with the Open Media Pool button). For consistent quality, it is recommended to use media with the same resolution and aspect ratio.
  
  
• User media files are not persisted between sessions and are not embedded in custom presets. Presets keep only references (file names). After you reload the tool, re-import your media; once the referenced files are loaded, the preset will automatically pick them up.
  
  
• Video files can be imported and used in modules the same way as images (as a source or for masking).
  Safari: currently not supported for video.
  Other browsers: supported, but stability depends on the file’s format, size, and duration — large or long videos may cause slowdowns, stuttering, or freezes.
  

Mask

Masks are special modules that control how strongly the following effects in the stack are applied to different areas of the image. A mask uses an image or video as a texture, where the brightness of each pixel determines the level of influence:

• Black areas completely block the effect, preventing it from altering those regions.
  
• White areas let the effect pass through fully, leaving the image unchanged in those regions.
  
• Gray values create smooth transitions, partially blending the effect depending on brightness.
  
  

Technically, FILTR allows you to choose which channel of the mask texture is used to calculate its influence. The following options are available: Luma, Alpha, R, G, or B. By default, brightness (Luma) is often the most intuitive, but other channels can be selected for more specific control, depending on the content of the image or video.

When a mask is added to the stack, it affects all non-mask modules located below it for the number of passes specified in its Passes Count parameter. These affected modules are visually marked in the stack with the symbol (↳) next to their titles. If another mask appears further down in the stack while the first one is still active, the new mask takes over, and the previous one no longer influences subsequent layers.

If a mask module is disabled, its effect on the non-mask modules below it is also removed. The overall intensity of masking can be adjusted using the Mask Threshold parameter, which blends between the unmasked and masked results.

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.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