3D Transformations in Processing

Image for post
Image for post

Pushing Matrices with Native Functions

Order of Operations

Image for post
Image for post
Unexpected transform results.
Translation-Rotation vs. Rotation-Translation ordering.
Translation-Rotation-Scale Ordering.

Sidebar: Keep Rotations Simple

Image for post
Image for post
Four rotating cubes.
Four Rotating Cubes Code.

Notation

Sample output for Translation-Rotation-Scale order of operations.
Image for post
Image for post
PMatrix3D variable layout.
Image for post
Image for post
Representing a matrix with an array of arrays.
Image for post
Image for post

Translation and Scale

Translate definition.
Scale definition.
Image for post
Image for post
A transformation.
Image for post
Image for post
Translation’ is the dot-product of the old translation and the row-major representation of the rotation multiplied by the scale.

Nesting Transformations

Image for post
Image for post
2D Solar System
2D Solar System Code

Trees / Hierarchies

A solar system represented as a tree.
Image for post
Image for post
Animation rig represented as a tree.

Decomposing Transformations

Decomposing a 2D matrix, code.
Image for post
Image for post
Nested transforms in 3D.
Nested transforms in 3D code.

A Custom Transform

Writing A WishList

Transformable Elements

Transformable code
Utility code

Tuple

Tuple code

Coordinate

Coordinate code.

Direction

Direction code.
Image for post
Image for post
Image for post
Image for post
A shape with normals from an .obj file, left in green; with normals calculated by Processing, right in purple.
Normal code.
Vector code.

Dimension

Dimension code.

Rotation

Rotation code.
Image for post
Image for post
Alternative quaternion representations.
Image for post
Image for post
Quaternion multiplication.
Image for post
Image for post
A quaternion’s conjugate.
Image for post
Image for post
A quaternion’s inverse.

Brittle Class Hierarchies

Image for post
Image for post
Image for post
Image for post

Transform Classes

TransformSource, code.
Transform code.

Applying Transformations

Applying transformations to a point code.

Example: Spirograph

Image for post
Image for post
Spirograph with additive blend mode and translucent background.
Spirograph code.
Code for a translucent background in 3D.

A Custom Mesh

WaveFront .obj File Format

A Wavefront .obj file format for a cube.
Image for post
Image for post
Diagram for drawing a cube’s front face.

Mesh Class

Mesh code.

Acquiring Faces and Vertices

Vertex code.
Face code.
Code for requesting vertices and faces.

Importing An Obj File

Exporting An Obj File

Material Class Definition

Drawing An Entity

Entity class code.
Image for post
Image for post
Three rotating entities.
Entity drawing and export.
Image for post
Image for post
Image for post
Image for post
Imported into Blender (v 2.79), left, and Unity (v 2018.1.0b3), right.

Easing

Transform easing code.
Image for post
Image for post
Tweened nested transforms.
Tweened nested transforms code.

Conclusion

Creative coder from Wisconsin, USA.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store