User Tools


Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
design_guide_path [2018/02/15 03:02]
z3dev
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+path is a series of points, connected by very thin (invisible) ​line segments. Paths can be created by giving an array of pointsor 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 functionswhich 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 and 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. +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(pathradiusresolution) traces ​the path with circle, ​in effect making the path's line segments thick+ 
-  ​* ​innerToCAG() ​creates ​CAG bounded ​by the path. The path must be closed.+=== Conversion to 2D Shape === 
 + 
 +Paths can be converted to two dimensional shapes ​in various forms. 
 + 
 +Firsta Path can be converted directly to a two dimensional shape but the Path must be **closed**. 
 + 
 +<code javascript>​ 
 +// create ​closed path in shape of triangle 
 +let path = new CSG.Path2D([[10,​10],​ [-10,10], [-10,-10]], true) 
 +let shape = path.innerToCAG() 
 +</​code>​ 
 + 
 +Second, ​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):