Spherical Pathfinding

General Discussion Other

nochin

in General Discussion • Other • 2 years ago

Hello everyone! I've been banging my head trying to figure this out, and seeing as how the Processing community has been so good to me in the past, I thought I'd give you guys a crack at it.

I have a client who is completely in love with Roy Tanck's Wordpress Tag Cloud and wants me to recreate a very similar version of this to display recent tweets from a list of users as a standalone application. I've done a ton of work with the Twitter API in Processing, and so I've got that part down, but I have no idea how to get those tags to move on a spherical path like that. I thought I would do the graphics in Quartz Composer to get that part out of the way quickly so I could work on the interaction, but I cannot figure out how to get my sprites to move like that.

I took a peek at Tanck's actionscript source files, and I found the functions that update the coordinates of all the sprites, but of course what I found was all sorts of matrix math and formulas that were difficult to decipher in context. So what I'm looking for is some sort of resource that explains the process of moving an object around the surface of a sphere so I can mimic this effect.

I've been researching this for days and have come up with nothing, so really any help at all would be appreciated.

Thanks all!

Replies(3)

cedrickie..

Re: Spherical Pathfinding

2 years ago

you can either do it in 3d, but i guess sin and cos is just enough. you can use it for positioning as well as scaling and fading color to get the feeling of depth.

these are the formulars for the positioning

2d:
x = cos( a );
y = sin( a );

3d:
x = cos(phi) * sin(theta);
y = cos(theta);
z = sin(phi) * sin(theta);

nochin

Re: Spherical Pathfinding

2 years ago

OK, great! So how would I plug this formula in to calculate the movement? For instance, I've set up a simple P3D sketch with a small rect translated to the center of the screen. Its coordinates are stored in the variables x, y, and z. I'm guessing that my phi and theta values need to contain some kind of calculation of the current coordinates and the direction and distance I want the rect to move?

The code on this discourse page looks pretty useful...maybe I'll mess with that for a while.

nochin

Re: Spherical Pathfinding

2 years ago

So I came up with this little prototype, but the movement is rather "swirly" and not steady in one direction, which is what I need. In Tanck's cloud, the tags move steadily in one direction around the sphere based on the direction of the mouse movement. This sketch I made makes the rect move more in unpredictable patterns around the sphere.

float x,y,z;

float theta;
float phi;

void setup(){
size(500,500,P3D);
rectMode(CENTER);
}

void draw(){
background(0);

int radius = 150;

theta = theta + 0.05;
phi = phi + 0.01;

x = cos(phi) * sin(theta) * radius;
y = cos(theta) * radius;
z = sin(phi) * sin(theta) * radius;

fill(255);
translate(width/2, height/2);
translate(x,y,z);
rect(0,0,50,50);

Top Reply