Thijs Koerselman

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. (?)

In the first place I want to use this to align objects to the view space

coordinates, like you're driving a car and the outside world is moving but

the steering wheel stays in front of you. It seems a pretty common thing in

3d applications, so I'm hoping someone can explain how to do this in jitter.

My patch uses several ogl externals, so I can't do everything within one

- how to translate the camera/lookat messages to a 4x4matrix

- how to apply that matrix to the rotate/position parameters of another ogl

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. (?)

In the first place I want to use this to align objects to the view space
coordinates, like you're driving a car and the outside world is moving but
the steering wheel stays in front of you. It seems a pretty common thing in
3d applications, so I'm hoping someone can explain how to do this in jitter.
My patch uses several ogl externals, so I can't do everything within one
gl.sketch

I think I need to know:
- how to translate the camera/lookat messages to a 4x4matrix
- how to apply that matrix to the rotate/position parameters of another ogl
object.

3d-coordinate-transformations

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

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

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- 

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 

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.

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.

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.

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

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

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

var posMatrix = new JitterMatrix(3, "float32", numJellies,1);

    this.group = Math.round(Math.random());

post("dumping ",this.id,"with method argument",1,"n");

    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]];

    //Note: OpenGL rotates counter-clockwise

    this.angle[2] = r2d*Math.atan2(-this.orientation[1], -this.orientation[0]);

r2d*Math.atan2(Math.sqrt(this.orientation[0]*this.orientatio n[0] +

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

    for(var i=0; i < jellies.length; i++) {

        jellies[i].position = [0, 0, 0];

            jellies[i].group = 1-jellies[i].group;

        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);

                nearOffset = 0.2;

                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);

    jellies[arguments[0]].orientation = [arguments[1], arguments[2], arguments[3]];

    jellies[arguments[0]].speed = arguments[1];

    userPosition = [arguments[0], arguments[1], arguments[2]];    

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:

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());

	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];
	}

	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

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.

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

orientation float[3] //xyz orientation vector

>From the orientation, I can derive the rotatexyz angles. This is that function:

this.angle[2] = r2d*Math.atan2(-this.orientation[1],

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:

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 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.

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.

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 

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 

For example, something like the following:

Subpatchers or JS functions could be used to simplify building up 

Of course you can do all the matrix math yourself if you want, but I 

think the above strategy is a little bit easier.

> 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).

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, 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 

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).

I want to rotate a jit.gl.model around different origins.

Obviously there's no easy way to move the origin, right?

more precisely described the model should rotate slowly all the time but depending on user interaction another spot of it should be in the middle of the scene.

The next problem I will have is that the final model will consist of multiple models (with different shaders) which I will have to group together somehow. I have no idea how to do this. If there was the possibility to move the origin it would be very simple.

is this really that hard to do?:
I want to rotate a jit.gl.model around different origins.
Obviously there's no easy way to move the origin, right?
more precisely described the model should rotate slowly all the time but depending on user interaction another spot of it should be in the middle of the scene.
The next problem I will have is that the final model will consist of multiple models (with different shaders) which I will have to group together somehow. I have no idea how to do this. If there was the possibility to move the origin it would be very simple. 

It sounds like you need to get your hands dirty on a bit of low level

opengl. When I posted the first message to this thread I didn't know much

3D coordinate transformations