Need some help (clock/circular graph)
Hi,
I am relativly new to Nodebox (but have some programming experience and specialized in visualizing location-data/gis). I am looking for an option to show hourly data on a clock: the clock should be turning and for each hour show the corresponding data (via a circular (bar)graph). I have some idea that I have to make a clock (where the speed can be adjusted) and combine that with a circular diagram like the example with the earthquake data. Can anyone help me a step further/put me on the right track?
KR Marcel Dekker
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 30 Nov, 2023 05:40 AM
Hi Marcel.
NodeBox can, in some ways, be a little harder to master for people with "normal" coding experience because there is much to unlearn. There are no loops, no branches, no recursion.
I'm not sure how much you know and don't yet know about Nodebox, so my apologies if what I say is too basic. But here are some high-level pointers on circles and animation.
You make circles with the ellipse node. For easier resizing make a number node and hook it to both width and length of the ellipse; then you can drag the diameter up and down to make the circle as big as you want. To see just the outline of the circle, hook the node to a colorize node with stroke width set to 1 and fill set to any color with alpha = 0.
You can convert any path, like the circle, to an evenly distributed number of points by hooking into a resample node. If you set the method to "By amount" and the Points to 12, you will get a 12-sided polygon with points along the circle, starting at 3:00. (You can also do this with a polygon node with the radius set to half the circle's diameter.)
When you render the resample node you will just see the path, but you can see the individual points by checking the Points checkbox above the render pane (blue dots are normal points, red dots are bezier control points.). You can also check the Point Numbers box to see how those points are ordered.
If you need to work with the points instead of the path, just feed your resample node into a point node; this will give you a list of 12 points. If you want to start at 12 o'clock instead of 3 o'clock, feed that list into a shift node with amount set to -3.
This is only one of many ways to arrange points around a circle. Another way is with the coordinates node (for points) or the line_angle node (for lines).
Since there are no loops in NodeBox you will need another node that has implicit iteration: the range node. Take a range node, set start to 0, end to 360, and step to 30. This will produce a list of 12 values 0, 30, 60, ... 330. You can do the same thing using a sample node with start at 0, end at 330, and amount at 12.
Now hook the range node into the angle port of a coordinates node. You should see your familiar circle of 12 points. The radius of that circle will be controlled by the distance value of the coordinates node. You can do the same thing with a line_angle node to get a set of 12 lines emanating from the origin to points on the circle.
And there is yet ANOTHER way to place and draw things around a circle: the rotate node.
Suppose you want to draw a bar graph with one bar extending outward from each of 12 points around a circle with a radius of 200. For starters, make a simple bar using a rectangle with a width of 100 and a height of 20. Hook this into an align node with position set to 200,0 and Horizontal Align set to Left. If you render that align node you should see your bar sitting on the X axis 200 pixels to the right of the origin.
Now hook that align node into the shape port of a rotate node and your range node from above into the angle port. Voila! 12 bars extending outward from the points of your circle. You can see the circle and the bars together by feeding them both into a combine node.
Having all the bars in your circular bar graph at the same height is rather boring, though. So to liven things up make a random_numbers node. Set Amount to 12, Start to 100, and End to 300. Hook that into the width port of your rect node to see bars of different sizes around your clock. Of course you could feed in values from a CSV file instead of random numbers and place more than 12 bars evenly around the circle if you want.
You said your clock should be turning, so that brings us to the topic of animation. In NodeBox animation is accomplished using the frame node. The frame node is simply a number node, but it will spring to life if you hit the Play button near the lower left corner of the render screen. Render a frame node, hit Play, and see what happens.
When you hit Play, the frame node keeps incrementing by 1. You can use the frame node to define each frame of an animation. If you hook your frame node into the width node of your rect node (instead of random numbers) and hit Play you will see your bars all growing like hair around your circle.
To start making a clock, make a minute hand by adding a line_angle node to your combine node (to see the circle and the minute hand at the same time). If you want you can make your minute hand thicker by adding a colorize node to the line_angle node with the Stroke Width set to, say, 5. You can set the length of your minute hand by changing the distance value of the line_angle node; a distance of 180 is about right for a 200-radius clock. You should now see a thin line pointing almost all the way to 3:00.
Now hook your colorized line_angle node into a rotate node (and attach that rotate node into your combine node). Hook your frame node into the angle port of that rotate node and hit Play. You should now see a minute hand sweeping around the face of your clock.
To save an animation, choose Export Movie from the File menu, set the frame range from 1 to 360, choose a file name, and click Export. In a few seconds you will have a 360-frame MP4 movie, Nodebox always exports at 25 frames/second, so it will take your movie a little over 14 seconds to to complete one clock "hour". Because the 360 frames will bring your minute hand full circle, if you set your MP4 to loop it will rotate forever without any distracting jumps after each loop.
This is probably not the speed you want. If you want the minute hand to go all the way around the clock in, say, four seconds, you will need to increment your frame input at a higher rate than one frame per second.
One way of doing this is to feed your frame node into the value port of a convert_range node. Set the Source Start and Source End to 0 to 100. Set the Target Start and Target End to 0 to 360. Then hook the convert_range node into your rotate node.
Now, as the frame counts up from 1 to 100, the convert range node will increment at a faster rate: 3.6, 7.2, 10.8, etc. Now, if you export another MP4 file with a frame range from 1 to 100, you will get a faster minute hand that still loops nicely. You could add an hour hand and have it controlled by a second convert_range node that only travels from 0 to 30 degrees every 100 frames.
When you speed up your animations by boosting the rate at which the frame value increments, the downside is that you will have fewer frames representing your movement. This may result is a less smooth, more jerky effect in the final MP4. So if you care about this you will need to strike a balance between your movement per frame and your overall number of frames. If you ever need to export at a higher frame rate than 25, you can use the Export Range option to export individual frames instead of a single MP4 and then use a video app to make whatever kind of movie you want.
There. That's a lot to digest. I hope it's enough to get you started.
As you can well imagine, this only scratches the surface. I suggest you just start playing. Try to make a clock-like thing, add data driven bars around your clock, and see what happens. If you get stuck, please feel free to write back. Attach your partially working ndbx file zipped, describe your problem, and I will be delighted to help get you unstuck.
If you really want to get your feet wet, you might also consider poking around my Cartan Node Library:
http://support.nodebox.net/discussions/show-your-work/580-cartan-li...
That's version 3.2. 3.3 with a dozen or so new nodes will be coming out soon. If you download the library you will find it filled with over a hundred useful nodes (subnetworks actually) that you can copy and paste into your own projects. Some require an external code module (included). Each node also has a demo; you can poke around those demos to see many examples of how to do things in NodeBox. It may all be a bit overwhelming at first, but it's there if you need it.
As a final bonus, I am attaching one such demo from the library which produces a working clock (see screenshot). You can download that demo and hit play to see the clock display the correct time with either smooth or discrete movement of the second hand.
The zip file also includes another ndbx file which contains the example nodes discussed above. Consult that if you have any trouble following my written instructions.
Hope that helps! Please keep exploring and please keep in touch.
John
2 Posted by Marcel on 30 Nov, 2023 08:38 PM
Hi John,
Thanks for your very detailed reaction! That was more than I expected. This will help me for sure.
Kr Marcel
3 Posted by Marcel Dekker on 03 Dec, 2023 07:54 PM
Hi John,
It works very well. It is a good basis for further discovering the possibilities of Nodebox. Thanks very much!
KR Marcel
Support Staff 4 Posted by john on 04 Dec, 2023 11:38 AM
Kr Marcel,
You are most welcome.
My general advice to Nodebox users is to think functionally. That is, break down what you are trying to do into a series of discrete functions (draw a box, color it red, etc.). Once you get used to thinking in this way, a NodeBox network of function nodes flows directly.
I hope you will keep playing and share some of your work and your questions with the rest of us.
Happy NodeBoxing!
John