How do I scale something based on angle?

I have a sprite that I want to scale based on what angle it's rotated at.

If it's at angle 90 or 270 i want to scale the height. If it's at angle 0 or 180 i want to scale the the width in a smooth transition between the angles.

I'm trying to create something like this. I wan't to sqash something only in the Y axis, but I'm not getting the desired effekt. Maybe I can't do it directly with C2 events, so maybe there is a plugin to do something like this.

I'm also wondering how i can make an elliptical orbit. (lower part of the image) I can get a round orbit using sin/cos but how to make it elliptical?

An ellipse orbit could look like this:

X= 100*cos(t)+centerx

Y= 50*sin(t)+centery

And actually scaling with angle would be similar

Width=32*abs(cos(angle))+32

Height=16*abs(sin(angle))+16

Edit:

Looking at your picture it may need to be drawn skewed as just setting the width/height may not cut it.

You could use the paster object for that. 1st paste everything to the paster in a normal circle, then set the paster height to half.

R0J0hound Will that scaling create the skew that I'm after in the 45 degree angles?

You have to use the paster object to do skew

R0J0hound the scale seems to work fine, although it wobbles as the angle goes around, any way to counter that? for a more smooth scaling between the angles? It seems like at 0, 90, 180, 270 it's dips in a bit too much.

https://dl.dropboxusercontent.com/u/20560446/Scirra/rotatescale.capx

Hmm... You're right.

If you just set the width to 200*sqrt(0.5*sin(Self.Angle)^2+cos(self.angle)^2) and leave the height alone it works.

200*cos(self.angle) is the horizontal

0.5*200*sin(self.angle) is half the vertical

That makes a right triangle and the last side is what we want the width to be. We can then find it with the Pythagorean theorem:

a^2+b^2=c^2

Hmm... You're right.

If you just set the width to 200*sqrt(0.5*sin(Self.Angle)^2+cos(self.angle)^2) and leave the height alone it works.

Fantastic. This one seemed to work as expected. But still need to apply something to the height as well, as the height need to deform as well. Maybe it can be used for height as well, bu reverse the cos&sin and devide the whole string by 2?

R0J0hound this one was a tricky one. You're on the right track, but we're not really there. The deformation applied by this one is too small and changing (0.5*sin(Self.Angle) to (0.25*sin(Self.Angle) we're back where we started. I can't seem to multiply it either to get a 2:1 ratio.

Edit: As I'm developing for mobile, I rather not use any webGl effects.

I tried the scale effect from this thread, but I would prefer to do something as close as possible in code.

https://www.scirra.com/forum/nearly-daily-effects-by-somebody-neat-things-big-gifs_t123401

I wish layers had independent X & Y scale. That would be soo much easier. Maybe that's something Ashley can take care of in a coming update?

Hey I worked on it a bit more but didn't post the results before I left the house.

My equation was a tad off. Ex 0.5*sin(angle)^2 needs to be (0.5*sin(angle)^2.

Other than that the sprite's angle needs to be corrected to eliminate the bounce.

Set angle to angle(0,0,cos(ang),0.5*sin(ang))

The only caveat is the Sprite won't be pointing at the mouse anymore. I was working on the math to just find the intersection between the ellipse and the line to the mouse but I didn't finish.

If you want indavidual X y scaling of layers just use the paster object. It doesn't need webgl.

Thanks R0J0hound, I'll take a look at it. Just downloaded paster and the example, but a bit clueless where to start. Worth a try to see how it performs on mobile with similar effect. Do you have any other examples lying around? To scale the layer with paster?

It's more complicated, and I can't offer the math off the top of my head, but you can simulate a skew with blending modes to create a mask for your arrow (which would actually be a rectangle, with two masks on top of it).

Just in case you were interested in a method without plugins.

I don't think I have an example, but the main feature to use is the paste action. The paste action will draw another object onto itself where the objects overlap.

So basically place a paster object on the layout.

Change it's hotspot to centered in the properties panel.

Position it over the triangle so that no matter which angle it faces the paster will still cover the arrow completely.

Remember the height of the paster. For this example let's say it's 200.

In events do this:

Every tick

--- paster: clear to (0,0,0,0)

--- paster: set height to 200

--- Sprite: set visible

--- paster: paste Sprite

--- paster: set invisible

--- paster: set height to 200/2

And that's about it. I hid the triangle Sprite after drawing it to the paster since we don't want it to draw again.

Thanks R0J0hound I will try that as well.

I managed to do it with CSS in C2 as well. I can't believe something so simple in CSS can be so hard to do in C2. Everything I need is a "RotateX" to get the squashed effect that I want. Can anyone with any deeper knowledge explain to me why these kind of transforms are not already built in to C2?

Textured button, rotated with CSS in C2:

Capx: If anyone want's to play around with it.

https://dl.dropboxusercontent.com/u/20560446/Scirra/3drotate.capx

Ashley Is there any possibility that these kind of transforms will be available in any future update of C2, on regular objects such as sprites, Spritefonts and even Layers, etc? It would be a great addition and very useful.

Here's a the idea I mentioned previously.

Although I still lack the maths to get the edges at the correct angle... >_>

https://www.dropbox.com/s/fswym37e307i2 ... .capx?dl=0