Many of the tutorials on this site will be built using processing.js. Processing.js allows you to take a processing sketch developed for the Processing desktop environment and use it on a website. The processing.js javascript file will take your sketch and convert it into javascript to run in html5 canvas.
If you are not familiar with Processing, it is a really nifty programming language that is great for anyone interested in interactive art or games. As I will show you in coming tutorials many games can be quickly created using it. To get started developing with Processing go to processing.org and download the appropriate IDE for your operating system.
The Processing IDE will be extremily helpful, as you develop games for Processing.js. It has a great debugger built into it, that will help you find problems in your code that otherwise might have you banging your head against the wall.
The second thing we are going to need to develop games using Processing.js is the processing.js file. You can download the processing.js from processingjs.org. Go ahead and grab that file now. You might need to right click and save as to save the processing.js file.
If you are familiar with web development then this next step should be easy for you. We are going to setup a folder with a few different files that will make up our game’s website. If you are developing on a server then create a new folder somewhere on it. If you are developing locally you can still preview your website in your browser. Go ahead and create a folder somewhere on your computer that you want to put the files in.
I called mine processingTest and put it on my desktop.
Copy the processing.js file into the folder.
Now we are going to fire up our text editor, or whatever you want to use to edit our html file.
Create a new file called index.html. Our index file is going to be very simple:
<!DOCTYPE html>
<html>
<head>
<title>Hello World - Processing.js Test</title>
<script src="processing.js"></script>
</head>
<body>
<h1>Processing.js Test</h1>
<p>This is my first Processing.js web-based sketch:</p>
<canvas data-processing-sources="helloworld.pde"></canvas>
</body>
</html>
Now create another file called helloworld.pde and put the following code into it:
//Hello World Processing Application
void setup(){
size(500,500);
}
void draw(){
background(200,100,100);
fill(100,200,100);
ellipse(width/2, height/2, 100, 100);
}
Make sure all 3 of the files are in the same directory. Then open the index.html file in your web browser. You can do this by right clicking it and selecting open with -> then your browser.
You should see your processing sketch running – similar to this one:
Well that is our first tutorial – stay tuned for our first series on making a simple game with Processing.
