From 858a40bb418efa7a782763816ba9b4d24451504d Mon Sep 17 00:00:00 2001
From: Joost Nieuwenhuijse <joost@newhouse.nl>
Date: Wed, 15 Feb 2012 15:09:10 +0100
Subject: [PATCH] Added parametric S hook demo

---
 hookdemo.html | 179 ++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html    |   7 +-
 2 files changed, 185 insertions(+), 1 deletion(-)
 create mode 100644 hookdemo.html
diff --git a/hookdemo.html b/hookdemo.html
new file mode 100644
index 0000000..b360a75
--- /dev/null
+++ b/hookdemo.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+
+<html><head>
+  <script src="lightgl.js"></script>
+  <script src="csg.js"></script>
+  <script src="openjscad.js"></script>
+  <style>
+
+body {
+  font: 14px/20px 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  max-width: 820px;
+  margin: 0 auto;
+  padding: 10px;
+}
+
+pre, code, textarea {
+  font: 12px/20px Monaco, monospace;
+  border: 1px solid #CCC;
+  border-radius: 3px;
+  background: #F9F9F9;
+  padding: 0 3px;
+  color: #555;
+}
+pre, textarea {
+  padding: 10px;
+  width: 100%;
+}
+textarea {
+  height: 200px;
+}
+textarea:focus {
+  outline: none;
+}
+
+canvas { cursor: move; }
+
+  </style>
+<link rel="stylesheet" href="openjscad.css" type="text/css">
+
+<script>
+
+var gProcessor=null;
+
+// Show all exceptions to the user:
+OpenJsCad.AlertUserOfUncaughtExceptions();
+
+function onload()
+{
+  gProcessor = new OpenJsCad.Processor(document.getElementById("viewer"));
+  updateSolid();
+}
+
+function updateSolid()
+{
+  gProcessor.setJsCad(document.getElementById('code').value);
+}
+</script>
+<title>OpenJsCad demo: Parametric S hook</title>  
+</head>
+<body onload="onload()">
+  <h1>OpenJsCad demo: Parametric S hook</h1>
+<div id="viewer"></div>
+  <h2>Source code</h2>
+Below is the OpenJsCad script for this demo. To build your own models, create a .jscad script
+and use the <a href="processfile.html"><b>OpenJsCad parser</b></a>. For more information see the
+<a href="index.html">OpenJsCad documentation</a>. 
+<br><br> 
+<textarea id="code">
+// Here we define the user editable parameters: 
+function getParameterDefinitions() {
+  return [
+    { name: 'topdiameter', caption: 'Inner diameter of top hook:', type: 'float', default: 10 },
+    { name: 'clampfactor', caption: 'Snugness of top hook (0 - 100):', type: 'float', default: 20 },
+    { name: 'cliplength', caption: 'Top hook clip length:', type: 'float', default: 5 },
+    { name: 'bottomdiameter', caption: 'Inner diameter of bottom hook:', type: 'float', default: 15 },
+    { name: 'height', caption: 'Outer height of the hook:', type: 'float', default: 50 },
+    { name: 'thickness', caption: 'Thickness:', type: 'float', default: 5 },
+    { name: 'width', caption: 'Width:', type: 'float', default: 10 },
+    {
+      name: 'rounded', 
+      type: 'choice',
+      caption: 'Rounded edges',
+      values: [0, 1],
+      captions: ["No", "Yes (rendering will take a long time!)"], 
+      default: 0,
+    },    
+    { name: 'roundness', caption: 'Diameter of rounded edges (if enabled):', type: 'float', default: 1 },
+  ];
+}
+
+function main(params) {
+  var pathresolution = 16;
+  var expandresolution = 16;
+  
+  // construct the 2D path:
+  var topradius = params.topdiameter/2;
+  var bottomradius = params.bottomdiameter/2;
+  var halfthickness = params.thickness/2;
+  topradius += halfthickness;
+  bottomradius += halfthickness;
+  
+  var roundness = params.roundness;
+  if(params.rounded == 0)
+  {
+    roundness = 0;
+  }
+  roundness = Math.min(roundness, halfthickness-0.1, params.width/2-0.1);
+  if(roundness < 0) roundness = 0;
+  
+  var clampfactor = params.clampfactor / 100;
+  if(clampfactor < 0) clampfactor = 0;
+  if(clampfactor >= 1) clampfactor = 1;
+  clampfactor *= (topradius-halfthickness)/topradius;  
+  
+  var topstartangle = - 180 * Math.acos(1 - 2*clampfactor) / Math.PI;
+  var tophookcenter = new CSG.Vector2D(topradius, 0);
+  var tophookstart = tophookcenter.plus(CSG.Vector2D.fromAngleDegrees(topstartangle).times(topradius));
+  var circledistance = params.height - topradius - bottomradius - 2 * params.thickness;
+  if(circledistance < 0) circledistance = 0;
+  var bottomhookcenter = new CSG.Vector2D(-bottomradius, -circledistance);
+  var gravityangle = 90 - tophookcenter.minus(bottomhookcenter).angleDegrees();
+  
+  var path = new CSG.Path2D();
+
+  // top hook curve:
+  if(params.cliplength > 0)
+  {
+    var clipstart = new CSG.Vector2D([0, -1]).times(params.cliplength).plus(tophookstart);
+    path = path.appendPoint(clipstart);
+  }
+  var topcurvepath = CSG.Path2D.arc({
+    center: tophookcenter,
+    radius: topradius,
+    startangle: topstartangle,
+    endangle: 180,
+    resolution: pathresolution,
+    maketangent: true,
+  });
+  path = path.concat(topcurvepath);
+
+  // straight middle part:
+  if(circledistance > 0)
+  {
+    path = path.appendPoint([0, -circledistance]);
+  }
+  
+  // bottom hook curve:
+  var bottomcurvepath = CSG.Path2D.arc({
+    center: bottomhookcenter,
+    radius: bottomradius,
+    startangle: 0,
+    endangle: -180-gravityangle,
+    resolution: pathresolution,
+    maketangent: true,
+  });
+  path = path.concat(bottomcurvepath);
+  
+  // center around origin, and rotate as it would hang under gravity:
+  var centerpoint = tophookcenter.plus(bottomhookcenter).times(0.5);  
+  var matrix = CSG.Matrix4x4.translation(centerpoint.negated().toVector3D(0));
+  matrix = matrix.multiply(CSG.Matrix4x4.rotationZ(gravityangle));
+  path = path.transform(matrix);
+
+  // extrude the path to create a 3D solid
+  var result = path.rectangularExtrude(2*(halfthickness-roundness), params.width-2*roundness, pathresolution, true);
+  result = result.translate([0, 0, -params.width/2+roundness]);
+  
+  // expand to create rounded corners:
+  if(roundness > 0)
+  {
+    result = result.expand(roundness, expandresolution);
+  }
+   
+  return result;
+}</textarea><br>
+<input type="submit" value="Update" onclick="updateSolid(); return false;">
+<br><br>
+</body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 56f5e5f..63d0055 100644
--- a/index.html
+++ b/index.html
@@ -115,7 +115,10 @@ Click and drag to rotate the model around the origin.<br>
 Shift+Drag moves the model around.<br>
 Alt+drag zooms (by changing the distance between camera and model).
 <h2>Demos</h2>
-Try the <a href="gearsdemo.html">Gears demo</a>!
+<ul>
+<li><a href="gearsdemo.html">Involute Gears</a></li>
+<li><a href="hookdemo.html">Parametric S hook</a></li>
+</ul>
 <h2>License</h2>
 Copyright (c) 2012 Joost Nieuwenhuijse.
 Uses CSG.js, <a href="https://github.com/evanw/csg.js">original</a> copyright (c) 2011 Evan Wallace, 
@@ -435,6 +438,7 @@ var extruded=shape2d.extrude({
   twiststeps: 100        // create 100 slices
 });
 </pre>
+For an example of 2D shapes see the <a href="hookdemo.html">Parametric S hook</a> demo.
 
 <h2>2D Paths</h2>
 A path is simply a series of points, connected by lines. A path can be open or closed (an additional line
@@ -553,6 +557,7 @@ function main(params) {
   return result;
 }
 </pre>
+Or see the <a href="gearsdemo.html">Gears demo</a> for another example of interactive parameters.
 
 </body>
 </html>
\ No newline at end of file
