tutorials / processing / processing-js

Processing.js

tutorial processing basic

Processing allows you to export applications, which gives you a .zip file that runs on a particular operating system. You can then upload that file (to a site like Game Jolt or itch.io, or even your own webpage), and then other people can download it, unzip it, and run the application to see your sketch.

But that process does not create a webpage that contains your sketch embedded directly in the page itself. You can create a webpage that links to the files for download, but it’s not embedded in the webpage itself.

Embedding your sketch directly in a webpage makes it easier for users to run it, since they don’t have to download, unzip, and run your application. It just shows up in the browser. You can do this using Processing.js!

Processing.js

Processing.js is a JavaScript library that allows you to write Processing code that is then translated into JavaScript and embedded in a webpage.

Note: Processing.js won’t work if any of the following are true:

If any of the above are true, then you have to stick with the first approach of exporting applications.

But if none of the above are true, then you can embed your Processing sketch in a webpage using Processing.js. You do this by creating a .html file that loads the Processing.js library, and then includes your Processing code.

It looks like this:

<!DOCTYPE html>
<html>
	<head>
		<title>My Sketch</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.0/processing.min.js"></script>
	</head>
	<body>
		<script type="application/processing">
			void setup(){
				size(200, 200);
			}
			
			void draw(){
				background(64);
				ellipse(mouseX, mouseY, 20, 20);
			}
		</script>
		<canvas> </canvas>
	</body>
</html>

Click here to view this file in your browser, or right-click to save it to use as a template. See this tutorial for instructions on working with .html files, including how to edit and view them.

You can learn more about HTML in the HTML tutorials, but for now you just need to know that your Processing code goes in the <script type="application/processing"> tag.

Using HTML and JavaScript with Processing.js

The above .html file is just a regular html page with some Processing code (which Processing.js turns into JavaScript code), so you can add HTML content and CSS styles. You can even call JavaScript code from your Processing code (and vice-versa)! Here’s a more advanced example:

<!DOCTYPE html>
<html>
	<head>
		<title>My Advanced Sketch</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.0/processing.min.js"></script>

		<style>
			body{
				background-color: gray;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<h1>My Advanced Example Sketch</h1>
		<script type="application/processing">
			void setup(){
				size(200, 200);
				backgroundShade = random(255);
			}
			
			void draw(){
				background(64);
				ellipse(mouseX, mouseY, 20, 20);
				
				document.getElementById("label").innerHTML = "Mouse coordinates: " + mouseX + ", " + mouseY;
			}
		</script>
		<canvas id="sketch"> </canvas>
		<p id="label"></p>
	</body>
</html>

Click here to see this in action.

Now our page contains other HTML content and CSS styles, and our Processing code calls JavaScript functions. You can do a lot more than what I’ve shown here, and I suggest checking out the Processing.js reference!

Uploading Processing.js

Here are a few sites that support Processing.js:

Homework