Creating complex motion using alternate rotation and translation

TonyRamirez

I enjoy figuring things out for myself but in this case I don't want spend ages reinventing the wheel only to discover I'm using an inefficient approach...

The effect I'm trying to get is of a shape (e.g. triangle) moving across the screen in potentially very complex or random ways by alternate rotation and then transformation. E.g. rotate so many degrees followed by translating so many pixels in the x and y, then repeat the cycle with different values.

Obviously, each time void draw() restarts, the objects location and rotation from the previous iteration are lost which means you can't just pick up where you left off with the transformations; we need to get the shape back to it's last location and rotation before applying the subsequent transforms.

• Storing cumulative translation and rotation in 3 separate variables (2 for x,y and 1 for rotation) doesn't work (unless I'm doing something really stupid). My instinct tells me that storing rotations cumulatively in a variable will work but that this won't work for the translations.

• One could store the entire rotation and translation history in 3 arrays but that would make the program run slower and use more memory with each new frame.

• I thought of using trig to somehow calculate the last position of the shape relative to coordinate system at the start of void draw() and then storing that position in two variables.

koogs

Is this in 2d?

Because then you could store all transformations for that triangle so far in a 2x2 matrix, just multiple that by the matrix for the new transformation each time. Processing does something similar internally when applying all the translates and rotates to the screen.

koogs

(um, you probably need a 3x3 matrix)

TonyRamirez

Yes, its 2d.

When you say 2x2 matrix are you talking about a 2D array?

If anyone can point me to some sample code that relates to what I'm trying to do, I would be grateful.

koogs

a 2x2 matrix (mathetmatical term) could be represented as a float[2][2], yes.

http://mathforum.org/mathimages/index.php/Transformation_Matrix

kahn academy videos look useful but don't cover the translation case.

https://www.khanacademy.org/math/precalculus/precalc-matrices/matrices-as-transformations/v/transforming-position-vector

https://stackoverflow.com/questions/10698962/why-do-2d-transformations-need-3x3-matrices

TonyRamirez

Holy cr*p. You would think there would be an easier way to work with cumulative transforms in a platform designed specifically for visual applications.

koogs

maybe you can save the transformation matrix at the bottom of every draw and reapply it at the start of the next one?

(the previous suggestion assumed you had a lot of these objects with different transformations for each, having matrix per-item. if you're only using one then you can probably use the global, internal one)

koogs

or draw the entire life of the object in one frame?

TonyRamirez

**maybe you can save the transformation matrix at the bottom of every draw and reapply it at the start of the next one? **

Well, that is what I'm trying to do essentially. Does processing facilitate this?

koogs

you can certainly print the current transformation matrix. i do vaguely remember people having trouble getting hold of the actual values because of the permissions of the member withing PApplet, but that was a while ago and i forget the details.

koogs

https://github.com/processing/processing/blob/master/core/src/processing/core/PMatrix2D.java ???

Chrisir

1.

the idea to have an x y position plus rotation angle should work

Of course they must be global variables that you change at the end of draw and apply at the beginning of it

2.

Store / retrieve matrix

https://forum.processing.org/two/discussion/23780/matrix-after-translate-rotate-in-p3d-can-we-save-the-matrix-other-than-with-pushmatrix#latest

Chrisir

example for approach 1 (see my last post)

Enemy enemy;

void setup() {
  size(1000, 700);
  enemy = new Enemy ();
}//func

void draw() {
  background(0);

  fill(255); 
  text("changes movement after approx. 5 seconds", 14, 14);

  //display and move the shape
  enemy.display();
  enemy.move();
}//func

//================================================================

class Enemy {

  float x, y, w = 20, h = 3*w;
  float angle1=0.0;

  Enemy() {
    x = 0;
    y = 0;
  }//constructor

  void display() {

    translate(x, y);
    rotate(angle1); 

    fill(200, 0, 0);//red
    rect(-w/2, -h/2, w, h);
  }//method

  void move() {
    if (frameCount<300) {
      x++; 
      y++;
      angle1 += 0.01;
    } else if (frameCount<1200) {
      x+=2; 
      y++;
      angle1 -= 0.0051;
    }
  }//method
  //
}//class
//==============================================================

Chrisir

for a more complex movement you can make a class MovementPattern and store here angleAdd, xAdd and yAdd and startFrame and stopFrame

when you have an array movementPatterns of that class you can use an index indexMP and increase it :

if(frameCount>=movementPatterns[indexMP].stopFrame)
       indexMP;