Klouds

Simple JavaScript library that generates animated clouds using WebGL.

Check out the demo here

Usage

Assuming that you have a canvas element on a page with an id my-canvas.

<canvas id="my-canvas"></canvas>

You can use the library in the following ways:

Using script tag

<!-- either download library files from the lib directory and link the file -->
<script src="klouds.min.js"></script>
<!-- or use a service like unpkg -->
<script src="https://unpkg.com/klouds"></script>
<!-- then call the function klouds.create -->
<script>
  klouds.create({
    selector: '#my-canvas'
  })
</script>

Using jQuery

<script src="jquery.min.js"></script>
<!-- klouds must be included after jquery -->
<script src="klouds.min.js"></script>
<script>
  $('#my-canvas').Klouds()
</script>

Using npm/yarn/bower etc.

npm install klouds

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.

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:

Example

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)