Hello guys!

I’ve seen that my previous articles have had some kind of success as you’ve been liking and re-posting them. I’m glad you like the work I’m doing here, and it makes me want to go further in this article series.

In the last article, we made a brief but exhaustive walkthrough to the key points you need to take into account deciding which of these 2 great tools should you use in your project (and even consider some other tool like openFrameworks, pure Data, maxNSP, etc.). So this has been enough theory and blah blah for this article series. From now on, we’re going into the practical articles and stuff.

In this article, I’m going to start by proposing a pretty straight-forward interactive application with mouse input and simple animations. The purpose of this simple “hello world” kind of application is to show you how things move in both Processing and vvvv, and having in mind the other key points I’ve discussed in the previous articles, this will allow you to decide which tool is your favorite or the most fit to your own needs.

So, without further ado, let’s start with processing!

Foreword: what we’re going to do!

The super-awesome-and-innovative interactive application we’re going to create is just a simple 5x5 grid of squares with red and green colors. These squares are reactive to the mouse position, and they change their dimensions according to the mouse’s distance from them. The higher the distance, the greater the dimensions are and vice versa. Check out the online example here so you can see by yourself the effect. Is very simple, but that’s the way everyone starts with any kind of tool, and is also simpler to compare our tools with simple examples.

Part 4: let’s start sketching with processing.

Step 1: We have to think before we even write a semicolon!

This is a very simple application that can be entirely done without frying our brains. So the first thing I’m going to consider here is that I’m not going to use any objects or classes as all the functionality can be achieved with pretty easy and straight-forward algorithms.

Having made that clear, let’s start by making some abstract thinking, and in this part of the process, it’s pretty handy to grab your pencil and paper and make some sketching. It would seem very dumb or simple but this step is crucial and you have to do it before writing any code. Just imagine that you thought things up quickly and you wrote your code and then you realize your algorithm was wrong! Now in this case that is not much of a problem, but if you have 2000 lines of code with complicated relations, loops, conditionals, etc. it won’t be that funny right?

So, after I finished my speech, let’s do some abstract thinking: we have 25 squares that have the same size and are equally apart from each other, and they are arranged in a 5x5 grid. When it comes to these problems, we start by a simple question: what is variable in the program? What is going to change? In our case, it’s the squares’ dimensions primarily, and the second variable is the squares’ color, and they appear in a pattern: green, red, green, red, etc.

Now to our question number 2: how to store our data so it is logically related to what is seen? As we won’t use OOP, let’s find a programming structure that allows us to handle nxn grid intuitively and that stores our data accordingly. In our case, we are going to use an array2D, and this array will store our squares’ dimensions, and not the position as you might think, ‘cause they won’t change and we’ll calculate them as we draw our shapes.

Finally the question number 3: how are we going to achieve the effect? What is the logic and procedures to accomplish it? So the first thing is to point out we’ll do it with the mouse movement. Notice that as we get close to a specific square, it gets smaller and as we move away it gets bigger until it reaches the original or maximum dimension. Now every square has an (x, y) coordinate in the window as well as the mouse (refer to the processing documentation for more info if you’re a newbie in this), so how are we going to calculate the distance between a pair of two-dimensional points? Basic algebra guys: the distance formula!!!

the distance formula for the two-dimensional space. Extracted from about.com

Now for the second part of our analysis: we have our distance, but we can’t just assign it directly to our square, as it would be enormous! So the solution to this problem is to have a length interval. We set a specific and finite interval from the minimum to the maximum distance, so we exclude the data we don’t care. Next, we have to map that data to another desired interval, which will be the change factor for the squares’ dimensions.

This factor will be a decimal number between 0 and 1, cause with those the scaling can be made in pretty-straight-forward fashion. Remember that the scale transformation is made by taking a point in the Cartesian plane and multiply it by a constant k, so if we multiply by 1, we return the square to its former dimension, and if we multiply by 0, it’ll disappear. See the image below to make things clearer.

Wrapping  things up: First, we have to calculate the Euclidean distance between the squares’ origin and the mouse. Second, we constrain and place that distance in our allowed distances interval. Third, we take that place or location from the distances’ interval to the dimensions’ change factor interval (that will be between 0 and 1) and finally we take the original dimensions from the square and multiply them for that change factor.

It’s a very easy algorithm, and the same effect can be achieved with even a simpler one, but the main point here is to emphasize the design and analysis process, as it is very important when it comes to develop any kind of application, no matter if you’re on processing or vvvv.

So let’s write some code!  If you’re an experimented programmer, feel free to jump the steps and see the final code at the end of the article.

Step 2: write some code!

Let’s start by placing our very basic skeleton for our sketch. As we’ll be using animation and changing in time, we have to use the setup() and draw() methods. Explaining briefly, the first one is executed only once in the program and there you’ll initialize your values, create objects, define your window’s size, and so on; and the second one will be executed in every frame of the program, so here you draw your shapes, your objects, you do the logical changes so the animations can happen, etc. Processing runs at 60 frames per second by default.

void setup(){

}

void draw(){

}

//executed every time you move the mouse in the window.
void mouseMoved(){

}

Additionally, we’ll place the mouseMoved() method, that handles the mouse move event: every time you move the mouse inside the application’s window, this method will be executed, so here is where we’ll make our logical processes for the interaction.

Step 3: defining our variables!

 static final color RED_COLOR   = #FF0000;
static final color GREEN_COLOR = #00FF00;
static final int GRID_SIZE     = 5; 
static final float INIT_WIDTH  = 50.0f; 

float iniX, iniY;
float[][] widths;

These variable are pretty self-explanatory. The first 4 are constants, as they won’t change during the program and are reference values. The iniX and iniY variables simply store the initial location for the grid to start drawing, and they’re important as we do some calculation with them. Finally, the array2D variable we spoke of at step 1.

Step 4: setting it up!

Let’s fill our setup method now.

void setup()
{
  size(500, 500);
  widths = new float[GRID_SIZE][GRID_SIZE];
  iniX = iniY = 100;
  fillGridWithWidths();

  rectMode(CENTER);
  smooth();
}

This chunk of code is pretty straight forward as we just initialize our variables, we create our array2D with the specified dimensions (5x5) and blah blah. The only weird thing here is the fillGridWithWiths() method. This method fills the entire array 2D with our INIT_WIDTH value. Copy and paste the following code to the end of your sketch:

void fillGridWithWidths()
{
  for (int i = 0; i < GRID_SIZE; i++) {
    Arrays.fill(widths[i], INIT_WIDTH);
  }
}

Here I just used the Arrays.fill(int[] target, int value) method that fill every row of the array2D with the value specified in the second parameter.

Step 5: drawing our squares!

So let’s get to me drawing. Copy and paste this code:

void draw()
{
  background(0);
  color currentCol = RED_COLOR;

  for (int i = 0; i < GRID_SIZE; i++) {
    for (int j = 0; j < GRID_SIZE; j++) {
      currentCol = (currentCol == GREEN_COLOR) ? RED_COLOR : GREEN_COLOR;
      float x    = iniX + i*70;
      float y    = iniY + j*70;

      fill(currentCol);
      noStroke();
      rect(x, y, widths[i][j], widths[i][j]);
    }
  }
}

First, I refresh the background every frame (or else you’ll see some ghostly square when you animate). Next, I define a local variable called currentCol, and with it we’ll decide what color will correspond to each square, and we set it to the red color first. Now we use a nested loop to get every single cell from our array 2D and we do the following: first get the current color (by a sinple line conditional), second we calculate the corresponding position for the cell, and finally we draw our square with the rect() method with the right positions and the particular size that corresponds to each cell.

By this point, if you hit the “run” button, you should see something like this:

Step 6: the logic and fun part from this article!

Copy and paste the following code into the mouseMoved() method:

void mouseMoved()
{
  for (int i = 0; i < GRID_SIZE; i++) {
    for (int j = 0; j < GRID_SIZE; j++) {
      float x    = iniX + i*70;
      float y    = iniY + j*70;
      float d    = dist(x, y, mouseX, mouseY);
      d          = constrain(d, 0, INIT_WIDTH * 3.0f);
      float dfactor = map(d, 0, INIT_WIDTH * 3.0f, 0, 1);

      widths[i][j] = INIT_WIDTH * dfactor;
    }
  }
}

This is the code that does the exact same thing described in step 1. We loop through our array2D, recalculate the squares’ positions and we get the distance with the dist() method using the mouse positions. Then we constrain that distance between 0 and 3 times the initial width (as if we get any further, we don’t want make a huge square that fill the entire window) and then we calculate the change factor by mapping this distance from the previous interval from 0 to 1. Finally, assign the current position of the array2D to the multiplication of the initial width by the factor.

Step 7: voilà! Enjoy you super-entertaining application!

And this is the final code:

static final color RED_COLOR   = #FF0000;
static final color GREEN_COLOR = #00FF00;
static final int GRID_SIZE     = 5; 
static final float INIT_WIDTH  = 50.0f;

float iniX, iniY;
float[][] widths;

void setup()
{
  size(500, 500);
  widths = new float[GRID_SIZE][GRID_SIZE];
  iniX = iniY = 100;
  fillGridWithWidths();

  rectMode(CENTER);
  smooth();
}

void draw()
{
  background(0);
  color currentCol = RED_COLOR;

  for (int i = 0; i < GRID_SIZE; i++) {
    for (int j = 0; j < GRID_SIZE; j++) {
      currentCol = (currentCol == GREEN_COLOR) ? RED_COLOR : GREEN_COLOR;
      float x    = iniX + i*70;
      float y    = iniY + j*70;

      fill(currentCol);
      noStroke();
      rect(x, y, widths[i][j], widths[i][j]);
    }
  }
}

//..................................................

void mouseMoved()
{
  for (int i = 0; i < GRID_SIZE; i++) {
    for (int j = 0; j < GRID_SIZE; j++) {
      float x    = iniX + i*70;
      float y    = iniY + j*70;
      float d    = dist(x, y, mouseX, mouseY);
      d          = constrain(d, 0, INIT_WIDTH * 3.0f);
      float dfactor = map(d, 0, INIT_WIDTH * 3.0f, 0, 1);

      widths[i][j] = INIT_WIDTH * dfactor;
    }
  }
}

void fillGridWithWidths()
{
  for (int i = 0; i < GRID_SIZE; i++) {
    Arrays.fill(widths[i], INIT_WIDTH);
  }
}

Final words

Pretty easy huh? Now you see why processing is so popular! It is very easy to create something like this just a few lines of code, and with only 10 minutes you’re ready to go!

In the next, article I’m going to replicate this application using vvvv, and I promise that one won’t be as long as this one :P

See ya later ‘alligators!!!

Hey there!

Continuing the previous part of this article series, I will make put Processing and vvvv in comparison regarding a very important subject: how they work and when you should choose one instead of the other.

Part 2: Multiple modes Vs one eternal Runtime

This is a very important subject to discuss because this would almost define why you should use one of this programs, and also is important when it comes to the way you want to see the results of your work. This is the time when you ask yourself: do you need a compile time? do you need to switch between compile time an runtime in order for project to work? what is the most comfortable way for you to program or produce interactive products, sofware or objects?

Before we go on, if you’re a complete newbie in any kind of programming, please read about compile, linking, runtime, etc. Here are some brief yet acceptable definitions about this terms from our good pal Wikipedia: Compile Time, runtime, linking, Dynamic programming language.

So let’s start with Processing.

Processing, in the very bottom, are just some wrappers, classes, convenience methods, etc. and it’s not a programming language by itself, it’s more like a sort of framework. Processing is made in the Java programming language, one of the most powerful and versatile programming languages in computer science. So in order to make the most from processing, some java language is desirable but not necessary.

The thing to point out from this fact is that processing has at least (this is not official, it’s just the way it could be perceived) 2 modes: compile time and runtime. When you finish to write your code or some part of it, you have to tell processing to Run your code (see the image below). In order for processing to run your code, it has to first pre-process your code in standard java language, and then the JVM(Java virtual Machine) compiles your code and turns it in an executable Java applet, which is the window that ultimately pops out when you hit the Run button or press Ctrl+R or Cmd+R.

Now You’d say that “that happens really fast” and it actually does with most applications you make with processing, since they are not very complicated apps. If you have a very huge app that has to do a lot of graphical and logical processes like multi-threading, computer-vision, sound-processing, etc. or if you use a lot of libraries or if you are a rookie (it happened a lot of times to me), it will take a little bit longer to compile and run.

The thing to notice here is: You don’t see what you’re doing unless you run the application, assuming it doesn’t have any errors, exceptions, etc. This can be very deceiving and frustrating if you’re a visual and results-oriented person like me (and like most of designers out there) because you feel you actually didn’t do anything before you see it (this a personal opinion, ok?).

Other issue you have here is that you don’t see what you’re doing at realtime, which can be pretty valuable in creative processes, so you cannot twitch or experiment with your app that easily. you have to close app, make changes to the code, and run the app again.

Now let’s do this for vvvv.

In vvvv, the very first step you do in a patch is to create a Renderer(EX9) node (or any renderer from the remaining categories like flash, GDI, TTY, etc) that opens up a new, fresh empty window like processing does when you hit the “Run” button. Next step is to create and connect some nodes, for example, a Quad(DX9) node, that draws a square in the renderer. The thing you must notice is that the square you created appears immediately after you connected it to the renderer, and this is the main point in this section: vvvv is always at runtime mode! you don’t have to compile, wait, close the window to make any change, etc. Therefore, you can see everything you do at runtime and in real time!

Patching in vvvv is like driving a car. Get results immediately when you want it. (extracted from the illustrated guide to vvvv).

This previous feature has its advantages and disadvantages depending on your own needs and requirements.

I have to point out that, unlike other fellow programs of vvvv like Pure data or maxMSP, in vvvv you don’t have to switch between edit mode and execution or lock mode. in pd and max, the edit mode is where you create your nodes, objects, messages, etc. and connect them to each other, and there is the execution or lock mode, that blocks any moving or editing to the patch and only allows to change values, manipulate sliders, hit bangs, toggles, etc, and then you can see the results of your patch (pd and max are also at runtime all the time but, as you continue patching, you’ll see that you have to be constantly switching between these two modes).

In vvvv, there’s a lock mode, that does the exact same thing as in maxMSP and pd, but it is not necessary to switch between these modes because you can perform the actions directly in the edit mode (hit bangs, manipulate sliders, etc). This mode in vvvv is suitable for patch exchanging, so that other people who uses your patch cannot edit or mess with them, and also when you want to leave the current result as they are and you don’t mess your own patch. for more information, see the vvvv documentation.

now let’s pass to the part 3!

Part 3: when should I use vvvv or processing?

With these creative tools, you can achieve pretty much anything you like and get the exact same results in any of them. So, when should I use one or the other? answer: depends of your project’s nature and requirements. Let’s make a step-by-step analysis from a few key points here to determine with those when you should use processing, vvvv or any other tool.

1. Cross-plataform.

If your project requires that it must work in any platform and in any operating system (i.e. that it works as well in windows as in macOSX as in Linux), then Processing is the answer for you, as java is not dependent from any specific platform features. vvvv on the other hand, works only in windows (from winXP to win7) as it uses the directX technology for rendering and the .NET 4 framework to work

So what if I want to run vvvv in my mac or linux computer? simple answer: BootCamp :P, but if you’re like me and you’re lazy or you’re frightened to melt down your computer, then you will surely not do that.

winner: Processing.

2. I need the app to be a .exe or an executable File

If you need and you think it is convenient to compile your application in an executable and portable file like .exe, .app or .jar or as an Applet, then Processing or openFrameworks is the right tool for you. the vvvv patches you create will always need an instance of vvvv running, therefore you need to run vvvv and then open and play with your patches, and we already discussed other portability problem with vvvv in the previous point.

Winner: Processing

3. I need to make modifications in real-real time.

Then vvvv is the right tool. As we discussed above, vvvv is always at runtime and you can make the necessary change you need in real time and even in the performance itself! with processing and openframeworks, you first need to compile the app, let the compiler or virtual machine do some resource gathering, linking, etc. and then you see the change.

With vvvv you get the changes on-the-go, and there are some situations and projects that require this kind of feature. Just imagine it as you need to compile the command “brake the car” and you’re about to crash!?!?!?! not so funny right?

extracted from: the illustrated guide for vvvv for newbies in computer arts.

winner: vvvv

4. I’ll create an interactive installation.

In this kind of situation, it is frequently a pain to have many programs running. For example, if you’re using any kind of sensors or physical input in the installation, then you’ll have an arduino for example (and you need to write the code for the board to do what you want), you’ll have an external hardware communicating by OSC, etc. While processing can do any of those things, it frequently needs other programs like OSCullator, module8 or any other kind of program in order to work with external technologies, as well as downloading external libraries like OSCP5, openKinect, etc(nevertheless, processing’s libraries are very diverse and cool and it almost extinguish this problem). With vvvv, you don’t have that pain in the ass.

vvvv has many ways to integrate all these technologies in one single patch, and of course, see the lectures and change in realtime and make the proper changes. It also has some sound, physical and network features for you to work.

Winner: vvvv.

5. My project needs a multi-screen feature.

then vvvv is the answer for your problem, as this can be very problematic with processing and other tools because you need several computers to be connected in a private network and act synchronously and perfectly without delays, and that will require a hell of a programming task to connect them all.

VVVV on the other hand, has a very cool feature called Boygrouping, that allows you to do just that with only the computers’ IP addresses and a few nodes in your main server. Setting up the network and the physical features correctly, boygrouping will be almost flawless, with realtime, synchronization and everything else.

extracted from: vvvv.org

winner: VVVV.

6. My project involves real time motion graphics, video, 3D graphics, internet connections, etc.

Either processing or vvvv can manipulate these kind of computer media, including also sound and other media. Processing is very powerful with graphics, video and 3D rendering as it uses openGL and other technologies, and vvvv has the power of windows DirectX. When it comes to realtime, vvvv beats processing, but this realtime feature can be accomplish in processing as well with a bit of effort.

winner: it’s a DRAW!

7. I need real-time sound manipulation and music compositing

Then neither processing or vvvv are suitable for you. Although processing and vvvv have very powerful sound manipulation features, they are not as remotely powerful or handy as the ones from other programs, like maxMSP or Pure data.

Winner: neither! use maxMSP or Pure Data.

8. I’m working with a low budget or I prefer open source tools.

Then processing, openFrameworks or pure data are the answer. vvvv is free for non commercial use, i.e. for experimenting and make some creative and pretty cool stuff. If you want to use it commercially, you HAVE to buy a license. MaxMSP also requires a license, for either personal or commercial use.

winner: Processing and others.

9. I need to publish my work in a website.

Use processing, as vvvv doesn’t allow you to run a patch in a web browser, as vvvv was not made for web publishing. Other tools like openFrameworks are neither suitable to web publishing, so in this matter, processing has won the match, as java is portable to the web and with other features as processing.js, which uses the power of HTML5, you can create any cool application that will run in any modern web browser and it will look and work exactly the same in every computer. check this app as an example, it was made with processing.

winner: processing.

Final words!

I hope this little article makes some things clear for you about these subjects, and in my next articles I will make a step-by-step tutorial, in which we’ll create a very simple interactive application in both vvvv and Processing so you can choose your favourite.

See ya later ‘alligators!