Jump to content
Search Community

Pythagoras' Theorem

mikel test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi @OSUblake,

 

Your Pythagoras tree has brought me back to school - to my first contact with this 'phenomenon'.
In fact, the visual appearance was more important to me than the underlying trigonometric theorem:

both the plain formula as well as the graphic representation have a very positive aspect.

 

Therefore - to evoke this - here the attempt of a small animation:

 

See the Pen dzmXvE by mikeK (@mikeK) on CodePen

 

Sure, I know you can calculate all necessary values and develop a function for random examples.
But I still need a couple of days ...

 

Kind regards 
Mikel

 

 

Off the record: while we call it Pythagoras' Theorem, it was also known by Indian, Greek, Chinese and Babylonian mathematicians plus a small group of OSU´s well before he lived !

 

 

  • Like 4
Link to comment
Share on other sites

Hey, that's pretty good!

 

The Pythagorean theorem is probably the formula I use the most for animations. I use it to find the distance between two points, like this.

var point1 = { x: 100, y: 100 };
var point2 = { x: 150, y: 300 };

var deltaX = point2.x - point1.x;
var deltaY = point2.y - point1.y;

var dist = Math.sqrt(deltaX * deltaX + deltaY * deltaY);

 

There's actually a new Math.hypot method that can simplify that a little in newer browsers.

var point1 = { x: 100, y: 100 };
var point2 = { x: 150, y: 300 };

var deltaX = point2.x - point1.x;
var deltaY = point2.y - point1.y;

var dist = Math.hypot(deltaX, deltaY);

 

  • Like 2
Link to comment
Share on other sites

Hi @mikel

 

I'm not sure what you're looking for with the sinAlpha. The angle between the two boxes forms a 90 degree angle. The easiest way to set this is up is to start with an angle somewhere in the range of 0-90 degrees.

 

But first, a quick overview of angles.  Pi is equal to 180 degrees, so...

Math.PI * 2; // => 360 degrees
Math.PI / 2; // => 90 degrees
Math.PI / 4; // => 45 degrees

 

To convert to radians or degrees, just multiply the angle by one of these constants.

var TO_RAD = Math.PI / 180;
var TO_DEG = 180 / Math.PI;

var degrees = 1.57 * TO_DEG; // => ~90
var radians = 90 * TO_RAD; // => ~1.57

 

To find the ending x and y coordinates for something that is rotated starting at 0,0

var size = 250;
var angle = 30 * TO_RAD;

var x = size * Math.cos(angle); // => ~216.5
var y = size * Math.sin(angle); // => ~125.9

 

And if you want to tween the rotation of something in radians, just add a "rad" string to the end.

// This will rotate the box 90 degrees
TweenLite.to(box, 1, {
  rotation: 1.57 + "rad"
});

 

 

Does this help with what you are trying to do? I kept your positioning and transform origins the same, requiring me to subtract 90 degrees from the box rotations.

 

See the Pen NvBOMB?editors=0010 by osublake (@osublake) on CodePen

 

  • Like 1
Link to comment
Share on other sites

Hi Blake,

 

My school time is long ago ...

 

What I meant is the calculation of this angle / rotation: 

 

  .to('.A',1,{rotation:-143.130, transformOrigin:"0% 0%"})

 

If you have the values of two sides, I can calculate all other values. For the angle / rotation I am missing the calculation formula.

 

var a = 150,
    b = 200,
    c = Math.sqrt(a*a + b*b),
    a02 = a*a/c,
    b02 = b*b/c,
    sinAlpha = a/c,
    hc = b*sinAlpha; 

 

Your pen is super as always ...

 

Kind regards

Mikel

Edited by mikel
Link to comment
Share on other sites

13 minutes ago, mikel said:

My school time is long ago ...

 

Too bad they don't teach you how to do stuff like this in school.

 

Everything you need is in the updateTree function. Just set the tree angle to something in between 0 and 90 degrees. I added how to get the height of your triangle.

 

See the Pen BdPGVe?editors=0010 by osublake (@osublake) on CodePen

 

  • Like 2
Link to comment
Share on other sites

1 hour ago, mikel said:

If you have the values of two sides, I can calculate all other values. For the angle / rotation I am missing the calculation formula.

 


var a = 150,
    b = 200,
    c = Math.sqrt(a*a + b*b),
    a02 = a*a/c,
    b02 = b*b/c,
    sinAlpha = a/c,
    hc = b*sinAlpha; 

 

 

I just noticed your edit. Here's the super secret formula to get the angle if you know the x and y components. Notice how deltaY is the first parameter.

var angleInRadians = Math.atan2(deltaY, deltaX);

 

So you can use a02 and b02 for deltaX, and hc for deltaY.

 

See the Pen NvBeJg?editors=0010 by osublake (@osublake) on CodePen

 

 

  • Like 2
Link to comment
Share on other sites

3 hours ago, mikel said:

That´s the point, the missing 'brick'.

 

More like bricks. We went full circle with this one. 

 

Just in case anybody is wondering about the Pythagoras tree mikel referenced in his first post, it's from this demo. To make it run as fast as it does, I used a little trick called memoization, which reduces the number of calculations from 2,048 down to 11.

 

See the Pen WEZGmG by osublake (@osublake) on CodePen

 

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...