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

**URL:** <https://discourse.processing.org/t/is-there-a-similar-function-to-modelx-in-p5/13688>\
**Category:** p5.js\
**Created:** [August 29, 2019, 2:28pm UTC](https://discourse.processing.org/t/is-there-a-similar-function-to-modelx-in-p5/13688 "2019-08-29T14:28:16Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![hmdeif](https://avatars.discourse-cdn.com/v4/letter/h/b487fb/32.png) [@hmdeif](https://discourse.processing.org/u/hmdeif)\
**Post date:** [August 29, 2019, 2:28pm UTC](https://discourse.processing.org/t/is-there-a-similar-function-to-modelx-in-p5/13688/1 "2019-08-29T14:28:16Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 29, 2019, 2:52pm UTC](https://discourse.processing.org/t/is-there-a-similar-function-to-modelx-in-p5/13688/2 "2019-08-29T14:52:36Z")

</div>

> [@hmdeif](#):
>
> I built a program using Processing, and now I’m trying to covert it to a web app using p5.

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](http://ProcessingJS.org)

For example, Pjs got **modelX()**: [ProcessingJS.org/reference/modelX\_/](http://ProcessingJS.org/reference/modelX_/)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [August 30, 2019, 7:29pm UTC](https://discourse.processing.org/t/is-there-a-similar-function-to-modelx-in-p5/13688/3 "2019-08-30T19:29:34Z")

</div>

> [@hmdeif](#):
>
> I could not find anything in p5 like modelX() in processing?

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

> <https://github.com/processing/p5.js/issues/377>
>
> 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

> <https://github.com/processing/p5.js/issues/1553>
>
> Would be great if you could add screenX etc for getting the 2D screen coordinate…s of a 3D vector. Currently trying to map HTML text to a 3D object and maths is making my head hurt!
> 
> Thanks for all the great work.

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

> **[GitHub - bohnacker/p5js-screenPosition: This function provides a solution to...](https://github.com/bohnacker/p5js-screenPosition)**
>
> This function provides a solution to the missing screenX and screenY functions in p5.js. See https://github.com/processing/p5.js/issues/1553 for the discussion. - GitHub - bohnacker/p5js-screenPos...

---

<div class="post-metadata">

**Author:** ![hmdeif](https://avatars.discourse-cdn.com/v4/letter/h/b487fb/32.png) [@hmdeif](https://discourse.processing.org/u/hmdeif)\
**Post date:** [August 31, 2019, 7:22am UTC](https://discourse.processing.org/t/is-there-a-similar-function-to-modelx-in-p5/13688/4 "2019-08-31T07:22:51Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 31, 2019, 9:56am UTC](https://discourse.processing.org/t/is-there-a-similar-function-to-modelx-in-p5/13688/5 "2019-08-31T09:56:04Z")

</div>

> [@hmdeif](#):
>
> Can not change mode because “Javascript” is not compatible with current mode.

For “Processing.JS Mode”, you’re gonna need Processing v2.2.1:  
[Download.Processing.org/processing-2.2.1-windows64.zip](http://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:

> **[Line Intersections - GoToLoop - OpenProcessing](https://openprocessing.org/sketch/740740)**
>
> https://YouTube.com/watch?v=4bIsntTiKfM

> **[Repetitive Bezier Curve Patterns (Java) - GoToLoop - OpenProcessing](https://openprocessing.org/sketch/400921)**
>
> https://Forum.Processing.org/two/discussion/20413/repititive-pattern-out-of-anchor-points#Item\_9

> **[Rotating Cube \[Java/Pjs\] - GoToLoop - OpenProcessing](https://openprocessing.org/sketch/421281)**
>
> PeterCollingridge.AppSpot.com/3D-tutorial

> **[3D Knot (Java) - GoToLoop - OpenProcessing](https://openprocessing.org/sketch/608725)**
>
> https://YouTu.be/r6YMKr1X0VA

> **[Players Movement (Java) - GoToLoop - OpenProcessing](https://openprocessing.org/sketch/718355)**
>
> https://Reddit.com/r/processing/comments/bshqa8/how\_would\_i\_make\_a\_keypressed\_function\_support/eor5epo/

However, sketch hosting sites like [https://OpenProcessing.org](https://OpenProcessing.org), [http://Studio.SketchPad.cc](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](http://GoSubRoutine.GitHub.io/Grumbo/Grumbo_Adventure_OOP)

> <https://github.com/GoSubRoutine/Grumbo/tree/master/Grumbo_Adventure_OOP>
>
> //github.com/GoSubRoutine/Grumbo/tree/master/Grumbo\_Adventure\_OOP

* * *

Ball-in-the-Chamber: [GoSubRoutine.GitHub.io/Ball-in-the-Chamber/pjs-java/](http://GoSubRoutine.GitHub.io/Ball-in-the-Chamber/pjs-java/)

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

* * *

Ramer–Douglas–Peucker Algorithm:

> <https://gist.github.com/GoToLoop/a5db257be4d7756a00220a3e97066dd5>
>
> There are more than three files. show original

> <https://gist.github.com/GoToLoop/a5db257be4d7756a00220a3e97066dd5>
>
> 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/](http://GoSubRoutine.GitHub.io/Ball-in-the-Chamber/pjs-cs/)

[https://github.com/GoSubRoutine/Ball-in-the-Chamber/tree/master/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. 😸

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [August 31, 2019, 10:21am UTC](https://discourse.processing.org/t/is-there-a-similar-function-to-modelx-in-p5/13688/6 "2019-08-31T10:21:14Z")

</div>

> [@GoToLoop](#):
>
> However, sketch hosting sites like [https://OpenProcessing.org](https://OpenProcessing.org), [http://Studio.SketchPad.cc](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.

[https://editor.p5js.org/](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).

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 31, 2019, 10:29am UTC](https://discourse.processing.org/t/is-there-a-similar-function-to-modelx-in-p5/13688/7 "2019-08-31T10:29:07Z")

</div>

- 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! 😬

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [August 31, 2019, 10:30am UTC](https://discourse.processing.org/t/is-there-a-similar-function-to-modelx-in-p5/13688/8 "2019-08-31T10:30:43Z")

</div>

Ah, seems I misunderstood. I apologise 🤯

---

<div class="post-metadata">

**Author:** ![hmdeif](https://avatars.discourse-cdn.com/v4/letter/h/b487fb/32.png) [@hmdeif](https://discourse.processing.org/u/hmdeif)\
**Post date:** [August 31, 2019, 12:40pm UTC](https://discourse.processing.org/t/is-there-a-similar-function-to-modelx-in-p5/13688/9 "2019-08-31T12:40:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 31, 2019, 1:47pm UTC](https://discourse.processing.org/t/is-there-a-similar-function-to-modelx-in-p5/13688/10 "2019-08-31T13:47:43Z")

</div>

> [@hmdeif](#):
>
> So, I decided to go back to p5 and work around **modelX()**.

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

> <https://github.com/processing-js/processing-js/blob/master/src/Processing.js#L6004-L6017>

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

> <https://github.com/diwi/p5.EasyCam/blob/master/p5.easycam.js>

Whatever your pick, good luck! 🍀

---

<div class="post-metadata">

**Author:** ![intrinsic](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/intrinsic/32/6453_2.png) [@intrinsic](https://discourse.processing.org/u/intrinsic)\
**Post date:** [September 16, 2019, 11:45pm UTC](https://discourse.processing.org/t/is-there-a-similar-function-to-modelx-in-p5/13688/11 "2019-09-16T23:45:54Z")

</div>

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](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](http://github.com/freshfork/p5.EasyCam))

---

<div class="post-metadata">

**Author:** ![hmdeif](https://avatars.discourse-cdn.com/v4/letter/h/b487fb/32.png) [@hmdeif](https://discourse.processing.org/u/hmdeif)\
**Post date:** [October 24, 2019, 2:25pm UTC](https://discourse.processing.org/t/is-there-a-similar-function-to-modelx-in-p5/13688/12 "2019-10-24T14:25:26Z")

</div>

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