OpenJSCAD

define function main () {
  return cube({ center: true }).scale([8, 16, 4]);
}

Programming Basics

• words and syntax
  • letters form words
  • words form basic forms like expressions and statements
• expressions
  • values -- nouns of language
    • numbers -- 1 and 1.5
    • booleans -- true and false
    • arrays -- [1, 2, 3]
    • objects -- {size: 1, center: true}
  • variables -- name values
    • identifiers -- symbols that correspond to values
    • evaluated -- a
  • calls -- verbs of language
    • operators -- 1 + 2 -- add one to two
    • function calls -- square(1) -- construct square of size 1
    • method calls -- shape.translate([1, 0, 0]) -- translate shape one in x
• statements
  • variables
    • definition -- var a = 1
    • assignment -- a = 2
  • return -- return value from current function
  • functions -- define new verb for language

OpenJSCad

• Solid Geometry in JavaScript
• setup
  • view in center
  • code on right -- function main () { body ... }
  • docs on left
• body is
  • series of statements separated by semicolons
  • last statement is return expression;
• to code and visualize in browser
  • edit body
  • hit shift-return to evaluate
  • use mouse to spin and zoom
• using VSCode use files and drag to bottom left corner of OpenJSCad page

3D Basics

• axes -- one of x, y, or z
• vectors -- place in space
  • {x: 1, y: 2, z: 3}
  • direction from {x: 0, y: 0, z: 0}
  • magnitude is length
• dimensions -- values for Xyz using an Array
  • [3, 4] -- 2D
  • [4, 5, 8] -- 3D
• basic 3D shapes
  • cube -- cube({ center: true })
  • sphere -- sphere({ center: true})
  • cylinder -- cylinder({ r: xy, h: z, center: true })
• transformations
  • translate -- move by vector
    • shape.translate([x, y, z])
  • scale -- change size either uniformly or by dimensions
    • shape.scale(fac) or shape.scale([x, y, z])
  • rotate -- rotate around an axis
    • shape.rotateX(degrees)
• basic operations
  • union -- union(shape, ...) -- like adding space
  • intersection -- intersection(shape, ...) -- overlap of both shapes
  • difference -- difference(shape, ...) -- like subtracting or removing

Here are a series of simple examples that can be cut and pasted into the body of the main function. In other words, replace all the statements between the curly braces in the main function with the following code to try out. The first example is just creating a simple 1x1x1 centered cube.

return cube({ center: true });

We center our objects to make it easier to transform them. We can now make the cube bigger by scaling it by 2 in x, 4 in y, and 8 in z dimensions:

return cube({ center: true }).scale([2, 4, 8]);

We can now translate that cuboid one in the x direction using:

return cube({ center: true }).scale([2, 4, 8]).translate([1, 0, 0]);

Homework

• create a file for each item using VSCode and save
• board of dimensions 8x x 16y x 4z
• hollow box of dimensions 8x x 8y x 8z x 2t where t = thickness
  • using difference
  • using 6 different pieces
• hollow box of dimensions 8x x 16y x 4z x 1t where t = thickness
  • using three pieces translated into place
• board with screw holes of diameter 1 removed at corners 2 from corner
  • using cylinder -- cylinder({r: 1, h: 2, center: true})
• something of your own creation