Drawing

2D primitives

const {line, arc, circle, ellipse, rectangle} = jscad.primitives;

2D primitives are often a good start. You can use extrusion and expansion commands, to turn 2D shapes into 3D bodies (see below).

A documentation of all primitives can be found here.

Line

The line command takes two arrays of two numbers each:

const shape = line([
  [x1, y1],
  [x2, y2]
]);

You can also pass an array with more points to create a path.

Arc

The arc also produces a line and works similar to the p5js arc function:

const shape = arc({
  center: [0, 0],
  radius: 1,
  startAngle: 0,
  endAngle: Math.PI * 2, //full arc
  segments: 32 // level of detail
});

Most properties in JSCAD are optional and have a default value, so you only need to provide the ones you really need.

Circle

const shape = circle({
  center: [0, 0],
  radius: 1,
  startAngle: 0,
  endAngle: Math.PI * 2, //full arc
  segments: 32 // level of detail
});

Circle looks exactly like arc, the important difference is, that arc returns a line and circle a polygon.

Ellipse

Circle and ellipse take similar parameters, radius is an array for ellipse, defining the radius on x and y axis:

const shape = ellipse({
  center: [0, 0],
  radius: [1,1],
  startAngle: 0,
  endAngle: Math.PI * 2, //full arc
  segments: 32 // level of detail
});

Most round features, like ellipses, spheres or rounded corners, have a segment parameter. This defines the level of detail of curves. More segments lead to rounder curves, but also more complex objects (bigger files, longer rendering times, etc.).

Rectangle

const shape = rectangle({
  size: [2, 2],
  center: [0, 0, 0]
});

3D-Primitives

const {cube, sphere, cylinder} = jscad.primitives;

A documentation of all primitives can be found here.

Cube

const shape = cube({
  size: 1,
  center: [0, 0, 0]
});

Sphere

const shape = sphere({
  radius: 1,
  center: [0, 0, 0]
});

Cylinder

const shape = cylinder({
  center: [0, 0, 0],
  height: 2,
  radius: 1,
  segments: 32
});

There are a few more 3D primitives to explore, examples for how to construct them are included in the boilerplate:

Task: Getting used to JSCAD

Explore the various 2D and 3D elements JSCAD provides, experiment with the various properties and see how it affects the output.

JSCAD

Transformations