Published on | Prototyping: From UX to Front End — Medium Jeremy Behreandt

This tutorial explores how to extrude 2D forms into 3D along a curve. This is useful when creating tubes, hairs and like structures. Since there are many great resources available for prerequisite discussions of vectors and curves, we’ll review core concepts but assume some prior acquaintance.

Bézier Curves in Two Dimensions

A Bézier curve consists of two anchor points and a number of control points. A curve with one control point is a quadratic curve; the Processing implementation, which has two, is cubic. If we imagine a curve not as a static line, but as a path of travel, the first anchor point serves as an origin; the second, a destination. The shortest path of travel is a straight line, but the two control points act as attractive forces that waylay the traveler from that path. The closer the traveler to the first anchor point, the stronger the force exerted by the first control point; the closer to the second anchor point, the greater the second control point’s influence.

<a href="https://medium.com/media/d41212f286842b0efeace3841638fa5f/href">https://medium.com/media/d41212f286842b0efeace3841638fa5f/href</a>

The bezierPoint function allows us to animate our imaginary traveler. We add

<a href="https://medium.com/media/45308b25d134904bda1b148936967cb7/href">https://medium.com/media/45308b25d134904bda1b148936967cb7/href</a>

to the code. The step variable, which ranges between 0 .. 1, describes the percent of the traveler’s progress from the origin, ap0, to the destination, ap1. What if we wanted to know which direction the traveler was facing each step of the way? The bezierTangent function will provide the answer.

<a href="https://medium.com/media/9be4adc2396ecce0ca1adddc2d4c286b/href">https://medium.com/media/9be4adc2396ecce0ca1adddc2d4c286b/href</a>

Since we only want to know the direction our traveler is facing, we don’t need the length, or magnitude, of the tangent vector; we therefore normalize the result, then, for the sake of visualization, multiply it to an arbitrary length, 50. To consolidate the traveler’s position with direction, we add traveler to facing.

An ellipse and tangent (pink) on a Bézier curve (orange) described by two anchor points (blue) and two control points (green).

What we can’t see, since a circle looks the same no matter its rotation, is that our traveler doesn’t face the direction of travel. We resolve this with atan2.

<a href="https://medium.com/media/4dda8c0bc0af20f0c9dc946351b0f23a/href">https://medium.com/media/4dda8c0bc0af20f0c9dc946351b0f23a/href</a>

Drawing the traveler with vertices makes it easier to see this orientation. Between these two function calls, a is the rotation of the traveler, while t is the rotation of a point on the traveler’s boundary within local space. Adding t to a converts that point from local space to world space.

Bézier Curves In Three Dimensions

While the bezier function works with the P3D renderer, bezierPoint and bezierTangent do not. Our next step is to create 3D versions. We’ll focus on the implementation here, since the mathematical foundation of curves has been more expertly covered by, for example, Keith Peters in Coding Math, Mike Kamermans in A Primer on Bézier Curves and Thomas W. Sederberg in chapter 2 of Computer Aided Geometric Design.

Points

<a href="https://medium.com/media/fa0828cf3d0edd3731baa3050d422ad8/href">https://medium.com/media/fa0828cf3d0edd3731baa3050d422ad8/href</a>

The bezierPoint function may look daunting, but it is several interpolations — from ap0 to cp0, from cp0 to cp1, from cp1 to ap1, and then between the results of those interpolations — condensed for efficiency. Since we cannot directly access or mutate a PShape’s translation, we store the results of bezierPoint in a PVector array. To simplify our draw call, we add each bead that we place on the Bézier curve to a parent shape, beads. On mouse click, we reset the curve, and so we cancel out the shape’s translation with resetMatrix, then translate anew.

Tangents

<a href="https://medium.com/media/d72df4af518e844bbf3936fb0fadeeb3/href">https://medium.com/media/d72df4af518e844bbf3936fb0fadeeb3/href</a>

The tangents array stores the results of the function. As in 2D, unless we are interested in magnitude of the result, we normalize and add to the center.

Normals

Rotation in 3D is more complex than Euler angles (radians and degrees) alone permit, so atan2 won’t suffice. Before we can rotate a bead, we must clarify its local space. To explain local space, an analogy: a human’s local space can be described with terms such as right (1, 0, 0), up (0, 1, 0) and forward (0, 0, 1); world space would be described with West, North, toward the Earth’s center of gravity. Depending on how an individual is positioned, oriented and scaled relative to his or her world, those coordinates will be different in world space. The tangent found above is the z axis in world space; the normal derived from it is the y axis. For more on this Marco Alamia’s World, View and Projection Transformation Matrices is a great resource.

<a href="https://medium.com/media/372e350d9be5f2ada6f5bb1b8c5d65c0/href">https://medium.com/media/372e350d9be5f2ada6f5bb1b8c5d65c0/href</a>

Since introductions to vectors, such as Shiffman’s in Nature of Code, often start with 2D vectors, where the cross product is not needed, we take a moment to look at it here. As with all Processing code, when we want to work with or around it, we look at the source.

<a href="https://medium.com/media/67ad46e7d8aa4d1de1c9c549ecfbe0bc/href">https://medium.com/media/67ad46e7d8aa4d1de1c9c549ecfbe0bc/href</a>

We map the x,y and z axes to red, green and blue: horizontal is red, vertical is green and depth is blue. Due to the variance of coordinate systems in 3D software, we hesitate to say left, up or forward as we did in the earlier analogy.

Without saying so, we’ve been constructing a transform, a concept to which we’ll return shortly.

Rotation

As with 2D, we need a shape that— unlike a box or sphere —clearly telegraphs its spatial orientation. We’ll be constructing shapes dynamically in steps to follow; for now we import this notched pyramid. We include screen captures of the model in Blender and Unity not only as a preview, but to see how varying coordinate systems influence the transform of the model.

World coordinates in Blender (bottom-left corner) and Unity (top-right corner). In Blender, the z axis is the vertical axis, while the y axis is depth.

More generally, this is important when working on a team either with or as a modeler. No one .obj file export will be suitable to all 3D engines.

<a href="https://medium.com/media/f6d9673b234b423d4a6cd56d32f65181/href">https://medium.com/media/f6d9673b234b423d4a6cd56d32f65181/href</a>

Since Processing does not feature quaternions, data types which facilitate 3D rotation, we work with 4 x 4 matrices implemented as PMatrix3D. The definition of the new lookAt function, which returns one of these matrices, should look familiar: it performs the same cross product operations we did one by one. This is a hint that matrices store transformation data we had cached in separate vectors.

<a href="https://medium.com/media/6fdf3effb800b7f61931b0c2634063e7/href">https://medium.com/media/6fdf3effb800b7f61931b0c2634063e7/href</a>

Because do not want a lookAt function to also translate a shape, we leave the last column as an identity, (0, 0, 0, 1). Given PMatrix3D m, the values corresponding to the above would be

<a href="https://medium.com/media/2d13ea7d0d4444df3efe681f929f19e1/href">https://medium.com/media/2d13ea7d0d4444df3efe681f929f19e1/href</a>

Object-Orientation

Our main sketch code is very cluttered, so now would be a good time to tuck functionality away into separate classes. We’ll begin with a rudimentary transform. Since PMatrix3D is marked final, and therefore cannot be extended, we define a wrapper class around it.

Transform

<a href="https://medium.com/media/2a40179e8976c98ee22f081794b454e6/href">https://medium.com/media/2a40179e8976c98ee22f081794b454e6/href</a>

Although we could use number format functions from Processing — nf, nfs, nfp and nfc — it is easier to use Java’s StringFormat, and to settle on a format at the top of the class. The %.2f is a token which will be replaced by the float in the corresponding spot, and indicates that the float is to be written to a precision of 2 places after the decimal point.

Bezier

We move the operations that created our axes to a Bezier class, and then consolidate them into the getTransform function.

<a href="https://medium.com/media/9beba4e14221f44aeaa4b72233126058/href">https://medium.com/media/9beba4e14221f44aeaa4b72233126058/href</a>

If we’re confident that we will only be using a cubic Bézier curve, we could retain separate PVectors which describe our anchor and control points in a more intuitive way, such as PVector ap0;, PVector cp0; , and so on. If we know in advance that our curve will have a fixed level of detail, we can store an array or ArrayList of transforms in the class itself. Lastly, should we not need the wrapper functions in the Transform class, we could work directly withPMatrix3D s as transforms.

We must emphasize that in creating these classes, we are duplicating and exposing structures and behaviors which were already at work under the hood; we do this for the sake of learning about the nuts and bolts of 3D; those concerned about efficient and robust code may wish to work with OpenGL directly, rather than with Processing and Java acting as intermediaries, where concepts like Transform, Quaternion and Matrix are already developed.

Adjusting the Curve

Heretofore, we’ve relied on randomly generated curves. While this occasionally leads to pleasant surprises, more often, it leads to involute monstrosities. The guiding hand of a designer would allow for better results.

Given the cumbersome amount of data within it — 4 vectors with 3 components each — were we to try to edit all 12 values independently, perhaps with the keyboard, we’d end up with a byzantine interface. And yet, the intuitiveness of one of our most ready-to-hand tools, the mouse, works against us. We may want a control point on the curve to move up in space when we move our cursor up on the screen … or to recede into the horizon when we move our mouse forward on the desk… or we might want our point to on this spot where we clicked.

Two relevant functions here would be to convert a coordinate from screen space to model space and vice versa. Processing has split these functions into modelX, modelY, modelZ and screenX, screenY, and screenZ. With the native code as a reference, we consolidate these functions and overload them to work with vectors.

<a href="https://medium.com/media/20e3387af935385431d379189ba9f8a7/href">https://medium.com/media/20e3387af935385431d379189ba9f8a7/href</a>

We convert vector inputs to a float array, where the fourth element is the identity, 1, before involving them in calculations with 4 x 4 matrices. We do not have inside access to the renderer, so we will acquire the sketch’s g and cast it to the needed data type.

<a href="https://medium.com/media/64c81ede4b3e0435411f2a0b7c713cad/href">https://medium.com/media/64c81ede4b3e0435411f2a0b7c713cad/href</a>

With screen especially, we assume that the camera is static and that the source renderer from which we are taking the model coordinate and the target renderer’s screen are the same. This may not always so, as in the case where we’d want to project a 3D shape to a SVG renderer or tour around a model with the camera.

For every different idea we have for how to manipulate a point on our curve, we could create an ‘editing mode’. We create functions to cycle through each point and each edit mode

<a href="https://medium.com/media/14a3249115a8cea41d76b0cb7777a20d/href">https://medium.com/media/14a3249115a8cea41d76b0cb7777a20d/href</a>

These functions could be triggered by a key press, mouse press or other input. For each edit mode, we create a switch case in an adjust function.

<a href="https://medium.com/media/9041c03968b8a1b7d650c171a6030686/href">https://medium.com/media/9041c03968b8a1b7d650c171a6030686/href</a>

In edit mode 3, our mouse’s vertical movement adjusts the y component of the point; in mode 2, the z component; in mode 1, the point is set to the model position of the cursor. More sophisticated editing capabilities may involve ray casting and mouse picking, but since interface design is not the focus of this tutorial, we trust improvements can be researched beyond our present scope. Since the diagnostic information displayed between pushStyle and popStyle is a HUD, we turn off several renderer functions which work with depth of this display. Our main sketch can be condensed to

<a href="https://medium.com/media/5f309d0c6b7de669e3e41a4822fa1003/href">https://medium.com/media/5f309d0c6b7de669e3e41a4822fa1003/href</a>

To update the curve is not to update the shape(s) depend upon it. This is where the choice between a retained and an immediate mode of drawing the shape will come into play in the future. In immediate mode rendering, we use the renderer’s beginShape and endShape in draw, so no update function is needed. For retained mode, wherein we create a PShape, we may want to recreate the shape or to choose which properties (vertices, uvs) to adjust.

Procedural Modeling in 3D

Connecting the Dots

Before we add ribs to the skeletal curve we’ve started, we pause to review building 3D shapes. Any time we lay down vertices between beginShape and endShape, there are 10 settings for how the renderer will connect the dots into edges and then faces. A helpful analogy might be to think of a board full of pins around which we wrap rubber bands. Depending on our strategy, not all points may be used in constructing a shape; not all lines may become edges of a face.

<a href="https://medium.com/media/0c46954f15a7858fe37ce26672eb9611/href">https://medium.com/media/0c46954f15a7858fe37ce26672eb9611/href</a>From left to right: POINTS, LINES, LINE_STRIP, LINE_LOOP, TRIANGLES, TRIANGLE_STRIP, TRIANGLE_FAN, QUADS, QUAD_STRIP, POLYGON.

POLYGON is the default option. How a shape is built not only impacts geometry, but also color fills and strokes when we assign color on a vertex-by-vertex basis. In the big picture, if we want to optimize the shapes we build for a given render type, we must consider the order in which we construct a geometry.

Immediate and Retained Shape

As previously mentioned, we have a choice between creating a shape in setup then caching it in a PShape object, or using the immediate shape tools belonging to the sketch’s PGraphics renderer.

<a href="https://medium.com/media/85a456cfe042d6b58c29183b392c228e/href">https://medium.com/media/85a456cfe042d6b58c29183b392c228e/href</a>Retained shape (left) and immediate shape (right).

The former makes it easier to develop the shape right away and then call it in draw with shape, avoiding expensive calculations. The latter makes it easier to animate the shape in response to user input. This is not to suggest, however, that we cannot animate a shape once cached.

<a href="https://medium.com/media/5c3d6df5c46c1567bcdee0712cccd6dd/href">https://medium.com/media/5c3d6df5c46c1567bcdee0712cccd6dd/href</a>

On a side note, the above also demos an alternative manner of drawing a circle, in which we return to the center before drawing the next vertex. A benefit of using a shape’s member rotate functions is that we do not run into gimbal lock in the same way we would when using the immediate rotate functions. An inconvenience is that, because the array of vertices in a shape are not public, we must access them via getVertex and setVertex; we store them separately.

Texturing

Retained

To project an image onto a shape, we bring in the following diagnostic image

by going to the Sketch menu in the editor’s tool bar, then selecting Add File… to add it to the sketch’s data folder.

<a href="https://medium.com/media/e56f26689f90894a9d85a7e8510689c2/href">https://medium.com/media/e56f26689f90894a9d85a7e8510689c2/href</a>

Immediate

To illustrate the versatility available to us, we also demo in the code below how the same can be achieved with immediate mode and without vectors

<a href="https://medium.com/media/b1dfbe3c6bf2f925d4d67bb95010cb47/href">https://medium.com/media/b1dfbe3c6bf2f925d4d67bb95010cb47/href</a>

Extrusion

Two different analogies may be helpful when extruding a shape. A curve is like a spine; each segment is a vertebrae which can be stored in a one-dimensional array. For each vertebrae, there is a rib, where each point representing the extruded form (a circle being the easiest) is also a one-dimensional array. We can thus create our tube using a two-dimensional array and nested for-loops.

Another analogy is that of toothpaste: when we squeeze the paste out, it takes the form of the hole through which it is squeezed. This is a helpful reminder that we do not have to extrude a circle, but can extrude a closed form described with an array of vertices (triangle, square, star, starburst, etc.).

A major difference between orienting our test pyramid PShape above and orienting a portion of a single shape is that we don’t want to rely on pushMatrix, popMatrix, resetMatrix or applyMatrix. We are fortunate to be able to look at the publicly available source code so as to work around them. We add the following to our transform

<a href="https://medium.com/media/2e68cb05d60fdfee10021d7a1efb79e6/href">https://medium.com/media/2e68cb05d60fdfee10021d7a1efb79e6/href</a>

The same tech we used in creating our user interface can be generalized to this case. Instead of converting a screen coordinate to a world coordinate, we are porting a shape’s local coordinates over to world.

<a href="https://medium.com/media/b7b6ffbece824e16ada2e9ca95b28c18/href">https://medium.com/media/b7b6ffbece824e16ada2e9ca95b28c18/href</a>

With the Transform.model function we can focus solely on what each rib looks like in polar coordinates. In connecting those ribs, we treat each side-panel the same way we would drawing a square in 2D: start in the top-left corner (0, 0), then proceed clockwise to the top-right (1, 0), bottom-right (1, 1) and bottom-right (0, 1). A key difference is that the top and bottom of the square are different angles on the radius.

Tapering

If we wish to emulate a tentacle, strand of hair, etc., a tube of uniform diameter will not suffice. A quick remedy would be to scale down our radius each iteration through the outer for-loop, radius *= .9;. What if we need a more sophisticated form, for example,

in which the diameter of the tube varies arbitrarily? While there are any number of formulae we could apply to the radius, a simple approach would be to overload linear interpolation to transition between not just two — but an array of — numbers.

<a href="https://medium.com/media/c03b420557343f34149741dbf21ea4b4/href">https://medium.com/media/c03b420557343f34149741dbf21ea4b4/href</a>

We store a series of desired radii for the tube in a float array, then find the appropriate radius once we know the step in the for-loop.

<a href="https://medium.com/media/a79279d3c1ca8caa60dc1cc6f5ef33c7/href">https://medium.com/media/a79279d3c1ca8caa60dc1cc6f5ef33c7/href</a>

This overloaded lerp is but one of many kinds of easing (smootherstep, ease-in-out, ease-out-elastic are others); an array is but one collection whose elements we can eased between (ArrayLists are another); and other data types, such as colors and PVectors, are frequently interpolated, so this pattern can be applied to many other aesthetic effects.

End-Caps

We only need two cross-sections for our tube, one to cover the front and one to cover the end, so we check for those two cases in the linear loop.

<a href="https://medium.com/media/2c06fd9df4ae43c0c3b6e35bf72d811a/href">https://medium.com/media/2c06fd9df4ae43c0c3b6e35bf72d811a/href</a>

Texturing

There’s no one right way to project a texture onto a tube when uv-mapping, but there are plenty of wrong ways. We opt to texture our end caps as we did an earlier retained shape, then for the side panels, treat the texture like a soda bottle label.

<a href="https://medium.com/media/0426887d257be56e0cf272a53b58d013/href">https://medium.com/media/0426887d257be56e0cf272a53b58d013/href</a>

We change the graphic renderer to repeat textures and use normalized uv coordinates. A trick to texturing, in this case, is that even though an array is a linear data structure, we are dealing with periodic coordinates. sduvs needs one extra element to account for the fact that in at the end we return to the beginning.

Export

By going to the Tools menu in Processing, selecting Add Tool…, clicking on the Libraries tab, searching for “obj”, and installing the OBJExport library, courtesy Jesse Louis-Rosenberg, we give ourselves the capacity to export our shape to other modeling software for further refinement.

<a href="https://medium.com/media/35b21354e480fa86c9e8253592cb6022/href">https://medium.com/media/35b21354e480fa86c9e8253592cb6022/href</a>

Although this example exports only the geometry, as the library’s documentation notes,

The library also supports color mesh export creating a .png texture and a .mtl material file to go along with the obj. Color mode is not enabled by default. Use setColor(true) on the OBJExport object before beginDraw() to turn on color export.

Imported into Blender, our shape looks like so

Conclusion

It may feel as though we’ve not achieved much — a tube — relative to the amount of code written. However, the concepts that went into its construction prepare us to, for example,

<a href="https://medium.com/media/66680f077fb902f3a60f00c2084ef2bb/href">https://medium.com/media/66680f077fb902f3a60f00c2084ef2bb/href</a>

appreciate and effectively use the curve and extrusion API already developed in other frameworks, namely Three.js;

2. use curves in game development, as Jasper Flick and Joachim Holmér demo in Unity, when constructing race tracks and moving platforms;

3. strengthen our Processing-Blender pipeline, since Blender contains hair particle and extrusion tools;

4. better judge which libraries (for example, ToxicLibs by Karsten Schmidt, HE_Mesh by Frederik Vanhoutte, Computational Geometry by Mark Collins and Toru Hasegawa) to try when creating more complex geometry;

5. construct geometry around not only a static curve, but around an appendage determined by kinematics, a topic covered by Coding Train and Coding Math in 2D and by Alan Zucconi in 3D.

6. explore other types of curvatures, for example, a Centripetal Catmull-Rom spline.

Extruding Shapes Along a Curve in Processing was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Extruding Shapes Along a Curve in Processing

Top Stories