Challenge
Challenge
Let’s wake up a bit this community with a challenge open to everyone (no prize sorry). This is a mathematical challenge to make a script, however you can also try if you don’t know scripting, just tell the steps or write the formulas.
This task is something I’ve been thinking for a lot myself, but I couldn’t get the right answer until now. This is the challenge in case you want to try, not very difficult, easy when you find the answer, but really tricky specially if you take the wrong way (and I took a lot of wrong ways 😛 )
As you probably know, you can get geometry data from items: size, scale, (skew), rotation and position.
However the position you get is the one of the top left corner of the minimum box surrounding it.
What if you want to know the center of the object?
(Note: let’s assume skewX=skewY=0 to avoid that strange parameter)
Task: Write a function with:
Input: an item (or their geometry data as said before)
Output: a vector [x,y] with the position of the center of the object.
You can use the Math functions (cos, sin, tan, acos, asin, atan, abs, sqrt, pow, … )
The video shows how it should behave in action. The cross item is the input, the circle is the output.
(About the ending part: all questions will be answered at the end of the month)
Submit your answers here in comments. You won’t win anything sorry, just the fact of solving this tricky challenge 🙂 I’ll publish my own solution when necessary, I expect to do it in one week or less. I want first to see others.
Also, keep in mind that this is really useful, it doesn’t only tell you the center, also the size of the whole item. Perhaps in the future Pierre will be able to implement the getBoundingBox in items, but from now we have this.
If you found this too easy, this is an extra variation (that I personally couldn’t resolve, so I can’t provide the right answer): modify it to work with skew too.
]]>
D5 Creation
< ![CDATA[
function center(item)
{
var r=item.getRotation()*Math.PI/180;
var sin=Math.abs(Math.sin(r));
var cos=Math.abs(Math.cos(r));
var w=item.getWidth()*item.getScaleX();
var h=item.getHeight()*item.getScaleY();
return [item.getPositionX()+(w*cos+h*sin)/2,item.getPositionY()+(h*cos+w*sin)/2];
}
]]>
< ![CDATA[
Lukas Morawietz correct! (I almost don’t recognize you with the new photo 😉
Will you try the skew one? I can’t :(
]]>
< ![CDATA[
I tried it now, and it’s working. I didn’t had it in a function first, that’s where the mistakes came from.
]]>
< ![CDATA[
Skew is gonna be hard. For me it starts with understanding what skew is exactly 😉 But I’ll have a look at it.
]]>
< ![CDATA[
Skew seems to change the position get from getPosition. I could make it working without rotation. But rotation+skew….
Hey, now you can update your scripts with this to make them available for all rotations right?
]]>
< ![CDATA[
First insight to skew: there is no skewY, it’s all translated to skewX
]]>
< ![CDATA[
TrianguloY this doesn’t help for my scripts. The problem is, changing the scale of a rotated item affects width and height, but I need them seperated
]]>
< ![CDATA[
Can’t you make the opposite function?
If you want to change the horizontal scale of the rotated item calculate how much you need to change the horizontal/vertical of the no-rotated and apply them.
Ok, it’s worst than I thought but you can try.
]]>
< ![CDATA[
TrianguloY imagine a rectangle rotated by 45 degree. Now apply my bulldoze animation to it. It turns into a parallelogram, for which I would need skew to create it. And I’m still not familiar with skew. I don’t say it’s impossible, but it’s hard.
]]>
< ![CDATA[
Lukas Morawietz oh, it’s true you are right, didn’t notice sorry. If I discover something I’ll tell you, but I guess you’ll find the solution faster 😉
]]>
< ![CDATA[
TrianguloY Lukas MorawietzÂ
Seems you two are having some fun 🙂
Like the idea of challenges, kudos.
]]>
< ![CDATA[
Skew x seems to work pretty linearly, we could consider just the scaling, knowing that from initial scale ‘p1’, the final scale ‘p2’, after skew x = ‘t’ is equal to ‘p2’=’p1’+’t’
I can’t understand how skew y becomes a combo of skew x + rotation, though.
]]>