deanm · rpeleg1970 · Apr 29, 2013
diff --git a/README b/README
@@ -21,6 +21,9 @@ documentation.  They should give you an idea of how to use the engine, and what
 it is capable of. demos/demo_utils.js implements some UI helpers, like moving
 camera when the canvas element is dragged on, etc.
 
+Update: Added utilities for generating y=f(x,y) graphs, wither from function or
+empiric data. See demos/sci_graph.html for usage (Ron Peleg)
+
 License:
   The engine code is free to use under the BSD license.  The examples / demos
   are (c) Dean McNamee, All rights reserved.

diff --git a/demos/sci_graph.html b/demos/sci_graph.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<!--
+JavaScript software 3d renderer &nbsp; &copy; 2009 Dean McNamee (dean at gmail)
+-->
+<html>
+<head>
+<title>3D graph</title>
+<style>
+  body * {
+    font-family: sans-serif;
+    font-size: 14px;
+  }
+  body.white {
+    background-color: white;
+    color: black;
+  }
+  body.black {
+    background-color: black;
+    color: white;
+  }
+  span.spaceyspan { margin-right: 20px; }
+  div.centeredDiv { text-align: center; }
+  li { list-style: none; }
+  td { padding-right: 10px; }
+</style>
+
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+<script src="../pre3d.js"></script>
+<script src="../pre3d_shape_utils.js"></script>
+<script src="../pre3d_path_utils.js"></script>
+<script src="demo_utils.js"></script>
+<script src="../pre3d_sci_graph.js"></script>
+<script>
+var data = [
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,4,5,3,7,4,2,0,0,0,0,3,9,13,12,8,7,2,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,4,5,3,7,4,2,0,0,0,0,3,7,13,12,8,7,2,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,4,5,3,7,4,2,0,0,0,0,3,7,13,12,8,7,2,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,4,5,3,7,4,2,0,0,0,0,2,7,13,12,8,7,2,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,4,5,3,7,4,2,0,0,0,0,1,7,13,12,8,7,2,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,4,5,3,7,4,2,0,0,0,0,1,7,13,12,8,7,2,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,4,5,3,7,4,2,0,0,0,0,1,7,13,11,8,7,2,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,4,5,3,7,4,2,0,0,0,0,1,7,13,11,8,7,2,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,4,5,3,7,4,2,0,0,0,0,1,7,13,11,8,7,2,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,4,5,3,7,4,2,0,0,0,0,1,7,13,11,8,7,2,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,4,5,3,7,4,2,0,0,0,0,1,7,12,11,8,7,2,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,4,5,3,7,4,2,0,0,0,0,1,7,10,11,8,7,2,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,4,5,3,7,4,2,0,0,0,0,1,7,10,11,8,7,2,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,4,5,3,7,4,2,0,0,0,0,0,5,10,11,8,7,2,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,4,5,3,7,4,2,0,0,0,0,0,5,10,8,8,7,2,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,4,5,3,7,4,2,0,0,0,0,0,5,10,9,8,7,2,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,3,6,4,7,3,2,0,0,0,0,0,5,10,9,8,7,2,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,4,7,10,6,6,5,2,0,0,0,0,0,5,10,9,9,7,2,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,4,6,9,10,13,8,8,7,2,0,0,0,0,5,10,11,9,7,2,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,3,4,6,9,12,12,16,11,9,8,3,1,0,0,0,5,10,9,9,7,2,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,3,4,5,7,12,12,15,17,16,10,8,5,1,0,0,0,0,2,3,4,2,0,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,3,4,5,9,12,15,17,19,21,18,12,9,5,1,0,0,0,0,2,3,4,2,0,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,3,4,5,9,11,15,14,18,19,19,17,12,9,5,1,0,0,0,0,2,3,4,2,0,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,3,4,7,7,11,15,16,21,22,19,20,17,12,9,5,1,0,0,0,0,2,3,4,2,0,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,3,4,6,10,11,12,16,21,16,23,20,20,17,12,9,5,1,0,0,0,0,2,3,4,2,0,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,3,4,7,10,11,12,16,18,22,22,23,20,20,17,12,9,5,1,0,0,0,0,2,3,4,2,0,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,3,4,7,9,11,12,15,18,16,23,23,23,20,20,17,12,9,5,1,0,0,0,0,2,3,4,2,0,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,4,7,9,11,12,15,18,17,22,22,23,23,20,20,17,12,9,5,1,0,0,0,0,2,3,4,2,0,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,4,7,9,11,12,15,16,17,24,21,22,23,23,20,20,17,12,9,5,1,0,0,0,0,2,3,4,2,0,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,4,6,10,10,11,15,16,19,23,23,23,22,23,23,20,20,17,12,9,5,1,0,0,0,0,2,3,4,2,0,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,4,6,10,10,11,15,16,19,22,23,24,22,22,23,23,20,20,17,12,9,5,1,0,0,0,0,2,3,4,2,0,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,4,6,10,10,11,15,16,18,22,22,23,24,22,22,23,23,20,20,17,12,9,5,1,0,0,0,0,2,3,4,2,0,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,4,6,10,10,11,15,16,18,22,22,22,23,24,22,22,23,23,20,20,17,12,9,5,1,0,0,0,0,2,3,4,2,0,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,4,6,10,10,11,15,16,16,19,22,22,22,23,24,22,22,23,23,20,20,17,12,9,5,1,0,0,0,0,2,3,4,2,0,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,4,6,10,10,11,15,16,16,18,23,22,22,22,23,24,22,22,23,23,20,20,17,12,9,5,1,0,0,0,0,2,3,4,2,0,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,3,4,7,10,10,11,15,16,16,19,18,23,23,22,23,23,24,22,22,23,23,20,20,17,12,9,5,1,0,0,0,0,2,3,4,2,0,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,3,4,7,10,10,12,13,16,16,18,18,21,24,23,22,23,23,24,22,22,23,23,20,20,17,12,9,5,1,0,0,0,0,2,3,4,2,0,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,4,7,10,10,11,15,16,16,18,18,23,21,24,23,22,23,23,24,22,22,23,23,20,20,17,12,9,5,1,0,0,0,0,2,3,4,2,0,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,3,4,7,10,10,11,15,16,16,18,18,22,22,21,24,23,22,23,23,24,22,22,23,23,20,20,17,12,9,5,1,0,0,0,0,2,3,4,2,0,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,1,3,5,7,7,10,12,15,16,16,18,19,22,22,22,21,24,23,22,23,23,24,22,22,23,23,20,20,17,12,9,5,1,0,0,0,0,2,3,4,2,0,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,0,3,4,7,9,10,11,15,15,18,18,18,21,22,22,22,21,24,23,22,23,23,24,22,22,23,23,20,20,17,12,9,5,1,0,0,0,0,2,3,4,2,0,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,1,5,6,9,11,11,13,15,18,18,18,21,21,22,22,22,21,24,23,22,23,23,24,22,22,23,23,20,20,17,12,9,5,1,0,0,0,0,2,3,4,2,0,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,0,1,6,7,7,12,15,16,18,18,18,21,21,21,22,22,22,21,24,23,22,23,23,24,22,22,23,23,20,20,17,12,9,5,1,0,0,0,0,2,3,4,2,0,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,1,1,6,11,7,11,15,16,16,18,22,21,21,21,22,22,22,21,24,23,22,23,23,24,22,22,23,23,20,20,17,12,9,5,1,0,0,0,0,2,3,4,2,0,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,1,3,5,8,9,11,16,16,16,19,22,21,21,21,22,22,22,21,24,23,22,23,23,24,22,22,23,23,20,20,17,12,9,5,1,0,0,0,0,2,3,4,2,0,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,1,3,5,8,13,10,15,16,16,17,22,21,21,21,22,22,22,21,24,23,22,23,23,24,22,22,23,23,20,20,17,12,9,5,1,0,0,0,0,2,3,4,2,0,0,0,0,0,0,0,0,0,0,0,0],
+[0,0,0,0,0,0,0,0,0,0,0,1,2,5,7,8,10,15,16,16,17,22,21,21,21,22,22,22,21,24,23,22,23,23,24,22,22,23,23,20,20,17,12,9,5,1,0,0,0,0,2,3,4,2,0,0,0,0,0,0,0,0,0,0,0,0]
+];
+
+  $(document).ready(function() {
+    var renderer = new Pre3d.Renderer($('#canvas')[0]);
+    var shape = SciGraph.makeGraph(data,20,20,10);
+    // var shape = SciGraph.makeGraph(SciGraph.func2Data(function(x,z) {return Math.sin(x)*Math.sin(z);}, {min:0,max:10,step:0.2}, {min:0,max:10,step:0.2}),20,20,10);
+    var color = new Pre3d.RGBA(0.23,0.7,0.76,0.9);
+    var cur_white = true;  // Default to black background.
+
+    function draw() {
+      renderer.fill_rgba = color;
+      renderer.bufferShape(shape);
+
+      if (cur_white) {
+        renderer.ctx.setFillColor(1, 1, 1, 1);
+        } else {
+        renderer.ctx.setFillColor(0, 0, 0, 1);
+      }
+      renderer.drawBackground();
+
+      renderer.drawBuffer();
+      renderer.emptyBuffer();
+    }
+
+    $('#shape').change( function(e) {
+      if($('#shape').val()=='sin') {
+        shape = SciGraph.makeGraph(SciGraph.func2Data(function(x,z) {return Math.sin(x)*Math.sin(z);}, {min:0,max:10,step:0.2}, {min:0,max:10,step:0.2}),20,20,5);
+      } else {
+        shape = SciGraph.makeGraph(data,20,20,10);
+      }
+      draw();
+    });
+
+    $(document).keydown(function(e) {
+      if (e.keyCode != 84)  // t
+      return;
+
+      if (cur_white) {
+        document.body.className = "black";
+        } else {
+        document.body.className = "white";
+      }
+      cur_white = !cur_white;
+      draw();
+    });
+
+    renderer.camera.focal_length = 2.5;
+    // Have the engine handle mouse / camera movement for us.
+    DemoUtils.autoCamera(renderer, 0, 0, -30, 0.40, -1.06, 0, draw);
+    draw();
+  });
+</script>
+</head>
+
+<body>
+<div id="toolbar"></div>
+<div class="centeredDiv">
+<canvas id="canvas" width="800" height="600">
+  Sorry, this demo requires a web browser which supports HTML5 canvas!
+</canvas>
+</div>
+
+
+<table>
+  <tr><td>Choose shape</td><td>&rarr;</td><td>
+      <select id="shape" name="shape">
+        <option value="sin">Sin(x) * Sin(z)</option>
+        <option value="emp" selected>Empiric data</option>
+      </select>
+  </td></tr>
+  <tr><td>Mouse</td><td>&rarr;</td><td>rotate around origin x and y axis</td></tr>
+  <tr><td>Mouse + ctrl</td><td>&rarr;</td><td>pan x / y</td></tr>
+  <tr><td>Mouse + shift</td><td>&rarr;</td><td>pan z</td></tr>
+  <tr><td>Mouse + ctrl + shift</td><td>&rarr;</td><td>adjust focal length</td></tr>
+  <tr><td>Keyboard 't'</td><td>&rarr;</td><td>toggle background white/black</td></tr>
+</table>
+
+<p>
+JavaScript software 3d renderer &nbsp; &copy;2009 Dean McNameea, example by Ron Peleg &copy;2013
+</p>
+
+</body>
+</html>
diff --git a/pre3d_sci_graph.js b/pre3d_sci_graph.js
@@ -0,0 +1,69 @@
+// (c) Dean McNamee <dean@gmail.com>, Ron Peleg <ron.peleg@gmail.com>.  All rights reserved.
+
+var SciGraph = (function() {
+
+  function maxV(_data) {
+    retval = 0;
+    for(z=0; z<_data.length; z++) {
+      for(x=0; x<_data[z].length; x++) {
+        retval = Math.max(retval, Math.abs(_data[z][x]));
+      }
+    }
+    return retval;
+  }
+
+  function makeGraph(_data,_facx, _facz, _facy) {
+    var s = new Pre3d.Shape();
+    s.vertices = [];
+    s.quads = [];
+    len_x = _data[0].length;
+    len_z = _data.length;
+    max_y = maxV(_data);
+
+
+    for(x=0; x<len_x; x++) {
+      for(z=0; z<len_z; z++) {
+        // normalize and then factor vertice values
+        s.vertices.push({
+          x: (x-len_x/2)/len_x*_facx,
+          z: (z-len_z/2)/len_z*_facz, 
+          y: _data[z][x]/max_y*_facy
+        });
+
+        // close quads
+        if(x>=1 && z>=1) {
+          prev = (x-1)*len_z;
+          curr = x*len_z;
+          s.quads.push( new Pre3d.QuadFace(prev+z-1,prev+z,curr+z,curr+z-1));
+          s.quads.push( new Pre3d.QuadFace(curr+z-1,curr+z,prev+z,prev+z-1));
+        }
+      }
+    }
+
+    Pre3d.ShapeUtils.averageSmooth(s,1);
+    // Pre3d.ShapeUtils.triangulate(s);
+    Pre3d.ShapeUtils.rebuildMeta(s);
+
+    return s;
+  }
+
+  // the _range paramaters are hash maps with the values {min: ##, max: ##, step: ##}
+  // the _func is a regular y=f(x,z)
+  function func2Data(_func,_xrange,_zrange) {
+    var data = [];
+    for(z=_zrange.min;z<=_zrange.max;z+=_zrange.step) {
+      row = [];
+      for(x=_xrange.min;x<=_xrange.max;x+=_xrange.step) {
+        row.push(_func(x,z));
+      }
+      data.push(row);
+    }
+    return data;
+  }
+
+
+  return {
+    func2Data: func2Data,
+    makeGraph: makeGraph
+  };
+})();