Added parametric S hook demo
This commit is contained in:
Joost Nieuwenhuijse
parent
b059ed958a
commit
858a40bb41
179
hookdemo.html
Normal file
179
hookdemo.html
Normal file
|
|
@ -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>
|
||||||
|
|
@ -115,7 +115,10 @@ Click and drag to rotate the model around the origin.<br>
|
||||||
Shift+Drag moves the model around.<br>
|
Shift+Drag moves the model around.<br>
|
||||||
Alt+drag zooms (by changing the distance between camera and model).
|
Alt+drag zooms (by changing the distance between camera and model).
|
||||||
<h2>Demos</h2>
|
<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>
|
<h2>License</h2>
|
||||||
Copyright (c) 2012 Joost Nieuwenhuijse.
|
Copyright (c) 2012 Joost Nieuwenhuijse.
|
||||||
Uses CSG.js, <a href="https://github.com/evanw/csg.js">original</a> copyright (c) 2011 Evan Wallace,
|
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
|
twiststeps: 100 // create 100 slices
|
||||||
});
|
});
|
||||||
</pre>
|
</pre>
|
||||||
|
For an example of 2D shapes see the <a href="hookdemo.html">Parametric S hook</a> demo.
|
||||||
|
|
||||||
<h2>2D Paths</h2>
|
<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
|
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;
|
return result;
|
||||||
}
|
}
|
||||||
</pre>
|
</pre>
|
||||||
|
Or see the <a href="gearsdemo.html">Gears demo</a> for another example of interactive parameters.
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in a new issue