Cool Watercolor Effects With JavaScript And Three.js – Aquarelle

Category: Animation , Javascript , Recommended | June 30, 2018
Author: Ramotion
Views Total: 6,232
Official Page: Go to website
Last Update: June 30, 2018
License: MIT

Preview:

Cool Watercolor Effects With JavaScript And Three.js – Aquarelle

Description:

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

You Might Be Interested In:


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

Leave a Reply