PDA

For continued disscussion on this topic : Triangle Generator


mpjbrennan
07-01-2000, 02:15 PM
Someone asked for something like this on another site recently. I thought it was worth spreading around. The script takes two sides and the included angle of a triangle and computes the remaining sides and angles - then it draws the triangle. You can see it in action at http://www.patrick-brennan.com/javascript/triangle.html or just copy the script below.
(For Netscape 4+ users there is a version at http://www.patrick-brennan.com/javascript/triangle_ns.html - it runs somewhat slower.

patrick
------------------


<html>
<head>
<script language=javascript>
function validate(x){
if(isNaN(x)){alert("you must enter a number"); reset()}
if(x > 350){alert("values this large may exceed the screen dimensions")}
if(x < 10){alert("values this small will not display well"); reset()}
}
function reset(){
for (i = 0; i <= 2; i++){
document.forms[0].elements[i].value = ""
}}
var i
function compute(a, b, alpha){
if (a == "" || b == "" || alpha == ""){alert ("you must enter values for all variables"); reset(); return false}
if (alpha >= 180){alert ("this is an invalid value for a triangle"); reset(); return false}
var alphar = parseFloat(alpha)*2*Math.PI/360
var h = parseFloat(b)*Math.sin(alphar)
var x = Math.floor(parseFloat(h)/Math.tan(alphar))
var beta = Math.abs(Math.atan(h/(a - x)))
var c = h/Math.sin(beta)
var beta = beta*360/2/Math.PI
var gamma = 180 - beta - alpha
document.write("<body bgColor='#c6eff7'>")
document.write("<span style='font:10pt Arial; color:navy'>side 1 = " + a + " : side 2 = " + b + " : side 3 = " + parseInt(c) + "</span><br>")
document.write("<span style='font:10pt Arial; color:navy'>side 1/side 2 angle = " + alpha + " : side 1/side 3 angle = " + parseInt(beta) + " : side 2/side 3 angle = " + parseInt(gamma) + " (values rounded)</span>")

for (i = 0; i <= parseInt(a); i++){
document.write("<span style='position:absolute; color:red; top:" + 300 + "; left:" + (250 + i) + "'>.</span>")
}
for (i = 0; i <= parseInt(b); i++){
document.write("<span style='position:absolute; color:blue; top:" + (300 - i*parseInt(h)/parseInt(b)) + "; left:" + (250 + i*parseInt(x)/parseInt(b)) + "'>.</span>")
}
for (i = 0; i <= parseInt(c); i++){
document.write("<span style='position:absolute; color:green; top:" + (300 - i*parseInt(h)/parseInt(c)) + "; left:" + (250 + parseInt(a) - i*parseInt(a-x)/parseInt(c)) + "'>.</span>")
}
document.write("<span style='position:absolute; color:red; top:350; left:350'>side 1</span>")
document.write("<span style='position:absolute; color:blue; top:200; left:150'>side 2</span>")
document.write("<span style='position:absolute; color:green; top:200; left:500'>side 3</span>")
document.write("<form><input type=button value=return onClick='history.go(-1)'></form>")
document.close()
}
</script>

</head>
<body bgColor="#c6eff7">
<h1>Calculate the dimensions of a triangle</h1>
<br><br>
<form>
enter a value for side 1:*<input id=side1 type=text size=5 onChange="validate(this.value)">* *
enter a value for side 2:*<input id=side2 type=text size=5 onChange="validate(this.value)">* *
enter a value for the included angle:*<input id=angle1 type=text size=5 onChange="validate(this.value)"><br><br><br>
<input type=button value="Compute" onClick="compute(side1.value, side2.value, angle1.value)">* *
<input type=reset>
</form>
</body>
</html>

[Edited by mpjbrennan on 07-01-2000 at 11:58 AM]
Vincent Puglia
07-01-2000, 08:13 PM
Hi Pat,

Neat, but I have one question:

I entered 30, 40, 90degrees -- Should that be a 30/60/90 triangle? 3,4,5 (sides) ? The calc came up 36,53,90 -- I suspect it may be the parseFloat rather than the math lib, but I don't know.

would have tried a 45/45/90 but my last geometry was a looong time ago. :)

Any rate I liked the graphing. May end up using that. :)

Vinny
mpjbrennan
07-02-2000, 09:13 AM
Hi Vinny,

I just checked - if you enter 30, 40, 90 then the calc will give you 50 for the third side (good old 3:4:5) and 36 and 53 for the other angles. (the sides are in the top line, the angles in the bottom)

patrick
Vincent Puglia
07-02-2000, 02:26 PM
Hi Pat,

Yeah, that's my point. Shouldn't it be 30/60 = 90? not 36/53 = 89?
Which means either the parseFloat or one of the Math.lib funcs is giving you a rounded number. Your calcs look good; it's got to be one of the funcs :)
Thinking on it: it may be the math.lib funcs -- javascript doesn't do double precision -- hell, it's got problems with trailing zeros.

Vinny
mpjbrennan
07-02-2000, 05:47 PM
Hi Vinny,

You are right - the numbers are rounded and sometimes the total sum is only 179. (It should be 36.xxx and 53.xxx) As you say, Javascript isn't the best at handling floating point arithmetic. Try it with 200, 200 and 90 degrees - the rounding cancels out.

patrick
Vincent Puglia
07-02-2000, 06:27 PM
Hi Patrick,

Yeah, nice 45; but, there's gotta be something we could do. (hate seeing something that nice getting messed up because the language is too "stoopit" to add a.xx + b.xx;

Vinny
mpjbrennan
07-03-2000, 12:21 PM
OK Vinny - 10 minutes with Danny Goodman's Bible and it's sorted. In the line below the parseInt(beta) and parseInt(gamma) should be Math.round(beta), Math.round(gamma).
Interestingly, NS6 chokes on this script with side lengths above 150 - it just gives up drawing the third side!!

patrick
-------


document.write("<span style='font:10pt Arial; color:navy'>side 1/side 2 angle = " + alpha + " : side 1/side 3 angle = " + parseInt(beta) + " : side 2/side 3 angle = " + parseInt(gamma) + " (values rounded)</span>")