1. NodeBox 3
    1. Homepage
    2. NodeBox 3Node-based app for generative design and data visualization
    3. NodeBox OpenGLHardware-accelerated cross-platform graphics library
    4. NodeBox 1Generate 2D visuals using Python code (Mac OS X only)
  2. Gallery
  3. Download
  4. Documentation
  5. Forum
  6. Blog

Working with Animation

First things first.

Before starting this section you should:

A wave animation.

Conceptually, NodeBox animation is very easy to understand. Every frame, NodeBox sets the value of FRAME to the current frame number. By referring to it over a frame node, you can create animations.

Let’s start with a simple wave animation.

We will divide and multiply the range for later usage. We will also create points based on the previous nodes.

animation wave step 1

Now we will add some coloured shape to each of these points.

animation wave step 2

Test the animation by pressing the Play button in the animation bar.

Notice that the alignment of the shape is at the right of the centerpoint. We will add a few nodes to changes this.

animation wave step 3

Subnetwork.

We will create a subnetwork as a next step. Go to the subnetworks page and read this it it doesn’t ring a bell..

Now we have an object which we can translate and alter by sending different values to speed and coloramount. Suppose we want this thing to go in a downwards direction.

animation wave step 4

Let’s turn this into a new network.

Now we will create a few of them based on a number node.

animation wave step 5

animated: