Effects

Martin.js comes with a number of built-in effects, which can be called from the working canvas (in which case it is added to the current layer), to a layer, or to a single element.

.saturate(amt)

Makes colors appear more intense by amount (number, 0-100).

canvas.saturate(100);

.desaturate(amt)

Makes colors appear less intense by amount (number, 0-100).

canvas.desaturate(80);

.lighten(amount)

Lightens by amount (number, 0-100).

canvas.lighten(25);

.darken(amount)

Darkens by amount (number, 0-100).

canvas.darken(25);

.opacity(amount)

Sets the layer's or element's opacity to amount (0-100).

canvas.opacity(50);

.blur(amount)

Places an amount px blur on the layer or element, following Mario Klingemann's StackBlur algorithm.

canvas.blur(15);

.invert()

Inverts the layer or element's colors. Does not take any arguments.

canvas.invert();


All of the above methods return the Effect, on which can be called other, Effect-specific methods. Any of the above Effect's intensity/amount can be retrieved as a key on the effect: var intensity = effect.data .

effect.increase(amount = 1)

Intensifies the Effect by amount (a number, relative to the effect's current intensity). If amount is left empty, increases the intensity by 1.

effect.decrease(amount = 1)

Decreases the Effect's intensity by amount (a number, relative to the effect's current intensity). If amount is left empty, decreases the intensity by 1.

var effect = canvas.lighten(0);
var increasing = true;
(function flash() {
    var amount = effect.data;
    if ( increasing && amount < 100 ) {
        effect.increase();
    } else if ( increasing && amount === 100 ) {
        increasing = false;
        effect.decrease()

    // .lighten() and .darken() are the inverses of each other,
    // and so actually range between -100 and 100
    } else if ( !increasing && amount > -100 ) {
        effect.decrease();
    } else {
        increasing = true;
        effect.increase();
    }
    requestAnimationFrame(flash);
})();

Effects can also be removed from their layer by calling:

.remove()

var effect = canvas.lighten(50);

// When the user clicks the canvas, remove the effect
canvas.click(function() {
    effect.remove();
});

.bump(i) / .bumpUp() / .bumpDown() / .bumpToTop() / .bumpToBottom()

Like layers and elements, effects can also be reordered on their layer's or element's stack of effects.