3D coordinate transformations

Hi Thijs,
A few months back, I posted a JS file and a demo patch as to how to do
3d coordinate transforms. Here's the link:

https://cycling74.com/forums/index.php?t=msg&goto=588 78&r id=0&S=3b17a358a3f407404debd6245a7af9dc&srch=3D+coor dinate+T ransforms#msg_58878

wes

This is something GEM (on PureData and Max) handles really nicely.
they have separate rotateXYZ and transformXYZ objects you can link
serially in a render chain, which lets you do fairly complex
movements really easily. This is however due to the way GEM render-
chains work (afaict).

does anyone from c74 know if this could be implemented in jitter
(without having to deal with transformation matrices implicitly ?)

if it wouldnt be too hard to have a jit.gl.rotate and a
jit.gl.translate that could be attached to chained objects somehow,
it could make easier to play with potentially. However im guessing
that since most ways of working with a jit.gl context is without
patch cords (automatic 1), making a 'serial' implementation would be
difficult.

thoughts?

am I way off base?

v a d e //

www.vade.info
abstrakt.vade.info

Thanks for the replies. I can't use GEM because I'm on windows. And Wesley,
I already knew your patch, but when I first looked at it, I didn't really
understand what it was for. I remembered it and checked it out a second
time...and still I didn't see how it was related to what I wanted to do.
Maybe I should check it again and look even closer this time;-)

I'll give it another try soon, but I guess it would be really nice to have
some jitter objects dealing with these things like vade mentioned.

Best, Thijs

Well,
If that example patc h didn't make sense, maybe this will...download
the jitter boids ditribution from this page:
http://www.mat.ucsb.edu/~whsmith/boids.html . In it is the source
code and the object of interest here is called xray.jit.boidsrender.
If you look at the planecount=9 case, this section handles 3d
coordinate transforms. It might be of use to you. Basically, it puts
every quad into a Y-axis aligned coodinate space and uses
transformation matrices to move between the original coordinate system
and the Y-aligned coordinate system.

Also, after looking at what you want to do, this JS might be more
instructive. Specifically, look at the Jelly.prototype.orient
function. It take a vector orientation as an argument and calculates
the approproate rotatexyz angles for sending to jit.gl.mesh. Here it
is:

outlets = 5;
this.autowatch = 1;

var userPosition = [0, 0, 0];

var r2d = 180/Math.PI;
var numJellies = 14;
var posMatrix = new JitterMatrix(3, "float32", numJellies,1);
posMatrix.name = "jelly-pos";
posMatrix.planecount = 3;
posMatrix.type = "float32";
posMatrix.dim = [numJellies, 1];

// Jelly Constructor
function Jelly(id)
{
    this.id = id;
    this.speed = 3.27;
    this.orientation = [0, 0, 1];
    this.angle = [0.0, 0, 0];
    this.position = [0, 0, 0];
    this.line = 0;
    this.group = Math.round(Math.random());

    var snd = Math.random();

    if(snd < 0.33) {
        this.sound = 1;
        this.pitch = [1.5, 1.4];
    }
    else if(snd < 0.66) {
        this.sound = 2;
        this.pitch = [1.0, 1.0];
    }
    else {
        this.sound = 3;
        this.pitch = [1.0, 1.0];
    }

    this.delay = 0;

    outlet(4, "target", id+1);
    outlet(4, "sound", this.sound);
    outlet(4, "pitch", this.pitch);
    outlet(4, "delay", this.delay);

}

// Jelly Variables:
Jelly.prototype.id = 0;
Jelly.prototype.speed = 3.27;
Jelly.prototype.orientation = [0, 0, 1];
Jelly.prototype.angle = [0.0, 0, 0];
Jelly.prototype.position = [0, 0, 0];
Jelly.prototype.line = 0;
Jelly.prototype.group = 0;
Jelly.prototype.sound = 1;
Jelly.prototype.pitch = [1.5, 1.4];
Jelly.prototype.delay = 0;

// static variables
var maxline = 45;
var linescale = 9.5/((maxline-1)*2.7);

// Jelly Methods:
Jelly.prototype.dump = function(n)
{
post("dumping ",this.id,"with method argument",1,"n");
}

//speed*e^(pos/decay)
Jelly.prototype.swim = function()
{
    //amount to move
    var distance = Math.exp(-this.line*linescale)/this.speed;

    //vectorize distance by orientation and add to position
    this.position = [this.position[0] + distance*this.orientation[0],
                        this.position[1] + distance*this.orientation[1],
                        this.position[2] + distance*this.orientation[2]];
}

Jelly.prototype.orient = function()
{
    //Note: OpenGL rotates counter-clockwise
    //theta (atan2(y, x)
    this.angle[2] = r2d*Math.atan2(-this.orientation[1], -this.orientation[0]);

    //phi atan2( hypot(x, y), z)
    this.angle[1] =
r2d*Math.atan2(Math.sqrt(this.orientation[0]*this.orientatio n[0] +
                            this.orientation[1]*this.orientation[1]), -this.orientation[2]);
}

//Create Jellies
var jellies = new Array(numJellies);

for(var i=0; i < jellies.length; i++) {
    jellies[i] = new Jelly(i);
}

function reset()
{
    for(var i=0; i < jellies.length; i++) {
        jellies[i].position = [0, 0, 0];
    }
}

function dump()
{
    for(var i=0; i < jellies.length; i++) {
        jellies[i].dump(i*2);
    }
}

function startSwim()
{
    for(var i=0; i < jellies.length; i++) {
        jellies[i].line = 0;

        if(Math.random() < 0.2)
            jellies[i].group = 1-jellies[i].group;
    }
}

var distance;
var distVect = new Array();
var nearOffset;
var currentPitch;
var del;

function bang()
{
    for(var i=0; i < jellies.length; i++) {
        if(jellies[i].line < maxline) {
            jellies[i].line++;
            jellies[i].swim();

            Jitter3DUtils.vsub(jellies[i].position, userPosition, distVect);
            distance = Jitter3DUtils.vlength(distVect);
            posMatrix.setcell(i, 0, "val", jellies[i].position);

            if(distance < 5)
                nearOffset = 0.2;
            else
                nearOffset = 0;

//            currentPitch = [jellies[i].pitch[0]+Math.random()*0.025-0.0125,
jellies[i].pitch[1]+Math.random()*0.25-0.0125];

            outlet(2*jellies[i].group+1, jellies[i].position);
            outlet(2*jellies[i].group, "rotatexyz", jellies[i].angle);
            outlet(2*jellies[i].group, "draw");
            outlet(4, "target", i);
            outlet(4, "vol", nearOffset+Math.min(2*1/(distance*distance+0.001), 1.5));
//            outlet(4, "pitch", currentPitch);
            del = jellies[i].delay+Math.random()*300;
            //post(jellies[i].delay + "n");
            outlet(4, "delay", del);
        }
    }
}

function orientation(vals)
{
    jellies[arguments[0]].orientation = [arguments[1], arguments[2], arguments[3]];
    jellies[arguments[0]].orient();
}

function speed(vals)
{
    jellies[arguments[0]].speed = arguments[1];
}

function position(vals)
{
    userPosition = [arguments[0], arguments[1], arguments[2]];    
}

Thanks a lot Wesley. To bad I still don't get it. I spend a few hours going
through you linetrans and jelly code and trying to patch it. I thought I was
getting there, but I guess there is just too much about this theory that I
don't get yet. I tried to use code from linetrans to lock an objects
position to the camera like this: point1 camera position, point2 lookat
position and then use the calculated pointp to set the objects position.

For its rotation I used point1's x+y as inputs to the jelly orient function.
Unless I'm missing something obvious and you can explain it in a few words,
I guess I'll give up for now, and maybe try again when I'm smarter or have
more time.

Best, T_

Hi Thijs,
I know this kind of stuff can get quite hairy. I spend 6 months off
and on before I was able to tame 3d coordinates through transforms and
rotations. In the end, it came down to being very methodical and
breaking down what I wanted to do into small geometric steps.

If you could exmplain in detail exactly what you want to do, I think
it would be easier to help you. Also, if you had an example patch
that could be worked on, that would make things progress much faster.

The Jelly JS script I posted earier was for rotating and moving these
jelly fish-like creatures in 3d. Here's the barebones of how I did
it:

properties of a Jelly {
orientation float[3] //xyz orientation vector
position float[3] //xyz position
}

>From the orientation, I can derive the rotatexyz angles. This is that function:
Jelly.prototype.orient = function()
{
//Note: OpenGL rotates counter-clockwise
//theta (atan2(y, x)
this.angle[2] = r2d*Math.atan2(-this.orientation[1],
-this.orientation[0]);

//phi atan2( hypot(x, y), z)
this.angle[1] =
r2d*Math.atan2(Math.sqrt(this.orientation[0]*this.orientatio n[0] +

this.orientation[1]*this.orientation[1]), -this.orientation[2]);
}

For any given frame that was rendered, I would send 2 messages to
jit.gl.mesh for each jelly I was rendering:

rotatexyz angle1 angle2 angle3
position pos1 pos2 pos3

That's it.

wes

That's exactly the code I used from the jellyfish. I'll make an example
patch soon showing what I'm trying to achieve exactly, but I don't have any
time for this untill the end of this week. Thanks for all the help.

Best, Thijs

On Jan 27, 2006, at 12:11 PM, Thijs Koerselman wrote:

> I want to align an object to the local coordinate system of another
> object, so that If I rotate or move object1, object2 moves along
> and keeps it's relative position to object1. I read through chapter
> 3 of the redbook and searched around on the internet before trying
> to get it right in max. After a long time of patching with just
> "expr" objects and a lot of trial and error I got halfway and then
> I lost track. It seems I really can't figure it out on my own and
> it's driving me nuts. From what I understand now, I need to combine
> their 4x4 matixes, somehow. (?)

I would recommend using jit.gl.sketch in conjunction with the
drawobject message. You can perform any type of
hierarchical transformation this way, including those exposed by the
procedural rendering model of GEM (which essentially uses object
boxes in sequence for the drawing commands of jit.gl.sketch. Anyone
that is looking for the GEM model in Jitter, should take a look at
jit.gl.sketch's drawing commands).

For example, something like the following:

glmatrixmode modelview,
glpushmatrix,
gltranslate ,
glrotate 1. 0. 0.,
glrotate 0. 1. 0.,
glrotate 0. 0. 1.,
drawobject ,
glmatrixmode modelview,
glpushmatrix,
gltranslate ,
glrotate 1. 0. 0.,
glrotate 0. 1. 0.,
glrotate 0. 0. 1.,
drawobject ,
glmatrixmode modelview,
glpopmatrix,
glpopmatrix

Subpatchers or JS functions could be used to simplify building up
these command lists.

Of course you can do all the matrix math yourself if you want, but I
think the above strategy is a little bit easier.

-Joshua

Joshua, Thanks! I had forgotten about the drawobject usage with
sketch, this makes things much easier, I will have to play with it.

Thanks for the reminder, this is exactly what I was looking for
myself (GEM style procedural, etc).

v a d e //

www.vade.info
abstrakt.vade.info