Filters System

2 min read

PinePaper’s FilterSystem provides scene-wide visual effects that can be applied to the entire canvas or specific layers.

Overview

Filters are composable image processing effects that:

  • Apply to the entire rendered scene
  • Can be stacked and reordered
  • Support per-filter opacity and blend modes
  • Can be toggled on/off individually

Adding Filters

Basic Usage

// Add a grayscale filter
const filterId = app.filterSystem.addFilter('grayscale');

// Add with custom parameters
const filterId = app.filterSystem.addFilter('brightness', {
  value: 30  // +30 brightness
});

With Options

const filterId = app.filterSystem.addFilter('colorOverlay', {
  color: '#ff0000',
  intensity: 0.3
}, {
  opacity: 0.8,        // Filter opacity
  blendMode: 'overlay' // Blend mode
});

Managing Filters

Remove a Filter

app.filterSystem.removeFilter(filterId);

Update Filter Parameters

app.filterSystem.updateFilter(filterId, {
  intensity: 0.5
});

Toggle Filter

app.filterSystem.toggleFilter(filterId);

Reorder Filters

// Move filter to top of stack
app.filterSystem.reorderFilter(filterId, 0);

Getting Filter Information

Active Filters

const filters = app.filterSystem.getFilters();
filters.forEach(f => {
  console.log(f.id, f.name, f.enabled);
});

Available Filters

const available = app.filterSystem.getAvailableFilters();

Filters by Category

const colorFilters = app.filterSystem.getFiltersByCategory('color');
const adjustments = app.filterSystem.getFiltersByCategory('adjustment');

Layer-Specific Filters

Apply filters to specific layers only:

// Add filter to background layer only
app.filterSystem.addFilter('blur', { radius: 5 }, {
  layer: 'background'
});

// Get layer filters
const bgFilters = app.filterSystem.getLayerFilters('background');

Filter Presets

Apply pre-configured filter combinations:

// Apply cinematic preset
app.filterSystem.applyPreset('cinematic');

// Get available presets
const presets = app.filterSystem.getPresets();

See Presets for the full list.

Clearing Filters

// Remove all filters
app.filterSystem.clearFilters();

Events

window.addEventListener('filterAdded', (e) => {
  console.log('Added:', e.detail.filter);
});

window.addEventListener('filterRemoved', (e) => {
  console.log('Removed:', e.detail.filter);
});

window.addEventListener('filterUpdated', (e) => {
  console.log('Updated:', e.detail.filter);
});

window.addEventListener('filtersCleared', () => {
  console.log('All filters cleared');
});

window.addEventListener('presetApplied', (e) => {
  console.log('Preset:', e.detail.presetName);
});

Serialization

// Save filter state
const state = app.filterSystem.serialize();
localStorage.setItem('filters', JSON.stringify(state));

// Restore filter state
const saved = JSON.parse(localStorage.getItem('filters'));
app.filterSystem.deserialize(saved);

Performance Notes

  • Filters are applied via canvas image processing
  • Complex filter stacks may impact performance on lower-end devices
  • Use toggleFilter() to disable filters temporarily during editing
  • Consider reducing filter count for real-time preview