Kolam Animator

john's Avatar

john

14 Jun, 2021 08:28 AM

I am pleased to present the Kolam Animator, made in collaboration with Mr. Ramanraj Krishnaraju of Chennai, India.

Kolam is an ancient form of traditional decorative art often made by drawing lines made of chalk or rice flour around a series of dots. For more see: https://en.wikipedia.org/wiki/Kolam

You can easily find thousands of beautiful kolam designs on the web, but to truly appreciate the meditative experience of kolam you need to see the lines form as they would be drawn. NodeBox is ideal for this type of animation, but doing it from scratch for each design would be tiresome. What is needed is a way to make the animations data driven by means of a simple CSV. This is what Ramanraj and I set out to do.

Ramanraj developed a way to create symmetrical kolam designs using an iPad app called DrawinDots. For each gesture he chooses a tool (dot, line, quadratic, bezier, or ellipse) and taps a few positions on a simplified grid. (See below for an example of a grid.). For our CSV we simply record these tool choices and coordinates in a fixed order.

The CSV has three columns: Step, Tool, and Coordinates. Step is simply a step number. You can insert fractional values if you miss a step, but the steps must be in sequential order.

The tool and coordinates columns are one of the following:

  • Dot (x,y) for location of each dot
  • Line (x,y)(x,y) for start and end. Lines may be omitted if the gestures before and after are connected.
  • Quadratic (x,y)(x,y)(x,y) for start, end, and control point
  • Bezier (x,y)(x,y)(x,y)(x,y) for start, C1, C2, and end (drawn in counter-clockwise direction)
  • BezierCW (x,y)(x,y)(x,y)(x,y) for start, C1, C2, and end (drawn in clockwise direction)
  • Break (no coordinates) to break a stream of gestures into separate paths
  • Circle (x,y)(d) where (x,y) is the location of the circle and (d) is the diameter in standard units. A break is implied before and after each circle

To create an animation, simply set the CSV node at the top of the NodeBox network and export movie. I have made it easy to make additional adjustments by placing five nodes on the left toward the bottom:

  • movie_length. Sets animation movie length in frames at 25 frames per second. The default is 400 (16 seconds). When making a looping movie I like to add an additional fifty frames to movie length (e.g. 0 to 450) to provide a two second pause after each cycle so viewers can appreciate the final design.
  • consecutive. If checked, paths will be drawn consecutively. If unchecked, paths will be drawn simultaneously. If there is only one path, this setting is ignored. When multiple paths are drawn simultaneously, each path requires the entire animation length to complete. This means that short paths will be drawn more slowly than long paths and you may want to reduce the overall movie length.
  • stroke_width. The stroke width of kolam path. The default is 6; increase to make it thicker, decrease to make it thinner.
  • magnification. The final magnification of kolam. The default is 100% based on a grid of 50 pixels per unit. Increase or decrease to make the kolam fit comfortably within the canvas. Current canvas is 600 x 600, but this is easy to modify if you want larger images.
  • title. An optional title that can be superimposed over the movie. Adjust font, alignment, position, and size in the usual way. Leave text blank if no title is desired.

You can of course make other adjustments anywhere in the network to change dot size, colors (including background color), or other changes.

The screenshot shows a typical kolam in its final form at the end of the movie. I have also attached a movie of this kolam (which uses almost all the possible tools). The zip file includes the CSV file for this kolam as well as a second kolam CSV for comparison. For this second kolam I also include a PNG of the chart Ramanraj used to record that design. I also include a blank grid which you can use to find the necessary coordinates. Either print and draw a kolam or resize and superimpose a kolam image over the grid.

I have been interested in kolam for years. I hope this NodeBox network will make it possible to produce many new animations to introduce this art form to a wider audience and deepen the appreciation of each design.

All kolam included here and produced during development are by Ramanraj Krishnaraju. You can see hundreds of his beautiful kolam (including some recent animations made with this program) on his kolam Instagram site, Mech_Kolar:

https://www.instagram.com/mech_kolar/

Comments welcome!

John

  1. 1 Posted by Ramanraj K on 14 Jun, 2021 12:37 PM

    Ramanraj K's Avatar

    Dear John,

    Congratulations! Thank you so much for developing a very sophisticated Kolam network code in just two weeks with all the bells and whistles for drawing a wide variety of Kolams. Kolam Animator will surely revitalise the Art of Kolam and bring it back to the fore worldwide.

    A special thanks to you for introducing NodeBox 3 to me - its so awesome. I have been using it for only two weeks now, but will go far and say that it heralds a major paradigm shift from the POSIX doctrine where "everything is a file" to not necessarily "everything is geometry" but, "everything is text and geometry" to pave way for more light based computing.

    The Kolam is a morning ritual and a good number of people would connect with it instantly. I hope this collaboration helps in promoting geometry in the minds of the very young. The ui we use on mobiles and devices ought to provide a graphic design interface by default like we take text input keyboards for granted today. The work here is certainly an important step in that direction.

    Warm Regards,
    Ramanraj K

  2. 2 Posted by Ramanraj K on 14 Jun, 2021 05:23 PM

    Ramanraj K's Avatar

    New animations just created with John's Kolam Animator. A very quick how it was done: the kolam was drawn on a grid as shown in kolam-sikku-5-5.png. The coordinates were written to kolam-sikku-5-5.csv and imported into Kolam Animator. From File > Export Movie, kolam-sikku-5-5.mp4 was made, and the kolam-sikku-5-5-simult.mp4 was made with consecutive node unchecked.

    Enjoy!

    Have fun !!

  3. 3 Posted by Ramanraj K on 15 Jun, 2021 12:59 PM

    Ramanraj K's Avatar

    Nice long unusual Bezier curves make this Kolam.

    Btw, "Export Movie" does not save mp4 file to destination on Gnu/Linux systems, and the work around is to "Export Range" as png files and make a movie from them using ffmpeg or other tools:

    # cat *.png | ffmpeg -f image2pipe -r 24 -vcodec png -i - -vcodec libx264 kolam.mp4

  4. 4 Posted by Ramanraj K on 16 Jun, 2021 03:44 PM

    Ramanraj K's Avatar

    Lakshmi kolam in exactly 80 steps – 40 dots in all, with 5 each radially in the cardinal and inter-cardinal directions, and 40 quadratic curves connecting the dots in an Eulerian circuit, with each vertex having exactly two edges.

    The formula traditionally used to draw is given as “1-3-5-2-4-1”, dots in each direction numbered 1 to 5, from outside to inside. One may start anywhere, but while proceeding clockwise, the number rule is followed. So if one starts with dot 5 in the North, then connect with dot 3 Northeast, 5 in East and so on to complete the circuit.

    Goddess Lakshmi is associated with the eight preternatrual powers – ashtamasiddhi that are in this order: anima > laghima > maghima >garima > prapthi > prakamyam > isitvam > vasitvam and the Kolam is seen as central to attainment through contemplation – pure thought to manifestation of the desire through work.

    A better version would certainly be welcome, with more perfect quadratic curves in the edges that may go to the very root of all matter.

  5. 5 Posted by Ramanraj K on 17 Jun, 2021 04:09 AM

    Ramanraj K's Avatar

    A revised Maha Lakhmi Kolam. It would be interesting to extent the Eulerian path in three dimensional space, where the cycle may go on and on in a loop.

    This may also relate to Kaprekar's Constant 6174 for four digit numbers and Mega Constants 97508421 and 63317664 for eight digit numbers - a note this is at https://calpp.org/nDspace/6174_v2.php

    This is significant from a geometric point of view taking into view the rearrangement, reflection and subtraction repeated until a final result is obtained. The output for eight digit numbers that does not terminate in a step or two appear to go on like a beam of light. .. its relatable to physical properties like imaginary lines of force in magnetism. Two positive and negative forces that come in contact in this fashion would be forced to remain in that state forever and ever. The mathematics here is very straight forward and gives a very good basis for infinite attraction that defies logic."

  6. 6 Posted by Ramanraj K on 18 Jun, 2021 03:00 AM

    Ramanraj K's Avatar

    The Maha Durga Kolam that is much like the Maha Lakhsmi Kolam posted yesterday, except that the path taken is "1-5-4-3-2-1". Gnu/Linux os users may have one more issue - the mp4 files created with ffmpeg do not appear to render correctly on Instagram. To fix this, open the mp4 in Shotcut Video Editor (at https://shotcut.org/ ) or others and export - this creates a slightly bloated file but works everywhere.

  7. 7 Posted by Ramanraj K on 19 Jun, 2021 04:03 AM

    Ramanraj K's Avatar

    A brief step by step note on how to make kolam animations for those completely new to NodeBox 3:

    First visit https://www.nodebox.net/node/documentation/tutorial/getting-started.html and do all the actions listed on this page. Then,

    1. Draw a kolam on a grid with coordinates and keep it ready for reference. If doing this with digital tools, save it as, for example, kolam.png. Sample coordinates of commonly used shapes is attached for reference.

    2. Enter the coordinates of the dots in the kolam into a kolam.csv file.

    3. Open NodeBox 3, go to “File” > “Open ...” to load John Cartan’s Kolam Animator.

    4. Click on “import_csv”, to load the kolam.csv file that has the dot coordinates. Play the animation to see the dots on the screen. If any of the dots are not correctly displayed or if any dots have been missed, correct the csv file and save it. Now click “Rewind” and again hit “Play”. The corrected pattern would be displayed on NodeBox. Let play be on to see the frame counter progressing next to it.

    5. Now, enter the first Line, Bezier or Quadratic coordinates of the first kolam move in the csv. Save the csv file in the text editor and check on the NodeBox screen Viewer if the move is correctly displayed. This is best done line by line to weed out errors at the outset, much like one would have done coding on ZX Sinclair Spectrum, BBC Micro or other devices to write Basic programs interpreted as lines get written.

    6. Go forward and enter the next kolam move only after step 5 has been done correctly and seen to be visibly right on the NodeBox screen Viewer.

    7. After the whole kolam is done, export movie from the File menu on NodeBox.

    Please not that it may be far too hard to first write the whole csv then load it into NodeBox for rendering.

    Hope this helps to get started with John Cartan's Kolam Animator. Have fun!

  8. 8 Posted by Ramanraj K on 23 Jun, 2021 01:36 AM

    Ramanraj K's Avatar

    A brief animation how to for kolam artists totally new to NodeBox 3. Drawing a kolam is one thing, and planning its drawing ("execution" for animation) is quite another. This is where algorithms for Eulerian paths come handy. The well written page at https://www.geeksforgeeks.org/fleurys-algorithm-for-printing-eulerian-path/ is a handy guide for drawing sikku kolams and animations.

    Most sikku kolams are Eulerian paths - one may start anywhere and finish without break or taking hands off the paper or ground. But, if the kolam includes vertices with odd edges, then, the vertices with odd edges need to be paired, and one necessarily must start from an odd vertex and finish at another odd vertex sequentially, as many times as the pairings.

    The kolam for the day is a slightly unusual sikku with deliberately introduced vertices having three edges for demo purposes. The simultaneous render is followed by the consecutive render here.

    Examining this property led to the Mech-Cartan Theorem “Every pair of vertices having an odd degree add a path to a connected graph and the Eulerian trail is equal to the sum of such paths”. Thanks are always due to John Cartan for the tremendous amount of work and effort on his part to make these beautiful animations possible.

    Ref:

    https://en.wikipedia.org/wiki/Eulerian_path

    https://www.geeksforgeeks.org/fleurys-algorithm-for-printing-eulerian-path/

  9. 9 Posted by Ramanraj K on 27 Jun, 2021 01:32 AM

    Ramanraj K's Avatar

    I added a new node “copy” to John Cartan’s Kolam Animator at the “combine” threshold, to create drawings that emulate kolams drawn with two or more lines (double line or multi line) usually done with fingers on the go. The zip file attached has the ndbx file and csv file used along with sample drawings generated with various parameters. Have fun!

  10. Support Staff 10 Posted by john on 27 Jun, 2021 03:28 AM

    john's Avatar

    Nice!

    By fiddling with the settings on the copy node you can generate endless kaleidoscopic effects.

  11. 11 Posted by Ramanraj K on 29 Jun, 2021 12:55 PM

    Ramanraj K's Avatar

    John, Thanks! Some more kaleidoscopic drawings generated with Kolam Animator using the swastika pattern. The zip file attached has ndbx files and csv file used along with few sample drawings generated. Have fun!

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • kolam_screenshot.png 533 KB
  • lakshmi.mp4 123 KB
  • kolam-sikku-7-1.png 118 KB
  • Kolam_Animator.zip 168 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

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

Recent Discussions

19 Jul, 2021 12:05 PM
13 Jul, 2021 01:04 PM
13 Jul, 2021 04:11 AM
12 Jul, 2021 11:40 PM
12 Jul, 2021 09:17 PM

 

07 Jul, 2021 02:14 AM
30 Jun, 2021 08:55 PM
30 Jun, 2021 03:32 AM
29 Jun, 2021 12:55 PM
29 Jun, 2021 07:18 AM
20 Jun, 2021 07:19 AM