waterpipe.js - smoky backgrounds generator (HTML5 Canvas)

waterpipe.js is a jQuery plugin for smoky backgrounds developed by dragdropsite.com

Examples

Here are some examples generated using waterpipe.js plugin.

Usage

1. Include jQuery and waterpipe.js

<script src="lib/jquery-1.11.0.min.js"></script>
<script src="waterpipe.js"></script>

2. Create wrapper with canvas element inside

<div id="wavybg-wrapper" style="width: 100%; height: 100%;"> 
    <canvas>Your browser does not support HTML5 canvas.</canvas>
</div>

3. Initialize with

var smokyBG = $('#wavybg-wrapper').waterpipe({
    //Default values
    gradientStart: '#000000',
    gradientEnd: '#222222',
    smokeOpacity: 0.1,
    numCircles: 1,
    maxMaxRad: 'auto',
    minMaxRad: 'auto',
    minRadFactor: 0,
    iterations: 8,
    drawsPerFrame: 10,
    lineWidth: 2,
    speed: 1,
    bgColorInner: "#ffffff",
    bgColorOuter: "#666666"
});

Options

Option	Type	Default	Description
gradientStart	string	'#000000'	Gradient start color in hex format.
gradientEnd	string	'#222222'	Gradient end color in hex format.
smokeOpacity	number	0.1	Smoke opacity 0 to 1.
numCircles	int	1	Number of circles (smokes).
maxMaxRad	int or 'auto'	'auto'	Could be used to change circle radius size
minMaxRad	int or 'auto'	'auto'	Could be used to change circle radius size
minRadFactor	int	0	It's a factor representing the size of the smallest radius with respect to the largest possible. Integer from 0 to 1.
iterations	int	8	The number of subdividing steps to take when creating a single fractal curve. Can use more, but anything over 10 (thus 1024 points) is overkill for a moderately sized canvas.
drawsPerFrame	int	10	Number of curves to draw on every tick of the timer
lineWidth	number	2	Line width
speed	int	1	Drawing speed (tick of timer in ms)
bgColorInner	string	'#ffffff'	Background outer color in hex format
bgColorOuter	string	'#666666'	Background inner color in hex format

Methods

The following code could be used to call a method: smokyBG.data('waterpipe').generate();Please make sure variable smokyBG exists

Method	Arguments	Description
generate		Generates background canvas
setOption	optionName,	Set a new value to an option. Please check the above table for possible option names and values
	optionValue
download	width: int,	Download size in pixels
	height: int

Demo

Please check the demo to generate and download your own smoky backgrounds: http://dragdropsite.github.io/waterpipe.js

Credits

rectangleworld.com - big part of code has been taken from the examples provided on this blog

License

Licensed under MIT license