# How to get screen coordinates for "Fit To Screen" function

**URL:** <https://discourse.processing.org/t/how-to-get-screen-coordinates-for-fit-to-screen-function/22514>\
**Category:** Coding Questions\
**Created:** [July 9, 2020, 4:48pm UTC](https://discourse.processing.org/t/how-to-get-screen-coordinates-for-fit-to-screen-function/22514 "2020-07-09T16:48:24Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![CND](https://avatars.discourse-cdn.com/v4/letter/c/e79b87/32.png) [@CND](https://discourse.processing.org/u/CND)\
**Post date:** [July 9, 2020, 4:48pm UTC](https://discourse.processing.org/t/how-to-get-screen-coordinates-for-fit-to-screen-function/22514/1 "2020-07-09T16:48:24Z")

</div>

I want to make a “Fit to Screen” function if it does not already exist. I need the screen coordinates to find the max width of the image compared to “width”. I found a mention of “frame.getInsets().left”. If this is what I need how do I use this command.

---

<div class="post-metadata">

**Author:** ![matheplica](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/matheplica/32/21035_2.png) [@matheplica](https://discourse.processing.org/u/matheplica)\
**Post date:** [July 9, 2020, 6:05pm UTC](https://discourse.processing.org/t/how-to-get-screen-coordinates-for-fit-to-screen-function/22514/2 "2020-07-09T18:05:36Z")

</div>

Maybe try `displayWidth` as keyword

---

<div class="post-metadata">

**Author:** ![CND](https://avatars.discourse-cdn.com/v4/letter/c/e79b87/32.png) [@CND](https://discourse.processing.org/u/CND)\
**Post date:** [July 10, 2020, 4:39am UTC](https://discourse.processing.org/t/how-to-get-screen-coordinates-for-fit-to-screen-function/22514/3 "2020-07-10T04:39:38Z")

</div>

Apparently what I am looking for is:  
screenX() || screenY() || screenZ()  
These functions are available in P5Processing.  
Can anyone give me a hint on how to dig these values out of p5.js

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 10, 2020, 10:18am UTC](https://discourse.processing.org/t/how-to-get-screen-coordinates-for-fit-to-screen-function/22514/4 "2020-07-10T10:18:18Z")

</div>

> [@CND](#):
>
> screenX() || screenY() || screenZ()

These only work in 3D in the first place

screenZ doesn‘t really exist

Do you want to adjust the image to the size of your canvas?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 10, 2020, 11:03am UTC](https://discourse.processing.org/t/how-to-get-screen-coordinates-for-fit-to-screen-function/22514/5 "2020-07-10T11:03:54Z")

</div>

Hello,

> [@CND](#):
>
> Apparently what I am looking for is:  
> screenX() || screenY() || screenZ()

This may help:

> [@screenX screenY equivalent in p5.js](https://discourse.processing.org/t/screenx-screeny-equivalent-in-p5-js/10581/5):
>
> I’ve seen that there are many others with the same problem. So I’ve decided to build a small library that adds this functionality to p5js. You’ll find the library here: And an example of how it’s used here: [https://editor.p5js.org/bohnacker/sketches/nUk3bVW7b](https://editor.p5js.org/bohnacker/sketches/nUk3bVW7b)

`:)`

---

<div class="post-metadata">

**Author:** ![CND](https://avatars.discourse-cdn.com/v4/letter/c/e79b87/32.png) [@CND](https://discourse.processing.org/u/CND)\
**Post date:** [July 10, 2020, 3:57pm UTC](https://discourse.processing.org/t/how-to-get-screen-coordinates-for-fit-to-screen-function/22514/6 "2020-07-10T15:57:44Z")

</div>

Adjusting the image to fit the canvas is exactly what I want to do. I am working in 3D and you are right… screenZ is irrelevant.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 10, 2020, 4:11pm UTC](https://discourse.processing.org/t/how-to-get-screen-coordinates-for-fit-to-screen-function/22514/7 "2020-07-10T16:11:56Z")

</div>

screenX, screenY gives you the 2D position of something drawn in 3D. It’s useful to compare with mouse position.

It’s similar to modelX etc. which stores the 3D position though.

for resize image look at resize command

To resize with aspect ratio set the other parameter to 0

---

<div class="post-metadata">

**Author:** ![CND](https://avatars.discourse-cdn.com/v4/letter/c/e79b87/32.png) [@CND](https://discourse.processing.org/u/CND)\
**Post date:** [July 10, 2020, 6:02pm UTC](https://discourse.processing.org/t/how-to-get-screen-coordinates-for-fit-to-screen-function/22514/8 "2020-07-10T18:02:47Z")

</div>

As far as I can tell we don’t have screenX or screenY in p5js only in P5. This is why I am looking for a different way to get these values. A new reply from “giv” has a function to do this. Thanx.

---

<div class="post-metadata">

**Author:** ![CND](https://avatars.discourse-cdn.com/v4/letter/c/e79b87/32.png) [@CND](https://discourse.processing.org/u/CND)\
**Post date:** [July 10, 2020, 6:19pm UTC](https://discourse.processing.org/t/how-to-get-screen-coordinates-for-fit-to-screen-function/22514/9 "2020-07-10T18:19:02Z")

</div>

There is a resize method for loaded images in the p5js reference. Can this be used on a canvas drawing. Perhaps the canvas drawing could be loaded as an image somehow. Not being too familiar yet, I think you can copy or save your drawing…maybe as an image. Thoughts?

---

<div class="post-metadata">

**Author:** ![CND](https://avatars.discourse-cdn.com/v4/letter/c/e79b87/32.png) [@CND](https://discourse.processing.org/u/CND)\
**Post date:** [July 31, 2020, 8:18pm UTC](https://discourse.processing.org/t/how-to-get-screen-coordinates-for-fit-to-screen-function/22514/10 "2020-07-31T20:18:50Z")

</div>

This is my test of the screenPosition function that is not working correctly for me. I have digitized the 6 faces for a basic block and tried drawing them with world coordinates and then screen coordinates. The screen drawn block is not projecting correctly. Can you tell me what is wrong? Thanx.

```auto
<html>
<head>
</head>
<body>
<script src="p5.js"></script>
<script src="addScreenPositionFunction.js"></script>
<script>
var face = [], th =.5730, phi = 5.6720;
//----------------------------------------------------------------------------------------
function setup() {
   createCanvas(800, 600, WEBGL);
   addScreenPositionFunction();
   noFill(); // comment out for fill
} 
//----------------------------------------------------------------------------------------
function draw(){
	background(204);
	scale(2);
	rotateX(phi);
	if (mouseIsPressed) { th = th + 0.01; }
	rotateY(th);
   stroke(150); line(0.,0.,0., 0.,0.,-80); // y-axis aka -z gray
	stroke(150); line(0.,0.,0., 80,0.,0.); // x-axis aka +x gray
	stroke(0); line(0.,0.,0., 0.,-80,0.); // vertical axis aka -y white
	blockP5();
}
//----------------------------------------------------------------------------------------
function blockP5() {
	face[0] = [10,0,0, 50,0,0, 50,0,25, 10,0,25];
	face[1] = [10,0,25, 50,0,25, 50,-25,25, 10,-25,25];
	face[2] = [50,0,25, 50,0,0, 50,-25,0, 50,-25,25];
	face[3] = [10,-25,25, 50,-25,25, 50,-25,0, 10,-25,0];
	face[4] = [10,-25,25, 10,-25,0, 10,0,0, 10,0,25];
	face[5] = [10,-25,0, 50,-25,0, 50,0,0, 10,0,0];

	for( i = 0; i < 6; i += 1) polyDraw(face[i]);
}
//----------------------------------------------------------------------------------------
function polyDraw(xface) {
   // Draw 6 sides of block using world cooordinates
   stroke('magenta');
	beginShape();
		for (var i = 0; i < xface.length; i += 3) {
	      vertex(xface[i], xface[i+1], xface[i+2]);
      }
	endShape(CLOSE);

   // Draw 6 sides of block using screen coordinates
   stroke(255);
	beginShape();
		for (var i = 0; i < xface.length; i += 3) {
          p1 = screenPosition(xface[i], xface[i+1], xface[i+2]);
          vertex(p1.x, p1.y);
		}
	endShape(CLOSE);
}
//----------------------------------------------------------------------------------------

</script>
</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![CND](https://avatars.discourse-cdn.com/v4/letter/c/e79b87/32.png) [@CND](https://discourse.processing.org/u/CND)\
**Post date:** [July 31, 2020, 8:35pm UTC](https://discourse.processing.org/t/how-to-get-screen-coordinates-for-fit-to-screen-function/22514/11 "2020-07-31T20:35:10Z")

</div>

Using my test… Click to spin

---

<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:** [July 31, 2020, 10:52pm UTC](https://discourse.processing.org/t/how-to-get-screen-coordinates-for-fit-to-screen-function/22514/12 "2020-07-31T22:52:13Z")

</div>

FYI, you cannot embed live html in the forum in that way. I marked your html as code so it shows up. If you would like to shart a p5.js sketch, I recommend using an embed from one of the hosting services, e.g. [editor.p5js.org](http://editor.p5js.org). Paste the javascript into the editor, save and name the sketch, then use the editor Share \> Embed to copy the short embed code into a forum post.

---

<div class="post-metadata">

**Author:** ![CND](https://avatars.discourse-cdn.com/v4/letter/c/e79b87/32.png) [@CND](https://discourse.processing.org/u/CND)\
**Post date:** [August 3, 2020, 5:39pm UTC](https://discourse.processing.org/t/how-to-get-screen-coordinates-for-fit-to-screen-function/22514/13 "2020-08-03T17:39:26Z")

</div>

Thanks - I have resubmitted my issue following your advice. It really wasn’t clear to me until now how to get a sketch into the forum.

---

<div class="post-metadata">

**Author:** ![CND](https://avatars.discourse-cdn.com/v4/letter/c/e79b87/32.png) [@CND](https://discourse.processing.org/u/CND)\
**Post date:** [August 7, 2020, 12:09am UTC](https://discourse.processing.org/t/how-to-get-screen-coordinates-for-fit-to-screen-function/22514/14 "2020-08-07T00:09:35Z")

</div>

I have submitted an issue “screenPositionFunction not projecting correctly”. It is a short test of the screenPositionFunction. Could you take a look at if and tell me what is wrong. Thanx.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 7, 2020, 12:51am UTC](https://discourse.processing.org/t/how-to-get-screen-coordinates-for-fit-to-screen-function/22514/15 "2020-08-07T00:51:06Z")

</div>

> [@CND](#):
>
> I have submitted an issue “screenPositionFunction not projecting correctly”

Post a link to this and maybe someone in the community can assist.

`:)`

---

<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 7, 2020, 3:56pm UTC](https://discourse.processing.org/t/how-to-get-screen-coordinates-for-fit-to-screen-function/22514/16 "2020-08-07T15:56:21Z")

</div>

> [@CND](#):
>
> Could you take a look at if and tell me what is wrong.

I wasn’t able to find this…?

- [Issue search results · GitHub](https://github.com/search?q=screenPositionFunction&type=Issues)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 7, 2020, 7:29pm UTC](https://discourse.processing.org/t/how-to-get-screen-coordinates-for-fit-to-screen-function/22514/17 "2020-08-07T19:29:13Z")

</div>

Hello,

There is a _topic_ that I responded to:

> [@screenPositionFunction not projecting correctly](https://discourse.processing.org/t/screenpositionfunction-not-projecting-correctly/23019):
>
> This is my test of the screenPosition function that is not working correctly for me. I have digitized the 6 faces for a basic block and tried drawing them with world coordinates and then screen coordinates. The screen drawn block is not projecting correctly. Can you tell me what is wrong? Magenta is world - White is screen. Click to spin. Thanx. [https://editor.p5js.org/cln123gp/sketches/dNKVZLsOb](https://editor.p5js.org/cln123gp/sketches/dNKVZLsOb)

`:)`