Creating a box on a sphere exactly where the mouse is

Programming Questions

railon

Creating a box on a sphere exactly where the mouse is

in Programming Questions • 1 month ago

So basically I want a box to be drawn right under the mouse and to be on the edge of a sphere. I've been trying to do this for a bit now and just can't get it right, I'd love it if someone could work this out for me.

float srad = 0;
float boxX = 0;
float boxY = 0;
float boxZ = 0;
void setup() {
size(1000,500,P3D);
}
void draw() {
background(0);
pushMatrix();
translate(width/2,height/2,-500);
noStroke();
fill(200);
sphere(height/2);
srad = floor(screenX(height/2,0,0) - width/2);
boxX = (mouseX - width/2) * ((height/2)/srad);
boxY = (mouseY - height/2) * ((height/2)/srad);
boxZ = sqrt((height/2)*(height/2) - boxX*boxX - boxY*boxY);
translate(boxX,boxY,boxZ);
fill(255,0,0);
box(height/100);
popMatrix();
}
void mouseClicked() {
println(mouseX - width/2 + " * (" + height/2 + "/(" + srad + ")) = " + boxX);
println(mouseY - height/2 + " * (" + height/2 + "/(" + srad + ")) = " + boxY);
}

This is the furthest I've gotten on it and it's close, but the box is still not directly under the mouse. I believe this is because when the z is pushed forward to accommodate the x and y it is no longer drawn under the mouse because of how the camera sees it in 3D space. I'm just not sure how to compensate for this.

Replies(7)

tfguy44

Re: Creating a box on a sphere exactly where the mouse is

1 month ago

Why do you want a box on a sphere? I mean...

void setup() {
size(1000,500,P2D);
smooth();
rectMode(CENTER);
}
void draw() {
background(0);
noStroke();
fill(200);
ellipse(width/2,height/2,height/2,height/2);
if( dist( mouseX, mouseY, width/2, height/2) < height/4 ){
fill(255,0,0);
rect(mouseX, mouseY,10,10);
}
}
void mouseClicked() {
println( "(" + mouseX + ", " + mouseY + ")" );
}

railon

Re: Creating a box on a sphere exactly where the mouse is

1 month ago

I can understand why you'd think I was over thinking a simple thing, so let me show you a situation where I'd need this.

float rX = 0;
float rY = 0;
void setup() {
size(1000,500,P3D);
}
void draw() {
background(0);
pushMatrix();
translate(width/2,height/2,-500);
rotateX(rX);
rotateY(rY);
noStroke();
fill(200);
sphere(height/2);
pushMatrix();
rotateX(PI/4);
rotateY(PI/6);
translate(0,0,height/2);
fill(255,0,0);
box(height/25);
popMatrix();
pushMatrix();
rotateX(-PI/10);
rotateY(-PI/8);
translate(0,0,height/2);
fill(0,0,255);
box(height/25);
popMatrix();
popMatrix();
}
void mouseDragged() {
if(mouseButton == RIGHT) {
rX += (pmouseY-mouseY) * 0.01;
if(rX < PI/2 && rX > -PI/2 || rX > 3*PI/2 || rX < -3*PI/2) {rY += (mouseX-pmouseX) * 0.01;}
else {rY -= (mouseX-pmouseX) * 0.01;}
if(rX >= 2*PI || rX <= -2*PI) {rX = 0;}
if(rY >= 2*PI || rY <= -2*PI) {rY = 0;}
}
}

Here I'd basically need to know whether they clicked the red box or the blue box.

The way I was trying to do it was to try and find the point in 3D space on the edge of the sphere that's directly under the mouse (which I represented with a box in original example) and to compare that to where the box's are on the sphere, though I'm not even fully sure if that'll work out anymore.

tfguy44

Re: Creating a box on a sphere exactly where the mouse is

1 month ago

You're still over-thinking it. Use the Picking library.

http://n.clavaud.free.fr/processing/library/picking/

https://github.com/nclavaud/picking

railon

Re: Creating a box on a sphere exactly where the mouse is

1 month ago

Wow, thank you, it seems like every time I have a problem like this it turns out that I was just trying to reinvent the wheel.

Though unfortunately I am using processing.js and as such processing libraries are a no go for me unless it's made for JavaScript as well as Java. So is it possible to do this same kind of thing but with just base Processing? I imagine there has to be some mathematical way at least to get the point on the sphere directly under the mouse, I think what I was doing was close but I didn't know how to compensate for the z-axis's affect on x and y

tfguy44

Re: Creating a box on a sphere exactly where the mouse is

1 month ago

Yes, an exact solution is certainly possible... with a lot of crazy math... that no one wants to do.

So instead, a journey into the realm of less than perfect solutions.

Picking, Simplified: Assuming you only want to differentiate between clicking the red box vs. clicking the blue box, you could just have your mousePressed function check the pixel at (mouseX,mouseY). If redish, red was clicked. If blueish, blue was clicked. This solution does not scale up well, as you can only have only have one box of each color. (Aside: This is actually how the Picking library works, except it renders a second, unseen window in false-color, and uses that to determine which 3D shape was clicked.) I'm not sure if off-screen graphics are well-supported in JavaScript mode, but it might be possible to do this "duck-hunt" style, where the screen flickers for a frame of false-color rendering. This can certainly work if you only want a few boxes, and they are all different colors. Picking a full-blown point on the sphere with this approach is a no-go.

Screen Distance: Each clickable box has a position in 3D space, but it is possible to map that 3D position to a 2D screen position using screenX() and screenY(). You can then find the box that was closest to, and close enough to, the point where the mouse was clicked.

What I'm really trying to ask is... What's your goal? Do you want to be able to pick one of a finite number of boxes, or an exact point on the sphere?

railon

Re: Creating a box on a sphere exactly where the mouse is

1 month ago

First of all I just want to say thank you very much for continued response, it's extremely appreciated!

My actual goal for this functionality right now is where I have a sphere that has a hex grid on it and if the player clicks on a hex on the sphere I need to know which hex was selected. So I basically want to pick one hex out of a finite number of hexes on the sphere. Unfortunately what's in these hex's will often have the same color, so doing it by color wouldn't work.

I'm not fully sure about off-screen graphics, though I can layer separate sketches over each other with ease if that helps at all.

railon

Re: Creating a box on a sphere exactly where the mouse is

1 month ago

Just want to let you know that I've managed to achieve picking out 3D objects. Basically when the mouse is clicked the x and y are stored and a single frame is rendered with only the clickable objects on screen all filled with a separate color. After using get() with the stored x and y I can just use their RGB values to know which object was clicked.

Picking out 3D objects using colors is very interesting, thank you very much!

Top Reply