Our First Program

In these notes you will learn:

What is Processing.js?

The Processing language we’ve been using is converted by the Processing editor into a Java program. In contrast, Processing.js is converted to JavaScript, and so you can run Processing.js programs directly in a web page.

If you want to put Processing programs on the web, then Processing.js is probably the best way to do that. Previous versions of regular Processing let you create Java applets that could be put on the web, but that is no longer supported in the current version of Processing.

Creating Simple HTML Pages

You can embed a Processing.js program in any web page. In these notes, we’ll use this HTML page:

<!DOCTYPE html>
<html>
<head>
     <title>Hello Web - Processing.js Test</title>
     <script src="processing.js"></script>
</head>
<body>
     <h1>Processing.js Test</h1>
     <p>This is a Processing.js sketch:</p>
     <canvas data-processing-sources="hello.pde"></canvas>
</body>
</html>

You should type this file into a plain text file using a text editor (don’t use a word processor — they add extra characters to the file that we don’t want) and save it with the name demo.html.

If you look carefully at the HTML above, you will see a so-called Canvas tag beginning with <canvas. This is where the output of your Processing.js file be shown.

Notice the file named hello.pde is also listed on this line. This file will contain your Processing.js code. It should be stored in the same folder as the demo.html file.

Writing Processing.js Programs

With demo.html prepared as in the previous section, we can now put Processing code in the file hello.pde. For example, this draws a jiggling rectangle that follows the mouse pointer:

void setup() {
   size(500, 500);
   noStroke();
}

void draw() {
        background(100);
        rect(mouseX + random(3), mouseY + random(3), 100, 100);
}

You can use any plain text editor you like for creating this file. Make sure to save with the name hello.pde in the same folder as demo.html.

Running Your Program

Finally, to run the program, open demo.html in a web browser. Some browsers, such as Chrome, will not run any code in HTML file that is opened from your disk (this is for security reasons). Possible solutions to this are:

  • Launch Chrome at the command-line with the option --allow-file-access-from-files.

  • Upload demo.html and hello.pde to a folder on a website, and then open demo.html through the website.

  • Run a web browser on your computer. For instance, if you happen to have the Python programming language installed on your computer, open a terminal window, go to the directory containing your demo.html and hello.pde files (e.g. using the cd command), and type this:

    $ python -m SimpleHTTPServer

    This will start a simple webserver running on your computer. Then in your web browser go to this URL:

    http://127.0.0.1:8000/demo.html

  • Use a different browser.

How Processing.js Differs from Processing

Processing.js works by converting Processing programs into JavaScript, and this is the source of a number of differences between it and regular Processing.

Perhaps most importantly, Processing.js does not support all of Java. In regular Processing, you can use almost any feature of plain Java that you like. But in Processing.js, you must stick to basic Processing commands.

Another difference is that files are handled differently in Processing.js because it is run in the web browser. There is no longer and data folder for storing images and other files, and instead you provide URLs to your files located elsewhere on the web.

For some other differences, read the Processing.js quickstart guide.

Questions

  1. Briefly describe the main difference between Processing and Processing.js. Why would you use Processing.js instead of regular Processing?
  2. What are two significant differences between the programs regular Processing can run, and the programs Processing.js can run?