EFX ENGINE
me:DERU
mederu + ๅบใ(deru) โ Create, Process, Output
me:DERU is mederu's image processing & EFX engine. Layer-based non-destructive editing, real-time preview, and 22+ effect modules. Process your DRAW artwork with EFX and mint as art.
โฏโฏ ARCHITECTURE
๐ฅ INPUT
๐๏ธ DRAW Snapshot๐ File Import๐ท Camera
โโโฏ
๐ฎ me:DERU ENGINE
FrameStore (IndexedDB)Layer SystemEFX Chain PipelineCompositor (Canvas2D)Timeline (GIF/Anim)
โโโฏ
๐ค OUTPUT
๐ผ๏ธ PNG Export๐๏ธ GIF Exportโ๏ธ โ POST โ Mint
๐ Key Principle: me:DERU Owns All Layers
me:DERU Layer โ [EFX Module A] โ [EFX Module B] โ Processed Layer
โ โ
Pure functions: ImageData in โ ImageData outโฏโฏ DATA FLOW / USER JOURNEY
DRAW โ me:DERU โ Mint
- ๐๏ธ Draw on canvas in DRAW mode
- ๐ธ Capture with Snapshot
- ๐ฎ Switch to de:ru tab
- ๐๏ธ Add EFX: Glitch, Color, Melt...
- ๐ Adjust with real-time preview
- ๐พ Export โ PNG or GIF
- ๐ค POST โ Mint
POST โ me:DERU โ Mint
- ๐ค Upload image in POST
- ๐ฎ "Edit in de:ru" to transfer
- ๐๏ธ Process with EFX
- ๐ค Back to POST โ Mint
Direct Import
- ๐ฎ Open de:ru directly
- ๐ Drag & Drop or Import files
- ๐๏ธ Process with EFX
- ๐พ Export
โฏโฏ โจ๏ธ TIPS & SHORTCUTS
๐ธ Snapshot & Files
Ctrl + Shift + SSnapshot โ Send to me:DERU
SSave canvas as PNG
๐๏ธ DRAW Mode (Brush)
NDecrease brush size
MIncrease brush size
ZUndo
XRedo
๐งฉ Collage Mode
โ / โScale up / down
โ / โRotate (5ยฐ steps)
Ctrl + โ / โRotate (45ยฐ steps)
Shift + โโโโScale X/Y independently
Delete / BackspaceDelete selected elements
CCopy selection
VPaste
Ctrl + ASelect all
๐ฒ PIX Mode
PPen tool
EEraser tool
FFill bucket
IColor picker
Shift + ClickErase mode
Ctrl + ZUndo / Ctrl+Y Redo
๐ Canvas Zoom & Pan
Pinch (Trackpad)Zoom in/out
Ctrl + ScrollZoom in/out
โ / โZoom (no element selected)
Space + DragPan canvas
Double-clickReset zoom (100%)
๐ก BBS Tips
โ + EnterSend post
EnterNew line
๐๏ธ GIF Studio (de:ru โ GIF tab)
SpacePlay / Pause
โถ ForwardForward playback (default)
โ ReverseReverse playback
โ Ping-PongForward โ Reverse loop
โ P-PongAuto-duplicate frames in reverse into timeline
๐ฒ ShuffleRandomize timeline frame order
โช RevReverse timeline order
๐ข๐ถ๐โกSpeed presets (500/200/100/50ms)
Per-frame delaySet different delay per frame
Size presets256ยฒ / 512ยฒ / 1024ยฒ / 800ร600
Quality / Colors / DitherFine-tune GIF output quality
โฏโฏ EFX MODULES (19)
ASCII Art
Character-based image rendering
filter
Line Art
Sobel edge detection
filter
Transform
Scale, rotate, transform
distortion
Melt
Liquid wave distortion
distortion
RGB Shift
Channel displacement
distortion
Line Art V2
High-contrast line extraction
filter
Feedback
Recursive feedback loops
distortion
Lo-Fi
Low-resolution pixelation
filter
Color Adjust
HSB manipulation
filter
Fragment
Block fragmentation glitch
distortion
RGB Glitch
Channel split glitch
distortion
Slit Scan
Temporal slit-scan
distortion
Portrait
Vertical slice distortion
distortion
H-Distort
Horizontal slice displacement
distortion
Color Shift
Hue rotation shift
filter
Noise
Random noise injection
generative
Time Displace
Temporal displacement
distortion
Data Mosh
Data corruption aesthetic
distortion
BG Remove
Edge-based background removal
composite
โฏโฏ SYSTEM COMPONENTS
โ
FrameStore
- IndexedDB persistent storage
- Frame CRUD + thumbnails
- Max 100 frames (memory safe)
- Source tracking (brush/collage/gen/pix/post)
โ
Layer System
- Normal + Adjustment layers
- 9 blend modes
- Solo / Lock / Visibility
- Per-layer EFX chain
โ
EFX Chain Engine
- Serial pipeline: A โ B โ C
- Per-frame + batch processing
- Progress callback (real-time)
- Preview mode (low-res fast)
โ
Compositor
- Canvas2D compositing
- globalCompositeOperation
- Multi-layer flatten
- composeLayers() utility
๐งTimeline
- Frame sequencing
- GIF export (gif.js)
- MP4 export (future)
- Animation preview
๐งOutput
- PNG single frame
- GIF animation
- โ POST relay for Mint
- MP4 (MediaRecorder)
โฏโฏ PERFORMANCE STRATEGY
CURRENTPhase 1: CPU (Canvas2D)
- Pure function modules โ ImageData
- Debounced updates (50ms)
- createImageBitmap() fast decode
NEXTPhase 2: Web Worker
- Off-thread heavy processing
- OffscreenCanvas rendering
- UI stays responsive
FUTUREPhase 3: WebGL Shaders
- GPU-accelerated real-time
- 60fps interactive effects
- GLSL fragment shaders
โฏโฏ ๐ก FUTURE IDEAS
DNA Chain
Transfer characteristics between frames genetically
Material Remix
Transform textures (woodโmetal, paperโmarble) via AI
Co-Layer
Seamlessly blend two layers with AI fusion
Live Capture
Real-time DRAW stream โ EFX processing
Gradient Map
Grayscale โ custom gradient color mapping
Halftone
Newspaper-style dot pattern rendering
Pixel Sort
Glitch art pixel sorting by brightness/hue
Chromatic Ab
Lens chromatic aberration simulation
VHS / CRT
Retro TV scan lines + noise overlay
Duotone
Two-color mapping effect
Posterize
Reduce color palette for poster-style look
โฏโฏ FILE STRUCTURE
src/lib/efx/
โโโ types.ts โ
Core type definitions
โโโ registry.ts โ
Module registry (19 modules)
โโโ chain.ts โ
EFX chain pipeline
โโโ utils.ts โ
Utility functions
โโโ bg-removal.ts โ
BG Remove module
โโโ modules/
โโโ glitch.ts Fragment, RGB, Slit, Portrait, Horizontal, DataMosh, TimeDisplace
โโโ color.ts ColorAdjust, ColorShift, Gradient, Invert, Posterize
โโโ distortion.ts Melt, Transform, Feedback
โโโ ascii.ts ASCII Art, Line Art (Edge)
public/
โโโ velvet.html โ
DRAW engine
โโโ gugpix.html โ
ASCII/Line debug app
โโโ v22effects.html โ
Effects debug app
โโโ ggglitch.html โ
Glitch debug app