Relatives and global positioning

p5.js
1

If we don’t use scaling, it works well but there…
it doesn’t work at all… and I really don’t find why.

If you know it…

thank you VERY much in advance !!!

The sketch is here !

Otherwise, Openprocessing indicates an error that I don’t have at all on my computer when I run this sketch!

N.B. same sketch in Processing :

transform_java

2

Hi! I think I can see two problems in runOutMatrix:

  • I think you aren’t accumulating the parent’s position, only its scale. The child’s total position should be createVector(parentX + parentScale * childX, parentY + parentScale + childY), as the parent’s scale also applies to the position relative to the parent.
  • It looks like you’re only accumulating position/scale from the direct parent, but that parent may also have a parent. Likely you will need to make your function recursive to account for that.
3 Likes
3

Also one thing that might be of interest is the DOMMatrixReadOnly JavaScript class: DOMMatrixReadOnly It lets you keep track of a transform with multiple nested translations and scales and will also let you extend your code to include rotations too if you need.

It would let you do something like this:

class Thing {
  globalTransform() {
    let parentMatrix = new DOMMatrixReadOnly()
    if (this.parent) {
      parentMatrix = this.parent.globalTransform()
    }
    return parentMatrix
      .translate(this.position.x, this.position.y)
      .scale(this.scale)
  }

  runOutMatrix() {
    push()
    const m = this.globalMatrix()
    applyMatrix(m.a, m.b, m.c, m.d, m.e, m.f)
    // draw something here
    pop()

    for (const child of this.children) {
      child.runOutMatrix()
    }
  }
4 Likes
4

THANK you beaucoup… (a lot) :upside_down_face:

It looks super interesting !!!

Yes indeed, taking care of the rotation is my next goal :hatching_chick: !

I will watch this very closely as soon as possible (I can’t wait!)… I have to take care of something else by Saturday evening - Sunday! :sad_but_relieved_face:

your webpage https://www.davepagurek.com/ seems very interesting too (:cry: I’m going to come back to it later !)

1 Like
5

Hello @EricRogerGarcia,

I did some more digging:

There may be something in there that can help with p5.js!

:)