Aquarelle

About

This project is maintained by Ramotion, Inc.
We specialize in the designing and coding of custom UI for Mobile Apps and Websites.

Looking for developers for your project?
This project is maintained by Ramotion, Inc. We specialize in the designing and coding of custom UI for Mobile Apps and Websites.

Browser support

Chrome
Safari
Opera
Firefox
IE 11

Installation

bower install aquarelle

Then insert in your html:

<script src="bower_components/three.js/build/three.js"></script>

<script src="bower_components/aquarelle/Aquarelle.js"></script>

<script src="bower_components/three.js/examples/js/postprocessing/EffectComposer.js"></script>

<script src="bower_components/three.js/examples/js/postprocessing/ClearPass.js"></script>
<script src="bower_components/aquarelle/AquarellePass.js"></script>
<script src="bower_components/three.js/examples/js/postprocessing/ShaderPass.js"></script>
<script src="bower_components/three.js/examples/js/shaders/CopyShader.js"></script>

API

Constructor

new Aquarelle(textureImage, maskImage[, options]);

Names	Required	Type	Description
textureImage	`true`	`string`, `Image` or `<img>`	background image
maskImage	`true`	`string`, `Image` or `<img>`	background image mask
options	`false`	`object`	initial options

Options

Names	Defaults	Description
fromAmplitude	`50`	initial noise amplitude value
toAmplitude	`0`	final noise amplitude value
fromFrequency	`8`	initial noise frequiency
toFrequency	`7`	final noise frequiency
fromOffset	`-30`	initial mask size
autoplay	`false`	`true` - start animation before first frame is being rendered
loop	`false`	`true` - repeat animation in loop
duration	`8000`	animation duration

Events

Names	Description
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

Methods

Names	Description
`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`)

Usage

≈

var aquarelle = new Aquarelle(textureImage, maskImage[, options]);

Listeners

function listener(event) {}

aquarelle.addEventListener('created', listener);

aquarelle.removeEventListener('created', listener);

Demos

Static demo

Dynamic demo

Licence

Aquarelle is released under the MIT license. See LICENSE for details.

Get the Showroom App for iOS to give it a try

Try our UI components in our iOS app. Contact us if interested.

hanibash/aquarelle