object instances created on xformed and rotated grids

Question

In the fiddle below, I've drawn circles at certain points along a recursive tree structure.

https://jsfiddle.net/ypbprzzv/4/

The tree structure itself is a simplified version of the one found here:

https://processing.org/examples/tree.html

What if instead of drawing circles at (0, -h) on transformed and rotated grids, which is where they're being drawn in the fiddle, I wanted to hang pendulums which would hang in the unrotated y direction (down). If the pendulums were instances of an object class, it would be easy to add a new instance instead of (or in addition to) drawing the circle.

void branch(float h) {
  h *= 0.6;

  if (h > 10) {
    pushMatrix();
    rotate(a);
    line(0, 0, 0, -h);
    fill(0, 175, 0, 100);
    if (h < 50) {
      // I could add a new pendulum here, at (0, -h)
      ellipse(0, -h, 5, 5);
    }
    translate(0, -h);
    branch(h);
    popMatrix();
  } // closing the if statement
} // closing branch function

I have already tried this but because I wanted to keep the code very brief, I have not included it. The pendulums do indeed hang, but in wacky directions, since when I create these instances, the whole grid is xformed and rotated (which needs to be the case to simplify the drawing the tree or other interesting structures).

And suppose I want to make these pendulums sensitive to user interactions. The objects' frames of reference are different from the users'.

So I'll try to summarize the question:

Is it possible to create instances of objects on a transformed and rotated grid, but have that object behave in a prescribed way in relation to the unrotated grid?

Would it be helpful to provide a fiddle including the pendulums?

Answer 1

It's a little bit hard to help with general "how do I do this" or "is it possible" questions like this. The reason that it's hard to answer "is it possible" questions is the answer is almost always yes, it's possible. Similarly, "how do I do this" questions always have about a million possible answers, and there isn't any single best way to approach a problem. The "right" answer is really more dependent on how you think about the problem than anything else. But I'll try to help in a general sense.

Is it possible to create instances of objects on a transformed and rotated grid, but have that object behave in a prescribed way in relation to the unrotated grid?

Yes, it's possible.

There are a number of ways you might approach this:

• You might keep track of the current state (current rotation) and then undo that when you draw the pendulum. For example, if you're rotated to 90 degrees, you'd simply rotate by -90 degrees before drawing the pendulum.
• You could maybe use the screenX() and screenY() functions to get the screen location of a transformed point. More info can be found in the reference.
• You could store positions as you recursively draw the tree, and then after the tree is drawn, you could loop over those points to draw the pendulums.

These are just what I could think of right now, and there are probably more ways to approach it. Again, which approach you choose really depends on how this stuff fits into your brain, which is pretty hard to help you with.

But if you want my two cents: I personally find it hard to "think in transformations" to do stuff like what you're describing. Instead, if I were you, I would refactor the code so it no longer relies on translations and rotations. I'd use basic trig (the sin() and cos() functions) to draw everything. Then you'd already be in screen coordinates, so drawing your pendulums would be much easier.

But again, which approach you take really depends on how you think about things.