Making an animation with the interface elements

Once we have the tool to automate the counting process, we can make use of it to create an animation. Since we have not learnt to draw in Pure Data, we start by using the graphical user interface elements, such as the bang object, to create the graphics.

Save As the last example with the name animation1.pd. Simplify the patch like the following screenshot. Note that we move the metro box and its connections to the left-hand side and remove the send and receive objects. In this patch, we plan to animate a number of bang objects, say six of them, one by one in a sequence. This technique can be helpful when we create an animation loop later.

Then, we put six bang objects in the patch, arranging them in a row. To work with this, we also add a new object called select. It is similar to the conditional statement IF in text based programming languages.

In Run Mode, if you change the value in the number box above the select object, you will notice the relation between the number and the behavior of the bang boxes under the select object. A number 0 will flash the first bang. A number 1 will flash the second bang. A number 5 will flash the last one. In most programming languages, we count from zero instead of one. For example, if we have a count of 5, we count from 0, 1, 2, 3, and 4. Remember that you can click-and-drag the number box upward and downward to change the number value.

You can consider the select object a multiple conditional statement. In this example, if the number from the inlet is 0, it passes a bang to the first outlet. If it is 1, it passes the bang to the second outlet. If it is 2, it passes the bang to the third outlet. If it is outside the range of 0 to 5, it passes the bang to the last outlet, which is not connected to any bang box here. You can also specify non-consecutive numbers as the parameters in the select object. In later chapters, we will also use non-numeric parameters.

To complete the patch, we connect the counter output number box to the select object. In order to reset the counter, we also need to send the bang message to the message box containing the zero value, when the counter value exceeds 5.

In this version of the patch, the animation runs from left to right sequentially. It is due to the counter value changing from 0 to 5. In the next example, we modify it such that we can have a random movement. Pd comes with a pseudorandom number object called random. We'll use it to generate a number from 0 to 5. If you right-click or Ctrl-click on it to display the help menu, you can specify other parameters to control the range of the random value.

We put the number 6 here for the parameter. It will generate a random value between 0 to a number less than 6, that is 5. Again, it is common practice in programming languages for a value to start from 0, instead of 1. The next step is to combine this random object with the last example. It is pretty straightforward. We only need to send the bang message from the metro object to the random object in order to generate the next random number. The rest remains the same.