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>
|
||||
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>
|
||||
Loading…
Reference in a new issue