meta data for this page
  •  

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision 		Previous revision
en:design_guide_transforms [2020/11/28 02:56]
JSCAD Editor created 		en:design_guide_transforms [2021/05/12 08:28] (current)
JSCAD Editor
Line 1: Line 1:
 ===== Transforms ===== ===== Transforms =====
  
-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.+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.
  
 <code javascript> <code javascript>
-let circleA = circle({radius: 5}) +const myshape = circle({radius: 5}) 
-let circleB = circleA.scale([5,10]) // a new cicle, scaled as requested+const newshape = scale([5, 10], circleA) // a new cicle, scaled as requested
 </code> </code>
  
-So, in order to modify the original, place that on the left-hand side of the expression.+So, in order to modify the original, place the original on the left-hand side of the expression.
  
 <code javascript> <code javascript>
-let circleA = circle({radius: 5}) +let myshape = circle({radius: 5}) 
-circleA = circleA.scale([5,10]) // a new circle, scaled as requested, reassigned to the original+myshape = scale([5, 10], myshape) // a new circle, scaled as requested, reassigned to the original
 </code> </code>
  
Line 18: Line 18:
  
 <code javascript> <code javascript>
-let circleA = circle({radius: 5}).scale([5,10]) // a new circle, and scaled as requested+let myshape = scale([5, 10]). circle({radius: 5})) // a new circle, and scaled as requested
 </code> </code>
  
-Transforms can also be chained together.+Transforms can also be chained together, but keep in mind that the order of transforms is important.
  
 <code javascript> <code javascript>
-// rotate the circle about the X axis by 45 degrees +let myshape = scale([5, 10]). circle({radius: 5})) 
-// and translate the circle up the Z axis 10 units +myshape = translate([0, 0, 10]), rotateX(45, myshape))
-// and assign the result to circleB +
-let circleB = circleA.rotateX(45).translate([0,0,10])+
 </code> </code>
  
-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 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.
  
-==== Orientation ====+The transforms return a single shape or an array of shapes depending on the given shapes.
  
-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.+<code javascript> 
 +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*/ 
 +</code>
  
-//[[https://en.wikipedia.org/wiki/Right-hand_rule|Learn about the right-hand rule at Wikipedia.org]]//+==== 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 [[en:math_guide_orientation|Orientation]] for more information.
  
 {{page>design_guide_rotate}} {{page>design_guide_rotate}}
Line 43: Line 46:
  
 {{page>design_guide_translate}} {{page>design_guide_translate}}
 +
 +{{page>design_guide_align}}
  
 {{page>design_guide_center}} {{page>design_guide_center}}
Line 49: Line 54:
  
 {{page>design_guide_transform}} {{page>design_guide_transform}}
- 
-{{page>design_guide_color}}