• Parametric Design
• 3D
• Transformations

Transformations

Each transformation of a 2D or 3D object returns a new instance of the transformed object. This means, you can simply save the output of the transformation into a new variable. While its a bit counter-intuitive, this means you can send the original object into multiple transformations. At the bottom of the page is also an example for how to code multiple transformations more efficiently.

Colors

const {colorize, colorNameToRgb} = jscad.colors;

Colors can help us for prototyping and design our shapes. But have in mind, that depending on what you are going to do with your 3D object, you will likely have to reassign materials to your shapes.

We can either use RGB values:

const shape = colorize([R, G, B], cube());

Important: RGB are not 0 to 255, but 0 to 1.

Or use color names:

const shape = colorize(colorNameToRgb('black'), cube());

Transformations

const {translate, rotate, scale, center, align} = jscad.transforms;

A documentation of all transformations can be found here.

Similar to the p5js coordinate system transformations, we can transform individual objects. In contrast to p5js we don't transform the whole coordinate system, but only individual objects.

Translate

Move object along three dimensions:

const shape = translate([0, 0, 5], cube());

Rotate

Rotate object along x/y/z-axis:

const shape = rotate([0, 0, Math.PI / 2], cube());

Scale

Resize (multiply) along dimensions:

const shape = scale([0, 2, 0], cube());

Center

The center function allows us to center an object on one or multiple axis. If all set to true its placed on the center at [0,0,0]:

const shape = center([true, true, true], cube());

Loops & Transforms

Saving each transformation outcome into a new variable, becomes especially complicated if you run lots of transformations in a loop for example. To overcome this, we can use arrays and we can overwrite variables.

Back to top