added an example for drawing with p5js

bohnacker · May 24, 2019 · 1496638 · 1496638
1 parent 44ea0d9
commit 1496638
Showing 1 changed file with 63 additions and 0 deletions.
diff --git a/examples/4_drawing-with-p5js.html b/examples/4_drawing-with-p5js.html
@@ -0,0 +1,63 @@
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <script src="lib/p5.min.js"></script>
+    <script src="lib/Treemap.js"></script>
+    <script src="data/example-json.js"></script>
+    <style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
+  </head>
+  <body>
+    <script type="text/javascript">
+
+      // When you use another library to draw the treemap, creating and adding data to the treemap is just the same as in the examples before. 
+
+      var treemap;
+
+      function setup() {
+        // Using WebGL is quite easy with p5.js, so let's try that.
+        createCanvas(windowWidth, windowHeight, WEBGL);
+
+        let w = width * 0.5;
+        let h = height * 0.5;
+
+        treemap = new Treemap(-w / 2, -h / 2, w, h, {
+          sort: true,
+          direction: 'both',
+          padding: 0,
+        });
+
+        treemap.addData(dataJSON, {children:"children", count:"size"});
+
+        treemap.calculate();
+      }
+
+
+      function draw() {
+        background(255);
+
+        noFill();
+        stroke(0, 0.2);
+        strokeWeight(1);
+        colorMode(HSB, 360, 100, 100);
+
+        // Rotating the coordinate system according to the mouse position
+        rotateY((mouseX - width / 2) / 200);
+        rotateX(-(mouseY - height / 2) / 200);
+
+        treemap.draw(function(item) {
+          // Calculate saturation and brightness from the items level
+          let s = map(item.level, 0, item.root.depth, 100, 20);
+          let b = map(item.level, 0, item.root.depth, 40, 100);
+          fill(200, s, b);
+
+          // Again, use the level to move the item along the z-axis
+          push();
+          translate(0, 0, item.level * 20);
+          rect(item.x, item.y, item.w, item.h); 
+          pop();
+        });
+      }
+
+    </script>
+  </body>
+</html>