3D Shape picking in p5.js

Gallery
1

I needed a 3D shape picker for p5.js so I used what I had learnt from mixing 3D and 2D in canvasGUI to create my own. In the Jetsons sketch the boxes were created with the box(...) method and you can select any box by clicking on it. This was limiting so the second sketch allows you to select a face on a poker die. Both sketch use the same class for the 3D picking class.

The source code for both sketches can be found on OpenProcessing
Jetsons
Poker Die
Although both sketches use instance mode the picking class works in global mode as well.

6 Likes
2

see also screenX screenY equivalent in p5.js - #5 by bohnacker

1 Like
3

I had the same difficulty when I created my website. I ended up using ThreeJs. What you are trying to do is called ray casting and P5 just can’t handle it like ThreeJs; yet.

Check it out

4

Thanks, I already knew about ray-casting and I am not attempting to use it here.

In these examples I am using a color-picking algorithm because it is simple to implement and does what I need. It also has the advantage that p5.js can handle it with ease.

I also knew of Three.js but I am currently getting to grips with Javascript, Typescript and p5.js so I don’t want learn a new API just yet.

3 Likes