Home → NodeBox 3 →

Generative variables

• Edit

LOUIS DOSSOU

16 Nov, 2024 02:47 PM

Subject: Creating Shape Variations Automatically in NodeBox

Hello NodeBox Community,

I hope you're all doing great! I'm exploring how to create automatic variations of a shape or symbol within NodeBox. Here's what I'm looking to achieve:

I have a base shape of a custom symbol [made of three triangles], and I'd like to generate multiple variations of it — similar to how the MIT logo was designed with different patterns and transformations. Ideally, these variations could involve:
a- Changing positions of the vertices of the triangles or scaling parts of the triangles
b- Altering colors
Could you point me to the right tools, scripts, or techniques within NodeBox to get started?
Looking forward to your insights!

Best regards,
Louis

• Nodebox_Exp.jpg 2.52 MB

1. 1 Posted by LOUIS DOSSOU on 16 Nov, 2024 06:36 PM

   

   Sorry, I had uploaded the wrong example

   • mitmedialab_the_3.jpeg 118 KB
   • Edit

2. Support Staff 2 Posted by john on 17 Nov, 2024 10:44 PM

   

   Hi Louis!

   Welcome to the Nodebox Forum.

   Just checking... You posted to the Nodebox Live section which deals only with the web-based version of Nodebox. Was that your intention? I am not a Nodebox Live user and do not usually respond to posts in this section. Other Nodebox Live users might respond.

   Most of the action in the forum deals with NodeBox 3, an app which runs on Macs, PCs, and Linux. If you are new to NodeBox and are able to use the app, I can help.

   Let me know if you want to download the app and move this question to the NodeBox 3 section.

   Thanks,

   John

   P.S. Thanks again for your nice comment on my Instagram animation.

   • Edit

3. 3 Posted by LOUIS DOSSOU on 18 Nov, 2024 04:16 PM

   

   Thank you for your message, John. I had indeed installed NodeBox 3 on my computer and it was with this version that I was encountering difficulties. How can I move this question to the NodeBox 3 forum?
   Thank you again for your availability. I'd be happy to discuss my project further in the NodeBox 3 forum.

   • Edit

4. Support Staff 4 Posted by john on 18 Nov, 2024 11:24 PM

   

   Hi Louis,

   Using my magical powers, I have transferred this discussion to the Nodebox 3 category.

   There are many ways of transforming three triangles. For pleasing results you may want to constrain your options in some way. The MIT Logo variations look quite random at first glance, but are actually fairly tightly constrained.

   The three shapes are always formed by projecting the same size small square to the same size larger square. The positions are chosen so that the the two squares in each shape are a reasonable distance apart, and the shapes themselves are not on top of each other. Only three primary colors are used with intermediary shades in the overlapping regions.

   Similarly, you may want to establish some constraints of your own. The first decision is whether to generate triangles at random or simply reposition and rescale the three triangles you create yourself.

   There are many ways in Nodebox to create triangles. One simple way is to use the scatter node to generate three random points and then the connect node to join them into a triangle path. This works, but often generates triangles that are very skinny. The triangles will vary in size depending on the size of rectangle you use with your scatter node.

   A simple way of generating random colors is to feed a random node into the hue port of of an hsb_color node. Set the brightness to full (255) and the saturation to, say half (128) for starters. Set the alpha to, say, 200 so that you can see all three triangles if they land on top of each other.

   I am attaching a demo showing this very basic technique.

   I used the methodology described above to create a random triangle colored with a random color. I then wrapped this into a subnetwork called triangle (by selecting all the nodes, control-clicking, and choosing "Group into Network".

   This triangle node takes two parameters: seed and size. Seed controls the random number used to generate both the scatter positions defining the triangle and the hue of its color. Each time you change the seed you get a different triangle. Size controls the maximum size of the triangle.

   To create three overlapping triangles I use a random_numbers node to generate 3 random seeds, feed that list into my triangle node, align all triangles to the center (I found that looked a little better), and group them into a single geometry. I then wrapped all that into a second subnetwork, called three_shapes.

   The three_shapes node generates a prospective logo consisting of three overlapping triangles. To generate a comparison grid I feed it the numbers 0 to 8 to create nine different variations, then use a grid and translate node to arrange them in a matrix.

   Zipped demo and screenshot attached.

   This is enough to get your feet wet. You can peek inside the two subnetworks by selecting a node, control or right clicking, and choosing "Edit Children". You can fiddle with some of my settings to see how this affects the overall result. Try changing the saturation or brightness or alpha settings, or the size setting.

   So that is one solution, but I suspect you will agree with me that this simple approach is not aesthetically pleasing. The triangles are often too skinny and the colors are not as compelling as they could be.

   With a little cleverness you can select random points far enough apart from each other to eliminate overly skinny triangles. OR you can define three pleasing triangles (as you did for your JPEG) and manipulate those instead of generating new ones.

   One way of changing the vertices of a provided triangle just a little is to use the wiggle node. Turn your triangle back into three points by feeding it into a point node, feed that into a wiggle node, then that into a connect node to turn the jiggered points back into a triangle. By varying the seed of the wiggle node you can generate countless variations of triangles which are not TOO skinny.

   You can also supply a fixed set of chosen colors instead of generating colors utterly at random. I can show you several ways of doing this. You can also look at my Cartan Node Library which provides over a dozen different nodes for generating interesting color palettes. I just added a new node, sanzo_colors, that would be perfect for generating interesting color trios:

   http://support.nodebox.net/discussions/show-your-work/820-sanzo-colors

   This should be enough to get you started (if not completely overwhelmed). Have a look at my demo and start playing. Nodebox is really good at playing and trying things out. As you try different ideas you may begin to develop some constraints that narrow the possibilities and produce more pleasing candidates.

   If you want, you can come back with different attempts and more questions. I would be happy to help you refine your approach and suggest additional variations to try. I am, however, leaving on a short trip and will be away from my computer starting tomorrow (Tuesday) for the rest of the week, so will not be able to generate new demos until I return.

   Please reply to this note to let me know that you saw it, Have fun!

   John

   • triangles_screenshot.png 638 KB
   • triangle_variations.ndbx.zip 1.14 KB
   • Edit

5. 5 Posted by Louis DOSSOU on 10 Dec, 2024 11:00 PM

   

   Hello John,

   Thank you so much for your help. I must admit, I’ve rarely received such detailed responses in a tech community—it’s truly appreciated!

   That said, I have to confess that I’m still struggling to get past the basics of your tutorial. I managed to work through the beginner tutorials on NodeBox’s official documentation, but when it comes to my project involving triangles, I couldn’t even create the points using the “Scatter Node.” I’ve read through the documentation on this topic, but I’m still stuck.

   I was wondering if you might have a video or some kind of tutorial available online that you could recommend? :cry::cry:

   Thank you again for your time and support.

   Best regards,

   • Nodebox_Louis_Dossou_test.png 95.7 KB
   • Edit

6. Support Staff 6 Posted by john on 11 Dec, 2024 12:35 AM

   

   Hi Louis,

   Thanks for persevering. People often find Nodebox a bit confusing at first. The good news is that, once you get over the hump of the initial learning curve, it gets easier.

   I think I was a little too ambitious with that first demo I sent you. It does include an example of using a scatter node to make triangles, but it is buried in a sub-subnetwork.

   Let's take things one step at a time.

   Attached is a simpler demo showing two ways of making a single randomly shaped and colored triangle. See screenshot.

   The eight nodes on the left use the scatter method to create the acute yellowish triangle. The ten nodes on the right use a different method to create a more uniform pink triangle. Both methods have SIZE and SEED values at the top that you can use to change the size and the shape/position/color of each triangle.

   Spend a few minutes playing with both methods. Double-click on different nodes to render each one and see the contribution it makes. Change the size and seed values to generate different triangles. Change other parameters in any of the nodes to see what happens. Also switch back and forth between Viewer and Data in the upper left of the render pane to see the actual objects output by each node.

   METHOD 1 - SCATTER

   The scatter node generates a random scattering of points within a boundary defined by a rectangle. If you set the amount to 3, you will get 3 random points each time the node fires. If you then connect those points, you will have a random triangle. As mentioned previously, some of those triangles could be very skinny.

   METHOD 2 - WIGGLE

   The polygon node generates regular polygons. If you set the sides to 3 you will generate an equilateral triangle. If you then feed that into a wiggle node, you will randomly change each of those three vertices up to defined maximum offset. By setting that maximum offset to 20% of the triangle radius you get a triangle that is random, but not TOO random. For more variation you can then rotate the triangle an arbitrary amount.

   COLORING

   Both methods use the same basic technique for coloring: setting the hue value in a hsb_color node (hsb = hue, saturation, brightness) to a random number. The same seed value that determines the shape and placement also determines this random hue. Saturation and brightness are fixed (try changing them to see how it affects the color), but could also be randomized. In both cases I set the alpha to 200 out of 255 to make the triangles translucent; this allows you to see both triangles even if one completely covers the other one. For your final design you may want to change this to create solid colors.

   I hope that will be enough to get your feet wet. These are just two ways of making triangles; there are many others. Once you are comfortable making triangles you can start to think about how you want to create sets of three triangles at a time and position the triangles relative to each other. Graphic designers might typically use a grid system to control such positioning.

   Please write back and let me know if this got you unstuck. And if you then want some help creating and positioning sets of triangles, just ask. I enjoy helping out with projects like this.

   John

   • random_triangle_screenshot.png 474 KB
   • random_triangle.ndbx.zip 1.09 KB
   • Edit