Formatting a Processing Sketch for the Web

Before adding your Processing sketch to an HTML document, you will need to make sure it is formatted for the web. If not, it may appear drastically different on your webpage than it does in the Processing display window.

First, you need to make sure your code compiles and runs from your IDE. If it doesn't, then it has other issues that need to be debugged before adding it to the web, and this tutorial won't be any help to you!

Unfortunately, you can't work with any imported Java libraries. Therefore, you need to remove any import statements. Presumably, you imported these classes for a reason, and your sketch may have errors without them. If this is the case, you have a few options:

Check to see if there are similar methods in the Processing language that you could switch out for the Java ones you are currently using.
Are you using a lot of methods from the imported classes? If not, consider creating your own limited version of the class that only contains the methods you need, and add this to the end of your sketch.
If you are using a lot of the functionality from the imported libraries, check the web for a free implementation of the needed classes, then copy and paste what you need to the end of your sketch. If you can't find any, you might need to reconsider option 2.
Is your sketch animated or interactive? If not, consider saving the result of your sketch as an image and adding that to your website instead.

Next, if you have multiple classes, consolidate them all into one file by putting them one after another. If you don't have any classes or don't even know what a class is, that's okay, they aren't necessary.

Make sure that your sketch is saved as a PDE file (i.e. "joan_miro.pde") and is contained within the same directory as your HTML files.

Now that you've formatted your sketch, you can add it to the web, so it can be displayed like this:

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