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/04 05:52]
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>
Line 12: Line 15:
 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. 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 a ''bezier'' curve. 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 the given list of points to the end of the given geometry.+Curved paths can also be simulated. Paths can be created as an 'arc'. (See Appending Points below for more options.) 
 + 
 +{{ :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
  
 <code javascript> <code javascript>
-let mypath = line([[27, -22], [27, 22]]) +const { arc } = require('@jscad/modeling').primitives 
-mypath = path2.appendPoints([[-27, 22], [-27, -27]], mypath) + 
-mypath = path2.close()+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> 
 + 
 +=== Appending Points === 
 + 
 +Any number of points can be appended to a path, which produces a new path. 
 + 
 +<code javascript> 
 +const { path2 } = require('@jscad/modeling').geometries 
 +const { line } = require('@jscad/modeling').primitives 
 + 
 +const mypath = line([[27, -22], [27, 22]]) 
 +const newpath = path2.appendPoints([[-27, 22], [-27, -27], [27, -22]], mypath)
 </code> </code>
  
-=== Append an Arc ===+An 'arc' can be appended to a path as well, which creates a series of line segments that simulate an 'arc'.
  
-Append a series of points to the given geometry that simulate an arc.+Defaults: 
 +  * radius : [0, 0] 
 +  * clockwise : false 
 +  * large : false 
 +  * segments : 32
  
 //Note: This implementation follows the SVG specifications.// //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.
  
-=== Append a Bezier 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.
  
-Append a series of points to the given path that simulates a Bezier 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> <code javascript>
-let p5 = path2.create({}, [[10,-20]]) +const { path2 } = require('@jscad/modeling').geometries 
-p5 = path2.appendBezier({controlPoints: [[10,-10],[25,-10],[25,-20]]}, p5);+ 
 +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) p5 = path2.appendBezier({controlPoints: [null, [25,-30],[40,-30],[40,-20]]}, p5)
 </code> </code>
Line 56: 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]]) +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>