Loops in Houdini vs Coding

Download Houdini File: Foreach_Loop_Example.hiplc

Foreach loops in Houdini are nodes that have a unique orange block that groups all the nodes inside the foreach loop. And all the nodes and its operations that run inside this orange block are repeated over and over, as many times as you want by configuring the parameters in the foreach node.

Javascript, 2D Version of a Houdini Foreach Loop

I made a scene where it take a bunch of scatter spheres and subtracts them from a polygon cube over and over with a foreach loop in Houdini, which is very similar to the Swiss Cheese example from SideFX’s documentation on foreach loops.

Then I wrote a Javascript version of this Houdini scene, but the Javascript version is in 2D for simplicity.

Javascript Version

If you want to run this Javascript code, just copy and paste it inside the script tag of an HTML page and have the script tag. Then create a canvas tag and have both the script tag and canvas tag nested inside the Body tag of an HTML page. Then it’ll run inside your browser.

Download Javascript Code

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var start_X = 20;
var start_Y = 20;

ctx.beginPath();
ctx.rect(start_X, start_Y, 150, 100);
ctx.fillStyle = "#32CD32";  //lime green
ctx.fill();

var i;
for (i=0; i<10; i++) {
    var rand_X = start_X + Math.floor((Math.random() * 100));
    var rand_Y = start_Y + Math.floor((Math.random() * 100));

    ctx.beginPath();
    ctx.arc(rand_X, rand_Y, 5, 0, 2 * Math.PI);
    ctx.fillStyle = "#FFFFFF";
    ctx.fill();
}

This is the result of the Javascript code from the left. White Circles are scatter all over the green rectangle box, eating away the green box.

Houdini Version

This is the result of the Houdini foreach loop from the right. Spheres are scattered all over the cube and the boolean SOP node does a subtract from the cube over and over again.

Side by Side (for comparison)

I usually like to put things side by side for comparison. I find it more convenient.

Javascript Analysis

Houdini Nodes Analysis

On the left, you see the Javascript code with the initialization of the rectangle, that’s the green rectangle in this picture (on the right) with white dots. The white dots in the picture (on the right) represents the green rectangle being eaten away by random white circles.

Then you got the loop, which is the For “Loop” in the Javascript (the red section), which is similar to the Foreach node in Houdini (also indicated in red). This section repeats the code and operations inside the yellow section titled, “Scatter Random Circles”.

In the Javascript code, a random name is choosen between 0 and 1 from the code:

Math.random()

Then I multiple this random number by 100, because this function returns a positive decimal value below 1. For example, it can return 0.014 or 0.75, it will return a decimal value between 0 and 1. But I need an integer, or a number, so multiplying it by 100 will give me something like:

0.014 x 100 = 1.4

Therefore I need to round it up or down. I chose to round it down by using the code:

Math.floor()

This code will round it down. Therefore 1.4 rounded down will be 1.

In Houdini, it’s much easier, the scatter node will randomly provide me new positions to copy sphere to.

Nodes vs Coding

CVEX code shown here from the “Collide” node which is a VOP SOP node.

Screenshot taken from a Houdini Project demonstrating the SOP Solver.

If you come from a coding background you might find the Foreach loops in Houdini to be quite different from coding Foreach loops, line by line. Houdini uses a visual nodes style workflow, which makes the syntax different from lines of code. This is because its really hard to visualize loops and especially when you're using nodes to represent iterations of code block.

Houdini's workflow is mainly based on a node style environment. All the nodes in Houdini have CVEX codes behind them doing all the hard math calculations or complex calculations for us. So its still code behind the scenes. A lot of Houdini’s node operators are derived from concepts in programming, for example, loops, code blocks, operators, and VEX code are all very similar or just straight up coding.

Personal Experience

Another version with more holes of the cube.

I come from a coding background and the first time I used Houdini's forloops, I personally had a lot of trouble understanding how to use it. I find the workflow to be very different, but after overcoming that obstacle I soon realize just how powerful foreach loops are in Houdini.

I can create a very complex animation using 1 foreach loop and a couple of simple operations. This would be a lot harder to accomplish if you're coding it line by line using Javascript, C#, C++, or any other programming language. Even if you have a really awesome SDK that provides one liner drawing tools at your fingers tips for coding, Houdini in comparison is still a lot easier to animate. This is only my opinion and maybe there's an SDK out there I haven't used that makes it super easy to code animation that I don't know about.

Foreach loops in Houdini are very powerful because you can accumulate the results of each iteration and easily translate this data into a visual presentation.