User:TotoBaggins/cannonball
Appearance
<?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>