Best way to run processing sketch in webpage

Processing Project Guidance
1

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.

1 Like
2

What do you mean by that?

3

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.

4
5

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.

6

Actually p5.js is the best way to run processing on a webpage and it’s not really different.

7

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?

8

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 :confused:

9

Look at Daniel Shiffman’s videos, it’s enough powerful : https://www.youtube.com/watch?v=8j0UDiN7my4&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

10

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

11

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.

12

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

1 Like
13

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 :

1 Like
14

@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

2 Likes
15

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! :triumph:

The catch is, that a small part of Processing’s API gives the same name for both a system variable and a function. :sweat:

For example, the name frameRate in Processing can either refer to a variable or a function: :astonished:

  1. Variable frameRate: http://ProcessingJS.org/reference/frameRate/
  2. 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. :expressionless:
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:

  1. Function int(): http://ProcessingJS.org/reference/int_/
  2. 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! :dizzy_face:

If we take those small quirks into account, it’s perfectly possible to write sketches in JS syntax targeting Pjs in place of p5js. :muscle:

Although we’d need to write our sketches for Pjs very similarly we’d write to p5js using its “Instance Mode” approach: :roll_eyes:

For further details, read from these links: :smirk_cat:

  1. Can i import my stuff into wallpaper engine? - Coding Questions - Processing Foundation
  2. http://ProcessingJS.org/articles/jsQuickStart.html
2 Likes
16

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:

  1. 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.
  2. p5.js is under active development, Processing.js is only receiving occasional minor maintenance.
  3. 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.

4 Likes