GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Happy Coding
  • Tutorials
  • Blog

This view

  • Original page
  • New address

GeezerVison is showing happycoding.io — Processing.js

Processing.js

Processing Tutorials
  • Hour of Code
  • What is Programming?
  • Calling Functions
    • Smiley Face
    • Flower
    • Heart
  • Using Variables
    • Smiley Face
    • Flower
    • Jack-o'-Lantern
    • Scaling Heart
  • Creating Variables
    • Random Face
    • Random Jack-o'-Lantern
  • Creating Functions
    • Random Faces
    • Glowing Jack-o'-Lantern
    • Turtle Graphics
    • Random Hearts
  • Debugging
  • If Statements
    • Good Morning
  • Animation
    • Random Walker
    • Worms
    • Vine
  • Input
    • Bouncing Balls
    • Random Walkers
    • Pumpkin Patch
    • Draggable Circle
  • For Loops
    • Random Colors
    • 2D Gradient
    • Bouncing Gradient
    • Corner Gradient
    • Radial Gradient
    • Random Circles
    • Letters
    • Spiral
  • Arrays
    • Bouncing Balls
    • Random Walkers
  • Using Objects
    • Stack Overflow Data Visualization
    • Eyes
  • Creating Classes
    • Flocking
    • Flyers
  • ArrayLists
    • Flocking
    • Random Walkers
  • Images
    • NES Filter
    • Mars Perseverance Image Colorizer
    • Glitch Lines
    • Pixel Spinner
  • Libraries
    • Random Piano
    • Notes Recorder
    • Random Synthesizer
  • Exporting Applications
  • Processing.js
  • What's Next?
  • Collision Detection
  • Simple Reference
  • p5.js Tutorials
  • HTML Tutorials
  • JavaScript Tutorials
  • Processing Tutorials
  • Java Tutorials
  • Server Tutorials
  • Google Cloud
  • Android Tutorials
  • LibGDX Tutorials
  • How-To Guides
  • Interviewing
  • Gallery
  • Blog
  • Teaching
  • Forum
    • Mastodon github
    etsy youtube RSS
Tutorials
/
Processing Tutorials
/
Processing.js
Previous:
Exporting Applications
Next:
What's Next?

Processing.js

  • Processing.js
  • Using HTML and JavaScript with Processing.js
  • Uploading Processing.js
  • p5.js

Note: Processing.js is no longer actively maintained or recommended. You can learn more here. If embedding your sketch in a webpage is a priority, then consider using p5.js instead. This Processing.js tutorial will still work for now, but you should not count on it working forever.

Processing lets you export applications, which gives you a runnable file. You can upload that file to a site like Game Jolt, itch.io, or even your own webpage, and then other people can download it and run the application to see your sketch.

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

If you’re using Processing and you want to embed your sketch directly in a webpage, you might be able to use Processing.js!

Processing.js

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

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

  • If you used any Java-specific code, like the File class.
  • If you used a library, like Minim or Video.
  • If you used features new to Processing 3, like the surface variable or the settings() function.

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 following these steps:

  1. Create an .html file.
  2. In that HTML file, load the Processing.js library: <script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.0/processing.min.js"></script>
  3. Then include your Processing code inside a <script type="application/processing"> tag.

It looks like this:

<!DOCTYPE html>
<html>
	<head>
		<title>My Sketch</title>
    
    <!-- Load the Processing.js library -->
		<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(50);
				ellipse(mouseX, mouseY, 50, 50);
			}
		</script>
		<canvas> </canvas>
	</body>
</html>

Click here to view this HTML file in your browser. 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.

Using HTML and JavaScript with Processing.js

The above .html file is a regular HTML page that contains some Processing code, which Processing.js turns into JavaScript code. Because it’s a regular HTML page, that means 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 complex 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 view this HTML file in your browser.

This page contains a Processing sketch, as well as other HTML content and CSS styles. The Processing code (which is translated into JavaScript by Processing.js) uses JavaScript’s document.getElementById() function to change an element that’s in the HTML. You can do a lot more than what I’ve shown here, and I suggest checking out the HTML and JavaScript tutorials!

Uploading Processing.js

Here are a few sites that support Processing.js:

  • CodePen (This is what I use, and I have a Processing.js template here!)
  • OpenProcessing
  • Sketchpad
  • sketchPatch
  • Game Jolt
  • itch.io
  • You could create your own webpage that contains your sketch!

p5.js

Like I mentioned above, Processing.js is no longer maintained or recommended. It will still work for now, but if embedding your code in a browser is a priority for you, then I recommend learning more about p5.js!

You can also read this tutorial for more info on the differences between the various versions of Processing:

Which Processing should I use? Which Processing should I use?

Should I use p5.js or Processing?

Previous:
Exporting Applications
Next:
What's Next?
You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.