Wow, p5.js is awesome

I just look for a screenX screenY equivalent

together with orbitControl()

Thanks for a great language!

Chrisir

Wow, p5.js is awesome

I just look for a screenX screenY equivalent

together with orbitControl()

Thanks for a great language!

Chrisir

1 Like

2 Likes

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