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 07:53]
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 21: Line 24:
  
 Curved paths can also be simulated. Paths can be created as an 'arc'. (See Appending Points below for more options.) 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.  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. 
Line 32: Line 37:
  
 <code javascript> <code javascript>
-let mypath = arc({radius: 5, startAngle: Math.PI / 2}) +const { arc } = require('@jscad/modeling').primitives 
-let mypath = arc({center: [5, 5], radius: 5, startAngle: Math.PI, endAngle: Math.PI / 2, segments: 4})+ 
 +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> </code>
  
Line 41: Line 48:
  
 <code javascript> <code javascript>
-let mypath = line([[27, -22], [27, 22]]) +const { path2 } = require('@jscad/modeling').geometries 
-let newpath = path2.appendPoints([[-27, 22], [-27, -27], [27, -22]], mypath)+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>
  
 An 'arc' can be appended to a path as well, which creates a series of line segments that simulate an 'arc'. An 'arc' can be appended to a path as well, which creates a series of line segments that simulate an 'arc'.
- 
-//Note: This implementation follows the SVG specifications.// 
  
 Defaults: Defaults:
Line 54: Line 62:
   * large : false   * large : false
   * segments : 32   * segments : 32
 +
 +//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); + 
-p5 = path2.appendBezier({controlPoints: [null, [25,-30],[40,-30],[40,-20]]}, p5)+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> </code>
  
Line 64: Line 76:
  
 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. 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 78: 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>