Coding challenge from New Zealand: p5.js vs "pure" javascript

[john-NZ]

Hi Dan

I just finished watching your p5.js v Processing videos, really cool thanks!

I have watched loads of your coding train videos, you have a really good teaching style, I used to teach Chemistry at University in New Zealand (where I live) for several years so I know its tough.

I have a coding challenge for you.....

I would really like to see a p5.js vs "pure" Javascript comparison, and also a Processing vs "pure" Java comparison.

The reason I ask because I don't fully understand what you mean when you say p5.js is "built on top of" Javascript, and the same for Processing being "built on top of" Java. I have a good idea what you mean but I don't really get it properly.

So my coding challenge is this:

Pick a really simple game to code, I suggest PONG but you choose....

Then code it in p5.js AND pure JavaScript. Same for Processing and Java.

I really think this will help students both UNDERSTAND the relationship between p5 and JavaScript and also APPRECIATE the work that has gone into p5 and Processing to make coding more accessible to people like me who are just starting.

Anyway, keep up the good work mate. I look forward to your next video series.

Regards

John Wagner

[HaydnG]

p5.js is just a library of java-script functions imported into java-script.

p5 uses the core functions of java-script and implements them in a much friendlier way.

There is not a massive difference.

This is a version of the random circles without overlap but made in pure js - http://pastebin.com/MSE5FM5Z

This is the version made in p5.js - https://www.youtube.com/watch?v=XATr_jdh-44 Im sure Daniel will give a better explanation.

[john-NZ]

Hello HaydnG

Thanks for the link, that is useful.

My understanding is that P5 is more than just library, it is a "framework". However I note there is quite a bit academic debate on youtube about the difference between libraries and frameworks.

My main reason for this challenge was to demonstrate the benefits of using P5 over just coding everything in pure js.

What is so "friendly" about P5 compared to js?

A head to head P5.js vs js would interesting to watch especially in Dan's teaching style.

It would be really cool to watch two programmers "compete with each" and code the same challenge, one in P5 another in just js. Dan could discuss how P5 is making things simpler, and for some fun at the end we could count up the lines of code to see how efficient P5 is.

Also I think this would give users appreciation of the work that the Processing foundation has done in creating P5.

[HaydnG]

Well, i guess the best way to see everything p5 offers would be to look at the documentation. On their website they have every function listed explained in detail - https://p5js.org/reference/

It offers so many tools from vectors, more intuitive drawing and a predefined program structure (setup,draw). I agree, it offers a lot more than what you would call a standard library. I think it'll be great to have a video showing how much p5 makes a difference.

[shiffman]

This is an excellent thread and I agree there are topics here worth discussing on the channel. I wonder if this would work well as a Q&A video. @john-NZ if you watch my recent p5 compared with Processing videos do you have any specific follow-up questions about p5 and JS?

[john-NZ]

Hi Dan, HaydnG

Thanks guys for responding!

I feel like I'm being a bit disrespectful of P5 and Processing, but really I just want to understand something a little better so please forgive my request.

HaydnG: There is no question P5 and Processing are both expansive and offer a lot. I have written my own projects in Processing, and recently in P5, both have an extensive and well documented library of functions.

So I am NOT asking "what can P5 do"? or "what can Processing do"? Dan's videos answer these questions beautifully. Also, Dan has done a good job of explaining the difference between Processing and P5.

Dan, Your videos comparing P5 to Processing were excellent. My only specific follow up question from your video series on Processing vs P5 would be seeing a comparison between how Processing and P5 handle serial communication, so maybe an example (coding challenge) of implementing P5.serial vs the Serial Library in Processing? This ties nicely in to the whole area of internet of things (IOT). Maybe the challenge is: over the web, turn on an LED on an Arduino using Processing vs P5.serial. I expect Processing makes the serial comms part easier than P5, but P5 handles the web interface part better than Processing so might be an interesting comparison?

But my original question is about comparing P5 to "pure" js, and comparing Processing to "pure" Java.

What I am struggling to understand is this concept of p5.js being "built on top of js", and Processing "built on top of Java". And I think this is where the subtle difference between a framework and a library is important?

I know that everything Dan has demonstrated in P5.js can be done in pure js, and equally everything Dan has demonstrated in Processing can be done in Java. Also I think that sometimes when I am writing a Processing sketch I am writing some genuine "JAVA code" (for some simple things) but in other times in the same sketch I am writing "Processing code", which is somehow saving me time, or somehow simplifying things for me but I really don't understand how this is being achieved or HOW MUCH EASIER IT IS IN PROCESSING COMPARED TO PURE JAVA.

So Dan, If I wanted to create a canvas and draw a circle (ie "Hello World"), is this so difficult in JAVA? Is it so difficult in JavaScript if I wanted to draw a circle on a canvas in the browser? WHY has the Processing Foundation; Casey, Ben, Lauren, Dan :-) gone to such effort to develop these frameworks? Why not just teach JAVA and JavaScript to do all of these cool projects and web animations etc?

I must admit that I have coded a very little bit in JAVA and a very little bit in JavaScript so I do have a basic sense of what P5 and Processing are doing, and I understand Casey and Ben's original motivations for developing Processing and making programming more accessible to artists, but I would really like to see a direct comparison.

So once again I'm NOT asking "what can P5 do", I am asking "what is P5 doing"? Subtle difference!! :-)

So Dan if you can write a simple program (I suggested PONG earlier, but you choose), and write it in P5 and then along side write it in "pure" js that would really help me. You could talk through what P5 is doing line by line and point out where P5 makes things easier...
eg "here we draw the canvas and it takes 10 lines in pure JavaScript but only one line in P5, so P5 is taking care of all of this for you, but in JavaScript you would need to code it all etc etc etc.

Hopefully I have explained what I mean, and what I'd like to see.

Thanks HaydnG for pointing out the random circles code in pure js, this was helpful, but it would useful to hear Dan talk it through and discuss in a Q and A.

Thanks again

John

[HaydnG]

John,

Sorry, originally it wasn't completely clear what you were asking and sorry if you ever felt i was underestimating what you knew with processing and p5. I think those topics will be great for a video, and im sure a lot of people has been thinking similar things.

Your latest comment explained it much better!