Experience running a Processing example, compared to WebGL

Carlos Eduardo González Alvarez
cegonzalez13
Published in
3 min readJan 31, 2018

As we’ve seen in class, one of the greatest advantages of WebGL is the capability of running a complex program on the web without the need of any external software to help us build, compile and run the program. We’re going to demonstrate that advantage by trying to run a Processing program from scratch, without having the software required for it.

Having downloaded the software at https://processing.org/download/ we can see it’s very lightweight and we will be able to use it in no time. After running the .exe we can appreciate how clean and simple processing’s interface is. Now we can start testing our example in our program, and we will be able to see if it is as simple as it seems.

I selected a simple example of accelerated vectors made by Daniel Shiffman, which seems close enough in complexity to the example seen in WebGL. Running the program is as simple as hitting play on the interface and voila! We can see a working example of a Processing app:

Running app

Now that we’ve made sure we didn’t make any mistakes copy pasting the example (it happens), we can analyze the code and search for differences with the code used in the WebGL app.

First of all, we have the standard procedure of doing the setup of the application and the drawing, where we call the methods that we customize to make our visualization do what we want. Also, we want to initialize the main object we are going to use for starting out app (mover).

Now we proceed to define what our class Mover does in our app. We have the attributes location, velocity, acceleration and topspeed, and we define the constructor of the class as the initialization of the location, the velocity and the topspeed with values defined by us.

Now, for the display of the object we want to represent we have a method display(), that defines how is the object gonna be seen in the canvas defined for our app. Then we have the most important method, update(), that defines what is going to happen every second with the object; this is what makes the animation happen in the app.

Now we are all done, we managed to successfully run a simple animation app in processing in no time. Comparing it to the experience we had with WebGL we can say that although it needs a software to run the application, it was really simple and fast to make it work, so it would be foolish to say that WebGL has a significant advantage over Processing in terms of setup simplicity.

--

--