meta data for this page
  •  

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
en:design_guide_path [2020/12/03 05:55]
JSCAD Editor 		en:design_guide_path [2022/04/13 12:44] (current)
rozek included "require" statements, corrected mistakes
Line 4: Line 4:
  
 <code javascript> <code javascript>
-let mypathA = line([[10, 10], [-10, 10]]) +const { line } = require('@jscad/modeling').primitives 
-let mypathB = line([[-10, -10], [10, -10]]) +const { path2 } = require('@jscad/modeling').geometries 
-mypath = path2.concat(mypathA, mypathB)+ 
 +const mypathA = line([[10, 10], [-10, 10]]) 
 +const mypathB = line([[-10, -10], [10, -10]]) 
 +let mypath = path2.concat(mypathA, mypathB)
 mypath = path2.close(mypath) mypath = path2.close(mypath)
 </code> </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.+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 segment between first and last points.
  
-Curved paths can also be simulated. Paths can be created as an ''arc'', or an arc can be appended to an existing path. The segments specify the number of segments to create per full rotation. +The 'path2' geometry is accessed through the modeling API using the following:
  
 <code javascript> <code javascript>
-let mypath = line([[27, -22], [27, 22]]) +const { path2 } = require('@jscad/modeling').geometries
-mypath = path2.appendArc({endPoint: [-27, -22], radius: [54, 44], segments: 64}, mypath) +
-mypath = path2.close()+
 </code> </code>
  
-=== Append Points ===+=== Curved Paths ===
  
-=== Append an Arc ===+Curved paths can also be simulated. Paths can be created as an 'arc'. (See Appending Points below for more options.)
  
-=== Append a Bezier Curve ===+{{ :wiki:jscad-arc.png?nolink | Arc}}
  
 +The 'arc' primitive creates a curved path about a ''center''. The arc is created from line segments placed the same distance from the ''center'', at the given ''radius''. Start and end angles for the arc can also be supplied. The ''segments'' specify the number of segments to create per full rotation. 
  
 +Defaults:
 +  * center : [0, 0]
 +  * radius : 1
 +  * startAngle : 0
 +  * endAngle : PI * 2
 +  * segments : 32
  
-Which include:+<code javascript> 
 +const { arc } = require('@jscad/modeling').primitives
  
-arc(endpoint, options): return a circular or ellipsoid curved path (see example below for usage). +const mypath = arc({radius: 5, startAngle: Math.PI / 2}) 
 +const mypath = arc({center: [5, 5], radius: 5, startAngle: Math.PI, endAngle: Math.PI / 2, segments: 4}) 
 +</code>
  
-appendPoint([x,y]): create and return a new Path containing the callee's points followed by the given point.+=== Appending Points ===
  
-appendPoints([[x,y]]): return a new Path containing the callee's points followed by the given points+Any number of points can be appended to a path, which produces a new path.
  
-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.  +<code javascript> 
 +const { path2 } = require('@jscad/modeling').geometries 
 +const { line } = require('@jscad/modeling').primitives
  
-options can specify {resolution: 55}. +const mypath = line([[27, -22], [27, 22]]) 
-Paths can be concatenated with .concat(), the result is a new path. +const newpath = path2.appendPoints([[-27, 22], [-27, -27], [27, -22]], mypath) 
 +</code>
  
-//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.//+An 'arc' can be appended to a path as well, which creates a series of line segments that simulate an 'arc'. 
 + 
 +Defaults: 
 +  * radius : [0, 0] 
 +  * clockwise : false 
 +  * large : false 
 +  * segments : 32 
 + 
 +//Note: This implementation follows the SVG specifications.// 
 + 
 +<code javascript> 
 +const { path2 } = require('@jscad/modeling').geometries 
 + 
 +let p1 = path2.create([[10,-20]]) 
 +p1 = path2.appendPoints([[27.5,-3.28125]], p1) 
 +p1 = path2.appendArc({endpoint: [12.5, -22.96875], radius: [15, -19.6875]}, p1) 
 +</code> 
 + 
 +In addition, 'bézier' curves can be appended to a path, which creates a series of line segments that simulate a 'bézier' curve. 
 + 
 +The 'bézier' curve starts at the last point in the given path, and ends at the last control point. The other control points are intermediate control points to transition the curve from start to end points. The first control point may be 'null' to ensure a smooth transition occurs between curves. 
 + 
 +//Note: This implementation follows the SVG specifications.// 
 + 
 +<code javascript> 
 +const { path2 } = require('@jscad/modeling').geometries 
 + 
 +let p5 = path2.create([[10,-20]]) 
 +p5 = path2.appendBezier({controlPoints: [[10,-10],[25,-10],[25,-20]]}, p5) 
 +p5 = path2.appendBezier({controlPoints: [null, [25,-30],[40,-30],[40,-20]]}, p5) 
 +</code>
  
 === Conversion to 2D Shape === === Conversion to 2D Shape ===
Line 50: Line 94:
  
 <code javascript> <code javascript>
 +const { geom2, path2 } = require('@jscad/modeling').geometries
 +const { line } = require('@jscad/modeling').primitives
 +
 // create a closed path in shape of triangle // create a closed path in shape of triangle
-let mypath = line([[10, 10], [-10, 10], [-10, -10], [10, 10]]) +const mypath = line([[10, 10], [-10, 10], [-10, -10], [10, 10]]) 
-let myshape = geom2.fromPoints(path2.toPoints(mypath))+const myshape = geom2.fromPoints(path2.toPoints(mypath))
 </code> </code>
  
-Second, a path can be expanded into a two dimensional shape. The result is a shape that fits around the path. The path can be either open or closed.+Second, a path can be expanded into a two dimensional shape. The result is a two dimensional shape that fits around the path.
  
 <code javascript> <code javascript>
 // create an open path in shape of L // create an open path in shape of L
-let mypath = line([[10, 10], [-10, 10], [-10, -10], [10, 10]]) +const { expand } = require('@jscad/modeling').expansions 
-let myshape = expand({delta: 2, corners: 'chamfer'}, mypath)+const { line } = require('@jscad/modeling').primitives 
 + 
 +const mypath = line([[10, 10], [-10, 10], [-10, -10]]) 
 +const myshape = expand({delta: 2, corners: 'chamfer'}, mypath)
 </code> </code>
  
 === Conversion to 3D Shape === === Conversion to 3D Shape ===
  
-Hint: Any two dimensional shape can be extruded into a three dimensional shape.+Two dimensional shapes can be extruded into three dimensional shapes. 
 + 
 +<code javascript> 
 +const { path2 } = require('@jscad/modeling').geometries 
 +const { extrudeLinear } = require('@jscad/modeling').extrusions 
 + 
 +// create a closed path in shape of triangle 
 +const mypath = path2.fromPoints({ closed: true }, [[0, 0], [12, 0], [6, 10]]) 
 +// extrude into triangular prism 
 +const myshape = extrudeLinear({ height: 15 }, mypath) 
 +</code>