User Tools


This is an old revision of the document!


2D Primitives

‘2D’ stands for two (2) dimensional. A 2D primitive is any shape that has two dimensions, which are width and length (or X and Y.) The 2D dimensional shapes have no thickness (Although, JSCAD shows a very thin shape.)

One way of thinking about 2D shapes is anything that lays flat on a piece of paper, such as drawing a circle or a square.

The mathematical study of 2D shapes and dimensions is called plane geometry.

Resolution of Shapes

All rounded shapes have a resolution option which controls tesselation. If resolution is set to 8, then 8 polygons are used to create 360 degrees of revolution.

This allows each design to control the amount of detail present, but beware that calculations and rendering time will also increase. For example, the number of polygons increases quickly with each increase of the resolution for circles.

EXAMPLE

If the resolution option is omitted, the following resolution is used.

  • CSG.defaultResolution2D = 32

OpenSCAD like functions support the fn parameter, which is the same as resolution.

Rectangle

A two dimensional shape made with four straight sides where all interior angles are right angles (90°).

Rectangle Learn about rectangles at MathIsFun.com

The following show examples of creating rectangles. The radius specifies the size. Rectangles with different radius for X and Y axis can be specified by supplying an array of values.

Defaults:

  • radius : 1 or [1,1]
  • center : [0,0]
square(5);                                  // square 5 x 5
square([2,3]);                              // rectangle 2 x 3
square({size: [2,4], center: true});        // rectangle 2 x 4, centered on both X and Y axis

The CSG library functions can also be used. NOTE: Deprecated in the V2 API

CAG.rectangle({center: [0,0], radius: [5, 10]});
CAG.roundedRectangle({center: [0,0], radius: [10, 50], roundradius: 1, resolution: 4});

Circle

A two dimensional shape made by drawing a curve that is always the same distance from a center. All points are the same distance from the center.

Circle Learn about circles at MathIsFun.com

The following show examples of creating circles. The radius specifies the size. The resolution option determines the number of segments to create in 360 degrees of rotation.

Note: See the start of 2D Primitives for information about the resolution of two dimensional shapes.

Defaults:

  • radius : 1
  • center : [0,0]
  • resolution: defaultResolution2D (32)
let c1 = circle(1) 
let c2 = circle({r: 2, fn:5})            // fn = number of segments to approximate the circle
let c3 = circle({r: 3, center: true})

The CSG library functions can also be used. NOTE: Deprecated in the V2 API

let c4 = CAG.circle({center: [0,0], radius: 3, resolution: 32})

Polygon

A two dimensional shape with straight sides, and the shape is “closed” (all the sides connect up).

PolygonsPolygons

Learn about polygons at MathIsFun.com

The following show examples of creating polygons from a list of points.

Defaults:

  • empty
let p1 = polygon([ [0,0],[3,0],[3,3] ])
let p2 = polygon({ points: [ [0,0],[3,0],[3,3] ] })

The CSG library functions can also be used. NOTE: Deprecated in the V2 API

let p3 = CAG.fromPoints([ [0,0],[5,0],[3,5],[0,5] ])

Path

A path is a series of points, connected by very thin (invisible) line segments. Paths can be created by giving an array of points, or by calling various functions to create or extend another path.

let path = new CSG.Path2D([[10, 10], [-10, 10]], false);
let anotherpath = new CSG.Path2D([[-10, -10]])
path = path.concat(anotherpath)
path = path.appendPoint([10,-10])
path = path.close()

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.

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();

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.

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.

// create a closed path in shape of triangle
let path = new CSG.Path2D([[10,10], [-10,10], [-10,-10]], true)
let shape = path.innerToCAG()

Second, a 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.

// 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)

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):

var path = new CSG.Path2D([ [10,10], [-10,10] ], /* closed = */ false);
var anotherpath = new CSG.Path2D([ [-10,-10] ]);
path = path.concat(anotherpath);
path = path.appendPoint([10,-10]);
path = path.close(); // close the path
 
// of course we could simply have done:
// var path = new CSG.Path2D([ [10,10], [-10,10], [-10,-10], [10,-10] ], /* closed = */ true);
 
// We can make arcs and circles:
var curvedpath = CSG.Path2D.arc({
  center: [0,0,0],
  radius: 10,
  startangle: 0,
  endangle: 180,
  resolution: 16,
});