From Wikipedia, the free encyclopedia
<?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>
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;
var svgDocument
function svg_onload(evt) {
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",ball);
}
function set_ball_color(color , ball) {
ball.setAttributeNS(null, "fill", color);
}
function start_animation(ball) {
//if ( window.svgDocument == null )
// svgDocument = evt.target.ownerDocument;
//ball = svgDocument.getElementById("cannon_ball");
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('ball')", frame_speed);
}
function advance(ball) {
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('ball')", 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(evt);">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>
