screenX screenY equivalent in p5.js

Wow, p5.js is awesome

I just look for a screenX screenY equivalent

together with orbitControl()

Thanks for a great language!

Chrisir

1 Like

I don’t understand a word here

How do I call it?

let screenCoor = projectWorldToCanvas( canvas, world ) ;

??

Thanks

Chrisir


 
  fill(0,255,0);
  translate(0,-37,0); 
  sphere(44);
  
  let screenCoor =   projectWorldToCanvas(  canvas, world   ) ; 
  
  pop();
}

function mousePressed() {
  
  //projectWorldToCanvas(canvas, vWorld) 
  // let canvasMy ;       projectWorldToCanvas(canvasMy , vWorld) ; 
  
  if (dist(mouseX, mouseY, 55, 55) < 46)
    colFlag = !colFlag;
}

/* Project a vector from World to Canvas coordinates. */
function projectWorldToCanvas(canvas, vWorld) {
  // Calculate the ModelViewProjection Matrix.
  var mvp = (canvas.uMVMatrix.copy()).mult(canvas.uPMatrix);

  // Transform the vector to Normalized Device Coordinate.
  var vNDC = multMatrixVector(mvp, vWorld);

  // Transform vector from NDC to Canvas coordinates.
  var vCanvas = createVector();
  vCanvas.x = 0.5 * (vNDC.x + 1.0) * canvas.GL.drawingBufferWidth;
  vCanvas.y = 0.5 * (vNDC.y + 1.0) * canvas.GL.drawingBufferHeight;
  vCanvas.z = 0.5 * (vNDC.z + 1.0);

  return vCanvas;
}

if I call it like this:

  var worldMy = createVector( 0,0,0 );
  let screenCoor =   projectWorldToCanvas(  canvas, worldMy    ) ;

I receive

TypeError: canvas.uMVMatrix is undefined (sketch: line 99)

p5.RendererGL: enabled webgl context

in

/* Project a vector from World to Canvas coordinates. */
function projectWorldToCanvas(canvas, vWorld) {
  // Calculate the ModelViewProjection Matrix.
  var mvp = (canvas.uMVMatrix.copy()).mult(canvas.uPMatrix);   // !!!!!!!!!!!!!!!!!! HERE 

  // Transform the vector to Normalized Device Coordinate.

?

I gather that of the 3 funcs in https://github.com/processing/p5.js/issues/1553
I only need projectWorldToCanvas ?
and not the other?

That’s overly complicated…

Is canvas = 2D and world = 3D?

Thanks for your help!

Chrisir

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

3 Likes

Thanks a ton!

Chrisir