Tutorials

Adding a Processing Sketch to an HTML Document

If you have a webpage written in HTML, is possible to add your Processing sketches to it. This page from NYU explains the steps you need to follow in order to do so, but this tutorial is going to give you a more basic explanation.

First, before you can add any sketches to your webpage, you need to add the processing.js library file to the folder containing your HTML files. In your <head> element, add this line (copy and paste):

<script type="text/javascript" src="processing.js"></script>

Next, if you haven't already done so, format your Processing sketch in order to make it renderable. If you don't complete this step, you may find that your image looks drastically different from how it looks when you execute it in Processing. You can find out how to format your code for the web using this tutorial.

I've created a simple Processing sketch based on The Magic of Color by Joan Miró. I have it saved in a file named "processing", which is within the folder containing all of my HTML files. It is also still within its original folder with the same name as the file, which I've called "joan_miro.pde". In order to add your Processing sketch to your webpage, insert a new <canvas> element into your HTML document, like so:

<canvas data-processing-sources="processing/joan_miro/joan_miro.pde"></canvas>

If you still need help, please refer to Processing on the Web from NYU or the Quick Start page from Processing.js.