About a week ago I wrote an article that serves as an introduction to the Processing.js library. I had an overwhelming response to the article and wish to thank everyone for their comments and questions. In that post I also mentioned that, that article was the first in a series exploring Processing.js and today I am doing good on that promise.
In the previous article I mentioned that I will be looking at a different way of getting your processing code to run on the canvas, which also allows you to externalize your processing code. There are three ways of doing this, two of which has been deprecated. Let’s look at the two deprecated methods first.
The way these methods work is by adding a custom attribute on the canvas element in which you want the processing code to run. The value of the attribute then points to you processing script relative to the location of your current document. The two deprecated attributes are datasrc and data-src. Let’ look at a quick sample of how this would be used.
<canvas data-src="processing/draw.pde"></canvas>
With the above, you can substitute datasrc for data-src, Processing.js is will load the file in the background via Ajax and pass it’s contents to the Processing() function, which will then execute the script. Before we go on, a quick note on the file extension used above. As the contents of the file will simply be loaded and passed to the Processing function, the extension you use for your processing script does not matter and can in fact be anything. The reason I use the .pde extension is because this will allow you to write, test and execute your processing scripts using Environment, the Processing Development Environment.
Now let’s look at the new custom attribute that is replacing datasrc and data-src, data-processing-sources. In essence, data-processing-sources is exactly the same as the previous with one important difference. As the name suggest you can pass in one, or multiple space delimited source files and these will be executed in the order in which the are specified in the attribute. Other then that, the usage and how Processing.js will handle this in the background, is exactly the same. A quick sample of it’s usage then, will look as follows:
<canvas data-processing-sources="processing/draw.pde"></canvas>
Two other important difference to note when using this form of specifying and executing scripts is that first, you no longer need to init.js file I discussed in the previous post and there are two important function you need to implement in your processing script in order for your scripts to run. Let’s then move on and look at these.
Using our second sample from above go ahead and create an HTML document that looks as follows:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Exploring Processing.js setup() and draw()</title> <script src="scripts/processing-0.9.4.min.js"></script> </head> <body> <h1>Exploring Processing.js setup() and draw()</h1> <canvas data-processing-sources="processing/draw.pde"></canvas> </body> </html>
Inside your project structure, create a folder called processing, again this is totally up to your preference, and create a new file called draw.pde . Let’s then start by looking at the setup() function. The setup() function is the entrance point to your processing script. Even though it is the entrance point into your script, technically the setup() method is not required. With that said, there will most likely never be a situation where you do not want to do some setup before you begin drawing to your canvas. Inside setup is then where we will set all of our defaults that will be used when drawing onto the canvas. Inside you draw.pde script, add the following:
void setup() {
}
The above is your bare-bones setup script. If you load your page up in a browser now, absolutely nothing will happen and you will only see your heading. To make things a little more intuitive, let’s add a small style rule to give our canvas a thin border. Create a style sheet document called default.css and add the following to it:
canvas
{
border:1px solid #333;
}
Then inside your HTML document, just above the script tag, add the following line:
<link rel="stylesheet" href="css/default.css" />
If you now refresh your page you will see the canvas element at a default height and width with a dark grey border. The first thing you might want to do is to set the height and width of your canvas element. Inside the setup method add the following:
void setup() {
size(500, 350);
}
Go ahead and refresh your page. You will see that your canvas element has changed to the size specified in the setup method.
An important side note here is that all of these examples needs to be executed over some type of web server, such as Apache, as the scripts are being loaded via Ajax.
In the previous post we drew a line using the line() function but, it was drawn using the default settings of Processing.js. In out setup, let’s change this and specify how we want our lines drawn.
strokeWeight(10);
The strokeWeight() method is used to set the width of all lines, points, and borders around shapes. The width is specified in pixels either as an int or float. Next I want to look at two functions that controls the way Processing.js will run the draw() method. The draw() method is called in a loop that runs at a default of 60 frames per second. You can control the number of frames per second with the frameRate() method. For example add the following to the setup() method:
frameRate(20);
This will then change the frame rate, amount of loops per second, to 20 as apposed to the default of 60. You can also turn looping off completely in which case your draw() function will only be called once.
noLoop();
For the purposes of our example leave the frame rate at 20. I will look at some other options you can set but for now, let look at the draw function. After the setup function add the following:
void draw() {
}
After running all of the code in our setup() function Processing.js will call the draw() function. This is then also where all the fun happens. Let’s change the background color of the canvas. Inside draw() add the following:
background(51);
The above will simply set the background color of the canvas to a dark gray. The background() function is a lot more powerful then this though and in my follow on post I will be looking at background() in more detail. For now, let’s leave it as above. The color here is specified using an int or float between 0 and 255, 0 being black and 255 being pure white.
Next, let’s draw a simple line on the canvas. While the code shown here will look very familiar to you, the end result will be different because of the custom setting we specified in setup(). Add the following after background:
line(30, 20, 85, 75);
When you refresh your page you will see a black think line drawn onto the canvas. Let’s change the color of the stroke to white. To do this, add the following line:
stroke(255);
Refresh your page again and the line will now be white. As with background() you also specify the color of stroke() using an int or float between 0 and 255. But I cannot just leave it there with a gray canvas with a white line on it ;) As you know we set the frame rate to 20, so while you do not see it, Processing.js is actually running the draw() function 20 times per second. To prove this to you, add the following code to the draw() method:
background(backgroundColor++);
if(backgroundColor == 255) {
backgroundColor = 0;
}
And at the top of the Processing script add the following:
int backgroundColor = 0;
Refreshing your page now will demonstrate that the draw function is being called continuously and the canvas background color will keep cycling from black to white. You can play around with the frame rate to see how the speed effects the rendering. Before I end this look at the setup() and draw() functions of Processing.js let’s draw something other then a line.
Create a new script file called draw_rect.pde and add the following code to it:
void setup() {
size(200, 200);
strokeWeight(10);
frameRate(20);
}
void draw() {
background(51);
stroke(25);
fill(145);
rect(20, 20, 50, 50);
}
On your HTML page, add another canvas element and it’s data-processing-sources to this new script:
<canvas data-processing-sources="processing/draw_rect.pde"></canvas>
When you refresh your HTML page now, you will see to canvas elements the one running our code from before and the second containing the rectangle we are drawing with the rect() function. The rect function takes four parameters, the first to is the position where you want it drawn onto the canvas and the third and fourth parameters specify the width and height of the rectangle.
To end this article on a high note, let’s animate our rectangle. At the top of the new script add the following:
int x = 20; int y = 20;
The above will be the starting x and y coordinates at which we want to draw our rectangle. Now, inside the draw() function after the rect() function add the following:
x = x + 10;
y = y + 10;
if((x > 200) || (y > 200)) {
x = 20;
y = 20;
}
Refreshing your HTML page now will show the rectangle moving from it’s starting position to outside the canvas area, exiting bottom-right and then looping. I hope you enjoyed this look into the setup() and draw() functions of Processing.js and look forward to your comments and seeing what you create using Processing.js
Pingback: Tweets that mention Processing.js : Looking at the setup and draw functions | Expansive Derivation -- Topsy.com