New to Nodebox! Advice creating these shapes?
Hello! Hopefully this is the right place for this sort of post.
I'm brand new to procedural art, being mostly an Illustrator guy for the last decade. I'm really attracted to Nodebox for its advanced concepts and potential to develop systems that generate design variants.
I'd really like some advice on how some of you might go about creating these shapes (particular D-F) I found in an old Keramics book. So far, I've tried a few ideas based on the Invaders and some of the examples (the ones I understand) from the Cartan Library. I'm mostly stumped on how I might create the loops between segments.
Could these leafy shapes be done in a way that procedurally generates these given parameters like height/width, complexity, seed, rotation, etc? Or am I dreaming? Thanks!
Screenshot_2025-01-04_140450.png
applieddrawing00brow_1_0066.jpg
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 05 Jan, 2025 10:59 PM
Hello Colt,
What an interesting challenge!
First, I think it would be wise to take a step back and get a clear idea of what you are trying to accomplish aesthetically. Procedural tools like Nodebox make it easy to create perfect shapes and straight lines. So, on one end of the spectrum, you could embrace that and create clean, minimalist shapes that echo the original designs with a less organic, more geometric vibe.
The other end of that spectrum would be to create quirky, imperfect designs that seem hand-drawn. The closer you get to truly human-drawn shapes, with microscopic tremors and completely unique variations at every turn, the harder it is to do. So this is a tempting challenge, but is not for the faint of heart. In theory you could almost exactly recreate your leafy shapes, but probably not in a very parameterized way. That is, each one would be a unique piece; parameters could make shallow variations, like the jump from D to E to F, but probably not deep variations. To make a deeper jump from, say, design D to design L, you would probably have to start over from scratch.
What you may want is somewhere in between. Quirky enough to seem organic, but not so quirky that you can't use parameters to drive meaningful variations. There's no one correct answer here; it depends on what you want to do.
In order to have the kind of parameters you listed, you would need to devise a SYSTEM. That is, you would need to devise an algorithm that would start from basic concepts and iteratively evolve complexity. This is quite challenging.
One highly mathematical approach, used to create natural looking trees, leaves, and ferns, is the Lindenmayer system: https://en.wikipedia.org/wiki/L-system
I'm guessing that, with a background as an illustrator and not a coder, this is probably not something you want to wade into. Which is just as well - since, technically, it requires recursion and state, neither of which Nodebox can fully do. I mention it only to deepen your understanding of how challenging it is to turn math into, say, realistic tomato plants filling a space.
Which is not to say this can't be done. Here, for example, is a recursive tree animation I did years ago: http://support.nodebox.net/discussions/show-your-work/290-recursive...
STILL not what you are asking for, I realize.
To make a system from an illustrator point of view, you would need to think about what all the different shapes in your example have in common. One thing is that each one is almost square shape; that is, each has a complex shape the almost perfectly fills a square.
On systematic way of generating such a shape would be to start with a more organic shape, like a leaf, and fatten it out till it presses against the confines of a square box. But to do this properly you would have to do much more than use the fit node, which would just stretch the leaf horizontally and vertically. You would have to seek out any remaining negative space and try to fill it by altering the the trajectory of each component curve in the path in a proportional way. This is possible but would be hard to do in a generic way.
Another thing designs D - F have in common is a branching tree structure, hinted at by the lines. Each branch in the line manifests as a leaf-like structure. Using this insight you could first develop some parameters to generate different branching structures, and then develop a way of turning each "branch" into a square-filling leaf.
In fact, that might be a good first step. Trying making a node that simply generates the faint wiggly lines inside designs D - F. You could have an angle for the main shaft, the number of branches on each side, the wiggliness of each branch, etc. The first parameter should be the size of the square containing these line trees; that will constrain everything that follows.
Once you have the basic branching structure defined, you can then make a proto leaf by constructing a kind of trapezoid filling the space around each branch to the edges of the square. You could then start nibbling away at each trapezoid, taking bites the way you did with your initial appoach.
Actually, the path you started down on is not bad: using the compound node to build up shapes and the shape_on_path node to make the beginnings of interesting edges.
You asked about the "loops between segments". I'm not sure exactly what you mean by this. Do you mean the curvy indentations that run along the edge of the shape, forming the "bites"? If so, this is also rather tricky. You could have another parameter that describe how "tight" these bites are. In design E the leaves are tightly pressed together and as a result the bites are relatively shallow. In D and F there is more room between leaves for deeper bites that seem to close together at first and then open uo a little as they penetrate deeper into the plant.
This gets us back to where on that spectrum you want to fall. It might be easy to start with more geometrical designs at first, where each leaf is a trapezoid and the bites are simple droplet shapes that are just subtracted around the edges at regular intervals. Then you could start to add random noise to these shapes (by resampling curves to add more points, use a wiggle node to jostle them a bit, then reconnect them), and gradually move down the spectrum to more quirky, organic designs.
Is this making ANY sense?
As sometimes happens with newbies, you have innocently chosen a fairly formidable challenge here. I often do the same thing when learning a new tool. I think this is actually a good thing - if you have the gumption to stick with it: as an artist your "reach should exceed your grasp". Trying to do impossible things is a great way to learn how to make amazing things.
That, I'm afraid, is my initial stream-of-consciousness reaction. If I haven't completely scared you away, take another swag at it and then, when you get stuck, reply with a zipped copy of your NDBX file and a more precise question, like "how can I make droplet shapes that curve a little to left or right?"
I hope to hear from you again! Keep on playing.
John
2 Posted by colt on 06 Jan, 2025 02:21 AM
Hey John!
I've read so many of your posts on this forum, I feel like I'm talking to a celebrity haha
Thank you for taking the time to give such a thoughtful response! It's funny, the last thing I read last night (after struggling with this challenge all day) was your great insight on Nodebox best practices or, as I've taken to calling it, the Zen of Nodebox. A lot of what you're saying here is striking the same chords with me. I'd be interested to know if there are more scraps of general (pop?) generative art theory like this.
I'm just familiar enough with ExtendScript and Python to be dangerous, and I'm certainly no mathematician. Actually, I'm a tattoo artist, but I am to STEM fields as sports fans are to... well, sports. Big fan, useless on the field, plenty of opinions to share. The invigorating thing about Nodebox is, as I've gathered its creators intended, that I get to play MC Escher without the distractions of a real education, which suits me just fine haha
This is my primary goal for this project, especially if I can then mix those variants into a sort of Batik tessellation. I have a feeling there's something I could do with your
partitionsandorderingsnodes to maybe provide deep variance, but I'm nowhere close to even understanding thegenji_koandtrigramsubnets, so that might have to be a stretch goal.I appreciate the link on L-Systems. I hadn't heard of these, but I was aware of this 2022 thread where you managed to create a shallow Sierpinski node, which I had considered exploring as a sort of coathanger I could use to organize whatever leafy nodes I come up with. If I'm reading the thread below correctly, there is an L-System that works in-and-only-in Nodebox Live, so your recursive tree is the best we have. It's a shame, but I don't think I need a fully recursive L-System just yet. At a glance, I do see some potential in maybe manipulating a Fermat spiral node (PDF) Phylotactic Patterms to capture a similar effect?
This is LOVELY. Very excited to dig into this piece, I have a feeling that the
tree_rootandgrownodes just changed the game for me.I had actually been playing with the
snapnode because it has that sultry "Stregth" parameter, but it just never seems to produce what I think it ought to. Then, I moved on to yourquadtreenode and had some fun distributing/arranging shapes like sprites, but couldn't come up with a satisfying fattened look. I still think there's something there, but I'm missing the skills to really call it up.You guessed my meaning exactly. I succeeded is using your
ramp_curve(can you tell I've been enjoying Cartan Lib 3.5?) to get the fun loopy look I wanted, but could not figure out a reliable way to reasonably join any "n choose k" line I might draw in a set. Again, I'm sure there's a way but I'm way too green to get there.At this point, I think it's only fair play to return the question to you haha
So this is exactly what I worked on today, and I'm fairly excited about the direction it took me. I made a fun little node, which I'm currently calling (charitably) a
rubberhose(images attached, project available if wanted). I have have some thoughts on how to do this more efficiently, but, for now, they're just a million circles on an arc, scaled according to a ramp. I wonder if they could be made in a way similar to these metaball arcs built by the mysterious Illustrator scripting legend Hiroyuki Sato in ExtendScript?(apologies if my markdown is all wonky)
Support Staff 3 Posted by john on 08 Jan, 2025 11:44 PM
Colt,
First of all, thank you for such an enthusiastic and well-thought-out response. I am flattered that you have taken the time to read my Best Practices and explore my library. I get so few responses here on the forum that sometimes I wonder if anyone is reading any of this. You restore my faith.
Your ideas and instincts are right on target. It was a good thought to try the snap node. It might have done something interesting, but, as happened to you, I have found that it usually doesn't do what I hope it will.
Your rubber hoses are cool! It's a simple idea that produces some pleasing - and rather organic-looking shapes.
A few other nodes from my library you might play with include adjust_point and push_pull. Both are good for droplet shapes, and for getting a feel for different ways of making enticing curves. They are both intended for manual manipulation, but once you have a range of shapes you want, you can parameterize them and use them inside more complex subnetworks.
I've been distracted with some other projects, but may try dabbling on this one this week. As I said before, I think this is a formidable challenge. So my instinct is to work towards it slowly by first making some lines in boxes, turning those lines into gentle curves (maybe using a quad_curve node), and adding branches on either side that extend to the edge of the box.
That seems doable, and, once accomplished, we could then try filling the remaining space around each branch with single trapezoid shapes just to see that would happen. If I get that far then maybe then we could think about ruffling the edges of those trapezoids to see if we can make something more organic-looking (or at least more interesting).
I haven't tried any of this yet, but that is my initial plan of attack. One step at a time.
Feel free to work along the same lines yourself, or take a completely different approach. I'm pretty sure that, between the two of us, we can at least make some interesting boxes for your Batik tessellation.
John
Support Staff 4 Posted by john on 10 Jan, 2025 05:55 AM
Colt,
Note that I moved this thread to the NodeBox 3 category,
As per my last note, I have completed the first phase of my attack on this problem. I made a node, branches, that draws a parametrized branching structure inside a square box. This is not what you asked for, but seems like a good first step in that direction. Screenshot and demo attached.
The node is fun to play with. It had six parameters (so far):
This node was tricky to make. I used a simple quad curve for the trunk. I used a sample node to distribute the branch points and another to distribute the tips along the edges of the box. The branches involve an exponential transition between the tangent of the trunk at the base of the branch and the final angle of the tip, further smoothed with my fit_curve node.
The branching patterns made by this node are still fairly primitive and could certainly be improved. But they do demonstrate the kind of parameters that can produce a wide range of organic looking patterns for us to build on.
The next step would be to feed the output of this node into some new node that would add leaves around each branch. I have not thought about this yet and have no idea how it could be done or what the results might look like. But it seems possible.
I encourage you to play with node and then get back to me with your thoughts. Even if you are exploring some completely different approach, this node might give you some ideas about how to parameterize your shapes.
You might also try feeding the output into some leaf nodes of your own. The branches node currently outputs the box, the trunk, the left branches and the right branches as separate paths. You could input this list of paths into a null node and have at them. For example, you could use the same overlapping circles technique you used on your rubberhose node to add thickness to each trunk and branch path.
I may put this down until I hear from you, but will probably come back and keep noodling on the next stage.
John
Support Staff 5 Posted by john on 16 Jan, 2025 08:30 PM
Colt,
Are you still there?
Since my last note I have dramatically expanded the capabilities of the branches node and have just published it as an official addition to the Cartan Node Library:
http://support.nodebox.net/discussions/show-your-work/853-branches
It can now fill any container and returns regions between the branches that can be independently colored. I am eager to hear your reaction.
I realize that I have not yet found a solution to your original question. We still haven't perfected a way to create the edges of the individual leaves in the art nouveaux style you provided. If you are still there, I would be happy to keep nibbling away on that aspect of the design.
Thanks again for your original challenge which was directly responsible for this exciting new node. I hope to hear from you again so that we can keep working on the next phase of this challenge.
John