p5.js on the mobile


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.



  • 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?

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

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

  • Thanks for your help. I think this will help!

Sign In or Register to comment.