Free Template Tuesday #5 – Tumult Hype “Pythagorean”

pythagorean-theorem-stylizedCalculating 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
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 locaiton
 
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*20;
var h = y*20;
hypeDocument.setElementProperty(box, 'width', w, 0, 'linear');
hypeDocument.setElementProperty(box, 'height', h, 0, 'linear');
hypeDocument.setElementProperty(box, 'left', sx-(w/2), 0, 'linear');
hypeDocument.setElementProperty(box, 'top', sy-(h/2), 0, 'linear');
hypeDocument.getElementById("xt").innerHTML = x;
hypeDocument.getElementById("yt").innerHTML = y;
hypeDocument.getElementById("result").innerHTML = Math.round(Math.sqrt(Math.pow(x,2)+Math.pow(y,2))*100)/100;
hypeDocument.getElementById("box").innerHTML = "<svg height='" + h + "' width='" + w + "'><line x1='" + 0 + "' y1='" + 0 + "' x2='" + w + "' y2='" + h + "' style='stroke: red; stroke-width: 2' /></svg>";
}

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, I’m only using two of the sides. In Hype, I specified a border for the left side and the bottom side. By using only a single element, with the ID of “box”, I could quickly work with the values. This was only my preference though. There are many ways to draw lines in HTML.

The final result is actually something of a hybrid. It uses HTML elements and SVG. The hypotenuse was drawn with SVG. It’s not a perfect combination and that’s actually OK. This is where you can practice your skills. The whole triangle could be drawn in SVG. If you don’t want to use SVG, 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 some math, and 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.