a reasonable proof-of-concept implementation of taking pics and animated

gifs of blockscad meshes.

blockscad/blockscad.js

@@ -83,7 +83,7 @@ Blockscad.init = function() {
     el.style.width = bBox.width + 'px';
 
     // resize the viewer  
-    if (gProcessor) {
+    if (gProcessor && gProcessor.viewer) {
       var h = gProcessor.viewerdiv.offsetHeight;
       var w = gProcessor.viewerdiv.offsetWidth;
       gProcessor.viewer.rendered_resize(w,h);
@@ -204,6 +204,12 @@ Blockscad.init = function() {
   $('#file-menu').on('change', '#importLocal', function(e) { readSingleFile(e, false);});
   $('#file-menu').on('change', '#importStl', function(e) { Blockscad.readStlFile(e);});
 
+  // what size should pics be taken at?
+  Blockscad.picSize = [230,230];
+  // hook up the pic-taking button
+  $("#picButton").click(Blockscad.takePic);
+  $("#rPicButton").click(Blockscad.takeRPic);
+
   //Create the openjscad processing object instance
   gProcessor = new Blockscad.Processor(document.getElementById("renderDiv"));
 
@@ -306,9 +312,11 @@ Blockscad.setColor = function(r,g,b) {
   // console.log("in setColor.  rgb:" + r + ";" + g + ';' + b);
   if (gProcessor && gProcessor.viewer){
     gProcessor.viewer.defaultColor = [r/255,g/255,b/255,1];
+    gProcessor.picviewer.defaultColor = [r/255,g/255,b/255,1];
     if (gProcessor.hasSolid()) {
       // I have a solid already rendered - change its color!
       gProcessor.viewer.setCsg(gProcessor.currentObject); 
+      gProcessor.picviewer.setCsg(gProcessor.currentObject); 
     }
   }
   Blockscad.defaultColor = Math.round(r) + ',' + Math.round(g) + ',' + Math.round(b);
@@ -366,23 +374,23 @@ $("#defColor").spectrum({
     });
   });
 
-  // hook up the pic-taking button
-  $("#picButton").click(Blockscad.takePic);
-  $("#rPicButton").click(Blockscad.takeRPic);
+
 }; // end Blockscad.init()
 
 Blockscad.takeRPic = function() {
   if (gProcessor) {
-    var thing = gProcessor.takeRotatingPic(0.7);
+    // takeRotatingPic(quality, numFrames)
+    // leave quality at 1! 
+    var thing = gProcessor.takeRotatingPic(1,17);
     // console.log("got rotating pic");
 
     // console.log(thing);
     var gif = gifshot.createGIF({
       'images': thing,
       'interval': 0.4,
-      'gifWidth': 200,
-      'gifHeight': 200,
-      'sampleInterval': 7,
+      'gifWidth': Blockscad.picSize[0],
+      'gifHeight': Blockscad.picSize[1],
+      'sampleInterval': 5,
     }, function(obj) {
       if (!obj.error) {
         var image = obj.image;
@@ -392,6 +400,7 @@ Blockscad.takeRPic = function() {
   }
 }
 Blockscad.savePic = function(image, name) {
+  if (image) {
     var bytestream = atob(image.split(',')[1]);
     var mimestring = image.split(',')[0].split(':')[1].split(';')[0];
 
@@ -406,12 +415,14 @@ Blockscad.savePic = function(image, name) {
 
     var blob = new Blob([ab], {type: "img/jpeg"});
     saveAs(blob, name);
+  }
 }
 Blockscad.takePic = function() {
-  if (gProcessor.viewer) {
+  if (gProcessor.picviewer) {
     // the parameter here is the jpeg quality - between 0 and 1.
-    var image = gProcessor.viewer.takePic(0.7);
+    var image = gProcessor.picviewer.takePic(0.85,0);
     // console.log("image",image);
+    if (image)
     Blockscad.savePic(image, $('#project-name').val() + '.jpg');
   }
 }
@@ -675,7 +686,7 @@ Blockscad.newProject = function() {
   $('#displayBlocks').click();
   // should I prompt a save here?  If I have a current project, I should just save it?  Or not?
   // if the user is logged in, I should auto-save to the backend.
-  console.log("in Blockscad.newProject");
+  // console.log("in Blockscad.newProject");
   // console.log("undo stack length is: ", Blockscad.undo.undoStack.length);
   // console.log("needToSave is: ", Blockscad.undo.needToSave);
   if (Blockscad.undo.needToSave) {
@@ -872,6 +883,9 @@ Blockscad.resetView = function() {
     if (gProcessor.viewer) {
       gProcessor.viewer.viewReset();
     }
+    if (gProcessor.picviewer) {
+      gProcessor.picviewer.viewReset();
+    }
   } 
 };
 

blockscad/csg.js

@@ -923,7 +923,46 @@ for solid CAD anyway.
             }
             return this.cachedBoundingBox;
         },
+        // returns an object with a center (3D array) and radius (number)
+        getBoundingSphere: function() {
+            if (!this.cachedBoundingSphere) {
+                var aabb;
+                if (!this.cachedBoundingBox)
+                    aabb = this.getBounds();
+                else aabb = this.cachedBoundingBox;
+                var sphere = {center: aabb[0].plus(aabb[1]).dividedBy(2), radius: 0 };
+                for (var i = 0; i < this.polygons.length; i++) {
+                  for (var j = 0; j < this.polygons[i].vertices.length; j++) {
+                    var v = this.polygons[i].vertices[j];
+                    sphere.radius = Math.max(sphere.radius, 
+                      new CSG.Vector3D(v.pos.x, v.pos.y, v.pos.z).minus(sphere.center).lengthSquared());
+                  }
+                }
+                sphere.radius = Math.sqrt(sphere.radius);
+                this.cachedBoundingSphere = sphere;
+
+            }
+            return this.cachedBoundingSphere;
+        }
 
+  // getBoundingSphere: function(aabb) {
+  //   // console.log(aabb);
+  //   // the sphere center is halfway between the min and max points for each coordinate
+  //   // to get the radius, go through all vertices (yuck) and test their distance from the center
+  //   // pick the biggest, and that's the radius.
+  //   // I use lengthSquared for per-vertex calcualations to avoid doing a square root on each vertex.
+  //   var sphere = {center: aabb[0].plus(aabb[1]).dividedBy(2), radius: 0 };
+  //   for (var i = 0; i < this.currentObject.polygons.length; i++) {
+  //     for (var j = 0; j < this.currentObject.polygons[i].vertices.length; j++) {
+  //       var v = this.currentObject.polygons[i].vertices[j];
+  //       sphere.radius = Math.max(sphere.radius, 
+  //         new CSG.Vector3D(v.pos.x, v.pos.y, v.pos.z).minus(sphere.center).lengthSquared());
+  //     }
+  //   }
+  //   sphere.radius = Math.sqrt(sphere.radius);
+  //   return sphere;
+
+  // },
         // returns true if there is a possibility that the two solids overlap
         // returns false if we can be sure that they do not overlap
         mayOverlap: function(csg) {

spectrum/LICENSE

+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
\ No newline at end of file