The Black Lavender Square Mosaic
I have been slowly (since 2005 at the latest!) developing artistic programs that draw squares packed with a gap into a vertical dimension. I found early on that you can scale the squares to fit any integer number of squares up to the limit of the sum of the gaps. At that point, if you scale the gap you can hypothetically fit an infinite number of squares up to the resolution of your output.
The idea was originally to make wall art as I am an artist. Nodebox has allowed the possibility of completely customizable interior design pattern wall paper or other elements, hence "lavender", as I didn't think many interior designers would want an entire wall of black squares.
My programs went something like this: Postscript -> SVG.js -> Processing -> Nodebox
One thing that is different about Nodebox is that it is always rendering so that if you make changes you see them immediately. This is huge, but it's strange to have a program environment that uses lists and no loops. If you are starting out, it's like saying make a painting with brushstrokes but you can't use a brush. I struggled for a long time to get the space between columns to work. In the end I found the "Running Total" node which makes this network possible.
My next step is to make controls visible without hunting for each node specifically. I did this before by creating a subnetwork and publishing the values but I keep adding things that I want to control. I have in this version the introduction of a sine function, which I later disconnected because things were getting out of hand.
One thing I have learned through this process is that the first step to adding functions is getting it to work, and then a harder task is getting it to ALWAYS work, and third and possibly hardest, get it so you don't have to know the magic number to make it work. For this piece that meant how to automate a random color, then fit it within the number of columns (always works), I haven't figured out how to make it so I don't have to remember how this crazy setup controls the hue, saturation, and brightness. At some point, I will share the Nodebox file, but I'm not ready for that yet. Here is just a screengrab. I guess you could build it from this, but if you want to do it that badly, just ask me and I'll send you the file.
I want to thank the Nodebox community for making this software available. It is truly amazing.
-
LBSM.png
246 KB
LBSM.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 Jul, 2023 03:05 AM
Gabriel,
Thank you for this amazing post! I think your work is genuinely beautiful and in Nodebox you have finally found the perfect tool to express your vision.
I think you could simplify your code significantly by using the STACK node and creating a subnetwork to simply stack and group squares of a given size. You could then just feed a carefully chosen list of semi-random numbers to that subnetwork and use another stack node to arrange those column groups into a horizontal band. No more running totals or need to calculate exact positions. This would allow you to focus more on choosing the sizes and colors of the boxes by cleanly separating that task from the work of assembling the band itself.
I'd be happy to help you with this if you want, but I hesitate to interfere with a process that you have built with your own sweat and that seems to be producing such wonderful results.
What I especially appreciate about this post and the blog post you wrote on your website, https://gabrielsiml.com/?page_id=292, is your description of your journey as an artist learning to code.
I couldn't agree more with your notion of the three levels of crafting a function:
I could reduce this to:
The last step is the most challenging because it forces you to truly understand what you are really trying to do. You may discover one complicated function that should be broken into three simple ones, or three deeply interconnected functions that should be joined into one. This process allows you to finally discover the simplicity that was hiding inside the complexity all along.
Reducing a process to its essential steps is the art of programming. Elegant code is itself a form of beauty and tends also to produce more beautiful output because art is also a process of distillation to essentials.
I also feel your pain about learning how to code without loops. That may be even harder for experienced coders (who have even more to unlearn) and does feel like training for a martial art by fighting blindfolded. But it does get easier with practice.
I encourage all the other lurkers out there to add their reactions to Gabriel's post and maybe even contribute some of their own work (even if it's still in progress).