2D and 3D shape picking in p5js V1 & V2

Gallery
1

Its been 3 years since I started learning Javascript in earnest and along the way I have shared some of my efforts. Before that I mostly programmed with C++ and Java using the object orientated paradigm and this can be seen in my early Javascript examples.

One of those examples was a 3D shape picker using a colour buffer algorithm. It met my requirements at the time but it needed modifying to make it compatible with p5js V2 and I now have a need for a 2D version.

So I have created a new shape picker that

  • performs both 2D and 3D automatically detecting the rendering mode (P2D or WEBGL) of the sketch.
  • is compatible with both p5js V1 and V2. Codes changes might be needed to load images etc. but the picker doesn’t.
  • requires a single line of code to show the shape buffer in the web page (useful for debugging)

The two sketches below demonstrate 2D and 3D shape picking (using the mouse) and are available to copy and experiment with from my p5js sketch editor account.

5 Likes
2

Cool! I tried it but the 2D one doesn’t work on a High DPI screen (like a MacBook or my Windows PC) if I turn off 2x scaling it does work. The 3d one works on either

3

@stefterv thanks for the comments, a quick check shows the 2D version only works when the pixel density is 1.

I will investigate further and see if I can find a solution and then report back.

2 Likes
4

I have updated the pick buffer class and it now works on my iMac with a retina display.

I don’t have access to a Windows PC with a High DPI screen so I can’t test it but I believe it should work. :hand_with_index_finger_and_thumb_crossed:

So if you want to try it out look at the sketches in my first post. :grin:

1 Like
5

Can confirm it works on my MacBook, let me boot my Windows

6

Windows Stef here, looking good :slight_smile:

7

Hi Stef
Thanks for reporting the error and testing the solution. :+1::grin:

1 Like