Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
bothxp
16,510 PointsWhat is the difference between p5.js and processing.js
Hi,
I've been asked a question in another discussion about Processing & p5, so rather than answer it in the middle of a CSS discussion I thought I'd answer it here.
The question was: what is the difference between p5.js and processing.js - @ibrahimabdiabdulahi
Processing itself is an open source programming language and an IDE packaged together. It has been around for 14 years and is now on version 3. It was designed with both the visual arts & beginner programmers in mind. It is built on top of Java but uses simplified syntax and graphics model. You can export your projects as standalone desktop apps for Windows, Mac or Linux, but as you can expect many people wanted to display their graphical sketches on the web. So we used to also be able to export as Java Applets.
But the world moved on and Java Applets fell out of favor. So in stepped John Resig & the students at Seneca College to develop Processing.js.
Processing.js is a port of Processing to JavaScript. The idea being that you are not required to rewrite your code but instead use Processing.js to execute your Processing .pde files in HTML5. It makes use of regex to convert the Java code into JavaScript. The result is some rather opaque JavaScript that is not really meant to read by an end user. To implement it you would include the Processing.js library in the head of your webpage
<head>
<script type="text/javascript" src="processing.js"></script>
</head>
and then declare a canvas element with a data-processing-sources attribute pointing at your Processing code
<canvas data-processing-sources="example.pde"></canvas>
It used to work well for simple projects but there were a number of challenges inherent in the conversion between languages.
More recently p5.js has appeared on the scene. p5.js is a JavaScript library. It is not a port or emulation of the original Processing but is a re-imagining in native JavaScript. So instead of creating a Processing .pde file and then using processing.js to convert the code, in p5.js you simple write your projects (or sketches, as I should be calling them) in JavaScript using the p5 API. It can be quite straightforward to translate older Processing sketches over into p5.js and you get to practice your JavaScript skills as you go.
Going back to the question. Processing.js was used to convert & run Processing .pde files in a web browser, whilst when using p5.js you will be writing your code directly in JavaScript.
p5.js isn't as fully featured as Processing but it is under active development and continues to grow. If you are interested in Java then I'd recommend that you take a look at Processing, whilst if you're more interested in JavaScript then I'd point you at p5.js.
If you are new to programming then I think both are great options, as the immediate visual results of the sketches can be very motivating.
As Treehouse do not currently teach Processing or p5.js I don't feel bad in pointing you at Daniel Shiffman's YouTube channel where he covers both Processing and p5.js ... and is also very entertaining to watch. He is also one of the project leads with the Processing Foundation.
3 Answers
bothxp
16,510 Points
ibrahim Warsame
7,803 PointsThanks a lot man.
Anthony Albertorio
22,624 PointsAwesome answer!
bothxp
16,510 Pointsbothxp
16,510 Pointsand why is it called p5.js?
Well originally the Processing project was hosted on proce55ing.net because processing.net was already taken. Hence Processing often got called p5.