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!
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/
- Start by adding processing.js to the head of your index.html file. It'll look something like this:
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).
- Create a
pdefile - 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).
- 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