Luftwiderstand

Programm-Code für Wurf mit Luftwiderstand

 ohne Bahnkurve

<!DOCTYPE html>

<html>

<head>

    <title>Bewegung</title>

    <style>

      * { padding: 0; margin: 0; }

     canvas { background: #9ee; display: block; margin: 0 auto; }

    </style>

</head>

<body>

<canvas id="myCanvas"  width="800" height="600"></canvas>

<script>

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

var ballRadius = 10;

var x = 0;

var y = canvas.height;

var vx=10;

var vy=-20;

var t=0;

var g=10;

var dt=0.01;

var dx=0;

var dy=0;

var ax=0;

var ay=0;

var dvx=0;

var dvy=0;

m=1;

var k=0.2; 

function drawBall() {

    ctx.beginPath();

    ctx.arc(x, y, ballRadius, 0, Math.PI*2);

    ctx.fillStyle = "#0095DD";

    ctx.fill();

    ctx.closePath();

}

function draw() {

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    drawBall();

    ax=-k*Math.sqrt(vx*vx+vy*vy)*vx/m;

    ay=g-k*Math.sqrt(vx*vx+vy*vy)*vy/m;

    dvx=ax*dt;

    dvy=ay*dt;

    vx=vx+dvx;

    vy=vy+dvy;

    dx=vx*dt;

    dy=vy*dt;

    dx=100*dx;

    dy=100*dy;

    x =x+dx;

    y =y+dy;

}

setInterval(draw, 10);

</script>

</body>

mit Bahnkurve

<!DOCTYPE html>

<html>

<head>

    <title>Bewegung</title>

    <style>

      * { padding: 0; margin: 0; }

     canvas { background: #9ee; display: block; margin: 0 auto; }

    </style>

<script>

function draw() {

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

ctx.clearRect(0, 0, canvas.width, canvas.height); 

var x = 0;

var y = canvas.height;

var vx=10;

var vy=-10;

var t=0;

var g=10;

var dt=0.01;

var dx=0;

var dy=0;

var ax=0;

var ay=0;

var dvx=0;

var dvy=0;

var m=0.2;

var k=0.2;


    ctx.moveTo(x,y);


    while (y<=canvas.height){

    ax=-k*Math.sqrt(vx*vx+vy*vy)*vx/m;

    ay=g-k*Math.sqrt(vx*vx+vy*vy)*vy/m;

    dvx=ax*dt;

    dvy=ay*dt;

    vx=vx+dvx;

    vy=vy+dvy;

    dx=vx*dt;

    dy=vy*dt;

    dx=100*dx;

    dy=100*dy;

    x =x+dx;

    y =y+dy;

    ctx.lineTo(x,y);

    ctx.stroke();

    }

}


</script>

</head>

<body onload="draw();">

<canvas id="myCanvas"  width="800" height="600"></canvas>


</body>

</html>