Is processingJS the best way to run processing on a webpage? I want the fastest/most convenient way to make an interactive visual element, such as a banner or an animated canvas background - and possibly experiment with site navigation inside a processing sketch assuming itās possible.
What do you mean by that?
I have a few ideas, but essentially what I mean is clickable urls inside a processing canvas or element with an inline target or some way to update the rest of the html, and possible some way to look through directory/file structures. The most simple being just some way to have a clickable area in a canvas which links to a url.
JSON and p5 are pretty disgusting I was hoping to find a way to do it in processing code. Maybe Iāll learn p5 eventually if I find a good resource.
Actually p5.js is the best way to run processing on a webpage and itās not really different.
What advantage is there to p5 compared to processingJS? As far as I read, and this may be outdated, p5 has more framerate issues and also javascript syntax. Does that mean I need to learn p5? How difficult is it to convert a processing sketch into p5?
I started p5 recently and I now like it more than processing, you should definitely try !
On the other hand Iām currently struggling with browser compatibility, as you saw on my topic
Look at Daniel Shiffmanās videos, itās enough powerful : https://www.youtube.com/watch?v=8j0UDiN7my4&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
It isnāt so complicated. You just have to adopt the js way to declare variable.
āvarā instead of āintā, āfloatā ect, and you have give them a value to avoid the ānullā issue
I started p5 recently and I now like it more than processing, you should definitely try !
What are some of the things you like about it? Is there anything you found to be easier in p5 than processing? It seems like it just adds a lot of useless syntax and āthis.ā everywhere.
As far as Iām concerned, I think it is easier to create list in p5, you can for example create one just like this
var list=[];
instead of
int[] list=new int[x]
and donāt bother about how big will be the list or using processing tricks like āstringListā
I also like to make my sketches responsive. For this, the functions āwindowWidthā, āwindowHeightā and windowResized() who is called when the user resize the window are very convenient.
PS : And I forgot the p5ās keyIsDown() function who is really helpful for making video games
It is indeed a bit annoying when you come to object oriented sketches, but at the end it is the same functioning as processing.
You can see all of the details here :
@Birb P5.js is better than Pjs in a way as you can access other js libraries. For Pjs you are limited to run java but you are not allowed to export external libraries. Plus Pjs is not supported anymore so I understand.
With p5.js you can placed and access html elements, manipulate your canvas and interact with your pageās elements. Most of the algorithms implemented in Processing java can be easily translated into p5.js keeping in mind some minor differences. Check this page for details to keep in mind during the transition from java to js versions of Processing.
I have to say that Pjs could still get the job done if you stick to the Processing API v1.5 so I understand. If you donāt use any external libraries, it could be good enough for your stuff.
For this, Iād say p5.js is the way to go.
Kf
Given Pjs is a JS library inasmuch as p5js is, we can write sketches using JS syntax (or any other language transpilable to JS) for the Pjs library too!
The catch is, that a small part of Processingās API gives the same name for both a system variable and a function.
For example, the name frameRate
in Processing can either refer to a variable or a function:
- Variable frameRate: http://ProcessingJS.org/reference/frameRate/
- Function frameRate(): http://ProcessingJS.org/reference/frameRate_/
But alike Java, JS doesnāt offer diff. namespaces for each category.
Functions, classes, objects and any type of data are simply all stored in variables.
Therefore, the Pjs library gotta change the name of either the system variable or the function to something else.
Also, some Processingās function names which match Javaās keywords, like int
or float
, are also renamed, both in Processing & Pjs:
- Function int(): http://ProcessingJS.org/reference/int_/
- Keyword
int
: http://ProcessingJS.org/reference/int/
For example, if we copy & paste the sketch example below:
int a = int(PI);
frameRate(30.7);
println(frameRate);
In http://ProcessingJS.org/tools/processing-helper.html
And click at āConvert to JSā button; itās gonna output the following JS syntax:
// this code was autogenerated from PJS
(function($p) {
var a = $p.parseInt($p.PI);
$p.frameRate(30.7);
$p.println($p.__frameRate);
})
Notice that function int() became parseInt(), function frameRate() stayed the same, but its corresponding system variable became __frameRate!
If we take those small quirks into account, itās perfectly possible to write sketches in JS syntax targeting Pjs in place of p5js.
Although weād need to write our sketches for Pjs very similarly weād write to p5js using its āInstance Modeā approach:
For further details, read from these links:
Anything that gets the job done is fine, and a language you already like and are comfortable with is a big advantageā¦ assuming you can use it to get the job done.
That said, p5.js does make some things easier:
- The browser speaks JavaScript, not Java. Processing.js gets around this and lets you code in a Java style by making it JavaScript behind the scenes, but that means you are coding in translation ā it is just one more layer where something can go wrong, or where things are tricky to extend because of the translation layer.
- p5.js is under active development, Processing.js is only receiving occasional minor maintenance.
- When you are learning to code in p5.js, at the same time you are also learning a lot of the fundamentals related to coding in other major web technologies, which are JavaScript ā jQuery, d3, et cetera.
Now, all that said, I like Processing.js, and I am personally spending most of my time in Java and Python, because they work for me. The question is what will work for you.