Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/skyrim/klouds
Simple JavaScript library that generates animated clouds using WebGL
https://github.com/skyrim/klouds
animation canvas javascript webgl
Last synced: 19 days ago
JSON representation
Simple JavaScript library that generates animated clouds using WebGL
- Host: GitHub
- URL: https://github.com/skyrim/klouds
- Owner: skyrim
- License: mit
- Created: 2019-07-03T23:01:19.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-09-04T11:04:46.000Z (2 months ago)
- Last Synced: 2024-10-12T15:51:40.442Z (about 1 month ago)
- Topics: animation, canvas, javascript, webgl
- Language: JavaScript
- Homepage: https://skyrim.github.io/klouds/
- Size: 396 KB
- Stars: 12
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Klouds
Simple JavaScript library that generates animated clouds using WebGL.
Check out the demo [here](http://skyrim.github.io/klouds)
## Usage
Assuming that you have a canvas element on a page with an id `my-canvas`.
``` html
```
You can use the library in the following ways:
### Using script tag
``` html
klouds.create({
selector: '#my-canvas'
})
```
### Using jQuery
``` html
$('#my-canvas').Klouds()
```
### Using npm/yarn/bower etc.
```
npm install klouds
```
``` javascript
import * as klouds from 'klouds'
klouds.create({
selector: '#my-canvas'
})
```
Note: Typescript definition files are provided with the library.
### Options
Function `klouds.create` takes a single object argument.
name | required | type | description | default value | example values
-----|----------|------|-------------|---------------|---------------
`selector` | true | `string` \| `HTMLCanvasElement` | A selector string to your canvas element or an actual canvas element
Note: jQuery plugin of this library does not require selector as an option. | | `"#your-canvas-id"`
`speed` | false | `number` | Cloud movement speed. Positive speed go to the left, negative go to the right side. Zero value makes the clouds stand still. | `1` | `0`
`42`
`-21`
`layerCount` | false | `number` | Number of cloud paralax layers. Can go from 1 to 8. | `3` | `1`
`5`
`8`
`bgColor` | false | `string` \| `number[]` | Color of the sky behind the clouds | `[0.0, 102, 128]` | `"cyan"`
`"#f9c900"`
`"rgb(255, 128, 0)"`
`[0, 128, 220]`
`cloudColor1` | false | `string` \| `number[]` | Color of the first cloud layer. Cloud layers between first and last layer have a interpolated color. | `[25, 178, 204]` | `"cyan"`
`"#f9c900"`
`"rgb(255, 128, 0)"`
`[0, 128, 220]`
`cloudColor2` | false | `string` \| `number[]` | Color of the last cloud layer. Cloud layers between first and last layer have a interpolated color. | `[255, 255, 255]` | `"cyan"`
`"#f9c900"`
`"rgb(255, 128, 0)"`
`[0, 128, 220]`
------------
`klouds.create` returns an object with method that allow you to change clouds after you've created them, see the current values or start and stop the rendering of the clouds. The methods are the following:
method | description
----|----
start | Start the rendering of the clouds
stop | Stop the rendering of the clouds
getSpeed | Returns the current cloud speed
setSpeed | Changes the cloud speed
getLayerCount | Returns the current number of cloud layers
setLayerCount | Changes the number of cloud layers
getBgColor | Returns the current cloud background sky color
setBgColor | Changes the cloud background sky color
getCloudColor1 | Returns the current first cloud color
setCloudColor1 | Changes the first cloud color
getCloudColor2 | Returns the current last cloud color
setCloudColor2 | Changes the last cloud color
### Example
``` javascript
var clouds = klouds.create({
selector: '#my-cloud-canvas',
speed: 5,
layerCount: 7,
bgColor: 'white',
cloudColor1: 'white',
cloudColor2: 'red'
})
// later you could for example changed the speed
clouds.setSpeed(10)
```