User Tools


Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
Last revision Both sides next revision
jscad_quick_reference [2018/01/28 00:51]
z3dev [JSCAD - Quick Reference]
jscad_quick_reference [2018/02/23 13:16]
z3dev
Line 1: Line 1:
 ====== JSCAD - Quick Reference ====== ====== JSCAD - Quick Reference ======
-The following sections provide quick reference to OpenJSCAD, CSG libraries, and the JavaScript language. +The following sections provide quick reference to the JSCAD application programming interface (API).
- +
-**[[https://​github.com/​Spiritdude/​OpenJSCAD.org/​wiki/​User-Guide|User Guide]]** +
- +
-**[[http://​joostn.github.io/​OpenJsCad/​|CSG and CAG User Guide]]**+
  
 //Note: **Default values** and **notes** are highlighted in **bold fonts**.// //Note: **Default values** and **notes** are highlighted in **bold fonts**.//
  
-{{page>wiki:​quick_reference_info}}+{{page>quick_reference_intro}}
  
-===== General Usage ===== +{{page>​quick_reference_shapes}}
-^  OpenJSCAD Functions ​ ^  JavaScript Statements ​ ^ +
-| function main(parameters) ​...; return var; } **/* required */** | var name = my_box( ​{attribute: 1, ...); | +
-| function getParameterDefinitions() {return [ definition... ]; } **/* optional */**  | function my_box( param ) { ...; return shape; } **/* create a function */**  | +
-| OpenJsCad.log("​message"​); ​ **/* display message and time stamp */** | console.log("​message"​);​ /* display message */  | +
-| include... ​ | for (index = 0; index < array.length;​ index--;) { ... };  |+
  
-//Note: Messages are displayed in the Javascript console in browsers.//+{{page>​quick_reference_transforms}}
  
-//Note: If not provided, the default resolution is used when creating rounded shapes.// +{{page>​quick_reference_operations}}
-  * **CSG.defaultResolution2D:​ 32** +
-  * **CSG.defaultResolution3D:​ 12** +
-===== Primitive Shapes ===== +
-^  2D Primitives ​ ^  3D Primitives ​ ^ +
-| var rectangle = CAG.rectangle();​ **/* center: [0,0], radius: [1,1] */**  | var cube = CSG.cube(); **/* center: [0,0,0], radius: [1,1,1] */**  | +
-| var rectangle = CAG.rectangle({center: [1,2], radius: [1, 2]});  | var cube = CSG.cube({center: [1, 2, 3], radius: [1, 2, 3]});  | +
-| var rectangle = CAG.roundedRectangle();​ **/* center: [0,0], radius: [1,1], roundradius:​ 0.2, resolution: 32 */**  | var cube = CSG.roundedCube();​ **/* center: [0,0,0], radius: [1,1,1] roundradius:​ 0.2, resolution: 12 */**  | +
-| var rectangle = CAG.roundedRectangle({center:​ [1,2], radius: [1, 2], roundradius:​ 1, resolution:​32}); ​ | var cube = CSG.roundedCube({center:​ [0, 0, 0], radius: [3,3,3], roundradius:​ 0.5, resolution: 32});  | +
-| var circle = CAG.circle();​ **/* center: [0,0], radius: [1,1], resolution: 32 */**  | var sphere = CSG.sphere();​ **/* center: [0,0,0], radius: 1, resolution: 12 */**  | +
-| var circle = CAG.circle({center:​ [1,2], radius: 3, resolution: 72});  | var sphere = CSG.sphere({center:​ [1, 2, 3], radius: 4, resolution: 36});  | +
-|  | var cylinder = CSG.cylinder();​ **/* start: [0, -1, 0], end: [0, 1, 0],  radius: 1, resolution: 32 */**  | +
-| ::: | var cylinder = CSG.cylinder({start:​ [1, 2, 3], end: [4, 5, 6], radiusStart:​ 7, radiusEnd: 8, resolution: 72});  | +
-| ::: | var cylinder = CSG.roundedCylinder();​ **/* start: [0,-1,0], end: [0,1,0], radius: 1, resolution: 12 */**  | +
-| ::: | var cylinder = CSG.roundedCylinder({start:​ [10,11,12], end: [13,14,15], radius: 16, resolution: 6});  | +
-| var cag = CAG.fromPoints([ [0,​0],​[5,​0],​[3,​5],​[0,​5] ]); **/* polygon with 3+ points */**  | var csg = CSG.fromPolygons([polygon,​ ...]); ​ | +
-| var cag = CAG.fromSides([side,​...]);​ **/* polygon with 1+ sides */**  | ::: |+
  
 +{{page>​quick_reference_conversion}}
  
-===== Shape Transformations ===== 
-^  2D Transformations ​ ^  3D Transformations ​ ^ 
-| 2Dshape = 2Dshape.translate([-2,​ -2]); | 3Dshape = 3Dshape.translate([1,​2,​3]);​ | 
-| 2Dshape = 2Dshape.rotateZ(20);​ | 3Dshape = 3Dshape.rotateX(90);​ | 
-| ::: | 3Dshape = 3Dshape.rotateY(-180); ​ | 
-| ::: | 3Dshape = 3Dshape.rotateZ(45); ​ | 
-| 2Dshape = 2Dshape.rotate(center,​ axis, degrees); ​ | 2Dshape = 2Dshape.rotate(center,​ axis, degrees); ​ | 
-| 2Dshape = 2Dshape.rotateEulerAngles(alpha,​ beta, gamma, position); ​ | 2Dshape = 2Dshape.rotateEulerAngles(alpha,​ beta, gamma, position); ​ | 
-| 2Dshape = 2Dshape.scale([0.7,​ 0.9]); ​ | 3Dshape = 3Dshape.scale([1,​2,​3]); ​ | 
-| 2Dshape = 2Dshape.center(true);​ **/* center X & Y axis */**  | 3Dshape = 3Dshape.center(true);​ **/* center X & Y & Z axis */**  | 
-| 2Dshape = 2Dshape.center([true,​false]); ​ | 3Dshape = 3Dshape.center([true,​false,​true]); ​ | 
-| 2Dshape = 2Dshape.mirroredX(); ​ | 3Dshape = 3Dshape.mirroredX(); ​ | 
-| 2Dshape = 2Dshape.mirroredY(); ​ | 3Dshape = 3Dshape.mirroredY(); ​ | 
-| ::: | 3Dshape = 3Dshape.mirroredZ(); ​ | 
-| 2Dshape = 2Dshape.mirrored(plane);​ | 3Dshape = 3Dshape.mirrored(plane); ​ | 
-| 2Dshape = 2Dshape.transform(matrix); ​ | 3Dshape = 3Dshape.transform(matrix); ​ | 
-| **/* not supported yet */**  | 3Dshape = 3Dshape.setColor(r,​g,​b); ​ **/* a = 1.0 */**  | 
-| ::: | 3Dshape = 3Dshape.setColor(r,​g,​b,​a); ​ | 
-| ::: | 3Dshape = 3Dshape.setColor([r,​g,​b]); ​ **/* a = 1.0 */**  | 
-| ::: | 3Dshape = 3Dshape.setColor([r,​g,​b,​a]); ​ | 
-| 2Dshape = 2Dshape.expand(0.2,​ 8); **/* radius, resolution */**  | 3Dshape = 3Dshape.expand(0.2,​ 8); **/* radius, resolution */**  | 
-| 2Dshape = 2Dshape.contract(0.2,​ 8); **/* radius, resolution */**  | 3Dshape = 3Dshape.contract(0.2,​ 8); **/* radius, resolution */**  | 
- 
-//Note: Shape transformations can be chained together. Example:// 
- 
-**var 3Dshape = CSG.cube().rotate(45).translate([20,​0,​10]).setColor(1,​0.5,​0.3);​** 
-===== Shape Operations ===== 
-^  2D Operations ​ ^  3D Operations ​ ^ 
-| 2Dshape = 2DshapeA.union(2DshapeB);​ | 3Dshape = 3DshapeA.union(3DshapeB); ​ | 
-| 2Dshape = 2DshapeA.subtract(2DshapeB) | 3Dshape = 3DshapeA.subtract(3DshapeB); ​ | 
-| 2Dshape = 2DshapeA.intersect(2DshapeB);​ | 3Dshape = 3DshapeA.intersect(3DshapeB); ​ | 
-| ::: | 3Dshape = 3DshapeA.inverse(3DshapeB);​ **/* inverse solid and empty space */**  | 
- 
-===== Dimension Conversions ===== 
-^  2D to Path Conversions ​ ^ 
-| var Path2DArray = 2Dshape.getOutlinePaths(); ​ | 
- 
-^  2D to 3D Conversions ​ ^ 
-| 3DShape = 2Dshape.extrude();​ **/* offset: [0,0,1], twistangle: 0, twiststeps: 12 */**  | 
-| 3DShape = 2Dshape.extrude({offset:​ [0,0,50], twistangle: 360, twiststeps: 100}); ​ | 
-| 3DShape = 2Dshape.rotateExtrude({offset:​ [0,0,50], twistangle: 360, twiststeps: 100}); **/* angle: 360, resolution: 12 */**  | 
-| 3Dshape = 2Dpath.rectangularExtrude(3,​ 4, 16, true); ​  **/* w, h, resolution, round ends */**  | 
- 
-^  3D to 2D Conversions ​ ^ 
-| tbw | 
 ===== OpenSCAD-like Functions ===== ===== OpenSCAD-like Functions =====
 These functions ease the transition from the [[http://​www.openscad.org/​|OpenSCAD]] (proprietary script) to OpenJSCAD (JavaScript and objects). These functions ease the transition from the [[http://​www.openscad.org/​|OpenSCAD]] (proprietary script) to OpenJSCAD (JavaScript and objects).
Line 104: Line 35:
 | var path = vector_char(10,​-10,​ '​A'​);​ **/* X axis, Y axis, character */**  |  | | var path = vector_char(10,​-10,​ '​A'​);​ **/* X axis, Y axis, character */**  |  |
 | var array_of_paths = vector_text(10,​-10,​ '​Letters'​); ​ **/* X axis, Y axis, string of characters */**  | ::: | | var array_of_paths = vector_text(10,​-10,​ '​Letters'​); ​ **/* X axis, Y axis, string of characters */**  | ::: |
-===== Interactive Parameters ===== 
-A design can have interactive parameters by declaring a special function; getParameterDefinitions(). 
- 
-==== Usage ==== 
-This function must return an array of parameter definitions,​ as show below. 
- 
-<​code>​ 
-function getParameterDefinitions() { 
-    return [ 
-        { name: '​length',​ type: '​int',​ initial: 150, caption: '​Length?'​ },  
-        { name: '​width',​ type: '​int',​ initial: 100, caption: '​Width?'​ }, 
-    ]; 
-} 
-</​code>​ 
- 
-The parameters are evaluated and values are passed into the main function. Be sure to declare the main function properly. 
-<​code>​ 
-function main(params) { 
-  var l = params.length;​ 
-  var w = params.width;​ 
-... 
-} 
-</​code>​ 
-==== Parameter Types ==== 
-The parameters are defined as input fields on a single HTML5 form, i.e. the list of parameters. For more information on HTML5 input fields, see some examples at [[http://​www.w3schools.com/​html/​html_form_input_types.asp|W3 Schools]]. 
- 
-**Note: Browsers are NOT the same and will treat unsupported parameter types as TEXT.** 
- 
-^  Type  ^  Example ​ ^  Returned Value  ^ 
-| checkbox ​ | {name: '​bigorsmall',​ type: '​checkbox',​ checked: true, caption: '​Big?'​} ​ | if checked true, else false  | 
-| checkbox ​ | {name: '​bigorsmall',​ type: '​checkbox',​ checked: true, initial: 20, caption: '​Big?'​} ​ | if checked 20, else false   | 
-| color  | { name: '​color',​ type: '​color',​ initial: '#​FFB431',​ caption: '​Color?'​ }  | "#​rrggbb",​ use html2rgb() to convert ​ | 
-| date  | {name: '​birthday', ​ type: '​date',​ caption: '​Birthday?'​} ​ | "​YYYY-MM-DD" ​ | 
-| email  | {name: '​address',​ type: '​email',​ caption: 'Email Address?'​} ​ | string value  | 
-| float  | {name: '​angle',​ type: '​number',​ initial: 2.5, step: 0.5, caption: '​Angle?'​} ​ | float value  | 
-| int  | {name: '​age',​ type: '​int',​ initial: 20, caption: '​Age?'​} ​ | integer value  | 
-| number ​ | {name: '​angle',​ type: '​number',​ initial: 2.5, step: 0.5, caption: '​Angle?'​} ​ | float value  | 
-| password ​ | {name: '​password',​ type: '​password',​ caption: '​Secret?'​} ​ | string value  | 
-| slider ​ | {name: '​count',​ type: '​slider',​ min: 2, max: 10, caption: 'How many?'​} ​ | float value  | 
-| text  | {name: '​name',​ type: '​text',​ caption: '​Name?'​} ​ | string value  | 
-| url  | {name: '​webpage',​ type: '​url',​ caption: 'Web page URL?'​} ​ | string value  | 
-| group  | { name: '​balloon',​ type: '​group',​ caption: '​Balloons'​ }  | none, only displayed ​ | 
  
-//Note: The parameters accept additional restrictions and assistance. These include '​initial',​ '​max',​ '​maxLength',​ '​min',​ '​pattern',​ '​placeholder',​ '​size',​ and '​step'​.//​+{{page>​quick_reference_parameters}}