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

hmdeif · August 29, 2019, 2:28pm

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?

GoToLoop · August 29, 2019, 2:52pm

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(): ProcessingJS.org/reference/modelX_/

jeremydouglass · August 30, 2019, 7:29pm

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

github.com/processing/p5.js

feature request: would like to see modelX(), modelY() functions that exist in Processing

opened 02:33PM - 20 Sep 14 UTC

closed 10:27PM - 21 Nov 14 UTC

dnassler

I like using the matrix functions: translate, rotate, scale. But sometimes I nee…d to know the coordinates of points drawn from the perspective of the main canvas co-ordinate space. So for example if I have a point A that was drawn using a set of matrix transforms and another point B that was drawn using a different set of matrix transforms, I might want to draw a line from point A to point B. To do that I need to have a common co-ordinate space. The functions modelX(), modelY() in the Processing reference do this, it seems, and it would be nice if p5js had these functions as well. See Processing reference: http://processing.org/reference/modelX_.html

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

hmdeif · August 31, 2019, 7:22am

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?

GoToLoop · August 31, 2019, 9:56am

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:

gist.github.com

https://gist.github.com/GoToLoop/a5db257be4d7756a00220a3e97066dd5

.block

height: 600
scrolling: no
border: yes
license: cc-by-4.0

Calc.pde

static final String[] ERRORS = {
  "Polygon's newSize parameter can't be less than 2!",
  "Parameter dots[] must contain at least 2 PVector objects!",
  "Parameter epsilon can't be a negative value!"
};

static final PVector[] reducePolygon(final PVector[] dots, final int newSize) {
  if (newSize < 2)  throw new Error(ERRORS[0]);

  PVector[] reduced;

This file has been truncated. show original

Data.pde

static final String FILENAME = "xy.csv", DELIM = ",";

PVector[] loadCoordsXYAsPVectorsArray() {
  final String[] lines = loadStrings(FILENAME);
  final PVector[] vecs = new PVector[lines.length];

  for (int i = 0; i < lines.length; ++i) {
    final PVector v = vecs[i] = new PVector();
    v.set(float(lines[i].split(DELIM)));
  }

This file has been truncated. show original

There are more than three files. show original

gist.github.com

https://gist.github.com/GoToLoop/a5db257be4d7756a00220a3e97066dd5

.block

height: 600
scrolling: no
border: yes
license: cc-by-4.0

Calc.pde

static final String[] ERRORS = {
  "Polygon's newSize parameter can't be less than 2!",
  "Parameter dots[] must contain at least 2 PVector objects!",
  "Parameter epsilon can't be a negative value!"
};

static final PVector[] reducePolygon(final PVector[] dots, final int newSize) {
  if (newSize < 2)  throw new Error(ERRORS[0]);

  PVector[] reduced;

This file has been truncated. show original

Data.pde

static final String FILENAME = "xy.csv", DELIM = ",";

PVector[] loadCoordsXYAsPVectorsArray() {
  final String[] lines = loadStrings(FILENAME);
  final PVector[] vecs = new PVector[lines.length];

  for (int i = 0; i < lines.length; ++i) {
    final PVector v = vecs[i] = new PVector();
    v.set(float(lines[i].split(DELIM)));
  }

This file has been truncated. show original

There are more than three files. show original

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.

Tiemen · August 31, 2019, 10:21am

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).

GoToLoop · August 31, 2019, 10:29am

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

Tiemen · August 31, 2019, 10:30am

Ah, seems I misunderstood. I apologise

hmdeif · August 31, 2019, 12:40pm

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.

GoToLoop · August 31, 2019, 1:47pm

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

github.com

processing-js/processing-js/blob/master/src/Processing.js#L6004-L6017


      
          p.modelX = function(x, y, z) {
            var mv = modelView.array();
            var ci = cameraInv.array();
          
            var ax = mv[0] * x + mv[1] * y + mv[2] * z + mv[3];
            var ay = mv[4] * x + mv[5] * y + mv[6] * z + mv[7];
            var az = mv[8] * x + mv[9] * y + mv[10] * z + mv[11];
            var aw = mv[12] * x + mv[13] * y + mv[14] * z + mv[15];
          
            var ox = ci[0] * ax + ci[1] * ay + ci[2] * az + ci[3] * aw;
            var ow = ci[12] * ax + ci[13] * ay + ci[14] * az + ci[15] * aw;
          
            return (ow !== 0) ? ox / ow : ox;
          };

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

github.com

diwi/p5.EasyCam/blob/master/p5.easycam.js

/*
 * 
 * The p5.EasyCam library - Easy 3D CameraControl for p5.js and WEBGL.
 *
 *   Copyright 2018 by Thomas Diewald (https://www.thomasdiewald.com)
 *
 *   Source: https://github.com/diwi/p5.EasyCam
 *
 *   MIT License: https://opensource.org/licenses/MIT
 * 
 * 
 * explanatory notes:
 * 
 * p5.EasyCam is a derivative of the original PeasyCam Library by Jonathan Feinberg 
 * and combines new useful features with the great look and feel of its parent.
 * 
 */

This file has been truncated. show original

Whatever your pick, good luck!

intrinsic · September 16, 2019, 11:45pm

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)

hmdeif · October 24, 2019, 2:25pm

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

Topic		Replies	Views
Convert p5js to Processing Coding Questions	11	1665	February 26, 2022
Convert processing to p5js code Coding Questions	1	487	January 27, 2021
Processing X P5JS (image quality on canvas) Coding Questions	7	720	December 26, 2021
Processing, P5*js, the Web and Apps Processing	2	225	January 17, 2021
Trying to use modelX() but built a spiral galaxy of points Coding Questions	26	2114	December 5, 2018

Related topics