Learn to Code via Tutorials on Repl.it!

← Back to all posts
Use Processing On the Web
h
AdCharity (1270)

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).

Commentshotnewtop
PDanielY (979)

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

AdCharity (1270)

@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.