fun with a child spirograph: how to plot points over time frames
Hi, this is my first challenge with nodebox 3, I'm using windows platform.
This is an attempt to simulate a child with a spirograph circle and a pen.
- the spirograph outer circle is done....
- the spirograph inner circle animation is done, some fine tunning is still needed, but that's not the issue now.
the issue is that I could not plot points to emulate the pen.
I'm wondering how to append new points coodnates to a list on every frame and render a closed path to create a smooth line, but I could not implement it.
Any suggestions?
regards,
VV
- ChildSpirograph-test-001.ndbx 5.28 KB
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 27 Feb, 2016 01:19 PM
Hi VV,
Drawing the ink would be effortless in a language like Processing, but is tricky in NodeBox. Unlike Processing, NodeBox is stateless so can’t do open-ended simulations where things (like moving pens) continuously evolve.
But there is a fairly simple way of doing what you want. The trick is to see that a spirograph drawing repeats after awhile so is not open-ended. Thus all you have to do is compute the complete drawing first, and then redraw a little more of it in each frame of the movie.
I have attached a demonstration network and a movie of the spirograph in action. The network may look different than yours, but is really just a slight extension.
The first thing I did was to wrap your entire network (except for the frame node) into a subnetwork which I named gears. The only change I made was to make the inner gear slightly transparent so you can see the ink better. So far no change.
Then I copied gears and named the copy “pen”. I then edited pen to remove everything except the pen hole in the inner gear. I added a port called thickness that changes the size of the pen hole and colored it red. So pen works just like gears except that all it shows is a red dot moving around.
To compute the entire drawing I fed a range node into pen instead of frame and by trial and error set the end value to 2520. This moves the pen dot enough to complete the drawing; pen now produces a list of 2520 red dots.
I then fed this list into a slice node and fed the frame into the slice size. So the first frame draws the first dot, the second draws the first two dots, etc. All that remains is to combine the gears and the pen.
When you hit play you’ll notice that the playback is now pretty clunky, but when you export the movie it comes out smooth. If you want to see the drawing without the gears, just disconnect the gear subnetwork from the combine node.
If you ever fiddle with your gear design to produce gears with a different number of teeth or a different position for the pen hole, you can repeat this process. Even better would be to make a general purpose gear system so you could feed these values into both the gear and pen subnetworks.
This is a really wonderful NodeBox project! What a great idea! Thanks for sharing it with us.
John
Support Staff 2 Posted by john on 27 Feb, 2016 09:57 PM
UPDATE
After a good night's sleep I realized that my spirograph demo is wildly inefficient.
There is no need to calculate the entire path at the outset. Instead you can hook the frame node to the range endpoint and just make as much as you need for each frame. Once you do this you no longer need a slice node and no longer need to figure out the endpoint by hand.
Revised demo network attached. It works the same, but is MUCH more responsive (at first) and generates the animation file much more quickly. This time I changed the pen thickness to 2 which allows you to see the way that the spirograph slows down for the curves and the speeds along the straightaways like a racing car.
Enjoy!
John
3 Posted by vander.vizioli on 29 Feb, 2016 04:58 PM
Hi John,
Thanks a lot for your help!
As I told, this is my first project with node box, so it took me some time to digest your solution.
What I understood is that as nodebox works as a production line (article how nodebox works) so, you 'pre-assembled parts' to be used afterwards on other nodes.
I'm not sure about what I'm gonna say, but it seams that nodebox is calculating 252 times each 'point', because nodebox has to do some iteration... again, I'm not sure about that; maybe that's why you're saying it's slow...
Now I see that you have posted a new solution, so... hold on... I'm downloading it now and I'll study it and nodebox a litte more.
By the way, my initial search for a solution was to 'add item to a list' each new point to the node 'point', but there is no 'add to list' node in nodebox, I found it odd because there is 'rest' which does eliminates one item from an existing list. maybe this is related to the 'stateless' characteristic that you mentioned, but again, I'm still on my learning process, so I'm not sure about my conclusions. ;-)
Thanks again for the new solution and time dedicated to this topic., I'll study everythng you did.
just for you to forsee.... My goal for a second project on this 'spyrograh' theme is to have an internal weel whith 4 holes (like a real one) and give the user some parameters like: color gradient, select the number of times the pen will spin over 360 degrees and which hole of the internal gear will be used... I'm not sure what I'll get, but anyway your help has been amazing.
regards,
VV
Support Staff 4 Posted by john on 29 Feb, 2016 07:19 PM
Hi VV,
Glad you found this helpful. It's a great project and quite impressive for a first time effort.
The way to add to a list is to use the combine node. Hook the old list to the first port and the new row to the second port and combine will produce a new list with the row appended to the bottom.
This was a little hard for me to grasp at first too. Combine is not just for combining multiple shapes into one drawing, it's also for combining multiple lists into one list. Or more accurately, shapes in NodeBox ARE lists so both activities are really the same thing.
The problem with "adding to a list", by which I'm guessing you mean, adding to the list we used to draw the curve in the previous frame of the movie, is that NodeBox has no concept of a previous state. Every time you advance to a new frame you have to start over from scratch. So as the animation progresses it will take a little longer each time.
Your plan to make a general purpose spirograph should go well. Make your general purpose gears subnetwork with ports that control which hole to use and how fast the inner wheel spins. Then do the same for the pen subnetwork and feed values for hole and speed into both gears and pen. Add another port in the pen subnetwork to control color and you're all set!
This approach will nudge you into using subnetworks, a key NodeBox concept. The tutorial will show you how to form a subnetwork out of existing nodes and publish lines to create new ports. There is more that the tutorial fails to cover; for that you might want to search the forum for past discussions of subnetworks. In the Show your Work forum I posted a "Drop First Column" example which includes a discussion about the hidden features of subnetworks.
Good luck! If you get stuck feel free to ask for more help. That's how I learned.
John