Animated squares with Patternodes 2

In this tutorial we'll make a simple animation of some dancing black squares using the node-based graphics app Patternodes. It'll be a an introduction to Patternodes in general, working with repeating structures and adding animations.

We'll start with a blank new document. By default new documents include a couple of default nodes to help you get started, but for the sake of this tutorial select and delete all of them except the Output Artboard node.

Then right-click in the empty space to the left to bring up the context menu and add your very first node: Add Elements > Shape. This will add a new Element Shape node and automatically connect it to one of the layers on the Artboard node. This node outputs a shape as the name implies, and connecting it to the Artboard node adds this output to art board. Change the shape type to Rectangle and you should have something that looks like this.

In the top area you work with your node sequence and in the area below you can see a live preview of what the output will be.

Next, we're going to repeat this single square by adding another node. An easy way to do this it by clicking on the connection to add a node on this connection. We'll add a Repeat Grid node. At this point you should now have a little grid of squares, offset based on the grid node settings.

To make things pretty we want to center this result. We could just mode the initial element node or add other nodes to offset the output, but an easier and more convenient way is to use the Align node found in Change. By adding this last in the sequence before the Artboard node and toggling on horizontal and vertical centering we ensure that regardless of what we do before this in the sequence, this node will center the elements before they're added to the art board.

Now for our second level of repetitions. For this we'll simply add another Repeat Grid node after the first. This second repeater node will repeat the output of the first, so that we now have a grid of grids of the initial element. And regardless of how you change them the Align node centers the result.

So, now that we have a couple of nodes, let's start adding animations. In Patternodes animation is simply done by adding an Animated value node and connecting this value to any other node property to animate it.

An easy way to do this is to simply drag out a new connection from the input socket och the value you want to animate. But instead of connecting it to some other node, release it in an empty space to bring up the add node menu. This will let you quickly add a new node that it connected from the start.

Adding an Animated value node also adds an Animation info node if there isn't one already. This node can be used to play/pause the animation in the preview and set animation properties for export.

In the Animated value node you can control how the value will change over time. In this case we'll set the value to vary between 80 and 120, using the Ease peak function over the full duration. Try it out and you should have something like this:

Next we're going to add a second animation, rotating the first grid. We'll do this by adding a new Change Transform node on the connection between the two grid repeaters. When the input to a Change node like this is a group of elements you can select what the node change should be applied to using the "Apply to" buttons in the node, either applying the change to the whole group, each individual element or just some of the elements.

In this instance we'll stick with the first group mode and apply a rotation to the entire grid. Just like with the spacing in the second grid we'll ad an animated value node for this rotation angle. But in this case we'll make it an ease from 0 to 90, and instead of the full duration we'll set it to start at 1:50 and end at 3:50. All together it should now look something like this:

To make it a little more interesting and as an example of the different Change node modes we can add a second Change Transform node right after the first, but in this case set it to each element mode. Connecting the rotation angle to the same animated value now means that after rotating the entire group this angle the second node now also rotates each individual square with the same angle.

But this isn't quite the effect I was looking for. To get the "dancing" animation I want the individual squares to remain the same angle even as the group is rotated. To do this I want the individual squares to be rotated the other way. To do this I'll add a simple math node on the white value connection, just like we've been adding nodes on the blue graphics connections.

The simple value node lets you enter a simple math expression where you can use the symbol "a" for the input value. So for example "a/2" will mean the output is half the input. Or in your case "-a" which will output the negative angle.

The squares will now always remain the same angle even as the grid is rotated and you should have something that looks more or less like the above. And with that we're now done with this little animation introduction, thanks for reading!