User Tools
Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
|
design_guide_path [2018/02/15 02:58] z3dev created |
design_guide_path [2018/06/12 14:13] (current) z3dev |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ==== Paths ==== | + | ==== Path ==== |
| - | A path is simply a series of points, connected by lines. A path can be open or closed (an additional line is drawn between the first and last point). | + | |
| - | Paths are supported through the CSG.Path2D class. The difference between a Path and a CAG is that a path is a 'thin' line, whereas a CAG is an enclosed area. | + | A path is a series of points, connected by very thin (invisible) line segments. Paths can be created by giving an array of points, or by calling various functions to create or extend another path. |
| - | Paths can be constructed either by giving the constructor an array of points, or through the various functions, which include: | + | <code javascript> |
| - | * arc(endpoint, options): return a circular or ellipsoid curved path (see example below for usage). | + | let path = new CSG.Path2D([[10, 10], [-10, 10]], false); |
| - | * appendPoint([x,y]): create & return a new Path containing the callee's points followed by the given point. | + | let anotherpath = new CSG.Path2D([[-10, -10]]) |
| - | * appendPoints([[x,y],...]): create & return a new Path containing the callee's points followed by the given points. [Note: as of 2016/08/13, this method also modifies the callee; this is probably a bug and might be changed in the future; see [https://github.com/Spiritdude/OpenJSCAD.org/issues/165 issue:165]] | + | path = path.concat(anotherpath) |
| - | * appendBezier([[x,y],...], options): create & return a new Path containing the callee's points followed by a Bezier curve ending at the last point given; all but the last point given are the control points of the Bezier; a null initial control point means use the last two points of the callee as control points for the new Bezier curve. options can specify {resolution: <NN>}. | + | path = path.appendPoint([10,-10]) |
| + | path = path.close() | ||
| + | </code> | ||
| + | |||
| + | In addition, a path can be open or closed. An open path is typically used to create another, by appending additional points. A closed path is final, and has a line between first and last points. | ||
| + | |||
| + | Curved paths can also be created. Paths can be created as an arc, or arcs can be appended to an existing path. | ||
| + | |||
| + | <code javascript> | ||
| + | let p1 = new CSG.Path2D([[27,-22],[27,-3]],false); | ||
| + | p1 = p1.appendArc([12,-22],{xradius: 15,yradius: -20,xaxisrotation: 0,clockwise: false,large: false}); | ||
| + | p1 = p1.close(); | ||
| + | </code> | ||
| + | |||
| + | Which include: | ||
| + | |||
| + | arc(endpoint, options): return a circular or ellipsoid curved path (see example below for usage). | ||
| + | |||
| + | appendPoint([x,y]): create and return a new Path containing the callee's points followed by the given point. | ||
| + | |||
| + | appendPoints([[x,y]]): return a new Path containing the callee's points followed by the given points | ||
| + | |||
| + | appendBezier([[x,y]], options): create and return a new Path containing the callee's points followed by a Bezier curve ending at the last point given; all but the last point given are the control points of the Bezier; a null initial control point means use the last two points of the callee as control points for the new Bezier curve. | ||
| + | |||
| + | options can specify {resolution: 55}. | ||
| Paths can be concatenated with .concat(), the result is a new path. | Paths can be concatenated with .concat(), the result is a new path. | ||
| - | A path can be converted to a CAG in two ways: | + | //Note: The difference between Paths and 2D shapes are that Paths are composed of very thin lines, whereas a two dimensional shapes always enclose an area.// |
| - | * expandToCAG(pathradius, resolution) traces the path with a circle, in effect making the path's line segments thick. | + | |
| - | * innerToCAG() creates a CAG bounded by the path. The path must be a closed. | + | === Conversion to 2D Shape === |
| + | |||
| + | Paths can be converted to two dimensional shapes in various forms. | ||
| + | |||
| + | First, a Path can be converted directly to a two dimensional shape but the Path must be **closed**. | ||
| + | |||
| + | <code javascript> | ||
| + | // create a closed path in shape of triangle | ||
| + | let path = new CSG.Path2D([[10,10], [-10,10], [-10,-10]], true) | ||
| + | let shape = path.innerToCAG() | ||
| + | </code> | ||
| + | |||
| + | Second, a path can be expanded into a two dimensional shape by tracing the path with a circle. The result is a path with rounded ends and thick lines segments. The path can be either open or closed. | ||
| + | |||
| + | <code javascript> | ||
| + | // create an open path in shape of L | ||
| + | let path = new CSG.Path2D([[10,10], [-10,10], [-10,-10]], false) | ||
| + | let shape = path.expandToCAG(3) | ||
| + | </code> | ||
| + | |||
| + | === Conversion to 3D Shape === | ||
| Creating a 3D solid is currently supported by the rectangularExtrude() function. This creates a 3D shape by following the path with a 2D rectangle (upright, perpendicular to the path direction): | Creating a 3D solid is currently supported by the rectangularExtrude() function. This creates a 3D shape by following the path with a 2D rectangle (upright, perpendicular to the path direction): | ||
