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/05/12 08:00]
z3dev
design_guide_path [2018/06/12 14:13] (current)
z3dev
Line 1: Line 1:
 ==== Path ==== ==== Path ====
  
-A path is a series of points, connected by very thin (invisible) ​linesIn addition, a path can be open or closed. A closed ​path has a line between first and last points.+A path is a series of points, connected by very thin (invisible) ​line segmentsPaths can be created by giving an array of points, ​or by calling various functions to create or extend another ​path.
  
-Paths can be created by giving an array of pointsor by calling various functions to create or extend a path.+<code javascript>​ 
 +let path = new CSG.Path2D([[1010], [-10, 10]], false); 
 +let anotherpath = new CSG.Path2D([[-10,​ -10]]) 
 +path = path.concat(anotherpath) 
 +path = path.appendPoint([10,​-10]) 
 +path = path.close() 
 +</​code>​
  
-//Note: The difference ​between ​Paths and 2D shapes are that Paths are composed of very thin lineswhereas a two dimensional shapes always enclose ​an area.//+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 arcor 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: Which include:
Line 16: Line 30:
  
 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.  ​ 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}. 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. 
  
-Paths can be converted to two dimensional shapes. First, a Path can be converted directly to a two dimensional shape. But the Path must be closed.+//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.// 
 + 
 +=== 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>​ <code javascript>​
-let path = new CSG.Path2D([[10,​10],​ [-10,10], [-10,-10]], true) // create a closed path+// create a closed path in shape of triangle 
 +let path = new CSG.Path2D([[10,​10],​ [-10,10], [-10,-10]], true)
 let shape = path.innerToCAG() let shape = path.innerToCAG()
 </​code>​ </​code>​
  
-expandToCAG(pathradiusresolution) traces ​the path with a circle, in effect making the path's line segments ​thick.+Seconda 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 segmentsThe 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):