Bah, topic was too long!

"Rotating a sprite according to the angle on a bezier curve".

I'm trying to rotate a sprite, at the moment a simple box, according to the tangent angle on a bezier curve. So far I've been able to spawn random seeds of the curves, animating simple objects along the path and displaying the direction using a tangent method written by davbol on these forums.

What I can't seem to get working is the angle in which the sprite is supposed to be, well... I can get the right angle but then I can't get the right coordinates. That is using push/popMatrix, if I don't use them the whole thing rotates.

Any ideas?

Code:

/**
  * FISHIES !!!
  * Image moving along a bezier curve, according to processing reference found at processing.org, with
  * a directional angle using tangent method written by dave (davbol) @ processing.org forums. 
  * ***** Written by the Coralinti group, Andreas *****
  */
class movingImage{
  //variable declaration
  float x1,x2,cx1,cx2;
  float y1,y2,cy1,cy2;
  float speed;
  float a;
  float ix, x, y;
  boolean firsttime;
  
  //Constructors
  //Defined pattern when created.
  movingImage(float x1, float y1, float cx1, float cy1, float cx2, float cy2, float x2, float y2, float speed){
    this.x1 = x1;
    this.y1 = y1;
    this.cx1 = cx1;
    this.cy1 = cy1;
    this.cx2 = cx2;
    this.cy2 = cy2;
    this.x2 = x2;
    this.y2 = y2;
    this.speed = speed;
    
    ix = 0;
    firsttime = true;
  }
  //Random pattern when created according to width and height of the used screen size.
  movingImage(float width, float height){
    this.x1 = random((-width/2),(0.0));
    this.y1 = random((0.0),(height));
    this.cx1 = random((0.0),(width/2));
    this.cy1 = random((0.0),(height));
    this.cx2 = random((width/2),(width));
    this.cy2 = random((0.0),(height));
    this.x2 = random((width),(width*1.5));
    this.y2 = random((0.0),(height));
    
    speed = random(0.5,1.5);
    ix = 0;
    firsttime = true;
  }
  
  //paint sprites on screen
  void paintCurve(){
    stroke(255);
    //bezier curve which the image will move along.
    bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2);
    //control lines, showing the direction of the curve.
    stroke(0,255,0);
    line(x1,y1,cx1,cy1);
    line(cx2,cy2,x2,y2);
    
  }
  
  //return angles
  void updateSprite(){
    float t = ix / float(width);
    // Get the location of the point.
    x = bezierPoint(x1, cx1, cx2, x2, t);
    y = bezierPoint(y1, cy1, cy2, y2, t);
    // Get the tangent points.
    float tx = beztan(x1, cx1, cx2, x2, t);
    float ty = beztan(y1, cy1, cy2, y2, t);
    // Calculate an angle from the tangent points.
    a = atan2(ty, tx);
    // Draw the tangent and direction.
    stroke(255, 102, 0);
    line(x, y, cos(a)*40 + x, sin(a)*40 + y);
    // Draw sprite, to be replaced by an image
    stroke(90);
    ellipse(x, y, 5, 5);
    
    
    rectMode(CENTER);
    
    pushMatrix();
    rotateZ(a);
    rect(x,y,30,10);    
    popMatrix();
    
    ix = ix+speed;
    
    //Boundary check, repaint if reached the end of the curve.
    if(ix >= width){
	ix=0;
	//Re-seed the curve by giving the controlpoints new random values.
	this.cx1 = random((0.0),(width/2));
	this.cy1 = random((0.0),(height));
	this.cx2 = random((width/2),(width));
	this.cy2 = random((0.0),(height));
    }
  }
  
  //return coordinates and angle
  String getAngle(){return ""+degrees(a);}
  String getX(){return ""+x;}
  String getY(){return ""+y;}  
  
  /**
    * Beizertangent method, found @ processing.org forums, written by davbol.
    * http://processing.org/discourse/yabb_beta/YaBB.cgi?board=Programs;action=display;num=1176823261;start=1#1
    */
  float beztan(float a, float b, float c, float d, float t) {
    return 3*t*t * (-a+3*b-3*c+d) + 
	     6*t * (a-2*b+c) + 
	     3 * (-a+b);
  }
}
 

you must draw your sprite in the following order : translation, then rotation

Code:

pushMatrix();
  translate(x, y);
  rotate(a);
  rect(0, 0, 30, 10);
popMatrix();