OpenJsCad/grilledemo.html
Joost Nieuwenhuijse c6a95b7de4 Added Grille demo
2012-03-03 13:00:38 +01:00

338 lines
13 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 Grille</title>
</head>
<body onload="onload()">
<h1>OpenJsCad demo: Parametric Grille</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" style="height: 500px">
// Here we define the user editable parameters:
function getParameterDefinitions() {
return [
{ name: 'outerwidth', caption: 'Outer width of grille:', type: 'float', default: 190 },
{ name: 'outerheight', caption: 'Outer height of grille:', type: 'float', default: 120 },
{ name: 'outerdepth', caption: 'Outer depth of grille:', type: 'float', default: 12 },
{ name: 'thickness', caption: 'Wall thickness:', type: 'float', default: 2.5 },
{ name: 'innerdistance', caption: 'Inner standoff distance:', type: 'float', default: 2 },
{ name: 'bladescale', caption: 'Relative size of blades (1.0 is default):', type: 'float', default: 1 },
{ name: 'numdividers', caption: 'Number of vertical dividers:', type: 'int', default: 2 },
{
name: 'addlooseners',
type: 'choice',
caption: 'Add loops (for easy removal):',
values: [0, 1],
captions: ["No", "Yes"],
default: 1,
},
{
name: 'show',
type: 'choice',
caption: 'Show:',
values: ["all", "grille", "holders"],
captions: ["All", "Grille (for printing)", "Holders (for printing)"],
default: "all",
},
{
name: 'mouseears',
type: 'choice',
caption: 'Add mouse ears:',
values: [0, 1],
captions: ["No", "Yes"],
default: 1,
},
{
name: 'quality',
type: 'choice',
caption: 'Quality:',
values: [0, 1],
captions: ["Draft", "Final"],
default: 0,
},
];
}
function main(params)
{
var outerwidth = params.outerwidth;
var outerheight = params.outerheight;
var thickness = params.thickness;
var outerdepth = params.outerdepth;
var innerdistance = params.innerdistance;
var bladescale = params.bladescale;
var draft = params.quality == 0;
var marginleftright = 21;
var margintopbottom = 15;
var bladedistance = 12 * bladescale;
var frontroundradius = 5;
frontroundradius = Math.max(frontroundradius, thickness+0.2);
var outerroundradius = 3;
outerroundradius = Math.max(outerroundradius, thickness+0.2);
outerdepth = Math.max(outerdepth, outerroundradius);
outerdepth = Math.max(outerdepth, innerdistance+thickness);
var frontextend = innerdistance + bladescale*12 + thickness - outerdepth;
frontextend = Math.max(frontextend, 1.5);
var bladewidth = outerwidth - 2*marginleftright;
var bladesheight = outerheight - 2*margintopbottom;
var numblades = Math.ceil(bladesheight / bladedistance) + 1;
var topnotchsize = new CSG.Vector3D([20, 8, 3]);
var topnotchpos = new CSG.Vector3D([outerwidth/2-thickness - topnotchsize.x/2, outerheight/2-thickness - topnotchsize.y/2, topnotchsize.z/2]);
var bottomnotchsize = new CSG.Vector3D([12, 4, topnotchsize.z]);
var bottomnotchpos = new CSG.Vector3D([outerwidth/2-thickness - 4 - bottomnotchsize.x/2, -outerheight/2+thickness + bottomnotchsize.y/2, bottomnotchsize.z/2]);
var roundresolution = draft? 4 : 16;
var result = new CSG();
if(params.show != "holders")
{
// build the shell:
var z0plane = CSG.Plane.fromNormalAndPoint([0, 0, -1], [0, 0, 0]);
var outershell = CSG.roundedCube({center: [0,0,0], radius: [outerwidth/2, outerheight/2, outerdepth], roundradius: outerroundradius, resolution: roundresolution});
outershell = outershell.cutByPlane(z0plane);
var innershell = CSG.roundedCube({center: [0,0,0], radius: [outerwidth/2-thickness, outerheight/2-thickness, outerdepth-thickness], roundradius: outerroundradius-thickness, resolution: roundresolution});
innershell = innershell.cutByPlane(z0plane);
var shell = outershell.subtract(innershell);
var frontextendoutershell = CSG.roundedCube({center: [0,0,0], radius: [bladewidth/2+thickness, bladesheight/2+thickness, outerdepth+frontextend+frontroundradius+thickness], roundradius: frontroundradius, resolution: roundresolution});
var frontextendinnershell = CSG.roundedCube({center: [0,0,0], radius: [bladewidth/2, bladesheight/2, outerdepth+frontextend+frontroundradius+thickness+100], roundradius: frontroundradius-thickness, resolution: roundresolution});
frontextendinnershell = frontextendinnershell.cutByPlane(z0plane);
var plane3 = CSG.Plane.fromNormalAndPoint([0, 0, 1], [0, 0, outerdepth+frontextend+100]);
frontextendinnershell = frontextendinnershell.cutByPlane(plane3);
var plane1 = CSG.Plane.fromNormalAndPoint([0, 0, 1], [0, 0, outerdepth+frontextend]);
frontextendoutershell = frontextendoutershell.cutByPlane(plane1);
var plane2 = CSG.Plane.fromNormalAndPoint([0, 0, -1], [0, 0, innerdistance]);
frontextendoutershell = frontextendoutershell.cutByPlane(plane2);
shell = shell.subtract(frontextendinnershell);
var frontextendshell = frontextendoutershell.subtract(frontextendinnershell);
shell = shell.union(frontextendshell);
// build a blade:
var curvedpath = CSG.Path2D.arc({
center: [0,0,0],
radius: 15 * bladescale,
startangle: 20,
endangle: 80,
resolution: draft? 8:32,
});
var blade = curvedpath.rectangularExtrude(thickness, bladewidth, draft? 4:16, true);
var bladecenter = blade.getBounds()[0].plus(blade.getBounds()[1]).times(0.5);
blade = blade.translate(bladecenter.negated());
blade = blade.rotateY(-90);
blade = blade.translate([0, 0, -blade.getBounds()[0].z+innerdistance]);
var bladesize = blade.getBounds()[1].minus(blade.getBounds()[0]);
// add the blades to the shell:
var blades = new CSG();
for(var i = 0; i < numblades; i++)
{
var topy = bladesheight/2 + thickness - i*bladedistance;
var translatedblade = blade.translate([0, topy-bladesize.y/2, 0]);
blades = blades.union(translatedblade);
}
blades = blades.intersect(frontextendinnershell);
var grille = shell;
grille = shell.union(blades);
// add the dividers:
var dividers = new CSG();
if(params.numdividers > 0)
{
var w1 = (bladewidth - params.numdividers * thickness)/(params.numdividers+1);
for(var i = 0; i < params.numdividers; i++)
{
var x = -(params.numdividers-1)*(w1+thickness)/2 + i*(w1+thickness);
var z1 = outerdepth+frontextend;
var divider = CSG.cube({center: [x, 0, (z1+innerdistance)/2], radius: [thickness/2, bladesheight/2, (z1-innerdistance)/2]});
dividers = dividers.union(divider);
}
}
grille = grille.union(dividers);
// create the notches:
var notches = new CSG();
var topnotch1 = CSG.cube({center: topnotchpos, radius: topnotchsize.times(0.5) });
notches = notches.union(topnotch1);
var topnotch2 = CSG.cube({center: [-topnotchpos.x, topnotchpos.y, topnotchpos.z], radius: topnotchsize.times(0.5) });
notches = notches.union(topnotch2);
var bottomnotch1 = CSG.cube({center: bottomnotchpos, radius: bottomnotchsize.times(0.5) });
notches = notches.union(bottomnotch1);
var bottomnotch2 = CSG.cube({center: [-bottomnotchpos.x, bottomnotchpos.y, bottomnotchpos.z], radius: bottomnotchsize.times(0.5) });
notches = notches.union(bottomnotch2);
notches = notches.intersect(outershell);
grille = grille.union(notches);
result = result.union(grille);
// create the looseners:
if(params.addlooseners != 0)
{
var loosenerinnerwidth = 5;
var loosenerinnerheight = 2;
var loosenerdepth = 4;
var loosener = CSG.cube({center: [0, -outerheight/2 - loosenerinnerheight/2, loosenerdepth/2],
radius: [loosenerinnerwidth/2+thickness, loosenerinnerheight/2+thickness, loosenerdepth/2]});
loosener = loosener.subtract(CSG.cube({center: [0, -outerheight/2 - loosenerinnerheight/2, loosenerdepth/2],
radius: [loosenerinnerwidth/2, loosenerinnerheight/2, loosenerdepth/2]}));
var loosenerx = -outerwidth/2 + loosenerinnerwidth/2 + 5 + thickness;
var looseners = loosener.translate([loosenerx, 0, 0]);
looseners = looseners.union(loosener.translate([-loosenerx, 0, 0]));
result = result.union(looseners);
}
if(params.mouseears != 0)
{
for(var i = 0; i < 4; i++)
{
var xpos=outerwidth/2-10;
var ypos=outerheight/2;
if(i&1) xpos = -xpos;
if(i&2) ypos = -ypos;
var cylinder = CSG.cylinder({start: [xpos, ypos, 0], end: [xpos, ypos, 0.5], radius: 15});
result = result.union(cylinder);
}
for(var i = 0; i < 4; i++)
{
var xpos=bladewidth/2 + thickness/2;
var ypos=bladesheight/2 + thickness/2;
if(i&1) xpos = -xpos;
if(i&2) ypos = -ypos;
var cyl1 = CSG.cylinder({start: [xpos, ypos, 0], end: [xpos, ypos, 0.5], radius: 15});
var cyl2 = CSG.cylinder({start: [xpos, ypos, 0], end: [xpos, ypos, innerdistance], radius: 5});
result = result.union(cyl1.union(cyl2));
}
}
}
if(params.show != "grille")
{
// create the holders:
var holderyoffset = 0.5;
var holderzoffset = 1;
var holderwidth = 10;
var holderthickness = 3;
var holdertopclipheight = 4;
var holderbottomclipheight = 2;
var holderscrewholeradius = 2;
var holderscrewholedistance = 6;
var holderx;
if(params.show == "holders")
{
// just the holders:
holderx = holderwidth/2+2;
}
else
{
holderx = bottomnotchpos.x + bottomnotchsize.x/2 - holderwidth/2;
}
var holdery1 = topnotchpos.y - topnotchsize.y/2 - holderyoffset;
var holdery2 = bottomnotchpos.y + bottomnotchsize.y/2 + holderyoffset;
var holdery0 = holdery1+holdertopclipheight;
var holdery3 = holdery2-holderbottomclipheight;
var holder = CSG.cube({center: [0, (holdery1 + holdery2)/2 , holderthickness/2],
radius: [holderwidth/2, (holdery1-holdery2)/2, holderthickness/2]});
var d1 = 7;
var holdery1a = holdery1 - d1;
var holdery2a = holdery2 + d1;
var holderz1 = topnotchsize.z + holderzoffset;
var holderz2 = holderz1 + holderthickness;
holder = holder.union(CSG.cube({
center: [0, (holdery1a+holdery1)/2, holderz2/2],
radius: [holderwidth/2, (holdery1-holdery1a)/2, holderz2/2]
}));
holder = holder.union(CSG.cube({
center: [0, (holdery2a+holdery2)/2, holderz2/2],
radius: [holderwidth/2, (holdery2a-holdery2)/2, holderz2/2]
}));
holder = holder.union(CSG.cube({
center: [0, (holdery0+holdery1a)/2, (holderz2+holderz1)/2],
radius: [holderwidth/2, (holdery0-holdery1a)/2, (holderz2-holderz1)/2]
}));
holder = holder.union(CSG.cube({
center: [0, (holdery2a+holdery3)/2, (holderz2+holderz1)/2],
radius: [holderwidth/2, (holdery2a-holdery3)/2, (holderz2-holderz1)/2]
}));
var screwhole = CSG.cylinder({start: [0,0,0], end: [0, 0, holderthickness], radius: holderscrewholeradius, resolution: 16});
holder = holder.subtract(screwhole.translate([0, holdery1a-holderscrewholedistance, 0]));
holder = holder.subtract(screwhole.translate([0, holdery2a+holderscrewholedistance, 0]));
holder = holder.setColor(0, 1, 0);
var holders = holder.translate([holderx,0,0]);
holders = holders.union(holder.translate([-holderx,0,0]));
if(params.show == "holders")
{
holders = holders.rotateZ(90);
}
result = result.union(holders);
}
result = result.rotateZ(90);
return result;
}
</textarea><br>
<input type="submit" value="Update" onclick="updateSolid(); return false;">
<br><br>
</body>
</html>