Reproducing Arrival logogram (pictural language) in NodeBox3
Good morning/evening,
I hope you're all doing alright wherever you are.
I just discovered Nodebox3 and it's amazing. I'm from the programing world and I really enjoy the node and visual based approach of this software. It's super useful for quick iteration over my design.
I'm actually thinking to produce some design inspired by the logograms from the movie "Arrival".
Initial those logogram ( written character that represents a word) got created with the Wolfram Language (cf links).
But I don't really want to follow this approach, where the circle is composed of recombined subsection.
The approach I would experiment would be more like a "circular plotter" style, where i'm inking a virtual canvas in with polar coordinates ( θ(t),r(t) ) and variable line thickness (φ(t)) in respect to time.
But the principal issue I'm having is I don't know how to "ink" the nodebox canvas, and script it ?
The Freehand node has a behavior somewhat where I would like to go to (drawing on canvas), though there is no input nor for the mousse pointer, nor for the thickness of the point.
How could I overcome this issue?
All the best
Sincerely
248-2484813_arrival-movie-alien-language.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
Support Staff 1 Posted by john on 14 Aug, 2020 05:47 PM
Hi Remi,
Welcome to the NodeBox community! And thanks for such an utterly fascinating challenge.
If you push hard enough, NodeBox can do just about anything. But it's really not a drawing program, so you may or may not find that it meets your needs for this task.
The freehand node (your only way to draw directly in NodeBox) is, as you have discovered by now, fairly primitive. It outputs rough curves composed of many short line segments - not very pretty. But once you've created a path you can analyze it and change it into something more suitable.
The first thing to be aware of is that, if you draw three separate curves, you will still get just one combined path. Technically, it's a path composed of three contours. NodeBox doesn't provide a way of separating these contours, but I have made a node to do that.
(Aside: each of the nodes in this demo is actually a "subnetwork". Control or right click and choose "Edit Children" to see the nodes inside it.)
In order to get a first cut at your "circular plotter" style, I made a node called draw_arc. It takes each contour and simply draws a smooth arc between the first and last points of each contour. It only uses the central angles in relation to the origin to do this, so all arcs will form along the same circle regardless of where they are actually drawn. You can set the diameter of this circle in the draw_arc node (and change it after you've finished all your strokes if you want).
In order to get these boring arcs to look more like brush strokes, I then feed them into another node called "brush". This simply samples points along each arc and draws increasing large circles at each point. The effect is to create a comma-like brush stroke that starts thin and gets thicker. You can adjust the roughness and final size of the brush stroke at any time.
By making multiple strokes, clockwise and counterclockwise, you can create very simple Arrival-style logograms. To use this network, render (double-click on) the brush node, then select the freehand node, click the clear button, and start making strokes. It doesn't matter how close to the center you make each stroke; all that matters is what angle you start with and what angle you end on.
I have attached two screenshots along with the (zipped) NodeBox demo network. As you can see, the initial freehand strokes are crude, but the final output is quite tidy (a little too tidy, but it's a start).
This should be enough to get you started. Because NodeBox is vector only, it takes more work to make organic-looking paint drips and messy blobs. You could use additional information in each contour (like the change in distance from the center) to add more variation. You could use some shape other than a circle to form the brush strokes. Instead of using a single stack of nodes, all with the same diameter, roughness, and spread, you could combine multiple stacks with slightly different parameters. Or you could take the simple logogram as an input to another set of nodes to mess it up.
Please feel free to share your progress and ask more questions. I really enjoyed the links you shared. In fact, I may watch Arrival again this weekend. A VERY cool project!
John
2 Posted by remi.cambuzat on 15 Aug, 2020 01:07 PM
Wahouuu thanks for your amazing feedback.
I'll deeply look into the code and will add some adjustment to make it more organic (some perlin noise and L-system for a start....it seems I'll need to do some port from nodebox2).
When I mean drawing on the canvas It should not necessary be with the freehand tool.
My final goal is to gather some "virtual pencil" data from an OSC feed (polar coordinate (θ,r) and pressure (φ) ). Those being my input in the system, but as I'm far from it right now this is why I'm using freehand instead.
Those OSC input will be retrieved on pre-processed physiological signals (brainwave, hearth beat, ...) from a live performance.
Cf http://www.danseneurale.tech/ ( caution potentially offensive content).
Is there a simple way to smoothly merge several blob into a big one (2D Metaballs like) ?
I hope you enjoyed the movie
All the best
Support Staff 3 Posted by john on 15 Aug, 2020 03:46 PM
Hi Remi,
You are a fountain of interesting links and ideas. I looked you up: the stuff you are doing seems very cool to me. I think you'll find that NodeBox, even with its many limitations, will help you play in new ways.
If you search the forum for "perlin" you will find a handy node that will generate all the pretty noise you want. There are some NodeBox artists on Instagram doing interesting things with that node.
Similarly, if you search for L-system, you will find some interesting past discussions. NodeBox 3 does not play well with L-systems (natively) due to its lack of recursion and state. People have been meaning to port it from NodeBox2 for years, but no one has ever gotten around to it. If you could produce a nice implementation using, say, a Python node, that would be a huge contribution to the NodeBox3 community.
Other NodeBoxers have done performance art projects and all manner of interesting things using OSC. What you're describing sounds totally doable. Are you exploring this as part of your interest in telepresence?
I was not familiar with the term "metaballs" and enjoyed learning about the formal concept here:
https://www.gamedev.net/tutorials/programming/graphics/exploring-me...
You could implement that formal definition in NodeBox, but it would be prohibitively slow for a canvas of any reasonable size. Fortunately there are easier ways to achieve decent-looking metaballs using three key nodes:
I have attached a very simple demo (see screenshot). Try rendering all the nodes and adjusting the parameters to see what happens. Using this basic technique you could create more sophisticated metaballs to mimic specific biological shapes. There are some other techniques I've used in the past for this sort of thing as well.
Enjoy! And please keep the comments, questions, and links coming!
John
4 Posted by remi.cambuzat on 15 Aug, 2020 04:43 PM
Hello john
I'm amazed by your reactivity and lightning fast reply :D
Well for now my use of OSC isn't dedicated for any telepresence or VR usage (I would have use unity3D for that... or maybe vvvv for art installation).
The current work is mainly dedicated to the previously mentioned live performance (DanseNeurale ). Where we're trying to decompose Lukas' state of consciousness in a multimodal way (sound and visual), in order for the audience to somewhat perceived the trance Lukas is experiencing when he is hanged up.
I'll keep you in touch
5 Posted by remi.cambuzat on 15 Aug, 2020 05:33 PM
By I'm creating a "Metacircle" node, whose going to create a Metacircle (idem than a MetaBall but 2D) out of every shape it get in input.
That being said how can combine (with "compound" or similar) all of the geometry from a list or group of x geometry ?
The goal here would be to transform each stroke into a element, who's the combination of all is the sub-element (here elipses/metacircle).
Support Staff 6 Posted by john on 15 Aug, 2020 06:22 PM
Remi,
I am attaching a quick demo (see screenshot). I generate 6 circles scattered at random and use the compound node to merge the ones which overlap. You can change the seed parameter in the scatter node to quickly step through different variations or change the amount to merge as many circles as you want.
The end result is a separate path for each metaball. So in the example I start with 6 circles and end up with 4 metaballs.
The basic idea is to group the list of incoming shapes and then compound that group with itself. You can then use my contours node to separate the group into individual metaballs.
(I never tried this before and frankly was a little surprised that it works.)
When you make your subnetwork you will want to feed your list of starter shapes into a null node. You will then need to use the Metadata dialog to select the port corresponding to that null node and change its range from "value" to "list".
This is a subtle feature of subnetworks that trips up newbies. Each list feeding into a node can be taken in one object at a time (value) or all at once (list). In this case you want to take in all of the objects at once before you group them. If you don't make this change, each shape entering your Metacircle node would be grouped with itself and your node would fire 6 times instead of once, resulting in 6 circles instead of 4 metaballs.
I can't always promise lighting fast replies, especially given our differing time zones, but I try to answer all calls for help within a day or two. You caught me on a good day!
Keep at it! I am quite curious to see what you will come up with.
John
Support Staff 7 Posted by john on 16 Aug, 2020 06:40 PM
UPDATE
When I said I hadn't tried this technique before I was wrong. I forgot that I had already done essentially the same thing in the "fragments" node included in my node library. I developed fragments to locate overlaps of hollow shapes like the circles in a Venn diagram.
The only difference was that instead of compounding a group of shapes with itself, I compounded them with a rectangle boundary big enough to enclose all those shapes. Turns out that achieves the same basic result and runs significantly faster for complex shape groups.
I made a few improvements to my existing fragments node so that it works equally well as a fragment finder and a meta-ball node.
Fragments has an additional parameter: minimum size. This automatically tosses fragments with small areas. This is necessary because, when presented with complex overlaps, the compound node sometimes produces what I call "dust" - tiny fragments of leftover gunk sometimes as small as a single point. Leaving these in causes problems down the line in coloring, labeling, etc. This option also lets you toss smaller fragments that you don't want.
I am attaching a revised demo that replicates my previous example using the fragments node and adds a second Venn diagram example. I will include this improved version of my Fragments node in the soon-to-be-released update of my node library.
Thanks,
John