Build MODs for me:DERU

me:DERU — multi layer module EFX

me:DERU consists of two editors: layer-style DERU and node-style NODE. Add various effects through MODs.

What is a MOD?

Like Atelier's materials, each MOD contains artist-created code. A MOD is a magic box full of possibilities.

How MODs Work

Every MOD follows the same Input → Effect → Output pattern. Your function receives pixel data and transforms it.

function yourEffect(data, width, height, params, canvas, ctx) {
    // data   — Uint8ClampedArray: RGBA pixel data
    // width  — number: image width
    // height — number: image height
    // params — object: { key: value } from sliders
    // canvas — HTMLCanvasElement
    // ctx    — CanvasRenderingContext2D

    for (let i = 0; i < data.length; i += 4) {
        const r = data[i], g = data[i+1], b = data[i+2];
        // ... your effect logic ...
        data[i] = newR;
        data[i+1] = newG;
        data[i+2] = newB;
    }
}

Your Development Sandbox

EFX LAB is a standalone tool for prototyping MODs. Write code, drop an image, and see the result instantly.

✦ AI-Powered Code Generation

EFX LAB includes an AI assistant powered by Gemini. Describe the effect you want in natural language — the AI generates the processPixels code for you.

Example Prompts

From Standalone Code to MOD

If you have an existing HTML effect, here's how to extract the core algorithm into a MOD function.

Conversion Patterns

Publishing Your MOD

Once your effect works in EFX LAB, submit it for review and integration into the me:DERU platform.

What to Submit

Quick Reference

Function Arguments

Auto-Detected Parameter Ranges

Pixel Data Layout

// Each pixel = 4 consecutive values in the data array
// data[i]   = Red   (0-255)
// data[i+1] = Green (0-255)
// data[i+2] = Blue  (0-255)
// data[i+3] = Alpha (0-255)

// Get pixel at (x, y):
const i = (y * width + x) * 4;
const r = data[i], g = data[i+1], b = data[i+2], a = data[i+3];

// Grayscale conversion:
const gray = r * 0.3 + g * 0.59 + b * 0.11;

GIF & Video Support

The current MOD architecture processes one frame at a time — which means it's inherently ready for video and GIF processing with no code changes.

Extended Frame Parameters

Future MODs will receive additional timing information through params, enabling time-based animations:

function fadeEffect(data, width, height, params, canvas, ctx) {
    const t = params.progress || 0;  // 0.0 → 1.0 over time

    for (let i = 0; i < data.length; i += 4) {
        // Effect that evolves across frames
        data[i]   *= (1 - t * 0.5);  // Gradual color shift
        data[i+1] *= (1 - t * 0.3);
        data[i+2] *= (1 + t * 0.2);
    }
}