Autodesk Creative Platform Core Version 1.19.0
A broad and deep collection of 2D and 3D capabilities.

Heart Extrusion Generator

This tutorial will introduce you to a simple method for creating 3D shapes out of 2D outlines. There's another tutorial, Platonic Solid Generator - Part 1, which shows how a script can generate shapes from 3D primitives like triangles.

Table of contents

From Canvas 2D to 3D

In this tutorial we'll start with ordinary 2D graphics and turn it into a 3D shape. One great thing about the Autodesk Creative Platform is that it uses the JavaScript language which is already familiar to many people from web development. To get quickly off the ground, we'll take an existing bit of JavaScript graphics code meant for a web page and use it as the source for a new 3D shape. The result of our effort will be the heart shape shown in the screenshot below.

Creating a Shape Generator

Before digging into the JavaScript code, let's take a brief glance at the essentials of creating a Shape Generator.

On the right-hand side of the Tinkercad Editor, expand Your Shape Generators and click on New Shape Generator. Choose one of the example scripts as a starting point, for example Star.

Custom shapes category

Click on Edit, and the Autodesk Creative Platform Library Editor appears on the left-hand side of the window.

You can delete everything and just leave an empty process() function like the one below — we'll fill it out with brand new code soon.

function process(params) {
}

Reusing HTML5 graphics code

The Autodesk Core Library's approach for creating 2D shapes is very similar to the Canvas graphics API available in HTML5. We can take a piece of code that generates a shape in Canvas and reuse it for our Shape Generator.

Mozilla's developer site has a Canvas tutorial that contains a short and sweet example of rendering a heart:

Click here to open the Canvas tutorial in a new tab

Copy the drawing code under the comment that reads “Bezier curve example”, and paste it into the Autodesk Creative Platform Library Editor inside the process() function. Replace references to ctx with path.

Then add this line at the start of the process() function:

var path = new Path2D();

Also add one line at the end of the process() function:

return Solid.extrude([path], 10);
Heart upside down

That's all! Click Save. You should now see the heart shape in your Shape Generators list. To create an instance of this shape, you can drag & drop it into Tinkercad's workspace just like other shapes.

Below is the complete heart generator script we just adapted from the HTML Canvas example.

function process(params) {
    var path = new Path2D();
    path.moveTo(75,40);
    path.bezierCurveTo(75,37,70,25,50,25);
    path.bezierCurveTo(20,25,20,62.5,20,62.5);
    path.bezierCurveTo(20,80,40,102,75,120);
    path.bezierCurveTo(110,102,130,80,130,62.5);
    path.bezierCurveTo(130,62.5,130,25,100,25);
    path.bezierCurveTo(85,25,75,37,75,40);
    return Solid.extrude([path], 10);
}

The height of the extruded shape is 10 millimeters. You can change this by modifying the last parameter passed to the Solid.extrude function.

Flipping the solid

The heart is not quite what we expected because it's upside down compared to the sample image shown in Mozilla's tutorial. This is because the coordinate system of the Canvas API is flipped in the Y direction compared to the 3D space in the Autodesk Creative Platform.

We could fix this by modifying the coordinates passed to the path methods like moveTo() and bezierCurveTo() however there's an easier way to flip the entire shape.

The object returned by the Solid.extrude() call is a Solid3D object. A quick glance at Solid3D reveals a method called Solid3D.transform is available. This method is a generic way of performing transformation operations like translating, scaling and rotating. Let's use it to flip our heart shape so that it looks like the original one on the Mozilla site.

The transform() method takes a 4x4 transformation matrix as its argument. Don't worry if you're not quite up to speed on linear algebra. We don't need to do anything complicated with this matrix, we'll just tweak one value to scale the solid by -1 in the Y direction.

Replace the last line of the process() function with the following:

var solid = Solid.extrude([path], 10);
var tm = [1,  0, 0, 0,
          0, -1, 0, 0,
          0,  0, 1, 0,
          0,  0, 0, 1];
solid.transform(tm);
return solid;
Heart

The transformation matrix is represented as a JavaScript array of 16 numbers. A matrix that is otherwise zero except that it has the value 1 at indices 0, 5, 10 and 15 is called the identity matrix — this means that transforming a solid by this matrix won't alter it in any way. We can change the values at indices 0, 5 and 10 that were set to 1 in order to define the scaling factor in each dimension. Thus by changing the second one of them to -1 we'll cause all Y coordinates to be scaled by -1.

Now the heart is right way up. Transformation matrices are a powerful tool in 3D graphics and modeling, but you can get far on the Autodesk Creative Platform without knowing matrices more intimately than this. If you are interested in learning more about transformation matrices, have a look at Matrix3D.

Fixing the position

There's one other annoying thing about the code we copied from Mozilla Developer Network, though. It draws the heart at a location that's not centered on the origin. This makes sense in the HTML5 Canvas world where shapes are measured in pixels: the origin of the image plane is the top-left corner and negative values are not visible. But in 3D space, we'd like to have the center of the heart at point (0, 0).

You can use the same transformation matrix to reposition the heart. In the matrix, the last value on each of the first three lines is the translation offset. Try entering some numbers there instead of zero, and you'll see the shape being translated accordingly.

The actual values for translating the solid to the origin are left as an exercise. You can calculate them by looking at the coordinates passed to the Path2D methods: where is the center point of the heart shape we're drawing?

Below is the complete commented code for the heart shape at this point.

There is also a modified version that doesn't use the Canvas-style pixel coordinates anymore, and has added parameters for easy modification of the shape's size and height. You can find this updated heart shape in the list of examples Tinkercad's Shape Generator Templates.

// A 2D heart shape based on HTML5 Canvas code example at Mozilla Developer Network:
// https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes
function process(params) {
    // The Path2D object has methods with same names as the HTML Canvas "context" object,
    // so we can use this code directly from the MDN example.
    var path = new Path2D();
    path.moveTo(75,40);
    path.bezierCurveTo(75,37,70,25,50,25);
    path.bezierCurveTo(20,25,20,62.5,20,62.5);
    path.bezierCurveTo(20,80,40,102,75,120);
    path.bezierCurveTo(110,102,130,80,130,62.5);
    path.bezierCurveTo(130,62.5,130,25,100,25);
    path.bezierCurveTo(85,25,75,37,75,40);
    // The 2D path is extruded into a 3D shape.
    var solid = Solid.extrude([path], 10);
    // HTML Canvas has the coordinate space upside down compared to us.
    // We can fix that by transforming the 3D solid with the following transformation matrix.
    // This matrix applies a -1 scaling in the Y direction.
    var tm = [1,  0, 0, 0,  // Modify the last value on this line to move in X
              0, -1, 0, 0,  // Modify the last value on this line to move in Y
              0,  0, 1, 0,
              0,  0, 0, 1];
    solid.transform(tm);
    return solid;
}