Is there a similar function to modelX() in p5?

I built a program using processing, and now I’m trying to covert it to a web app using p5. As I’m transferring the code, I could not find anything in p5 like modelX() in processing?

Any suggestions?

If your sketch uses the Processing’s API only, chances are good it can’t be transpiled to JS via the Processing.js (Pjs) library: ProcessingJS.org

For example, Pjs got modelX(): GitHub - processing-js/processing-js: A port of the Processing visualization language to JavaScript.

These issues might have discussions that are relevant to your problem:

Also, I recall there is a screenX / screenY library for p5.js. Not sure if it supports (or contains) modelX / modelY calculations.

1 Like

Thanks for your reply. What I understood from you is: You are suggesting that I use ProcessingJS instead of P5. So, I downloaded ProcessingJS and put it manually in the modes folder of Processing and tried to switch the mode of my sketch, but I got this error message:
Can not change mode because “Javascript” is not compatible with current mode.

Am I missing something?

For “Processing.JS Mode”, you’re gonna need Processing v2.2.1:
Download.Processing.org/processing-2.2.1-windows64.zip

However, it needs pre-planning before its installation, so it won’t mess w/ your current Processing 3!

That is, you’re gonna need to make sure in the “preferences.txt” file the “sketchbook.path=” entry for the Processing 2 isn’t the same as Processing 3’s “sketchbook.path.three”!

Although “Processing.JS Mode” can be useful, that’s not exactly I was suggesting…

It was more in the likes of having your “Java Mode” sketch automatically transpiled to JS via the Pjs library, as you can see in the examples below:




However, sketch hosting sites like https://OpenProcessing.org, http://Studio.SketchPad.cc, etc., they hide the file “index.html” from us; which is responsible to kickstart both the JS libraries and our own code.

Here are some “raw” sketches which include the “index.html” file:


Grumbo: GoSubRoutine.GitHub.io/Grumbo/Grumbo_Adventure_OOP


Ball-in-the-Chamber: GoSubRoutine.GitHub.io/Ball-in-the-Chamber/pjs-java/

https://github.com/GoSubRoutine/Ball-in-the-Chamber/tree/master/pjs-java


Ramer–Douglas–Peucker Algorithm:


In all the 3 “raw” sketches above, all necessary files to run them are clearly shown as 1 project folder.

However, if it happens you’re unable to have your particular sketch automatically transpiled into JS syntax, as a last recourse, you can convert it to JS syntax manually.

But rather than targeting the p5js library, you target the Pjs, so you have access to some methods which aren’t currently present in the p5js’ API, like modelX() for example.

I’ve got this sketch written in JS syntax (actually in CoffeeScript, which transpiles directly in JS) below which targets Pjs:


Ball-in-the-Chamber: GoSubRoutine.GitHub.io/Ball-in-the-Chamber/pjs-cs/

https://github.com/GoSubRoutine/Ball-in-the-Chamber/tree/master/pjs-cs


So it’s perfectly possible to write code in JS targeting the “ancient” Pjs library if for some reason p5js is missing some feature already present in Pjs. :smile_cat:

2 Likes

https://editor.p5js.org/ allows modifying the index.html, although it’s a tad hidden (click the little, grey arrow right under the play button).

  • That online edit/host site is for p5js only! :expressionless:
  • Although we can force it to use something else by editing its “index.html” file. :smirk:
  • However, its lint isn’t gonna like that at all! :grimacing:

Ah, seems I misunderstood. I apologise :exploding_head:

Thanks for your detailed answer. I got the JavaScript mode to work in the IDE but I ran into another problem which is I use PeasyCam library in my sketch which does not run on this mode (I suppose because it is a Java library). So If I use Processing.js I have to convert the PeaseCam library into javascript myself (which is a tedious job). I don’t think I can use the p5.EasyCam.js library because it is build for p5.

So, I decided to go back to p5 and work around modelX(). I think this would be a shorter path.

Dunno how feasible it is to convert the Pjs’ modelX() to p5js but, if you wanna take a look for yourself, here it is: :sunglasses:

I doubt it’d be too hard to convert p5.EasyCam lib for Pjs, but it sure would take some dedication: :sweat_smile:

Whatever your pick, good luck! :four_leaf_clover:

1 Like

To work around the missing modelX() in p5js in one of my sketches, I rolled my own transforms to track 2D rotation, translation, and scaling. See: https://www.openprocessing.org/sketch/701614

BTW, this sketch uses P5js v0.9.0 and the newer version of EasyCam v1.0.10 (github.com/freshfork/p5.EasyCam)

3 Likes

I also did my own 3D transformations which worked well.
Many Thanks.