Cool Watercolor Effects With JavaScript And Three.js – Aquarelle

Aquarelle is a JavaScript library which uses Three.js and Html5 canvas to draw ineractive, fully configurable watercolor animation effects on the webpage.

Basic usage:

Place the Aquarelle.js library and other required resources into your html page.

<script src="/path/to/three.js"></script>
<script src="/path/to/Aquarelle.js"></script>
<script src="/path/to/AquarellePass.js"></script>
<script src="/path/to/EffectComposer.js"></script>
<script src="/path/to/ClearPass.js"></script>
<script src="/path/to/ShaderPass.js"></script>
<script src="/path/to/CopyShader.js"></script>
<script src="/path/to/d3.geom.contour.min.js"></script>

Create a new Aquarelle object and pass in the following parameters:

• textureImage: background image
• maskImage: background image mask
• options: initial options

new Aquarelle(textureImage, maskImage, options);

Full configuration options.

new Aquarelle(textureImage, maskImage, {
    // noise amplitude value
    fromAmplitude: 50,
    // noise amplitude value
    toAmplitude: 0,
    
    // noise frequiency
    fromFrequency: 8,
    // noise frequiency
    toFrequency: 7,
    // offsets
    fromOffset: -30,
    toOffset: 28,
    // start animation before first frame is being rendered
    autoplay: false,
    // repeat animation in looprepeat animation in loop
    loop: false,
    // animation duration
    duration: 8000
    
});

API methods:

• pause(): pause animation
• play(): start animation
• stop(): stop and reset animation
• start(): start animation over
• reverse(): reverse animation
• reset(): re-render frame
• setOptions([object]): set animation options
• transitionInRange(startValue, endValue[, startTimeMS[, endTimeMS]]): return value between startValue..endValue in range startTimeMS..endTimeMS
• addEventListener(type, listener): add listener (listener) of event (type)
• removeEventListener(type, listener): remove (listener) of event (type)

Events.

• created: triggered before first frame is rendered
• changed: triggered before rendering of a frame
• completed: triggered before latest frame is rendered
• started: triggered before animation is started
• played: triggered after animation is started
• paused: triggered before pause of animation
• stopped: triggered before reset of animation

function listener(event) {}
aquarelle.addEventListener('created', listener);
aquarelle.removeEventListener('created', listener);

Changelog:

06/30/2018

• replace deleted d3.geom.contour script