gl-heatmap2d - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

example/1e6.js

 var fit = require('canvas-fit')
 var mouseWheel = require('mouse-wheel')
 var mouseChange = require('mouse-change')
-var createHeatmap = require('gl-heatmap2d')
+var createHeatmap = require('../')
 var createSelectBox = require('gl-select-box')
@@ -6,0 +6,0 @@ var createSpikes = require('gl-spikes2d')

example/simple.js

 var fit = require('canvas-fit')
 var mouseWheel = require('mouse-wheel')
 var mouseChange = require('mouse-change')
-var createHeatmap = require('gl-heatmap2d')
+var createHeatmap = require('../')
 var createSelectBox = require('gl-select-box')
@@ -6,0 +6,0 @@ var createSpikes = require('gl-spikes2d')

heatmap.js

@@ -13,3 +13,3 @@ 'use strict'
 
-function GLHeatmap2D(
+function GLHeatmap2D (
   plot,
@@ -19,15 +19,17 @@ shader,
   positionBuffer,
+  weightBuffer,
   colorBuffer,
   idBuffer) {
-  this.plot           = plot
-  this.shader         = shader
-  this.pickShader     = pickShader
+  this.plot = plot
+  this.shader = shader
+  this.pickShader = pickShader
   this.positionBuffer = positionBuffer
-  this.colorBuffer    = colorBuffer
-  this.idBuffer       = idBuffer
-  this.xData          = []
-  this.yData          = []
-  this.shape          = [0,0]
-  this.bounds         = [Infinity, Infinity, -Infinity, -Infinity]
-  this.pickOffset     = 0
+  this.weightBuffer = weightBuffer
+  this.colorBuffer = colorBuffer
+  this.idBuffer = idBuffer
+  this.xData = []
+  this.yData = []
+  this.shape = [0, 0]
+  this.bounds = [Infinity, Infinity, -Infinity, -Infinity]
+  this.pickOffset = 0
 }
@@ -46,3 +48,3 @@
 
-proto.draw = (function() {
+proto.draw = (function () {
   var MATRIX = [
@@ -54,17 +56,20 @@ 1, 0, 0,
 
-  return function() {
-    var plot          = this.plot
-    var shader        = this.shader
-    var bounds        = this.bounds
-    var numVertices   = this.numVertices
+  return function () {
+    var plot = this.plot
+    var shader = this.shader
+    var bounds = this.bounds
+    var numVertices = this.numVertices
 
-    var gl            = plot.gl
-    var viewBox       = plot.viewBox
-    var dataBox       = plot.dataBox
+    if (numVertices <= 0) {
+      return
+    }
 
-    var boundX  = bounds[2]  - bounds[0]
-    var boundY  = bounds[3]  - bounds[1]
-    var dataX   = dataBox[2] - dataBox[0]
-    var dataY   = dataBox[3] - dataBox[1]
+    var gl = plot.gl
+    var dataBox = plot.dataBox
 
+    var boundX = bounds[2] - bounds[0]
+    var boundY = bounds[3] - bounds[1]
+    var dataX = dataBox[2] - dataBox[0]
+    var dataY = dataBox[3] - dataBox[1]
+
     MATRIX[0] = 2.0 * boundX / dataX
@@ -80,2 +85,4 @@ MATRIX[4] = 2.0 * boundY / dataY
 
+    uniforms.shape = this.shape
+
     var attributes = shader.attributes
@@ -85,10 +92,13 @@ this.positionBuffer.bind()
 
+    this.weightBuffer.bind()
+    attributes.weight.pointer(gl.UNSIGNED_BYTE, false)
+
     this.colorBuffer.bind()
     attributes.color.pointer(gl.UNSIGNED_BYTE, true)
 
-    gl.drawArrays(gl.TRIANGLES, 0, this.numVertices)
+    gl.drawArrays(gl.TRIANGLES, 0, numVertices)
   }
 })()
 
-proto.drawPick = (function() {
+proto.drawPick = (function () {
   var MATRIX = [
@@ -100,19 +110,22 @@ 1, 0, 0,
 
-  var PICK_VECTOR = [0,0,0,0]
+  var PICK_VECTOR = [0, 0, 0, 0]
 
-  return function(pickOffset) {
-    var plot          = this.plot
-    var shader        = this.pickShader
-    var bounds        = this.bounds
-    var numVertices   = this.numVertices
+  return function (pickOffset) {
+    var plot = this.plot
+    var shader = this.pickShader
+    var bounds = this.bounds
+    var numVertices = this.numVertices
 
-    var gl            = plot.gl
-    var viewBox       = plot.viewBox
-    var dataBox       = plot.dataBox
+    if (numVertices <= 0) {
+      return
+    }
 
-    var boundX  = bounds[2]  - bounds[0]
-    var boundY  = bounds[3]  - bounds[1]
-    var dataX   = dataBox[2] - dataBox[0]
-    var dataY   = dataBox[3] - dataBox[1]
+    var gl = plot.gl
+    var dataBox = plot.dataBox
 
+    var boundX = bounds[2] - bounds[0]
+    var boundY = bounds[3] - bounds[1]
+    var dataX = dataBox[2] - dataBox[0]
+    var dataY = dataBox[3] - dataBox[1]
+
     MATRIX[0] = 2.0 * boundX / dataX
@@ -123,4 +136,4 @@ MATRIX[4] = 2.0 * boundY / dataY
 
-    for(var i=0; i<4; ++i) {
-      PICK_VECTOR[i] = (pickOffset>>(i*8)) & 0xff
+    for (var i = 0; i < 4; ++i) {
+      PICK_VECTOR[i] = (pickOffset >> (i * 8)) & 0xff
     }
@@ -134,3 +147,4 @@
     uniforms.viewTransform = MATRIX
-    uniforms.pickOffset    = PICK_VECTOR
+    uniforms.pickOffset = PICK_VECTOR
+    uniforms.shape = this.shape
 
@@ -141,6 +155,9 @@ var attributes = shader.attributes
 
+    this.weightBuffer.bind()
+    attributes.weight.pointer(gl.UNSIGNED_BYTE, false)
+
     this.idBuffer.bind()
     attributes.pickId.pointer(gl.UNSIGNED_BYTE, false)
 
-    gl.drawArrays(gl.TRIANGLES, 0, this.numVertices)
+    gl.drawArrays(gl.TRIANGLES, 0, numVertices)
 
@@ -151,6 +168,6 @@ return pickOffset + this.shape[0] * this.shape[1]
 
-proto.pick = function(x, y, value) {
+proto.pick = function (x, y, value) {
   var pickOffset = this.pickOffset
   var pointCount = this.shape[0] * this.shape[1]
-  if(value < pickOffset || value >= pickOffset + pointCount) {
+  if (value < pickOffset || value >= pickOffset + pointCount) {
     return null
@@ -162,14 +179,14 @@ }
   return {
-    object:     this,
-    pointId:    pointId,
+    object: this,
+    pointId: pointId,
     dataCoord: [
-          xData[pointId%this.shape[0]],
-          yData[(pointId/this.shape[0])|0] ]
+      xData[pointId % this.shape[0]],
+      yData[(pointId / this.shape[0]) | 0]]
   }
 }
 
-proto.update = function(options) {
+proto.update = function (options) {
   options = options || {}
 
-  var shape = options.shape || [0,0]
+  var shape = options.shape || [0, 0]
 
@@ -185,3 +202,3 @@ var x = options.x || iota(shape[0])
   var colorValues = options.colorValues || [0, 0, 0, 1]
-  var colorCount  = colorLevels.length
+  var colorCount = colorLevels.length
 
@@ -191,4 +208,4 @@ var bounds = this.bounds
   var loy = bounds[1] = y[0]
-  var hix = bounds[2] = x[x.length-1]
-  var hiy = bounds[3] = y[y.length-1]
+  var hix = bounds[2] = x[x.length - 1]
+  var hiy = bounds[3] = y[y.length - 1]
 
@@ -198,32 +215,33 @@ var xs = 1.0 / (hix - lox)
 
-  var numVerts  = shape[0] * shape[1] * (WEIGHTS.length>>>1)
+  var numX = shape[0]
+  var numY = shape[1]
 
+  this.shape = [numX, numY]
+
+  var numVerts = (numX - 1) * (numY - 1) * (WEIGHTS.length >>> 1)
+
   this.numVertices = numVerts
 
-  var colors    = pool.mallocUint8  (numVerts * 4)
+  var colors = pool.mallocUint8(numVerts * 4)
   var positions = pool.mallocFloat32(numVerts * 2)
-  var ids       = pool.mallocUint32 (numVerts)
+  var weights   = pool.mallocUint8 (numVerts * 2)
+  var ids = pool.mallocUint32(numVerts)
 
-  var numX = shape[0]
-  var numY = shape[1]
-
-  this.shape = [numX, numY]
-
   var ptr = 0
 
-  for(var j=0; j<numY-1; ++j) {
+  for (var j = 0; j < numY - 1; ++j) {
     var yc0 = ys * (y[j] - loy)
-    var yc1 = ys * (y[j+1] - loy)
-    for(var i=0; i<numX-1; ++i) {
+    var yc1 = ys * (y[j + 1] - loy)
+    for (var i = 0; i < numX - 1; ++i) {
       var xc0 = xs * (x[i] - lox)
-      var xc1 = xs * (x[i+1] - lox)
+      var xc1 = xs * (x[i + 1] - lox)
 
-      for(var dd=0; dd<WEIGHTS.length; dd+=2) {
+      for (var dd = 0; dd < WEIGHTS.length; dd += 2) {
         var dx = WEIGHTS[dd]
-        var dy = WEIGHTS[dd+1]
-        var offset = (j+dy)*numX + (i+dx)
+        var dy = WEIGHTS[dd + 1]
+        var offset = (j + dy) * numX + (i + dx)
         var zc = z[offset]
         var colorIdx = bsearch.le(colorLevels, zc)
         var r, g, b, a
-        if(colorIdx < 0) {
+        if (colorIdx < 0) {
           r = colorValues[0]
@@ -233,29 +251,32 @@ g = colorValues[1]
           a = colorValues[3]
-        } else if(colorIdx === colorCount-1) {
-          r = colorValues[4*colorCount-4]
-          g = colorValues[4*colorCount-3]
-          b = colorValues[4*colorCount-2]
-          a = colorValues[4*colorCount-1]
+        } else if (colorIdx === colorCount - 1) {
+          r = colorValues[4 * colorCount - 4]
+          g = colorValues[4 * colorCount - 3]
+          b = colorValues[4 * colorCount - 2]
+          a = colorValues[4 * colorCount - 1]
         } else {
           var t = (zc - colorLevels[colorIdx]) /
-            (colorLevels[colorIdx+1] - colorLevels[colorIdx])
+            (colorLevels[colorIdx + 1] - colorLevels[colorIdx])
           var ti = 1.0 - t
-          var i0 = 4*colorIdx
-          var i1 = 4*(colorIdx+1)
-          r = ti*colorValues[i0]   + t*colorValues[i1]
-          g = ti*colorValues[i0+1] + t*colorValues[i1+1]
-          b = ti*colorValues[i0+2] + t*colorValues[i1+2]
-          a = ti*colorValues[i0+3] + t*colorValues[i1+3]
+          var i0 = 4 * colorIdx
+          var i1 = 4 * (colorIdx + 1)
+          r = ti * colorValues[i0] + t * colorValues[i1]
+          g = ti * colorValues[i0 + 1] + t * colorValues[i1 + 1]
+          b = ti * colorValues[i0 + 2] + t * colorValues[i1 + 2]
+          a = ti * colorValues[i0 + 3] + t * colorValues[i1 + 3]
         }
 
-        colors[4*ptr]      = 255*r
-        colors[4*ptr+1]    = 255*g
-        colors[4*ptr+2]    = 255*b
-        colors[4*ptr+3]    = 255*a
+        colors[4 * ptr] = 255 * r
+        colors[4 * ptr + 1] = 255 * g
+        colors[4 * ptr + 2] = 255 * b
+        colors[4 * ptr + 3] = 255 * a
 
-        positions[2*ptr]   = (1 - dx) * xc0 + dx * xc1
-        positions[2*ptr+1] = (1 - dy) * yc0 + dy * yc1
+        positions[2*ptr] = xc0*.5 + xc1*.5;
+        positions[2*ptr+1] = yc0*.5 + yc1*.5;
 
-        ids[ptr] = j*numX + i
+        weights[2*ptr] = dx;
+        weights[2*ptr+1] = dy;
 
+        ids[ptr] = j * numX + i
+
         ptr += 1
@@ -267,14 +288,17 @@ }
   this.positionBuffer.update(positions)
-  this.colorBuffer.   update(colors)
-  this.idBuffer.      update(ids)
+  this.weightBuffer.update(weights)
+  this.colorBuffer.update(colors)
+  this.idBuffer.update(ids)
 
   pool.free(positions)
   pool.free(colors)
+  pool.free(weights)
   pool.free(ids)
 }
 
-proto.dispose = function() {
+proto.dispose = function () {
   this.shader.dispose()
   this.pickShader.dispose()
   this.positionBuffer.dispose()
+  this.weightBuffer.dispose()
   this.colorBuffer.dispose()
@@ -285,11 +309,12 @@ this.idBuffer.dispose()
 
-function createHeatmap2D(plot, options) {
+function createHeatmap2D (plot, options) {
   var gl = plot.gl
 
-  var shader     = createShader(gl, shaders.vertex, shaders.fragment)
+  var shader = createShader(gl, shaders.vertex, shaders.fragment)
   var pickShader = createShader(gl, shaders.pickVertex, shaders.pickFragment)
 
   var positionBuffer = createBuffer(gl)
-  var colorBuffer    = createBuffer(gl)
-  var idBuffer       = createBuffer(gl)
+  var weightBuffer   = createBuffer(gl)
+  var colorBuffer = createBuffer(gl)
+  var idBuffer = createBuffer(gl)
 
@@ -301,2 +326,3 @@ var heatmap = new GLHeatmap2D(
     positionBuffer,
+    weightBuffer,
     colorBuffer,
@@ -303,0 +329,0 @@ idBuffer)

lib/shaders.js

@@ -0,0 +0,0 @@ 'use strict'

package.json

 {
   "name": "gl-heatmap2d",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "2D heatmap plots",
@@ -34,3 +34,11 @@ "main": "heatmap.js",
     "typedarray-pool": "^1.1.0"
+  },
+  "devDependencies": {
+    "canvas-fit": "^1.5.0",
+    "gl-plot2d": "^1.2.0",
+    "gl-select-box": "^1.0.1",
+    "gl-spikes2d": "^1.0.1",
+    "mouse-change": "^1.3.0",
+    "mouse-wheel": "^1.2.0"
   }
 }

README.md

@@ -0,0 +0,0 @@ gl-heatmap2d

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20271

increased by8.97%

Lines of code

528

increased by3.94%

Worsened metrics

Dev dependency count

6

increased byInfinity%

No dependency changes