All shapes can be transformed, i.e. translated to another location, rotated by certain degrees, etc. In all cases, the transform function returns a new shape, not the original.
let circleA = circle({radius: 5}) let circleB = circleA.scale([5,10]) // a new cicle, scaled as requested
So, in order to modify the original, place that on the left-hand side of the expression.
let circleA = circle({radius: 5}) circleA = circleA.scale([5,10]) // a new circle, scaled as requested, reassigned to the original
In fact, the two lines above can be combined into a single line.
let circleA = circle({radius: 5}).scale([5,10]) // a new circle, and scaled as requested
Transforms can also be chained together.
// rotate the circle about the X axis by 45 degrees // and translate the circle up the Z axis 10 units // and assign the result to circleB let circleB = circleA.rotateX(45).translate([0,0,10])
The original shape can be transformed any number of times. For example, the same cylinder can be rotated, making copies of the cylinders, and then unioned together. This is a common pattern when creating complex designs.
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.
Shapes can be rotated by any given degree about the X, Y, and Z axis. The degrees can be specified as either positive or negative values.
Learn about rotation at MathIsFun.com
Defaults:
let obj = cube([5,20,5]) obj = rotate([90,15,30],obj) obj = rotate(90,[1,0.25,0.5],obj)
The CSG library functions can also be used. NOTE: Deprecated in the V2 API
obj.rotateX(90); obj.rotateY(45); obj.rotateZ(30); obj.rotate(rotationCenter, rotationAxis, degrees) obj.rotateEulerAngles(alpha, beta, gamma, position)
Shapes can be scaled by any factor. Shapes are enlarged (increases) or shrunk (diminishes) by a scale factor. The result of scaling is a similar shape (in the geometric sense) to the original.
Learn about the scaling shapes at Wikipedia.org
Defaults:
let obj = sphere(5) obj = scale(2,obj) obj = scale([1,2,3],obj)
The CSG library functions can also be used. NOTE: Deprecated in the V2 API
obj.scale([1,2,3])
Shapes can be translated (moved) to another location. In other words, every point in the shape is moved by a fixed distance in the same direction. The offset can be positive or negative.
Learn about translation at MathIsFun.com
Defaults:
let obj = sphere(5) obj = translate([0,0,10],obj)
The CSG library functions can also be used. NOTE: Deprecated in the V2 API
obj.translate([0,0,10])
Shapes can be centered about the X, Y or Z axis.
Note: The center of a shape is calculated as the midpoint between minimal and maximum points.
let obj = sphere(5) obj = center(true,cube(), obj) // center the objects across all axes obj = center([true, true, false], obj) // center the object across only X and Y axis
The CSG library functions can also be used. NOTE: Deprecated in the V2 API
cube().center(true) // center the object across all axes cube().center([true,true,false]) // center the object across only X and Y axis
Shapes can reflect about the X, Y, or Z axis.
Learn about reflection at MathIsFun.com
Defaults:
let obj = cube([5, 20, 5]) obj = mirror([1, 0, 1], obj) // mirror about X and Z axis
The CSG library functions can also be used. NOTE: Deprecated in the V2 API
var cube = CSG.cube().translate([1,0,0]) var cube2 = cube.mirroredX() // mirrored about the X axis var cube3 = cube.mirroredY() // mirrored about the Y axis var cube4 = cube.mirroredZ() // mirrored about the Z axis // create a plane by specifying 3 points: var plane = CSG.Plane.fromPoints([5,0,0], [5, 1, 0], [3, 1, 7]); // and mirror in that plane: var cube5 = cube.mirrored(plane);
The previous transforms are actually simplified versions of matrix mathematics. For example, translate is just applying additition using a matrix.
Learn about matrix mathematics at MathIsFun.com
let m = new CSG.Matrix4x4() m = m.multiply(CSG.Matrix4x4.rotationX(40)) m = m.multiply(CSG.Matrix4x4.rotationZ(40)) m = m.multiply(CSG.Matrix4x4.translation([-.5, 0, 0])) m = m.multiply(CSG.Matrix4x4.scaling([1.1, 1.2, 1.3])) // and apply the transform: let cube3 = cube().transform(m)
Shapes can exhibit different colors. And just like the other transformations, adding color to a shape produces a new shape, one with color.
NOTE: 2D shapes cannot exhibit colors today. This is a known issue.
let a = color("Red",sphere()) let b = color([1, 0.5, 0.3],sphere()) let c = color([1, 0.5, 0.3, 0.6],sphere(10),cube(20))
See the Extended Color Keywords for all available colors. Color keywords are case-insensitive, e.g. 'RED' is the same as 'red'.
The CSG library functions can also be used. NOTE: Deprecated in the V2 API
let a = object.setColor(css2rgb('dodgerblue')) let b = sphere().setColor(1, 0.5, 0.3) let c = sphere().setColor([1, 0.5, 0.3, 0.7])
Note: There are known issues with transparency, and depending on the order of colors, objects may not seem transparent. Try different 'alpha' values or colors.
Following functions to convert between color spaces.
let rgb = css2rgb('navy') let rgb = html2rgb('#RRGGBB') let rgb = hsl2rgb(h,s,l) // or hsl2rgb([h,s,l]) let rgb = hsv2rgb(h,s,v) // or hsv2rgb([h,s,v]) let hsv = rgb2hsv(r,g,b) // or rgb2hsv([r,g,b]) let hsl = rgb2hsl(r,g,b) // or rgb2hsl([r,g,b]) let html = rgb2html(r,g,b)
whereas