This weekend, a friend of mine named Mike Foti noticed my pained expressions when I was talking about the HTML 5 Canvas, and he decided to help salve some of my injuries from my first few tests by pointing me towards a project named processing,js. processing.js is an MIT Media Labs project that began as a way to make the creation of Java Applets easier. It has been ported to work with the HTML 5 Canvas, and so far it looks promising.
The idea behind processing.js is to create a “programming language” that is used to create HTML 5 Canvas apps. If you think of the Canvas as a low-level display API, then processing.js is sort of like what ActionScript is to the SWF specification: it’s an easier to use abstraction layer that assists in making applications.
If you look at the processing.js reference, you will see a lot of very useful looking functions that look like they will help take some of the pain put of creating Canvas applications. These include a lot of functions for mouse and keyboard support drawing graphics, etc., but also for application flow like app loops and frame rates. However, one glaring omission is sound support. My friend had told me that he had seen a lot of Canvas apps that used processing.js on the web, and that makes a lot of sense to me. Since processing.js (or simply, Processing) has been around for a some time for Java, my inkling is that many Java developers have simply ported their Java Processing apps to the Canvas using processing.js. They make for stunning demos, but if they don’t explore the Canvas at the API level are they missing something? The lack of sound in many of those demo apps may stem from the lack of support in processing.js, and not the lack of support in the Canvas (although support *is* lacking in the Canavs API). This is just a theory mind-you, but it seems like a fairly obvious situation to me.
Still curious, I sat down today and decided to port my “Gaudy Text Animation” HTML 5 demo from a couple days ago into processing.js. The results were mixed. While processing.js does appear to make some things simpler, it did not solve all my problems.
Here is a run-down of the conversion:
Support Processing.js In An HTML Page
The first thing you need to do when creating an app with processing.js is to include the library in the HTML page. After you have downloaded the current version, and place it somewhere that the HTML code can find. I simply put it in the same directory as my demo file. The following two pieces of code should be put in the section of your page.
[cc lang=”javascript” width=”550″]
http://processing-0.9.0.js [/cc] Next, you need to add support in JavaScript to get the processing interpreter running. This acts much like the Window load event we create with the native canvas API. [cc lang=”javascript” width=”550″] // <![CDATA[
window.onload = function()
{
var canvas = document.getElementsByTagName("canvas");
for ( var i = 0; i
[/cc]
(note: the above code was borrowed and modified from here: http://lethain.com/entry/2008/may/10/getting-started-with-processing-js/ )
In my previous HTML 5 Canvas examples I put all my code in the of the page. However, proper way to create an app with processing.js is to put the majority of the code in the . You do this by creating a
[cc lang=”javascript” width=”550″]
// <![CDATA[
[/cc]
section where all of the Processing code will exist, followed by a blank tag.
[cc lang=”javascript” width=”550″]
…all procssing.js code goes here
// ]]>
[/cc]
Application Loop
Now it is time to look at some code that is specific to processing.js. There are two main functions that you need to create for processing.js, both are called automatically.
- setup(): is used to create the initial application settings
- draw(): is used to redraw the screen on every frame
In setUp() you set -up things like the dimensions of Canvas, default colors, and the frame rate
[cc lang=”javascript” width=”550″]
void setup()
{
size(600, 150);
stroke(255);
frameRate(30);
}
[/cc];
In draw() you start making things happen. The most basic this you do, is set the background color (0=black). Also note that variables are declared Java-style, and can be declared outside of the functions. We will be using all of these variables to make the text appear. Notice that many of Phenobarbitals are the same as the ones we used in the “Gaudy Text Animation” HTML 5 demo.
[cc lang=”javascript” width=”550″]
String text1SizeDir = “up”;
String text1Dir = “right”;
int text1FontSize = 20;
int text1Xpos = 5;
String text1AlphaDir = “down”;
float text1Alpha = 255;
void draw()
{
background(0);
}
[/cc]
Drawing Text Changes
While the setup and execution of a processing.js app differs from a standard Canvas app, the actual code to create the moving text is only slightly modified. This is because processing.js remains and “immediate mode” environment, and thus requires the entire screen to be repainted on every frame. However, in some ways it does feel like it is slightly easier to work with processing.js than the straight Canvas API. This text example might not be a good example of where one might be better than the other.
Drawing the text with processing.js looks like this:
[cc lang=”javascript” width=”550″]
font = loadFont(“_sans”);
textFont(font,text1FontSize);
fill(256, 0, 0) ;
text(“Hello Canvas”,text1Xpos,80);
[/cc]
Drawing the text with the Canvas API looked like this:
[cc lang=”javascript” width=”550″]
context.font = text1FontSize + ‘px _sans’;
context.fillStyle = ‘#FF0000’;
context.textBaseline = ‘top’;
context.fillText ( text1 , text1Xpos, 80);
[/cc]
Note, the fill() function in processing .js is used to change the color of the text and apply an alpha transparency which we will do below.
Moving Text Changes
Moving the text across the screen is very similar in both the Canvas API and processing.js. The major difference comes when you apply the text to the screen (the last line of each example)
Moving the text with processing.js
[cc lang=”javascript” width=”550″]if (text1Dir == “right”) {
text1Xpos += 10;
if (text1Xpos > 460) {
text1Dir = “left”;
}
} else {
text1Xpos -= 10;
if (text1Xpos < 10) {
text1Dir = “right”;
}
}
text(“Hello Canvas”,text1Xpos,80);
[/cc]
Moving the text with the Cavas API
[cc lang=”javascript” width=”550″]metrics = context.measureText(text1)
text1Width = metrics.width;
if (text1Dir == “right”) {
text1Xpos += 10;
if (text1Xpos > 600-text1Width) {
text1Dir = “left”;
}
} else {
text1Xpos -= 10;
if (text1Xpos < 10) {
text1Dir = “right”;
}
}
context.fillText ( text1 , text1Xpos, 180);
[/cc]
Sizing Text Changes
Resizing the text to make it grow and shrink is also very similar in both processing.js and the Canvas API. The major difference is that you set the font and text size with two different calls with processing.js, while you do it with one function call with the Canvas API.
Sizing the text with processing.js
[cc lang=”javascript” width=”550″]if (text1SizeDir == “up”) {
text1FontSize += 1;
if (text1FontSize > 40) {
text1SizeDir = “down”
}
} else {
text1FontSize -= 1;
if (text1FontSize < 20) {
text1SizeDir = “up”
}
}
font = loadFont(“_sans”);
textFont(font,text1FontSize);
[/cc]
Sizing the text with the Canvas API
[cc lang=”javascript” width=”550″]if (text1SizeDir == “up”) {
text1FontSize += 2;
if (text1FontSize > 40) {
text1SizeDir = “down”;
}
} else {
text1FontSize -= 2;
if (text1FontSize < 20) {
text1SizeDir = “up”;
}
}
context.font = text1FontSize + ‘px _sans’;
[/cc]
Text Alpha Changes
Apply the alpha transparency to text is a bit easier with processing.js. Instead of setting a global context as you would with the Canvas API, you can apply the alpha transparency when you set the color of the text for drawing.
Text alpha fade with processing.js
[cc lang=”javascript” width=”550″]if (text1AlphaDir == ‘up’) {
text1Alpha +=16;
if (text1Alpha > 255) {
text1Alpha = 255;
text1AlphaDir = “down”;
}
} else {
text1Alpha -=16;
if (text1Alpha < 0) {
text1Alpha = 0;
text1AlphaDir = “up”;
}
}
fill(256, 0, 0,text1Alpha) ;
[/cc]
Text alpha fade with the Canvas API
[cc lang=”javascript” width=”550″]if (text1AlphaDir == ‘up’) {
text1Alpha +=.1;
if (text1Alpha > .9) {
text1AlphaDir = “down”;
}
} else {
text1Alpha -=.1;
if (text1Alpha < .1) {
text1AlphaDir = “up”;
}
}
context.globalAlpha = text1Alpha;
[/cc]
Text Shadow Changes
I could not find any built-in transformation for making a “shadow” in processing.js (I’m not saying it is not there, I just did not find it…yet), so I simply made two version of the text, one off center by 2 pixels for both x and y, and colored it a lighter color. We simply update both of these every frame instead of setting the global context for shadow as we do with the Canvas API.
Text Shadow with processing.js
[cc lang=”javascript” width=”550″]fill(200, 200, 200,text1Alpha);
text(“Hello Canvas”,text1Xpos+2, 82);
[/cc]
Text Shadow with the Canvas API
[cc lang=”javascript” width=”550″]context.shadowColor = ‘#DDDDDD’;
context.shadowOffsetX = ‘2’;
context.shadowOffsetY = ‘2’;
context.shadowBlur = ‘2’;
[/cc]
Full Code And Examples
See The Example of Gaudy Processing.js Text Demo
See the earlier Example of Gaudy Text Animation” HTML 5 demo using the Canvas API
Full code listing for processing.js Gaudy Text Demo:
[cc lang=”javascript” width=”550″]
http://processing-0.9.0.js
// <![CDATA[
window.onload = function()
{
var canvas = document.getElementsByTagName("canvas");
for ( var i = 0; i
// 40) {
text1SizeDir = “down”
}
} else {
text1FontSize -= 1;
if (text1FontSize 460) {
text1Dir = “left”;
}
} else {
text1Xpos -= 10;
if (text1Xpos 255) {
text1Alpha = 255;
text1AlphaDir = “down”;
}
} else {
text1Alpha -=16;
if (text1Alpha
[/cc]