[Résolu] Simulation balle rebondissante perte d'énergie par floblokgaming - page 1

Bonjour,

J'ai créer une simulation d'une balle rebondissante en JS + HTML et j'allais introduire un coefficient de restitution pour que la balle perde de l'énergie, lorsque j'ai remarquer que même sans ce coefficient elle en perdait, et j'aimerais comprendre pourquoi.

Voila le code de chaque un de mes fichiers :

index.html

(j'ai pas trouver HTML dans la liste des langages donc j'ai mis XHTML, je sais pas si la coloration syntaxique marche correctement)

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Balle Rebondissante</title>
</head>

<body>
    <canvas id="screen"></canvas>

    <script src="script.js"></script>
</body>

</html>

script.js

var canvas = document.getElementById("screen"),
    context = canvas.getContext("2d"),
    width = window.innerWidth,
    height = window.innerHeight,
    ratio = window.devicePixelRatio;

canvas.style.height = height + "px";
canvas.height = height * ratio;
canvas.style.width = width + "px";
canvas.width = width * ratio;
context.scale(ratio, ratio);

var dt = 1,
    g = 10,
    r = 50

var ball = {
    x: r + 30,
    y: r + 30,
    rad: r,
    mass: 100,
    v: {
        x: 5,
        y: 0
    }
}

function ballApplyForce(F) {
    ball.v.x += F.x / ball.mass * dt
    ball.v.y += F.y / ball.mass * dt
}

function ballUpdate() {
    ballApplyForce({x : 0, y : g})
    ball.x += ball.v.x * dt
    ball.y += ball.v.y * dt

    if ( (ball.x + ball.rad >= width) || (ball.x - ball.rad <= 0) ) {
        ball.v.x *= -1
    }
    if ( (ball.y + ball.rad >= height) || (ball.y - ball.rad <= 0) ) {
        ball.v.y *= -1
    }
}

function draw() {
    context.clearRect(0, 0, width, height)

    context.beginPath()
    context.arc(ball.x, ball.y, ball.rad, 0, 2 * Math.PI)
    context.strokeStyle = "black"
    context.stroke()
}
 
function animate() {
    ballUpdate()
    draw()
    requestAnimationFrame(animate)
}

animate()

style.css

canvas {
    border : 1px solid black;
}

body {
    margin : 0;
    overflow : hidden;
}

Merci d'avance

Simulation balle rebondissante perte d'énergie

Simulation balle rebondissante perte d'énergie

Supprimer

Modérer

Signaler le message aux modérateurs