waterpipe.js is a jQuery plugin for smoky backgrounds generation (HTML5 Canvas)
JavaScript CSS
Latest commit 0326638 May 11, 2014 aslauris Readme.md update (image paths)
Permalink
Failed to load latest commit information.
css Initial commit May 11, 2014
img Initial commit May 11, 2014
lib
LICENSE Initial commit May 11, 2014
README.md Readme.md update (image paths) May 11, 2014
index.html Initial commit May 11, 2014
waterpipe.js Initial commit May 11, 2014

README.md

waterpipe.js - smoky backgrounds generator (HTML5 Canvas)

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

alt tag

Examples

Here are some examples generated using waterpipe.js plugin.

alt tag alt tag alt tag alt tag alt tag alt tag alt tag alt tag alt tag alt tag alt tag alt tag

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