OpenJsCad/hookdemo.html
2012-02-15 15:09:10 +01:00

179 lines
5.3 KiB
HTML

<!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>