p5.js on the mobile

sharatdotinfo

Hi,

I'm trying to work on something to create a canvas (an image on top of it) on the mobile device and i'd like to get the exact map of the coordinates on the desktop. For instance if I have a mouse and it's nose is at 50,50 pixels, how would I compute what that would be on the mobile device? Any pointers are appreciated.

KevinWorkman

I'm not sure what you're asking. How are pixels different between a desktop and a mobile device? Can you give us some examples?

sharatdotinfo

Sorry to be vague but I guess what I was really trying to ask was

1> Can I create a canvas with p5 using say 100% of the screen width instead of say a createCanvas(300, 300). In that case, how do I get the equivalent screen position of when a user points to a certain part of the page on the mobile vs desktop.

KevinWorkman

Okay, so this is two separate questions:

How do I resize the canvas to match the window width?

You can use the resizeCanvas() function. See the P5.js reference for more info.

How do I get positions relative to the size of the canvas?

Use the position and then divide by width and height to get a value between 0 and 1. A position of 0, 0 is in the upper-left, and a position of 1, 1 is in the bottom-right.

If you're still having trouble, please post a MCVE showing just the step you're working on, and we'll go from there. Good luck.

sharatdotinfo

Thanks for your help. I think this will help!