Android OpenGL (ES 2.0) Heatmap
Android OpenGL ES 2.0 implementation of webgl-heatmap.js by Florian Bösch.
Documentation
Screenshots
(Note: Colorization does not work yet.)
Notes
Tracer for OpenGL ES configuration
Application package: pyalot.heatmap.opengl
Activity to launch: org.example.heatmap.OpenGLES20Activity
Progress
Java Code equivalent to JS code
Framebuffer
GLHeatmap (didn't set depth and antialias, glBlendFunc right?; quad_l as FloatBuffer?)
Heights (Update glVertexAttribPointer)
Main
Node
Shader
Texture
GL code works
getColor function works
WebGL Heatmap
webgl-heatmap.js is a JavaScript library for high performance heatmap display.
Demo
Live Demo at codeflow.org
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: ...
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
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
heatmap.addPoints([{x:x, y:y, size:size, intensity:intensity}]);
Draw queued data points:
heatmap.update()
Display the heatmap
heatmap.display()
Multiply all values in the heatmap by a number (useful for decay)
heatmap.multiply(0.995)
Clamp all values in the heatmap to between two values:
heatmap.clamp(0.0, 1.0)
Blur all values a little:
heatmap.blur()
License
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