I'm working on a 2D transform system that has the following requirements:

  • Transforms can have children

  • Transforms have anchor points/origins that offset them

  • Children should honor the parent's origin for translation

  • Rotations occur relative to the local origin (i.e. objects rotate around their origin rather than the parent's)

As an example of what I'm looking for: - You add red square in the middle of the screen and center its origin - You add a white square, center its origin, scale it down slightly and make it a child of the red square - Every frame you rotate both squares by a fixed amount

What you should see is a red square rotating around its center in the middle of the screen and a white square rotating inside the red square.

The way that I'm doing it now is something like this:

c = child;
p = child.parent;

c.world_transform = c.local_transform * p.world_transform;

This doesn't fully work however. The red square appears in the center and rotates around its origin but the white square seems to rotate both around its origin AND the world origin (i.e. the top left corner of the window).

What am I missing?


1 Answer 1


Typically, you make a combined transformation matrix (CTM), which is the product of all parent transformations and the current node's transformation. This applies parent transformations to the children. Each node typically has a single transformation matrix, but your code appears to have two per node (local_transform and world_transform), so I'm not sure what language/framework you're using.

The pseudocode code looks something like this:

void Node::render(Matrix ctm) {
    ctm = ctm * this.transform; //apply this node's transform to the CTM
    foreach(Node child in this.children){

Each node multiplies it's own transformation matrix into the CTM, and passes the CTM to it's children.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .