3D Text Challenge
Yesterday Nodebox user and generative artist Jussi Jokinen posted an animation of 3D text on Instagram which he made in 2D using PaperJS. When I suggested it would be a fun project for Nodebox, he challenged me to replicate his piece so he could see how it might be done.
Challenge accepted!
The "right" way to do this would be to build actual 3D forms with x,y,z coordinates and simulate a lighting source and viewing perspective. This is quite possible to do in Nodebox. X,Y,Z coordinates are just strings of 3 numbers concatenated with commas, and 3D shapes are just lists of those strings. I made some progress building just such a system last year, and may yet take it up again, but it does require a bit of overhead.
Fortunately, for cases like this, there is an easier way. Screenshot and demo Nodebox network attached.
Jussi's design featured orange letters with blue shadows (but with orange retained on the flat parts of the letters. The word ZENITH is reflected and additional orange rays lead to a vanishing point which revolves around the words.
Both the painting of the letters and the rays are done by sampling the textpath and drawing line segments from each point. Non-flat portions of the letters are colored blue whenever they fall to the right of the vanishing point (whenever the angle is between 90 and 270 degrees). "Flatness" is determined by comparing the Y values of neighboring points, and the flat lines are drawn after the non-flat lines to give the letters a solid look.
When drawing 3D figures in perspective, the order of drawing is vitally important. Lines farther away from the shifting perspective center point should be drawn first to be behind. I build a perspective table with this measurement, then sort the lines accordingly.
Because I'm not actually modeling the true shape of the letters with this approach, you can see them "stretch" as the vanishing point revolves. The stretching is proportional to the sine of the angle to the point, so could be corrected. But I liked the stretching effect so left it in.
All the details are in the NDBX file. Thanks to Jussi for an interesting challenge.
John
-
zenith_screenshot.png
1.38 MB
- zenith.ndbx.zip 8.88 KB
zenith_screenshot.png
Keyboard shortcuts
Generic
| ? | Show this help |
|---|---|
| ESC | Blurs the current field |
Comment Form
| r | Focus the comment reply box |
|---|---|
| ^ + ↩ | Submit the comment |
You can use Command ⌘ instead of Control ^ on Mac
1 Posted by Jussi Jokinen on 12 Dec, 2022 03:57 PM
Wow, this is very creative solution, John! Building extruded volume from single lines is something that didn't even cross my mind… I was thinking about challenging you to broaden the solution to cover curved forms as well, but it does that already!
My solution to that problem is not yet fully stable.
In my solution I calculated the extruded point for each corner point and generated closed "3d" face per each straight line in a letter. So the amount of elements needed to draw one frame is kept to minimum and the interaction with the mouse is smooth (mouse drag moves the vanishing point).
How did I figure out which face is visible and which is not? By examining if a point that is on the line between the center point of a path and vanishing point is within letter boundaries if given a little offset. If that makes sense… So I can only draw extrusion where it's needed.
The solution to ordering faces so that those closest to the vanishing point are on the top was the same as far I can see.
Your solution to figuring out extrusion colour was pretty unique. What I did was I examined the quadrant where the normal of a path's middle point is facing. In paper.js there is method "quadrant", meaning the 90° slices of full circle. Easily reproducable in Nodebox, surely.
Stretching near the vanising point is the beauty of this approach I guess :) Something that you wouldn't get if it'd be real 3d… Also this approach makes possible effects that are not reproducible with 3d and that IMHO makes this kind of approach interesting and worth exploring.
Thank you for providing some food for thought again!
Support Staff 2 Posted by john on 12 Dec, 2022 10:36 PM
Jussi,
This note landed in the spam folder for some reason, but I plucked it out.
Thanks for sharing the details of your approach. There are usually many different ways of solving problems like this. One thing I find fascinating about coding is that it manifests and makes visible individual thought processes. Each Nodebox network is a diagram of someone's thoughts as they worked through a problem.
What's not visible are the dead ends I took along the way; the evidence of that was left on the cutting room floor. One thing I particularly like about Nodebox is the way it lets you immediately see your mistakes and correct them as you go.
I'll be interested to see if you continue your experiments with 3D text.
John