https://github.com/pyalot/webgl-heatmap
A high performance WebGL/JS heatmap display library
https://github.com/pyalot/webgl-heatmap
Last synced: 2 months ago
JSON representation
A high performance WebGL/JS heatmap display library
- Host: GitHub
- URL: https://github.com/pyalot/webgl-heatmap
- Owner: pyalot
- Created: 2013-02-03T23:51:47.000Z (about 13 years ago)
- Default Branch: master
- Last Pushed: 2015-06-05T22:50:19.000Z (almost 11 years ago)
- Last Synced: 2026-01-23T15:59:52.534Z (3 months ago)
- Language: CoffeeScript
- Size: 254 KB
- Stars: 916
- Watchers: 52
- Forks: 145
- Open Issues: 10
-
Metadata Files:
- Readme: readme.md
- License: license/bsd-license
Awesome Lists containing this project
- awesome-github-projects - webgl-heatmap - A high performance WebGL/JS heatmap display library ⭐915 `CoffeeScript` (📦 Legacy & Inactive Projects)
README
WebGL Heatmap
=============
webgl-heatmap.js is a JavaScript library for high performance heatmap display.
Demo
----
Live Demo at [codeflow.org](http://codeflow.org/entries/2013/feb/04/high-performance-js-heatmaps "")
How to use it
-------------
Instantiate a new heatmap, errors can be one of:
* Webgl is not supported
* No floating point texture support
* Floating point render target not supported
* Shader Compile Error: ...
* Shader Link Error: ...
```javascript
try{
var heatmap = createWebGLHeatmap({canvas: yourCanvas});
}
catch(error){
// handle the error
}
```
creation arguments
* canvas: the canvas you wish to draw on
* width: explicit width
* height: explicit height
* intensityToAlpha: defaults to true
* gradientTexture: texture used instead of color calculation, can be path or an image
Add a data point.
* x and y relative to the canvas in pixels
* size in pixels (radius)
* intensity between 0 and 1
```javascript
heatmap.addPoint(x, y, size, intensity);
```
Add a list of data points.
* x and y relative to the canvas in pixels
* size in pixels (radius)
* intensity between 0 and 1
```javascript
heatmap.addPoints([{x:x, y:y, size:size, intensity:intensity}]);
```
Draw queued data points:
```javascript
heatmap.update()
```
Display the heatmap
```javascript
heatmap.display()
```
Multiply all values in the heatmap by a number (useful for decay)
```javascript
heatmap.multiply(0.995)
```
Clamp all values in the heatmap to between two values:
```javascript
heatmap.clamp(0.0, 1.0)
```
Blur all values a little:
```javascript
heatmap.blur()
```
License
-------
Copyright (c) 2013, Florian Boesch http://codeflow.org/
WebGL Heatmap is licensed under any of the following licenses at your choosing:
* MIT: see mit-license
* GPL: see gplv*-license
* BSD: see bsd-license