bohnacker / p5js-screenposition Goto Github PK

can I also use this reversely? knowing canvas position and receiving position in 3d space?

i have used your code of getting the screenX and y positions but instead of giving me the same result for the same X,Y,Z ?
the way i implemented the code is i used only the addScreenPositionFunction function
so what seems to be the issue ?thanks

Hello , thanks for this library implementation. I had a doubt on the implementation with regards to finding corresponding co-ordinates in the 2D canvas. In the sketch below , I have used p5js screen position as suggested. The idea is to have a new cube appear when the x, y position of the mouse is inside the cube. (that is within the x,y co -ordinate of the cube) . However , i am not able to achieve that , I also reset the center position to (0,0,0) for a new co-ordinate system . I am wondering if you give me some pointers on this . The link to the sketch is here Sketch

From what I've found using the addScreenPositionFunction() on a p5.Graphics object works fine. But I don't know if this is universal. Anyways here's an example sketch if you think it's worth adding to the documentation.

let graphics;

function setup() {
  createCanvas(400, 400);
  graphics = createGraphics(width, height, WEBGL);
  addScreenPositionFunction(graphics);
  
  rectMode(CENTER)
  graphics.rectMode(CENTER);
}

function draw() {
  background(220);
  
  graphics.clear();
  graphics.rotateX(0.010);
  graphics.rotateY(0.011);
  graphics.rotateZ(0.012);
  graphics.square(0, 0, 200);
  image(graphics, 0, 0);
  
  push();
  translate(width/2, height/2);
  const gPoint = graphics.screenPosition(100, 0, 0);
  fill(0, 0, 255);
  square(gPoint.x, gPoint.y, 20);
  pop();
}

By the way thanks for making this library it's been super useful!