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

p5.js Coding Questions
1

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.

2

Maybe try displayWidth as keyword

3

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

4

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?

1 Like
5

Hello,

This may help:

:)

2 Likes
6

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.

1 Like
7

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

8

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.

2 Likes
9

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?

10

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.

<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>
11

Using my test… Click to spin

12

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

13

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.

1 Like
14

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.

15

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

:)

16

I wasn’t able to find this…?

17

Hello,

There is a topic that I responded to:

:)

1 Like