meta data for this page
Transforms
All shapes can be transformed, i.e. translated to another location, rotated by certain angles, etc. In all cases, the transform function returns a new shape, not the original.
const myshape = circle({radius: 5}) const newshape = scale([5, 10], circleA) // a new cicle, scaled as requested
So, in order to modify the original, place the original on the left-hand side of the expression.
let myshape = circle({radius: 5}) myshape = scale([5, 10], myshape) // a new circle, scaled as requested, reassigned to the original
In fact, the two lines above can be combined into a single line.
let myshape = scale([5, 10]). circle({radius: 5})) // a new circle, and scaled as requested
Transforms can also be chained together, but keep in mind that the order of transforms is important.
let myshape = scale([5, 10]). circle({radius: 5})) myshape = translate([0, 0, 10]), rotateX(45, myshape))
The original shape can be transformed any number of times. For example, the a single cylinder can be rotated and translated to make multiple copies of the original. And then, the set of cylinders can be combined together using union. This is a common pattern when creating complex designs.
The transforms return a single shape or an array of shapes depending on the given shapes.
const newshape = align({modes: ['none', 'center', 'none']}, oldshape) /* Returns a single shape */ const newshapes = align({modes: ['min', 'center', 'none'], alignTo: [10, null, 10], grouped: true }, oldshape, [oldshape0, oldshape1]) /* Returns an array of new shapes*/
Orientation
The standard for all 3D systems today, including graphics cards, design tools, etc. is orientating shapes using the right-hand rule. JSCAD follows the same rules internally, and produces shapes, applies transforms, etc. using the right-hand rule of orientation. See Orientation for more information.
Rotate
Shapes can be rotated by any given angle about the X, Y, and Z axis. The angles
can be specified as either positive or negative values, in RADIANS.
Learn about rotation at MathIsFun.com
Defaults:
- angles : [0, 0, 0]
const { cuboid } = require('@jscad/modeling').primitives const { rotate } = require('@jscad/modeling').transforms const myshape = cuboid({size: [5, 20, 5]}) const newshape = rotate([(Math.PI * 2 / 4), (Math.PI * 2 / 24), (Math.PI * 2 / 12)], myshape)
In addition, there are simple versions of the same function for rotating about a single axis.
const { cuboid } = require('@jscad/modeling').primitives const { rotateX,rotateY,rotateZ } = require('@jscad/modeling').transforms const myshape = cuboid({size: [5, 20, 5]}) let newshape = rotateX((Math.PI * 2 / 4), myshape) newshape = rotateY((Math.PI * 2 / 24), newshape) newshape = rotateZ((Math.PI * 2 / 12), newshape)
There is a utility function to convert DEGREE to RADIAN values.
const { cuboid } = require('@jscad/modeling').primitives const { rotateX,rotate } = require('@jscad/modeling').transforms const { degToRad } = require('@jscad/modeling').utils const myshape = cuboid({size: [5, 20, 5]}) const newshape = rotate([degToRad(90), degToRad(15), degToRad(30)], myshape) const newshape = rotateX(degToRad(90), myshape)
Scale
Shapes can be scaled by any factor, enlarging (increasing) or shrinking (diminishing) shapes by the factors
about X, Y, and Z axis. The result of scaling is a similar shape (in the geometric sense) to the original.
Learn about the scaling shapes at Wikipedia.org
Defaults:
- factors : [1.0, 1.0, 1.0]
const myshape = sphere({radius: 5}) const newshape = scale([2, 4, 6], myshape)
In addition, there are simple versions of the same function for scaling about a single axis.
const myshape = sphere({radius: 5}) let newshape = scaleX(2, myshape) newshape = scaleY(4, newshape) newshape = scaleZ(6, newshape)
Translate
Shapes can be translated (moved) to another location. In other words, every point in the shape is moved by a fixed distance as given by the offset
. The offset
can be positive or negative.
Learn about translation at MathIsFun.com
Defaults:
- offset : [0, 0, 0]
const myshape = sphere([radius: 5}) const newshape = translate([3, 7, -10], myshape)
In addition, there are simple versions of the same function for translating about a single axis.
const myshape = sphere([radius: 5}) let newshape = translateX(3, myshape) newshape = translateY(7, newshape) newshape = translateZ(-10, newshape)
Align
Shapes can be aligned across X, Y, and Z axis. In other words, each shape is translated to the requested position, aligning the boundaries of the shapes. The modes
of alignment control which position to use, with values 'center', 'min', 'max', or 'none'. The alignment can also be positioned to a specific point, relativeTo
.
Defaults:
- modes : ['center', 'center', 'min']
- group : false (do not align all shapes as a group)
- relativeTo : [0, 0, 0]
const newshapes = align({modes: ['min', 'none', 'none'], myshape1, myshape2, myshape3) // align shapes at the minimum X const newshapes = align({modes: ['min', 'center', 'none'], relativeTo: [10, null, 10], grouped: true}, myshape1, myshape2, myshape3)
Center
Shapes can be centered about the X, Y or Z axis, or centered relative to a given point.
Note: The center of a shape is calculated as the midpoint between minimum and maximum points.
Defaults:
- axes : [true, true, true]
- relativeTo : [0, 0, 0]
const myshape = sphere({radius: 5}) let newshape = center({}, myshape) // center the shape across all axes newshape = center({axes: [true, true, false]}, myshape) // center the object across only X and Y axis newshape = center({relativeTo: [5, 6, 7]}, myshape) // center the shape relative to the given point
There are also simple versions of this function to center the shape about the origin.
const myshape = sphere({radius: 5}) let newshape = centerX(myshape) newshape = centerY(newshape) newshape = centerZ(newshape)
Mirror
Shapes can mirror (reflect) about the X, Y, or Z axis, and more specifically about any origin
.
Learn about reflection at MathIsFun.com
Defaults:
- origin : [0, 0, 0]
- normal : [0, 0, 1] (mirror about the Z axis)
const myshape = cube({size: [5, 20, 5]}) const newshape = mirror({origin: 3, 3, 3], normal: [1, 0, 1]}, myshape)
There are simple versions of this function to mirror a single axis about the origin.
const myshape = cube({size: [5, 20, 5]}) let newshape = mirrorX(myshape) newshape = mirrorY(newshape) newshape = mirrorZ(newshape)
Matrix Transform
The previous transforms are actually simplified versions of matrix mathematics. For example, translate is just applying addition using a matrix.
Learn about matrix mathematics at MathIsFun.com
let matrix = mat4.create() matrix = mat4.multiply(mat4.rotationX(40)) matrix = mat4.multiply(mat4.rotationZ(40)) matrix = mat4.multiply(mat4.translation([-.5, 0, 0])) matrix = mat4.multiply(mat4.scaling([1.1, 1.2, 1.3])) // and apply the transform const myshape = transform(matrix, cube())