Free Template Tuesday #5 – Tumult Hype “Pythagorean”

Pythagorean Theorem Thumbnail ImageCalculating the Pythagorean Theorem is classic assignment of a high school Geometry class. The fifth installment of a free Hype template makes short work of that task. A2+B2=C2 is easy to remember, but it can tedious to figure out – square the two known numbers, add those numbers, and then find the square root. Even with a calculator, keeping track of all the variables can be tricky. But with this template, it’s simply a matter of moving two sliders.

Of course, this project involves JavaScript. That’s what’s nice about this template. Hype is not required. Much of the following code could be used in a standard HTML5 document.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

var sw = hypeDocument.getElementProperty(box, 'width');  // starting width of box location
var sh = hypeDocument.getElementProperty(box, 'height');  // starting height of box location
var sx = hypeDocument.getElementProperty(box, 'left') + (sw / 2);  // starting X-center of box location
var sy = hypeDocument.getElementProperty(box, 'top') + (sh / 2);  // starting Y-center of box location
 
document.addEventListener("input", calculate); // Run "Calculate" function when input sliders are moved
 
function calculate() {
var x = Number(hypeDocument.getElementById("x").value);
var y = Number(hypeDocument.getElementById("y").value);
var w = x * (sw/5);
var h = y * (sh/5);
hypeDocument.setElementProperty(box, 'width', w);
hypeDocument.setElementProperty(box, 'height', h);
hypeDocument.setElementProperty(box, 'left', sx - (w / 2));
hypeDocument.setElementProperty(box, 'top', sy - (h / 2));
hypeDocument.getElementById("xv").innerText = x;
hypeDocument.getElementById("yv").innerText = y;
hypeDocument.getElementById("result").innerText = Math.round(Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)) * 100) / 100;
hypeDocument.getElementById("box").innerHTML = "<svg height='" + h + "' width='" + w + "'> \
<polygon points='0,0 " + w + "," + h + " 0," + h + "' fill='rgba(0,128,255,0.5)' /> \
<line x1='" + 0 + "' y1='" + 0 + "' x2='" + w + "' y2='" + h + "' style='stroke: red; stroke-width: 2.5' /> \
</svg>";
}
 
calculate();

Much of this code is unnecessary to calculate the length of the hypotenuse. I wanted the box to change size and center itself, so that’s why there’s some extra code. If you don’t care about fancy animation, then look for the line with the word “Math”. (It’s line #19.) That’s where the Pythagorean Theorem was converted to JavaScript. The result is being rounded to the nearest hundredth.

To get the fancy resizing of the lines, the starting values of the box are recorded. Basic HTML elements have four sides. Now those sides can be rounded, but they can’t be converted into a triangle. So, the size and location of the “box” element is used as a reference to draw a triangle

The final result is actually something of a hybrid. The Hype project uses its elements, custom HTML elements, JavaScript, and SVG. This is not the only way to complete this project though, which is an opportunity to practice your skills. The hypotenuse could be drawn with the side of another HTML element. Positioning a rectangle to serve as a hypotenuse can be tricky though – especially if you want animation. It needs to be rotated and aligned.

Here’s the main lesson for Hype users. With Hype’s GET / SET API, a lot can be done with elements in the scene. And by using some basic math, some cool animation can be created.😎

But in addition to looking good, your projects can be functional. Perhaps it’s a little too functional. I imagine that the “Pythagorean” template would have been banned from my high school math class.

The “Pythagorean” template is also the topic of a YouTube video on Photics.TV