Creating a grid of columns inside Tinkercad using JavaScript

A little over a month ago, Autodesk acquired Tinkercad. Tinkercad is a 3D CAD tool that uses WebGL to display graphics directly in your browser. While this tool is primarily targeted at consumers โ€“ it's proving very popular among the 3D printing community โ€“ I thought I'd check it out to understand its customization capabilities.

If you want to get to know the capabilities of the Tinkercad system, I suggest taking a look at these step-by-step lessons. I personally just dove right in โ€“ the system is very straightforward to learn โ€“ but I'm sure there are basics that I've missed by doing so. ๐Ÿ™‚

After creating a new design โ€“ which gets assigned a fun random name, in my case "Fantabulous Kup" โ€“ you get presented with your blank workplane. On the right-sash, you'll see the "Shape Scripts" section, from which you can create a Shape Script based on an existing sample or start from scratch. You should definitely check out the samples โ€“ there's some great stuff there โ€“ but we'll just copy and paste from code into an "Empty" Shape Script.

Creating an empty Shape Script

Once the empty script has been created, we'll see the JavaScript code that forms the basis of the Shape Script in a window at the bottom left of the screen.

Our empty Shape Script

This JavaScript code will get executed on the server against the Gen6 geometry kernel. For more detailed information on how this all works, check out the developer documentation and specifically the API reference.

Here's the JavaScript implementation of our simple Shape Script โ€“ that creates a grid of square columns โ€“ for you to copy & paste into the implementation window:

params = [

  { "id": "cols",

    "displayName": "Columns",

    "type": "int",

    "rangeMin": 1,

    "rangeMax": 10,

    "default": 2

  },

  { "id": "rows",

    "displayName": "Rows",

    "type": "int",

    "rangeMin": 1,

    "rangeMax": 10,

    "default": 2

  },

  { "id": "size",

    "displayName": "Size",

    "type": "int",

    "rangeMin": 1,

    "rangeMax": 10,

    "default": 2

  },

  { "id": "gap",

    "displayName": "Gap",

    "type": "int",

    "rangeMin": 0,

    "rangeMax": 10,

    "default": 2

  },

  { "id": "height",

    "displayName": "Height",

    "type": "float",

    "rangeMin": 1,

    "rangeMax": 100,

    "default": 10

  }

]

 

function process(params) {

  var c = params.cols;

  var r = params.rows;

  var h = params.height;

  var s = params.size;

  var g = params.gap;

 

  // Our array of paths to populate

 

  var paths;

 

  for (var i = 0; i < c; i++) {

    for (var j = 0; j < r; j++) {

 

      // Create a square 2D path at the

      // appropriate location

 

      var path = new Path2D();

 

      var isg = i * (s + g);

      var jsg = j * (s + g);

      path.moveTo(isg, jsg);

 

      path.lineTo(isg + s, jsg);

      path.lineTo(isg + s, jsg + s);

      path.lineTo(isg, jsg + s);

      path.lineTo(isg, jsg);

 

      // If the first item in the array, create it

      // otherwise append to it

 

      if (i == 0 && j == 0) {

        paths = [path];

      }

      else {

        paths = paths.concat(path);

      }

    }

  }

 

  // Extrude the paths into our grid

 

  var solid = Solid.extrude(paths, h);

 

  // Flip the shape vertically

 

  var tm =

    [

      1, 0, 0, 0,

      0, -1, 0, 0,

      0, 0, 1, 0,

      0, 0, 0, 0

    ];

  solid.transform(tm);

 

  return solid;

}

Once you've pasted the code in, if you click the cog you can modify the Shape Script's name.

Adding a name to our Shape Script

At some point, the preview for the Shape Script โ€“ based on the default parameters defined in the script โ€“ will get displayed in the UI. Even before this happens we can drag the object defined by the script onto our workplane.

Drag and drop across onto the workplane

You'll see the parameters for the object get displayed in the "Inspector" window. We can modify these parameters to see the results of our script in action (it gets re-executed on the server whenever a parameter is changed).

Here you'll see the sliders have been moved across โ€“ and the view changed โ€“ and the preview has also now been displayed in the right-sash.

Modify the parameters and the view

That's it for my first playing around with Tinkercad and Gen6. I'd really like to implement something more complicated, such as a tree object or a Hilbert cube, but I can see there are some limitations placed on the modelling operations you can perform (for the first we'd probably need to return or union multiple solids, for the second we'd need to extrude along an arbitrary 3D path, neither of which seem to be possible with the current Shape Script implementation). I really like the way extensibility has been built into the Tinkercad system, though, and am looking forward to doing more with it.

4 responses to “Creating a grid of columns inside Tinkercad using JavaScript”

  1. James Maeding Avatar

    interesting prog, all SAAS.
    I tried a couple lessons, and realized I really did need such simple instruction on a new prog. Made me feel about 2 years old ๐Ÿ™‚
    I did not care for the 3d orbiting by the arrows though, hope it has a better mechanism somewhere.
    Why would AutoDesk try to compete with sketchup though?
    Curious what this prog has that is special.

  2. Kean Walmsley Avatar

    The middle mouse button - with or without the shift key - is a great tool for moving the view. Give it a try.

    We have a number of tools in the consumer space (mostly using the 123D branding). Yes, SketchUp is used by lots of Makers, but I expect the hope (belief?) is that we can more closely tailor Tinkercad to the needs of that community (one it's already doing a great job of serving).

    Everything you create in Tinkercad is 3D print-ready, as far as I can tell (although some geometry would clearly need support structure, just as with any other design tool targeting 3D printing).

    Kean

  3. James Maeding Avatar

    Did you notice the makerbot now has 1200 dpi resolution?
    I would like to see something printed from Tinkercad on it.

  4. Kean Walmsley Avatar

    Things are starting to get interesting as resolution increases... I'm also curious to see the results with each successive generation of 3D printer.

    Kean

Leave a Reply

Your email address will not be published. Required fields are marked *