mirror of
https://github.com/stan220/waterpipe.js.git
synced 2026-09-12 13:29:35 +00:00
Initial commit
This commit is contained in:
aslauris
@@ -0,0 +1,95 @@
|
||||
# waterpipe.js - smoky backgrounds generator (HTML5 Canvas)
|
||||
|
||||
waterpipe.js is a jQuery plugin for smoky backgrounds developed by [dragdropsite.com](http://www.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](http://dragdropsite.github.io/waterpipe.js)
|
||||
|
||||
##Credits
|
||||
|
||||
[rectangleworld.com](http://rectangleworld.com/blog/) - big part of code has been taken from the examples provided on this blog
|
||||
|
||||
##License
|
||||
|
||||
Licensed under MIT license
|
||||
Reference in New Issue
Block a user