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