Processing vs. Processing.js vs. P5.js

kfrajer · December 2016

I was looking at the documentation of Processing.js and I notice the ArrayList entry in the reference is a bit different to the one in the processing reference site (ArrayList reference). In Processing.js there is no need to declare the type of object the array will store. In the latter, you do:

ArrayList images = new ArrayList(); vs. ArrayList<PImage> images = new ArrayList<PImage>();

Now, is this a real difference in actual function definition? I wrote some processing code and I was hoping to convert it to javascript using Processing.js and it failed. While I am in the process to figure out what part of the code fail (simple sketches are successfully interpreted by processing.js), it makes me wonder what intrinsic differences needs to be kept in mind when writing code that will be run together with Processing.js

On the side, if I am writing p5.js, how would the above single line code be written?

Thks for your comments,

Kf

GoToLoop · December 2016

Pjs' web reference is mostly a copy of the old Processing version 1.5.1!!! =P~
YES! Not so long ago, Processing's entry for ArrayList didn't mention anything about <Generics>.
Even today, due to old sketches, most folks trying out Processing end up not specifying <Generics> b/c it's taken a long time for that reference entry to mention that! ~X(
Now, given in JS variables don't have type, no matter how we declare them, Pjs' transpiler gonna remove them! :P

GoToLoop · December 2016

... if I am writing p5.js, how would the above single line code be written?

final List<PImage> images = new ArrayList<PImage>(); becomes:
const images = []; >-)

kfrajer · December 2016

Thxs @GoToLoop. Do you have any web host that will allow me running processing.js? The web host you use for p5.js demos doesn't work with processing.js sketches. The reason is that website doesn't allow me to load the required pde file. Or any suggestion of how to go around this restriction?

Kf

GoToLoop · December 2016

I guess you're mixing stuff up a little:
".pde" is used for both Java Mode (Processing) & JavaScript Mode (Pjs).
In turn, p5.js uses ".js". Although JS Mode accepts ".js" tabs the same way Java Mode accepts ".java".

GoToLoop · December 2016

Best host for both Pjs & p5.js right now is OpenProcessing:
https://www.OpenProcessing.org/sketch/create

For Pjs, we can also go w/: http://studio.SketchPad.cc/
And for p5.js: http://p5js.SketchPad.cc/

http://p5ide.HerokuApp.com/editor is also an option.
But any JS host site will do, as long as you specify the p5.js library file's path inside the HTML. *-:)

GoToLoop · December 2016

Processing to Pjs Guide: http://ProcessingJS.org/articles/p5QuickStart.html
Processing to p5.js Guide: https://GitHub.com/processing/p5.js/wiki/Processing-transition

kfrajer · December 2016

@GoToLoop

I am referring to your previous post: https://forum.processing.org/two/discussion/comment/82377#Comment_82377

thimbleprojects.org allows me to load needed files such as index.html, my required images and pictures, processing.js library but it blocks the pde file. Of course I can run the pde in javascript mode from my computer in my local browser. However, my intentions are to run the generated files from a web host. Now, the pde file is required as it is specified within the index.html file.

I will try your suggestions for other sites. Your input is very valuable. Thank you,

Kf

kfrajer · December 2016

@GoToLoop

So I created the account in openprocessing to use P.js and it didn't work. I was trying to upload the pde file into the site but it didn't allow me. If I type some test code, nothing happens. Can you show me the ropes with this site? This is what I have. What I am missing? Do I need to upload or create and index.html and upload processing.js lib?

Kf

GoToLoop · December 2016

Actually it's been a long time since I've last "played" there! :-\"
AFAIK, like the other Processing host sites, we don't upload ".pde" files.
Rather we directly copy and paste the whole code text there! :P
Given it's a dedicated Processing host site, it's got a functional ".html" template file already.
Just remember we've gotta stick to Processing's API and not use any libraries.
Pjs is still mostly stuck at Processing version 1.5.1 unfortunately. :-&
Ah! Don't forget to select whether your sketch is for p5.js or Pjs. L-)

GoToLoop · December 2016

If you wanna even more control, although more complicated, GitHub repos are even better than Thimble.
Some instruction links if you wanna dare: :-h

kfrajer · December 2016

Yes, I will try the github more in the future. Did you try my link of my Pjs? I copy and paste some code that runs in Processing java but it didn't run in the website. I am thinking that I am not thinking in terms of 1.5.... ahhh how can I tell the difference btw 1.5 and 3.0? I am just thinking it is going to be a pain in the head to try to figure compatibility issues related to present and previous standards. I will have to get my hands dirty to understand more of these differences. On the other hand, I might need to migrate pde code to js manually... but then that would mean I have to maintain two code sources.

Kf

GoToLoop · December 2016

Did you try my link of my Pjs?

Which 1? I couldn't spot any sketch link from you. :|

... how can I tell the difference btW 1.5 and 3.0?

Just follow Pjs' API reference. Or grab P1.5.1. Its link is still available: O:-)

kfrajer · December 2016

Yeah... you didn't find it because I did not put it in my last post. Here it is: https://www.openprocessing.org/sketch/395089
Funny enough, I tried this time and it worked. I post the link here more for future reference and in case a I create something magical in P.js, everybody will be able to see it (don't hold your breath)

I will have a look at the reference in P.js and see how much it differs. Thanks.

@GoToLoop... in your experience, is P.js promissing? Is there any efforts or comments to bring it back to speed to P3?
Kf

GoToLoop · December 2016

Well, about 1 year and a half, I've made a pull request for class PVector, so it fully matches P3's:

But the only guard dog there won't approve it until I adapt it to its conventions. X(
Since I don't wanna lower the quality of my implementation, I won't do it.
However, he or some1 else, could later modify my pull to their tastes after all. :-@

You see, Pjs was abandoned by the Processing Foundation and replaced by p5.js some time ago.
That is, there r 4 listed now: https://Processing.org/ and Pjs isn't there n more. =((

And Pjs' site never mentioned this forum as part of its community, even though there's a separate category just for it: >:P http://ProcessingJS.org/
Instead some unknown Google Group: http://groups.Google.com/group/processingjs

Unless some1 seriously fork the project, or assume the repo there, I can't see any future for it! :(

P.S.: They've even unnecessarily converted all Processing Java examples to p5.js, even though they were all working alright w/ Pjs' auto-transpilation!!! 8-}

kfrajer · December 2016

Is it hard to maintain or to bring back to speed? maybe using the Processing fellowship? https://processingfoundation.org/fellowships For example, if I submit for a proposal, could that be done in 100 hrs? Keep in mind that my js level is booo.

This is just a thought.... How much of the PVector did you change? I was browsing over the coments and the github code. I am also surprise that they wouldn't upload your changes. Was the effort lost or just still pending for approval?

Kf

GoToLoop · December 2016

Current PVector implementation:
https://GitHub.com/processing-js/processing-js/blob/master/src/Objects/PVector.js

My pull request:
https://GitHub.com/GoToLoop/processing-js/blob/patch-1/src/Objects/_PVector.js

Most prominent feature is turning all void methods into PVector 1s; thus allowing fully chainable calls for each instance of the class! \m/

Howdy, Stranger!

Categories

In this Discussion

Processing vs. Processing.js vs. P5.js

Best Answers

Answers