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