Skip to content
← Back to Community
Use Processing On the Web
Profile icon
AdCharity

Have you ever watched a really good Coding Train video, but then you figured out you have no clue what the hell processing is (hint java)? Or maybe you just want to run it on a website? Well here you go - how to use processing on the web is here!

Live Demo

If you don't want to read and just get the code, the live demo is in the repl attached and can be found here: https://processing.adcharity.repl.co/

How

  1. Start by adding processing.js to the head of your index.html file. It'll look something like this:
<script src="https://cdn.jsdelivr.net/processing.js/1.6.6/processing.min.js"></script>

The one here is the latest version on cdn.
2. Create a canvas element and set the data-processing-sources attribute to the name of the processing file. In this case, I've named my processing file canvas.pde (but obviously any name with work).

<canvas data-processing-sources="canvas.pde"></canvas>
  1. Create a pde file - it's where your processing code will go. Unfortunately, there isn't syntax highlighting on pde files, so maybe repl will add it??? (Contact the feedback/suggestion page if you really want it).
  2. Processing is now added to your stuff :D In my demo I stole a bunch of code from the Coding Train GitHub files, which you can find here: https://github.com/CodingTrain/website/blob/master/CodingChallenges/CC_050.2_CirclePackingImage/Processing/CC_050_2_CirclePackingImage/Circle.pde

Note: There is also a way to use processing using javascript instead, if you're interested I could walk you through it (although p5.js would probably be better for that).

Voters
Profile icon
AlpDaniel
Profile icon
AntonSendelius
Profile icon
phil-mac
Profile icon
AdCharity
Comments
hotnewtop
Profile icon
HackermonDev

I feel like p5.js would probably be better than processing. And you didn't really explain how you made the game

Profile icon
AdCharity

@PDanielY I did. I said I stole it off github and refrenced it. I just made this in case some one wanted to run processing instead of p5, although the coding train usually has demo code for both p5 and processing.