Puddle Animation

john's Avatar


28 Jan, 2021 10:13 AM

An instagram user asked me to share the puddle animation I recently posted on Instagram. I am happy to oblige. Code is posted in the reply to this comment.

Here is the animation:


This animation was relatively easy to make using my new image node. The innovation here is using it not on a single image, but on a whole folder of frames from a slow motion video I took of an actual puddle rippling on a rainy day. I used a third party app to convert the video into 300 jpeg stills and my list_files node to step through them on each frame of my animation. As a result, this NodeBox network needs two Python code libraries: image.py and list_dir.py.

NOTE: I hardcoded the full file path to the puddle folder on my desktop. To make this work on your machine, replace "Users/John/Desktop" in the concatenate2 node with your file path.

I used a hatching mask with my image node to arrange the dots on diagonal lines which gently sway between 145 and 165 degrees. The image node is set to mask; the image is scaled and positioned to define an interesting region for the 600 x 600 Instagram dimensions I always use. My pixel_dots filter is set to dynamic sizing with a blue monocolor.

To create the zooming in and out effect I attach a wave node to the hatching mask which varies the points in the mask from widely spaced to tightly packed. The image node in mask mode automatically sizes the pixels to fill the available space, resulting in large dots when the mask is widely spaced and small dots when it's tightly packed. The hatching filter node, image node, and pixel_dots filter node together made this animation fairly easy to create.

I tried some earlier attempts with videos I shot of different trees in my neighborhood swaying in the wind, but these were too jumpy. To create a smooth animation you need to shoot in slow motion (which is now easy to do on an iPhone).

It's still early days with the image node. I encourage you all to experiment with it and consider sharing your own projects here on the forum.


  1. Support Staff 1 Posted by john on 28 Jan, 2021 10:32 AM

    john's Avatar

    Because of the file size limit on attachments I had to delete the original zip file attachment, slim it down, and reattach it here in this reply.

    The zipped file contains the ndbx file and all the other files needed to demo the animation. But it only contains the first 10 frames of the 300 frames I generated for the animation posted on Instagram. This is still enough for you to see how it all works.


Reply to this discussion

Internal reply

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

Attaching KB article:


Already uploaded files

  • puddle_screenshot.png 2.12 MB

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


? 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

16 Jun, 2022 05:30 AM
15 Jun, 2022 06:03 AM
06 Jun, 2022 01:07 PM
02 Jun, 2022 11:58 PM
30 May, 2022 07:48 AM


24 May, 2022 06:27 PM
20 May, 2022 04:12 PM
05 May, 2022 02:25 AM
03 May, 2022 04:46 AM
01 May, 2022 09:22 AM
18 Apr, 2022 09:01 PM