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

Basic Animation

Frame

Let’s create a moire effect and automate it by using a first simple animation procedure based on the framenumber.

Create an ellipse node.

Create a grid node

Create a translate node

Create a colorize node

Moiree effects appear when two or more identical grids are placed on top of each other and then rotated. In order to make this happen:

Create a copy node

Moiree effect step 1

In order to remove the parts without overlap:

Moiree effect step 2

Last step is the implementation of the animation itself. Look at the lower left corner where you can find the animation toolbar.

Animation toolbar

Create a frame node.

Wave

We can also use a wave node in combination with frame for more advanced animation.

Let’s create a network that produces a seastar-like figure. We will implement a wave node to create animated tentacles.

Seastar step 1

Let’s add some animation to it:

Seastar step 2

What occurs is an wave shaped animation of moving ‘tentacles’. Change Type in wave1 to something differenct than it’s default Sine. Notice that the animation changes because of a changement in the wave shape.

For the moment all arms have the same animation. Let’s create some variation.

To avoid this linear mouvement we can add a shuffle node so all numbers can be shuffled before sending the result to the quad curve.

Seastar step 3

Try giving it color. Play around with the shapes and add additional animation to it.

Next Steps

Now that you’ve seen a first animation, you can: