User:TotoBaggins/cannonball


<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Physics model</title>
<script><![CDATA[

        var START_X = 10;
        var START_Y = 94;
        var ball;
        var x;
        var y;
        var frame_speed = 50;

        var launch_force;
        var launch_radian;
        var i;


        function svg_onload(evt) {
            var svgDocument
            if ( window.svgDocument == null )
                svgDocument = evt.target.ownerDocument;
            ball = svgDocument.getElementById("cannon_ball");
            ball.setAttributeNS(null, "cx", START_X);
            ball.setAttributeNS(null, "cy", START_Y);
            set_ball_color("red");
        }

        function set_ball_color(color) {
            ball.setAttributeNS(null, "fill", color);
        }

        function start_animation() {
            var launch_angle = document.getElementById("launch_angle").value;;
            launch_radian = (launch_angle)/180.0*Math.PI;

            launch_force = document.getElementById("launch_force").value;;

            x = START_X;
            y = START_Y;
            i = 0;
            ball.setAttributeNS(null, "cx", x);
            ball.setAttributeNS(null, "cy", y);
            setTimeout("advance()", frame_speed);
        }

        function advance() {
            i++
            var x_change = Math.cos(launch_radian)*launch_force;

            var y_change = Math.sin(launch_radian)*launch_force - i*9.81*(frame_speed/1000);

            y = y - (y_change * frame_speed/1000);

            if (y >= 95) {
                y = 95
                x_change = 0
            }
            else {
                x = x + (x_change * frame_speed/1000);
                ball.setAttributeNS(null, "cx", x);
                ball.setAttributeNS(null, "cy", y);
                setTimeout("advance()", frame_speed);
            }
        }
    ]]></script>
</head>
<body id="top">
<form METHOD="GET">
Ball Color:
<select name="ball_color" id="ball_color" onclick="set_ball_color(this.value)">
    <option selected="selected">red</option>
    <option>yellow</option>
    <option>blue</option>
</select>
<br/>
Launch angle: <input type="text" id="launch_angle" value="45"/>
<br/>
Launch force: <input type="text" id="launch_force" value="55"/>
<br/>
<button type="button" onclick="start_animation();">Fire!</button>
<hr/>
<svg id="svg_doc" onload="svg_onload(evt)" xmlns="http://www.w3.org/2000/svg">
    <circle id="cannon_ball" r="5px"/>
    <line x1="0px" y1="100px" x2="100%" y2="100px" style="stroke:black; stroke-width:1px;"/>
</svg>
</form>
</body>
</html>