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.


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


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.


Move object along three dimensions:

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


Rotate object along x/y/z-axis:

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


Resize (multiply) along dimensions:

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


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.

Task: Multiple Transformations

The transformations and handling of objects is quite different to p5js. Try building a loop that transforms some basic 3D bodies (e.g. translate and rotate). Try creating a 3D pattern.

Back to top