Elijah's
Site

Updated
5/27/15

How to put Processing Javascript in a Web Page

Login Logout anonymous

So, you just made your wonderful Processing JS program. What is the next step? Why to share it on the web of course!

This tutorial is how to put Processing Javascript in a web page. Processing.js, also known as PJS, is for displaying and animating things on a canvas. A good place to learn is Khan Academy. They have a great course on how to program in JS and a very good JS environment, along with courses on many other subjects. They also have course on programing with html, css, and the website JS. That is where I learned to program!

Ok let's get started!

So first, does your browser support Processing JS? If the little program right below this works then your browser supports Processing JS!

This program should have a circle that chases your mouse around leaving in its trail a lot more circles

If that worked, then you are set to go ahead. I will asume that you have a Processing.js program. If you do not, then you can use the code for the circle one: 

	var x=0; 
	var y=0; 

	void draw(){ 

	fill(89, 216, 255); 
	ellipse (x,y,20,20);

	if (mouseX>x) {x=x+1;}
	if (mouseX<x) {x=x−1;}
	if (mouseY>y) {y=y+1;}
	if (mouseY<y) {y=y−1;}
	};

Next you need to create an .html file. I use Text Wrangler it is free on the mac app store, not sure about windows. But whatever you do Do Not Use Text Edit!

here is an example html file:

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title> My First Processing.js program </title>
</head>

<body>
<h1> This is my first Processing JS in a webpage! </h1>
</body>
</html>

Now, you need to save the html file in a folder with a .html extension. If you double click it it should open up in your web browser and look like this

Next, save the JS program with a ".pde" extension, like "First_JS.pde", also using Text Wrangler.

Now, you need to get the code that will turn the Processing JS into something the browser knows. To do that, go to http://processingjs.org/download/ and choose which one you want. The ".min" is a smaller file. I use the regular one: "processing.js". Save the code in your folder(or copy it into Text Wrangler and save it). It should be titled, "processing.js".

So, in your folder you should have a ".html" webpage. a "First_JS.pde", and the "processing.js" code.

Next, you need to go into your webpage and add: <script src="processing.js"></script> right above the </head> tag. Then add: <canvas data-processing-sources="First_JS.pde"></canvas> in the body tag some where.

Your ".html" webpage should look like this now:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> My First Processing.js program </title>
<script src="processing.js"></script>
</head>

<body>
<h1> This is my first Processing JS in a webpage! </h1>
<canvas data-processing-sources="First_JS.pde"></canvas>
</body>
</html>

Almost done!

Now go into your "First_JS.pde" file, and add a void setup function to the top if it does not already have one. In the void setup add the desired width and height of the canvas. If you are using my program, the ".pde" should look like this now:

void setup(){
size (200, 200);
}

var x=0; 
var y=0; 

void draw(){ 

fill(89, 216, 255); 
ellipse (x,y,20,20);

if (mouseX>x) {x=x+1;}
if (mouseX<x) {x=x−1;}
if (mouseY>y) {y=y+1;}
if (mouseY<y) {y=y−1;}
};

now comes the magic! double click your ".html" file, in the folder with the "First_JS.pde" and the "processing.js" file, to open it in your web browser. Wow, your first Processing.js program in a webpage. Your page should look like this.

Well if it unfortunately it did not work...

First this is for Processing Javascript not regular JS. Just use the <script> tag for regular Javascript.

Next, if you made a program on Khan Academy there are some differences, more on that later.

Your "processing.js", the ".pde", and the ".html" need to be in the same folder!

Try opening your broswer's error console. On a Mac it is command+option+c   on PC im am pretty sure it is control+option+c   see what is says. If it says could not find ("processing.js" or "_.pde") then make sure you spelled everything right and and that they are in the same folder.
If the console says, error in "processing.js" that means that there is an error in your ".pde", because the "processing.js" interprets your ".pde".

If you got an error in your error console you need to go over your code and make sure everything is right. Make sure you check the official Processing JS documentation for the correct code to use.

If you made your program on Khan Academy then you will need to change somethings as there are a few differences. If you are using the "var draw = function(){...};" loop then you should (though you shouldn't need to at the time of the writing) change it to "void draw(){...}"
Any inputs you use such as "keyPressed=function(){...};" need to be change such that the "=function" is removed and "void" is placed at the front and the end semicolon is removed. "void keyPressed(){...}"
Some other differences I have noticed (not to say all of the differences).

Now that you have your PJS program working in a webpage it is time to share it on the web.

Continue with: How to Host a Website For Free With Google App Engine