Cool Watercolor Effects With JavaScript And Three.js – Aquarelle

Category: Animation , Javascript , Recommended | June 30, 2018
Views Total:6,572 views
Official Page:Go to website
Last Update:June 30, 2018


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)


  • 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);



  • replace deleted d3.geom.contour script

You Might Be Interested In:

One thought on “Cool Watercolor Effects With JavaScript And Three.js – Aquarelle

Leave a Reply