Question about scaling and rotating at the same time

[PizzaLYJ]

Hi everyone,

When I let a Canvas2D primitive to scaling and rotating at the same time, the result of primitive performing is unexpected for me.

Like the below code (http://babylonjs-playground.com/#OWCCR#27):

    let rectGreen = new BABYLON.Rectangle2D({ 
        parent: canvas2d, 
        id: "rectGreen", 
        width: 100, 
        height: 100,
        rotation: Math.PI * 1 / 4,
        marginAlignment: "h: center, v: center",
        fill: BABYLON.Canvas2D.GetSolidColorBrush(new BABYLON.Color4(0, 1, 0, 1))
    });

    let rectRed = new BABYLON.Rectangle2D({ 
        parent: canvas2d, 
        id: "rectRed", 
        width: 200, 
        height: 200,
        scale: 0.5,
        rotation: Math.PI * 1 / 4,
        marginAlignment: "h: center, v: center",
        fill: BABYLON.Canvas2D.GetSolidColorBrush(new BABYLON.Color4(1, 0, 0, 1))
    });

I want rectRed to perform like rectGreen.

What concept of computer graphics I am miss?

Thanks.

 

[GameMonetize]

Ping @Nockawa for this one

[Nockawa]

On 12/17/2016 at 6:45 AM, PizzaLYJ said:

What concept of computer graphics I am miss?

Thanks.

 

Hmmm, I think the concept you miss is: there's a bug!

I'm quite surprise, because this is a very popular concept, at least for me!

Joking aside, I've made few tests and the only explanation I can think of is there's a bug because I apply scaling after rotation while computing the matrix. Because your red red is rotated like PI/8 with a 1/2 Scale instead of PI/4. I've tried with a scale of 1/10 and looks like the same pattern is reproduced...

I will fix the bug tomorrow and will let you know about it when it's done.

[Nockawa]

Ok, the bug is fixed.

But please not that positioning/alignment doesn't take into consideration the scale when the computing is done, so your 0.5 scaled rect won't be perfectly centered.

I wait of DeltaKosh's point of view on something and I release a new preview version, I will let you know.

[Wingnut]

Thx N!  I hope you are feeling better now.  You were sick, right?  Good to see you alive.    Don't get sick any more, okay?

[Nockawa]

1 minute ago, Wingnut said:

Thx N!  I hope you are feeling better now.  You were sick, right?  Good to see you alive. 

hello mister, yes, I wasn't very well, I try to get back a little, but I must be cautious. thank you for your concern!

[Nockawa]

 

 

@PizzaLYJ the issue is now solved and you PG is working, just hard refresh your browser. 

[Wingnut]

@Nockawa - Shouldn't rectRed and rectGreen be same size? 

200x200 scaled 0.5  == 100x100 scaled 1.0, yes?  *shrug* 

[MasterK]

yeah. the result is wrong now.

[Nockawa]

23 hours ago, Wingnut said:

@Nockawa - Shouldn't rectRed and rectGreen be same size? 

200x200 scaled 0.5  == 100x100 scaled 1.0, yes?  *shrug* 

Damn....I was so focused on the rotation I didn't even noticed...scaling is applied twice for a reason I already know and I now understand better why the code were the way it was... :'(
I've just fixed it, you will notice (when the PG will be updated, for now only the preview build is updated) that the red rect's position is not the same as the green's one, it's because Positioning/Alignment is not considering scale when the computation is made, so the red rectangle is considered to be 200 wide when centered, that's why it's 100px translated to the left & bottom.

I don't know if considering scaling on positioning/alignement would be a good thing, I couldn't make a clear decision so I used the easiest way for me to code, which is the behavior you have right now.

@Wingnut thank you for noticing and reporting!

[PizzaLYJ]

Hi @Nockawa

Thanks to your contribution.

Excuse me, I am not native English speaker, so does you mean that you will pending this issue?

Because the latest version will cause the behavior of scale unexpected.(http://babylonjs-playground.com/#OWCCR#28)

[Nabroski]

@Nockawa i don't look at github how you do it, but in css always the last transformation is valid.

@PizzaLYJ
make a group https://doc.babylonjs.com/overviews/Canvas2D_Overview_Architecture#group2d

will make you life easier

native (pseudo) code
<canvas><div id="one"><div id="two>content</div></div> </canvas> document.getElementById('one').children[0] will give you div two

transformation vec2(1,1) div one
transfromation vec2(0,1) div two

the vec2(0,1) is valid for both elements.

[Nockawa]

It seems that the PG is not updated because I have an expected behavior locally with the latest code. 

Only @Deltakosh can update the PG and he's a busy man currently. (well, I just remember is more than busy: he's on holidays with limited internet access, that's why the PG is not updated yet).

[Nockawa]

@PizzaLYJ the PG is updated, just CTRL-F5 to reload all the files. it should be ok now.

[PizzaLYJ]

@Nockawa Thanks to your contribution. Now it works perfectly.

@Nabroski Thanks to your advice. I will learn to use it.