Preparing Processing Sketches for the Web

Jeanine Meyer

Purchase College/SUNY

ProcessingJS is a tool for disseminating Processing sketches on the web. The website, has directions on how to do it. These notes repeat the basics and include additions (hacks) I have used for certain effects:loading multiple image files, adding html to add text or a link, and enabling touch. Examples are included at

You need to acquire a website and have an ftp (file transfer protocol) program such as Filezilla to upload the files. The following 4 tasks can be done in any order. I assume you will use one specific folder on the website.

1)Download the file processing.min.js from the ProcessingJS.org website and upload it to the folder on the website in which you are going to store your work. You do not have to repeat this for subsequent examples, assuming you use the same folder. If you want to use more than one folder, the links must obey the html rules for relative links.

2)Prepare your sketch in the usual way and upload the pde file to your website, to the same folder.

3)Upload all the images from the data subfolder for your sketch to your website. That is, you do not upload the data folder itself. See below for the fix necessary for multiple images.

4)Prepare an html file. This will be the file that you go to from a browser or set up links to from another html file. The basic format—change what is in italics-- is
<html>

<head>
<title>what you want to appear in the tab</title>
<script src=”processing.min.js”</script>
</head>

</body>

</html>

Upload this file to your website. You can examine the html file for each of my examples.

Be aware that browsers interpreting HTML tend to be forgiving. For example, the <head> and </head> tags can be omitted.

The following are various modifications I made to the basic procedure for certain things to work.

Preloading of Images

In certain cases,for example, needing to access an image width or height, or dealing with multiple images, you need to direct the processingjs code to preloadthe images. Though I admit to not fully understanding how ProcessingJS functions, it is important in standard HTML and JavaScript applications to pay attention to loading of images. If you/your code makes use of a file before it is fully downloaded from the server to the client computer, things can go wrong. The fix for ProcessingJS is done using a directive that appears as a comment in the Processing code and is ignored during normal Processing execution. For example, in the slingshot sketch, I could not kill the chicken in my original Processing JS implementation. The fix was to put this line into the Processing code at the start of the file:

/* @pjs preload="chicken.gif,feathers.gif";

For the rotating cube, I inserted

/* @pjs preload="AnnikaFrog.JPG,AnnikaFlowers.JPG,AnnikaMakeup.jpg";

Preloading was not required in the make a path and then travel on it example.

Adding HTML to the body Element

For the Balls with Rocks sketch, I decided that it needed instructions. I could have gone back to modify the Processing code, but decided to add the text to the body element of the html file.

<title>Balls with Rocks</title>

<body>

Click on screen to add a rock.

br/>

</canvas>

</body>

</html>

The br/> causes a line break before the canvas element.

Another example involving adding to the <body> element is in the Random images: Wall Street Bull or Fearless Girl(s). There was (is) a controversy involving the addition of the statue of a girl facing the charging bull. I had come across an article on this and decided that I should include a link to it. You are welcome to investigate using the link command in Processing, but I decided to make use of an HTML <a> element and <button> element.

<html>

<head>

<title>Wall Street coin toss </title>

<style>

button, canvas {position: fixed; }

</style>

</head>

<body>

<button>Background story on Raging Bull vs. Fearless Girl </button</a>

br/>

</body>

</html>

The style element setting position: fixed prevents certain scrolling effects that bothered me.

Adding responses to touch

I wanted my sketches to work on mobile devices. Certain applications, for example, the Balls with Rocks, when the player does the touch equivalent of a mouse click, worked with no additional coding. This was not the case with the making the path or other applications. I already had written JavaScript code to simulate (trigger) mouse events based on touch events and so I incorporated the same code into the html file for the Processing JS example. HTML files can have multiple script elements. In this case, my files have the script element already described for the processing.min.js file. This is termed an external script element. The html files for examples requiring touch have in addition an internal script element, shown below. The <body> element has an attribute that invokes myinit function to set up the simulation of mouse events triggered by touch events.

//simulates mouse events

var d = document;

function init(){

d.addEventListener("touchdrag",touchHandler,true);

d.addEventListener("touchstart", touchHandler, true);

d.addEventListener("touchmove", touchHandler, true);

d.addEventListener("touchend", touchHandler, true);

d.addEventListener("touchcancel", touchHandler, true);

}

function touchHandler(event)

{

var touches = event.changedTouches;

if (touches.length>1) {

return false;

}

var first = touches[0];

var type = "";

switch(event.type)

{

case "touchstart": type = "mousedown"; break;

case "touchmove": type="mousemove"; break;

case "touchend": type="mouseup"; break;

case "touchdrag": type="mousedrag"; break;

case "touchcancel": type="mouseup"; break;

default: return;

}

varsimulatedEvent = document.createEvent("MouseEvent");

simulatedEvent.initMouseEvent(type, true, true, window, 1,

first.screenX, first.screenY,

first.clientX, first.clientY, false,

false, false, false, 0, null);

first.target.dispatchEvent(simulatedEvent);

event.preventDefault();

}

</script>

</body>

</html>

Please contact me for more information. Comments and suggestions are welcome.