# Click on a point on a sphere

**URL:** <https://discourse.processing.org/t/click-on-a-point-on-a-sphere/18657>\
**Category:** Coding Questions\
**Created:** [March 14, 2020, 4:44pm UTC](https://discourse.processing.org/t/click-on-a-point-on-a-sphere/18657 "2020-03-14T16:44:55Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![juxn](https://avatars.discourse-cdn.com/v4/letter/j/9de0a6/32.png) [@juxn](https://discourse.processing.org/u/juxn)\
**Post date:** [March 14, 2020, 4:44pm UTC](https://discourse.processing.org/t/click-on-a-point-on-a-sphere/18657/1 "2020-03-14T16:44:55Z")

</div>

Hi i’m trying to make a kind of “world” navigation where i have points distributed on a sphere that can be rotated, i’m having trouble to find the way to click on an specific point on the sphere surface, so far i’ve managed to distribute different points over the sphere but i can’t make them clickable. Thank you for your help.

Here is the link to my p5 sketch.  
[https://editor.p5js.org/voidgar/sketches/4GTKRffq](https://editor.p5js.org/voidgar/sketches/4GTKRffq)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 14, 2020, 7:02pm UTC](https://discourse.processing.org/t/click-on-a-point-on-a-sphere/18657/2 "2020-03-14T19:02:33Z")

</div>

You can draw the same stuff in an offscreen buffer and use different, unique colors for the markers

Now when mouse is clicked, get the color underneath the mouse with color c1 = pg.get(mouseX,mouseY); compare c1 to the colors of your markers

---

<div class="post-metadata">

**Author:** ![juxn](https://avatars.discourse-cdn.com/v4/letter/j/9de0a6/32.png) [@juxn](https://discourse.processing.org/u/juxn)\
**Post date:** [March 14, 2020, 8:05pm UTC](https://discourse.processing.org/t/click-on-a-point-on-a-sphere/18657/3 "2020-03-14T20:05:58Z")

</div>

Pretty clever work around! Thank you, it was what i was looking for, i thought on doing it with color but didn’t went too far. I will try to implement it! Thanks 😀 ✨

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 14, 2020, 8:50pm UTC](https://discourse.processing.org/t/click-on-a-point-on-a-sphere/18657/4 "2020-03-14T20:50:25Z")

</div>

Off screen buffer would be PGraphics pg;  
must be the same size as your sketch; advantage of using an offscreen buffer is that here you can have different unique colors. In the real screen you can use the same color for the markers and also use lights(); which makes the scene look better in 3D.

Then color c1=pg.get(mouseX, mouseY);

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [March 14, 2020, 11:58pm UTC](https://discourse.processing.org/t/click-on-a-point-on-a-sphere/18657/5 "2020-03-14T23:58:35Z")

</div>

Hello,

This may be helpful:

> [@screenX screenY equivalent in p5.js](https://discourse.processing.org/t/screenx-screeny-equivalent-in-p5-js/10581/5):
>
> 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](https://editor.p5js.org/bohnacker/sketches/nUk3bVW7b)

There is a 3D example in the GitHub repositiory.

`:)`

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [March 25, 2020, 12:44am UTC](https://discourse.processing.org/t/click-on-a-point-on-a-sphere/18657/6 "2020-03-25T00:44:16Z")

</div>

> [@Chrisir](#):
>
> an offscreen buffer and use different, unique colors

Picking is a great technique, and quite simple to implement by hand. For a javascript implementation, see mPicker:

> <https://github.com/physicsdavid/mPicker/tree/master/example>
>
> //github.com/physicsdavid/mPicker/tree/master/example

- Previous discussion: [Click event on 3D primitive - #4 by kfrajer](https://discourse.processing.org/t/click-event-on-3d-primitive/18426/4)
- Jave library version: Picking [GitHub - nclavaud/picking: Processing Library Template for Eclipse](https://github.com/nclavaud/picking)