Skip to main content
Formatação e remoção de ruídos de comunicação.
Fonte Link
Augusto Vasques
  • 18,8mil
  • 10
  • 31
  • 62

Olá, eu estouEstou fazendo uma simulação da gravidade em javascriptjavascript, até ai tudo bem, o problema é quando eu faço uma orbita ao redor de um ponto, eu quero desenhá-la na tela, porem eu não consigo fazer a curvatura correta, deixei um exemplo da curva incorreta entre o eixo Y+Y+ e X+X+. Sei
Sei que para fazer curva no canvas usa-se o "quadraticCurveTo(cpx, cpy, x, y)quadraticCurveTo(cpx, cpy, x, y)" meu problema é o valor "cpx"cpx e "cpy"cpy dele, vou deixar o codigo aqui em baixo. (função drawOrbit)

Olá, eu estou fazendo uma simulação da gravidade em javascript, até ai tudo bem, o problema é quando eu faço uma orbita ao redor de um ponto, eu quero desenhá-la na tela, porem eu não consigo fazer a curvatura correta, deixei um exemplo da curva incorreta entre o eixo Y+ e X+. Sei que para fazer curva no canvas usa-se o "quadraticCurveTo(cpx, cpy, x, y)" meu problema é o valor "cpx" e "cpy" dele, vou deixar o codigo aqui em baixo. (função drawOrbit)

Estou fazendo uma simulação da gravidade em javascript, até ai tudo bem, o problema é quando eu faço uma orbita ao redor de um ponto, eu quero desenhá-la na tela, porem eu não consigo fazer a curvatura correta, deixei um exemplo da curva incorreta entre o eixo Y+ e X+.
Sei que para fazer curva no canvas usa-se o quadraticCurveTo(cpx, cpy, x, y) meu problema é o valor cpx e cpy dele, vou deixar o codigo aqui em baixo. (função drawOrbit)

Tweeted twitter.com/StackOverflowPT/status/1551990745963315203
removeu 510 caracteres do conteúdo
Fonte Link
Ricardo Pontual
  • 23,2mil
  • 2
  • 33
  • 64

Olá, eu estou fazendo uma simulação da gravidade em javascript atejavascript, até ai tudo bem, o problema é quando eu faço uma orbita ao redor de um ponto, eu quero desenhá-la na tela, porem eu não consigo fazer a curvatura correta, deixei um exemplo da curva incorreta entre o eixo Y+ e X+. Sei que para fazer curva no canvas usa-se o "quadraticCurveTo(cpx, cpy, x, y)" meu problema é o valor "cpx" e "cpy" dele, vou deixar o codigo aqui em baixo. (função -> drawOrbit)

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <canvas id="canvas"></canvas>
    <script src="app.js"></script>
</body>
</html>

CSS:

* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
}

canvas {
    display: block;
}

JS:

const planeta = new Image();   
planeta.src = 'https://cdn.pixabay.com/photo/2018/03/11/03/22/planet-earth-3215887_960_720.png';
const fundo = new Image();   
fundo.src = 'https://media.gazetadopovo.com.br/2021/06/19124411/universo-960x540.jpg';

let mousemove = null;
let play = true;

let frames = 0;
let startTime = performance.now();
let FPSNormal = 0;

function calculateFPSNormal(context) {
    let t = performance.now();
    let dt = t - startTime;
  FPSNormal = frames * 1000 / dt;
  frames = 0;
  startTime = t;
    frames++;

  context.beginPath();
  context.fillText(parseInt(FPSNormal), 0, 20);
  context.closePath();
  context.stroke();
}

const balls = [
  // {
  //   posX: 0,
  //   posY: 80,
  //   velocityX: 5,
  //   velocityY: 0,
  //   accelerationX: 0,
  //   accelerationY: 0,
  //   mass: 1,
  //   orbitPosX: [null, null, null, null],
  //   orbitPosY: [null, null, null, null]
  // },
  // {
  //   posX: 0,
  //   posY: 100,
  //   velocityX: 5,
  //   velocityY: 0,
  //   accelerationX: 0,
  //   accelerationY: 0,
  //   mass: 1,
  //   orbitPosX: [null, null, null, null],
  //   orbitPosY: [null, null, null, null]
  // },
  {
    posX: 0,
    posY: 120,
    velocityX: 5,
    velocityY: 0,
    accelerationX: 0,
    accelerationY: 0,
    mass: 1,
    orbitPosX: [null, null, null, null],
    orbitPosY: [null, null, null, null]
  }
];

(function() {
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');

    window.addEventListener('resize', resizeCanvas, false);
    
    window.addEventListener('mousemove', e => {
        mousemove = e;
    });

    document.addEventListener("keydown", function(event) {
      if(event.code === 'Space') {
        play = !play;
      }
    })

    resizeCanvas(canvas, context);

    loop(canvas, context);

  })();

  function loop(canvas, context) {

    const width = context.canvas.width / 2;
    const height = context.canvas.height / 2;

    window.requestAnimationFrame(function() {
        loop(canvas, context);
    });
    
    context.clearRect(0, 0, width, height);

    resizeCanvas(canvas, context);
    if (mousemove !== null) {
      context.font = "20px Arial";
      context.fillText("X: " + (mousemove.clientX - width) + " Y: " + (height - mousemove.clientY), mousemove.clientX + 20, mousemove.clientY);
    }
    calculateFPSNormal(context);
    
  }

  function resizeCanvas(canvas, context) {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    callDrawings(context); 
  }

  function callDrawings(context) {
    drawBackground(context);
    drawColumns(context);
    drawNumbers(context);
    drawImages(context);
    drawArcs(context);
  }

  function drawBackground(context) {
    const width = context.canvas.width;
    const height = context.canvas.height;

    context.beginPath();
    context.drawImage(fundo, 0, 0, width, height);
    context.closePath();
    context.stroke();
  }

  function drawImages(context) {
    const width = context.canvas.width / 2;
    const height = context.canvas.height / 2;

    context.beginPath();
    context.drawImage(planeta, width - 50, height - 50, 100, 100)
    context.closePath();
    context.stroke();
  }

  function formatBallInfo(context, ball, width, height, distance) {
    let text = "";
    text += "posX: " + ball.posX + "\n";
    text += "posY: " + ball.posY + "\n";
    text += "velocityX: " + ball.velocityX + "\n";
    text += "velocityY: " + ball.velocityY + "\n";
    text += "accelerationX: " + ball.accelerationX + "\n";
    text += "accelerationY: " + ball.accelerationY + "\n";
    text += "distance: " + distance+ "\n"
    text += "mass: " + ball.mass;

    const lineheight = 15;
    const lines = text.split('\n');

    context.beginPath();
    for (let i = 0; i < lines.length; i++) {
      context.fillText(lines[i], width + ball.posX + 30, height - ball.posY + (i*lineheight));
    }
    context.closePath();
    context.stroke();
  }

  function drawOrbit(context, ball) {

    const ballSize = 5;
    const width = context.canvas.width / 2;
    const height = context.canvas.height / 2;

    if(ball.posY > ball.orbitPosY[0]) {
      ball.orbitPosY[0] = ball.posY;
      ball.orbitPosY[1] = ball.posX;
    }

    if(ball.posY < ball.orbitPosY[2]) {
      ball.orbitPosY[2] = ball.posY;
      ball.orbitPosY[3] = ball.posX;
    }

    if(ball.posX > ball.orbitPosX[0]) {
      ball.orbitPosX[0] = ball.posX
      ball.orbitPosX[1] = ball.posY
    }

    if(ball.posX < ball.orbitPosX[2]) {
      ball.orbitPosX[2] = ball.posX
      ball.orbitPosX[3] = ball.posY
    }

    if(ball.orbitPosY.every(element => element !== null) && ball.orbitPosX.every(element => element !== null)) {

      context.beginPath();
      
      context.moveTo(width - ball.orbitPosY[1], height - ball.orbitPosY[0]);
      // context.lineTo(width + ball.orbitPosX[0], height - ball.orbitPosX[1]);
      context.quadraticCurveTo(width + ball.orbitPosX[0], height + ball.orbitPosX[1], width + ball.orbitPosX[0], height - ball.orbitPosX[1])

      context.stroke()

      context.moveTo(width - ball.orbitPosY[3], height - ball.orbitPosY[2]);
      context.lineTo(width + ball.orbitPosX[0], height - ball.orbitPosX[1]);
      context.stroke();

      context.moveTo(width - ball.orbitPosY[3], height - ball.orbitPosY[2]);
      context.lineTo(width + ball.orbitPosX[2], height - ball.orbitPosX[3]);
      context.stroke();

      context.moveTo(width - ball.orbitPosY[1], height - ball.orbitPosY[0]);
      context.lineTo(width + ball.orbitPosX[2], height - ball.orbitPosX[3]);
      context.stroke();

      context.closePath();
    }
     
  }
  
  function drawArcs(context) {

    const width = context.canvas.width / 2;
    const height = context.canvas.height / 2;

    balls.forEach(ball => {
        context.beginPath();
        context.fillStyle = "white";
        context.arc(width + ball.posX, height - ball.posY, 5, 0, 2 * Math.PI);
        context.fill();
        context.closePath();

        drawOrbit(context, ball);
        
        let distance = Math.sqrt(Math.pow(ball.posX, 2) + Math.pow(ball.posY, 2));

        if(play) {
          let cos = ball.posX / distance;
          let sin = ball.posY / distance;
  
          let forceX = ball.mass * gravitationalForce(ball.mass, 2000, distance) * cos;
          let forceY = ball.mass * gravitationalForce(ball.mass, 2000, distance) * sin;
  
          ball.accelerationX = forceX;
          ball.accelerationY = forceY;
  
          ball.velocityX = ball.velocityX + ball.accelerationX;
          ball.velocityY = ball.velocityY + ball.accelerationY;

          ball.posX = ball.posX - ball.velocityX;
          ball.posY = ball.posY - ball.velocityY;

        }

        formatBallInfo(context, ball, width, height, distance);
        
    });
     
  }

  function drawColumns(context) {

    const width = context.canvas.width;
    const height = context.canvas.height;

    context.beginPath();
    context.strokeStyle = "white";

    context.moveTo(width / 2, 0);
    context.lineTo(width / 2, width);

    context.moveTo(width, height / 2);
    context.lineTo(0, height / 2);

    context.lineWidth = 2;

    context.closePath();

    context.stroke();
  }

  function drawNumbers(context) {

    context.beginPath();
    context.fillStyle = "white";
    const width = context.canvas.width;
    const height = context.canvas.height;
    const widthDividedByTwo = context.canvas.width / 2;
    const heightDividedByTwo = context.canvas.height / 2;
    const spacing = 30;

    // right
    counter = 0;
    while(true) {
        counter += 1;
        if(widthDividedByTwo + counter * spacing < width) {
            context.fillText(counter, widthDividedByTwo + counter * spacing, heightDividedByTwo + 30);
        } else {
            break;
        }
    }

    // left
    counter = 0;
    while(true) {
        counter += 1;
        if(widthDividedByTwo - counter * spacing > 0) {
            context.fillText("-"+counter, widthDividedByTwo - counter * spacing, heightDividedByTwo + 30);
        } else {
            break;
        }
    }

    //down
    counter = 0;
    while(true) {
        counter += 1;
        if(heightDividedByTwo + counter * spacing < height) {
            context.fillText("-"+counter, widthDividedByTwo - 30, heightDividedByTwo + counter * spacing);
        } else {
            break;
        }
    }

    //up
    counter = 0;
    while(true) {
        counter += 1;
        if(heightDividedByTwo - counter * spacing > 0) {
            context.fillText(counter, widthDividedByTwo - 30, heightDividedByTwo - counter * spacing);
        } else {
            break;
        }
    }

    context.closePath();
    context.stroke();

  }

  function gravitationalForce(m1, m2, d) {
    const f = m1 * m2 / (d * d);
    return f;
  }
" meu problema é o valor "cpx" e "cpy" dele, vou deixar o codigo aqui em baixo. (função drawOrbit)

const planeta = new Image();   
planeta.src = 'https://cdn.pixabay.com/photo/2018/03/11/03/22/planet-earth-3215887_960_720.png';
const fundo = new Image();   
fundo.src = 'https://media.gazetadopovo.com.br/2021/06/19124411/universo-960x540.jpg';

let mousemove = null;
let play = true;

let frames = 0;
let startTime = performance.now();
let FPSNormal = 0;

function calculateFPSNormal(context) {
  let t = performance.now();
  let dt = t - startTime;
  FPSNormal = frames * 1000 / dt;
  frames = 0;
  startTime = t;
  frames++;

  context.beginPath();
  context.fillText(parseInt(FPSNormal), 0, 20);
  context.closePath();
  context.stroke();
}

const balls = [
  // {
  //   posX: 0,
  //   posY: 80,
  //   velocityX: 5,
  //   velocityY: 0,
  //   accelerationX: 0,
  //   accelerationY: 0,
  //   mass: 1,
  //   orbitPosX: [null, null, null, null],
  //   orbitPosY: [null, null, null, null]
  // },
  // {
  //   posX: 0,
  //   posY: 100,
  //   velocityX: 5,
  //   velocityY: 0,
  //   accelerationX: 0,
  //   accelerationY: 0,
  //   mass: 1,
  //   orbitPosX: [null, null, null, null],
  //   orbitPosY: [null, null, null, null]
  // },
  {
    posX: 0,
    posY: 120,
    velocityX: 5,
    velocityY: 0,
    accelerationX: 0,
    accelerationY: 0,
    mass: 1,
    orbitPosX: [null, null, null, null],
    orbitPosY: [null, null, null, null]
  }
];

(function() {
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');

    window.addEventListener('resize', resizeCanvas, false);

    window.addEventListener('mousemove', e => {
        mousemove = e;
    });

    document.addEventListener("keydown", function(event) {
      if(event.code === 'Space') {
        play = !play;
      }
    })

    resizeCanvas(canvas, context);

    loop(canvas, context);

  })();

  function loop(canvas, context) {

    const width = context.canvas.width / 2;
    const height = context.canvas.height / 2;

    window.requestAnimationFrame(function() {
        loop(canvas, context);
    });

    context.clearRect(0, 0, width, height);

    resizeCanvas(canvas, context);
    if (mousemove !== null) {
      context.font = "20px Arial";
      context.fillText("X: " + (mousemove.clientX - width) + " Y: " + (height - mousemove.clientY), mousemove.clientX + 20, mousemove.clientY);
    }
    calculateFPSNormal(context);

  }

  function resizeCanvas(canvas, context) {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    callDrawings(context); 
  }

  function callDrawings(context) {
    drawBackground(context);
    drawColumns(context);
    drawNumbers(context);
    drawImages(context);
    drawArcs(context);
  }

  function drawBackground(context) {
    const width = context.canvas.width;
    const height = context.canvas.height;

    context.beginPath();
    context.drawImage(fundo, 0, 0, width, height);
    context.closePath();
    context.stroke();
  }

  function drawImages(context) {
    const width = context.canvas.width / 2;
    const height = context.canvas.height / 2;

    context.beginPath();
    context.drawImage(planeta, width - 50, height - 50, 100, 100)
    context.closePath();
    context.stroke();
  }

  function formatBallInfo(context, ball, width, height, distance) {
    let text = "";
    text += "posX: " + ball.posX + "\n";
    text += "posY: " + ball.posY + "\n";
    text += "velocityX: " + ball.velocityX + "\n";
    text += "velocityY: " + ball.velocityY + "\n";
    text += "accelerationX: " + ball.accelerationX + "\n";
    text += "accelerationY: " + ball.accelerationY + "\n";
    text += "distance: " + distance+ "\n"
    text += "mass: " + ball.mass;

    const lineheight = 15;
    const lines = text.split('\n');

    context.beginPath();
    for (let i = 0; i < lines.length; i++) {
      context.fillText(lines[i], width + ball.posX + 30, height - ball.posY + (i*lineheight));
    }
    context.closePath();
    context.stroke();
  }

  function drawOrbit(context, ball) {

    const ballSize = 5;
    const width = context.canvas.width / 2;
    const height = context.canvas.height / 2;

    if(ball.posY > ball.orbitPosY[0]) {
      ball.orbitPosY[0] = ball.posY;
      ball.orbitPosY[1] = ball.posX;
    }

    if(ball.posY < ball.orbitPosY[2]) {
      ball.orbitPosY[2] = ball.posY;
      ball.orbitPosY[3] = ball.posX;
    }

    if(ball.posX > ball.orbitPosX[0]) {
      ball.orbitPosX[0] = ball.posX
      ball.orbitPosX[1] = ball.posY
    }

    if(ball.posX < ball.orbitPosX[2]) {
      ball.orbitPosX[2] = ball.posX
      ball.orbitPosX[3] = ball.posY
    }

    if(ball.orbitPosY.every(element => element !== null) && ball.orbitPosX.every(element => element !== null)) {

      context.beginPath();

      context.moveTo(width - ball.orbitPosY[1], height - ball.orbitPosY[0]);
      // context.lineTo(width + ball.orbitPosX[0], height - ball.orbitPosX[1]);
      context.quadraticCurveTo(width + ball.orbitPosX[0], height + ball.orbitPosX[1], width + ball.orbitPosX[0], height - ball.orbitPosX[1])

      context.stroke()

      context.moveTo(width - ball.orbitPosY[3], height - ball.orbitPosY[2]);
      context.lineTo(width + ball.orbitPosX[0], height - ball.orbitPosX[1]);
      context.stroke();

      context.moveTo(width - ball.orbitPosY[3], height - ball.orbitPosY[2]);
      context.lineTo(width + ball.orbitPosX[2], height - ball.orbitPosX[3]);
      context.stroke();

      context.moveTo(width - ball.orbitPosY[1], height - ball.orbitPosY[0]);
      context.lineTo(width + ball.orbitPosX[2], height - ball.orbitPosX[3]);
      context.stroke();

      context.closePath();
    }

  }

  function drawArcs(context) {

    const width = context.canvas.width / 2;
    const height = context.canvas.height / 2;

    balls.forEach(ball => {
        context.beginPath();
        context.fillStyle = "white";
        context.arc(width + ball.posX, height - ball.posY, 5, 0, 2 * Math.PI);
        context.fill();
        context.closePath();

        drawOrbit(context, ball);

        let distance = Math.sqrt(Math.pow(ball.posX, 2) + Math.pow(ball.posY, 2));

        if(play) {
          let cos = ball.posX / distance;
          let sin = ball.posY / distance;

          let forceX = ball.mass * gravitationalForce(ball.mass, 2000, distance) * cos;
          let forceY = ball.mass * gravitationalForce(ball.mass, 2000, distance) * sin;

          ball.accelerationX = forceX;
          ball.accelerationY = forceY;

          ball.velocityX = ball.velocityX + ball.accelerationX;
          ball.velocityY = ball.velocityY + ball.accelerationY;

          ball.posX = ball.posX - ball.velocityX;
          ball.posY = ball.posY - ball.velocityY;

        }

        formatBallInfo(context, ball, width, height, distance);

    });

  }

  function drawColumns(context) {

    const width = context.canvas.width;
    const height = context.canvas.height;

    context.beginPath();
    context.strokeStyle = "white";

    context.moveTo(width / 2, 0);
    context.lineTo(width / 2, width);

    context.moveTo(width, height / 2);
    context.lineTo(0, height / 2);

    context.lineWidth = 2;

    context.closePath();

    context.stroke();
  }

  function drawNumbers(context) {

    context.beginPath();
    context.fillStyle = "white";
    const width = context.canvas.width;
    const height = context.canvas.height;
    const widthDividedByTwo = context.canvas.width / 2;
    const heightDividedByTwo = context.canvas.height / 2;
    const spacing = 30;

    // right
    counter = 0;
    while(true) {
        counter += 1;
        if(widthDividedByTwo + counter * spacing < width) {
            context.fillText(counter, widthDividedByTwo + counter * spacing, heightDividedByTwo + 30);
        } else {
            break;
        }
    }

    // left
    counter = 0;
    while(true) {
        counter += 1;
        if(widthDividedByTwo - counter * spacing > 0) {
            context.fillText("-"+counter, widthDividedByTwo - counter * spacing, heightDividedByTwo + 30);
        } else {
            break;
        }
    }

    //down
    counter = 0;
    while(true) {
        counter += 1;
        if(heightDividedByTwo + counter * spacing < height) {
            context.fillText("-"+counter, widthDividedByTwo - 30, heightDividedByTwo + counter * spacing);
        } else {
            break;
        }
    }

    //up
    counter = 0;
    while(true) {
        counter += 1;
        if(heightDividedByTwo - counter * spacing > 0) {
            context.fillText(counter, widthDividedByTwo - 30, heightDividedByTwo - counter * spacing);
        } else {
            break;
        }
    }

    context.closePath();
    context.stroke();

  }

  function gravitationalForce(m1, m2, d) {
    const f = m1 * m2 / (d * d);
    return f;
  }
* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
}

canvas {
    display: block;
}
<body>
   <canvas id="canvas"></canvas>
    <script src="app.js"></script>
</body>

Olá, eu estou fazendo uma simulação da gravidade em javascript ate ai tudo bem, o problema é quando eu faço uma orbita ao redor de um ponto, eu quero desenhá-la na tela, porem eu não consigo fazer a curvatura correta, deixei um exemplo da curva incorreta entre o eixo Y+ e X+. Sei que para fazer curva no canvas usa-se o "quadraticCurveTo(cpx, cpy, x, y)" meu problema é o valor "cpx" e "cpy" dele, vou deixar o codigo aqui em baixo. (função -> drawOrbit)

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <canvas id="canvas"></canvas>
    <script src="app.js"></script>
</body>
</html>

CSS:

* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
}

canvas {
    display: block;
}

JS:

const planeta = new Image();   
planeta.src = 'https://cdn.pixabay.com/photo/2018/03/11/03/22/planet-earth-3215887_960_720.png';
const fundo = new Image();   
fundo.src = 'https://media.gazetadopovo.com.br/2021/06/19124411/universo-960x540.jpg';

let mousemove = null;
let play = true;

let frames = 0;
let startTime = performance.now();
let FPSNormal = 0;

function calculateFPSNormal(context) {
    let t = performance.now();
    let dt = t - startTime;
  FPSNormal = frames * 1000 / dt;
  frames = 0;
  startTime = t;
    frames++;

  context.beginPath();
  context.fillText(parseInt(FPSNormal), 0, 20);
  context.closePath();
  context.stroke();
}

const balls = [
  // {
  //   posX: 0,
  //   posY: 80,
  //   velocityX: 5,
  //   velocityY: 0,
  //   accelerationX: 0,
  //   accelerationY: 0,
  //   mass: 1,
  //   orbitPosX: [null, null, null, null],
  //   orbitPosY: [null, null, null, null]
  // },
  // {
  //   posX: 0,
  //   posY: 100,
  //   velocityX: 5,
  //   velocityY: 0,
  //   accelerationX: 0,
  //   accelerationY: 0,
  //   mass: 1,
  //   orbitPosX: [null, null, null, null],
  //   orbitPosY: [null, null, null, null]
  // },
  {
    posX: 0,
    posY: 120,
    velocityX: 5,
    velocityY: 0,
    accelerationX: 0,
    accelerationY: 0,
    mass: 1,
    orbitPosX: [null, null, null, null],
    orbitPosY: [null, null, null, null]
  }
];

(function() {
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');

    window.addEventListener('resize', resizeCanvas, false);
    
    window.addEventListener('mousemove', e => {
        mousemove = e;
    });

    document.addEventListener("keydown", function(event) {
      if(event.code === 'Space') {
        play = !play;
      }
    })

    resizeCanvas(canvas, context);

    loop(canvas, context);

  })();

  function loop(canvas, context) {

    const width = context.canvas.width / 2;
    const height = context.canvas.height / 2;

    window.requestAnimationFrame(function() {
        loop(canvas, context);
    });
    
    context.clearRect(0, 0, width, height);

    resizeCanvas(canvas, context);
    if (mousemove !== null) {
      context.font = "20px Arial";
      context.fillText("X: " + (mousemove.clientX - width) + " Y: " + (height - mousemove.clientY), mousemove.clientX + 20, mousemove.clientY);
    }
    calculateFPSNormal(context);
    
  }

  function resizeCanvas(canvas, context) {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    callDrawings(context); 
  }

  function callDrawings(context) {
    drawBackground(context);
    drawColumns(context);
    drawNumbers(context);
    drawImages(context);
    drawArcs(context);
  }

  function drawBackground(context) {
    const width = context.canvas.width;
    const height = context.canvas.height;

    context.beginPath();
    context.drawImage(fundo, 0, 0, width, height);
    context.closePath();
    context.stroke();
  }

  function drawImages(context) {
    const width = context.canvas.width / 2;
    const height = context.canvas.height / 2;

    context.beginPath();
    context.drawImage(planeta, width - 50, height - 50, 100, 100)
    context.closePath();
    context.stroke();
  }

  function formatBallInfo(context, ball, width, height, distance) {
    let text = "";
    text += "posX: " + ball.posX + "\n";
    text += "posY: " + ball.posY + "\n";
    text += "velocityX: " + ball.velocityX + "\n";
    text += "velocityY: " + ball.velocityY + "\n";
    text += "accelerationX: " + ball.accelerationX + "\n";
    text += "accelerationY: " + ball.accelerationY + "\n";
    text += "distance: " + distance+ "\n"
    text += "mass: " + ball.mass;

    const lineheight = 15;
    const lines = text.split('\n');

    context.beginPath();
    for (let i = 0; i < lines.length; i++) {
      context.fillText(lines[i], width + ball.posX + 30, height - ball.posY + (i*lineheight));
    }
    context.closePath();
    context.stroke();
  }

  function drawOrbit(context, ball) {

    const ballSize = 5;
    const width = context.canvas.width / 2;
    const height = context.canvas.height / 2;

    if(ball.posY > ball.orbitPosY[0]) {
      ball.orbitPosY[0] = ball.posY;
      ball.orbitPosY[1] = ball.posX;
    }

    if(ball.posY < ball.orbitPosY[2]) {
      ball.orbitPosY[2] = ball.posY;
      ball.orbitPosY[3] = ball.posX;
    }

    if(ball.posX > ball.orbitPosX[0]) {
      ball.orbitPosX[0] = ball.posX
      ball.orbitPosX[1] = ball.posY
    }

    if(ball.posX < ball.orbitPosX[2]) {
      ball.orbitPosX[2] = ball.posX
      ball.orbitPosX[3] = ball.posY
    }

    if(ball.orbitPosY.every(element => element !== null) && ball.orbitPosX.every(element => element !== null)) {

      context.beginPath();
      
      context.moveTo(width - ball.orbitPosY[1], height - ball.orbitPosY[0]);
      // context.lineTo(width + ball.orbitPosX[0], height - ball.orbitPosX[1]);
      context.quadraticCurveTo(width + ball.orbitPosX[0], height + ball.orbitPosX[1], width + ball.orbitPosX[0], height - ball.orbitPosX[1])

      context.stroke()

      context.moveTo(width - ball.orbitPosY[3], height - ball.orbitPosY[2]);
      context.lineTo(width + ball.orbitPosX[0], height - ball.orbitPosX[1]);
      context.stroke();

      context.moveTo(width - ball.orbitPosY[3], height - ball.orbitPosY[2]);
      context.lineTo(width + ball.orbitPosX[2], height - ball.orbitPosX[3]);
      context.stroke();

      context.moveTo(width - ball.orbitPosY[1], height - ball.orbitPosY[0]);
      context.lineTo(width + ball.orbitPosX[2], height - ball.orbitPosX[3]);
      context.stroke();

      context.closePath();
    }
     
  }
  
  function drawArcs(context) {

    const width = context.canvas.width / 2;
    const height = context.canvas.height / 2;

    balls.forEach(ball => {
        context.beginPath();
        context.fillStyle = "white";
        context.arc(width + ball.posX, height - ball.posY, 5, 0, 2 * Math.PI);
        context.fill();
        context.closePath();

        drawOrbit(context, ball);
        
        let distance = Math.sqrt(Math.pow(ball.posX, 2) + Math.pow(ball.posY, 2));

        if(play) {
          let cos = ball.posX / distance;
          let sin = ball.posY / distance;
  
          let forceX = ball.mass * gravitationalForce(ball.mass, 2000, distance) * cos;
          let forceY = ball.mass * gravitationalForce(ball.mass, 2000, distance) * sin;
  
          ball.accelerationX = forceX;
          ball.accelerationY = forceY;
  
          ball.velocityX = ball.velocityX + ball.accelerationX;
          ball.velocityY = ball.velocityY + ball.accelerationY;

          ball.posX = ball.posX - ball.velocityX;
          ball.posY = ball.posY - ball.velocityY;

        }

        formatBallInfo(context, ball, width, height, distance);
        
    });
     
  }

  function drawColumns(context) {

    const width = context.canvas.width;
    const height = context.canvas.height;

    context.beginPath();
    context.strokeStyle = "white";

    context.moveTo(width / 2, 0);
    context.lineTo(width / 2, width);

    context.moveTo(width, height / 2);
    context.lineTo(0, height / 2);

    context.lineWidth = 2;

    context.closePath();

    context.stroke();
  }

  function drawNumbers(context) {

    context.beginPath();
    context.fillStyle = "white";
    const width = context.canvas.width;
    const height = context.canvas.height;
    const widthDividedByTwo = context.canvas.width / 2;
    const heightDividedByTwo = context.canvas.height / 2;
    const spacing = 30;

    // right
    counter = 0;
    while(true) {
        counter += 1;
        if(widthDividedByTwo + counter * spacing < width) {
            context.fillText(counter, widthDividedByTwo + counter * spacing, heightDividedByTwo + 30);
        } else {
            break;
        }
    }

    // left
    counter = 0;
    while(true) {
        counter += 1;
        if(widthDividedByTwo - counter * spacing > 0) {
            context.fillText("-"+counter, widthDividedByTwo - counter * spacing, heightDividedByTwo + 30);
        } else {
            break;
        }
    }

    //down
    counter = 0;
    while(true) {
        counter += 1;
        if(heightDividedByTwo + counter * spacing < height) {
            context.fillText("-"+counter, widthDividedByTwo - 30, heightDividedByTwo + counter * spacing);
        } else {
            break;
        }
    }

    //up
    counter = 0;
    while(true) {
        counter += 1;
        if(heightDividedByTwo - counter * spacing > 0) {
            context.fillText(counter, widthDividedByTwo - 30, heightDividedByTwo - counter * spacing);
        } else {
            break;
        }
    }

    context.closePath();
    context.stroke();

  }

  function gravitationalForce(m1, m2, d) {
    const f = m1 * m2 / (d * d);
    return f;
  }

Olá, eu estou fazendo uma simulação da gravidade em javascript, até ai tudo bem, o problema é quando eu faço uma orbita ao redor de um ponto, eu quero desenhá-la na tela, porem eu não consigo fazer a curvatura correta, deixei um exemplo da curva incorreta entre o eixo Y+ e X+. Sei que para fazer curva no canvas usa-se o "quadraticCurveTo(cpx, cpy, x, y)" meu problema é o valor "cpx" e "cpy" dele, vou deixar o codigo aqui em baixo. (função drawOrbit)

const planeta = new Image();   
planeta.src = 'https://cdn.pixabay.com/photo/2018/03/11/03/22/planet-earth-3215887_960_720.png';
const fundo = new Image();   
fundo.src = 'https://media.gazetadopovo.com.br/2021/06/19124411/universo-960x540.jpg';

let mousemove = null;
let play = true;

let frames = 0;
let startTime = performance.now();
let FPSNormal = 0;

function calculateFPSNormal(context) {
  let t = performance.now();
  let dt = t - startTime;
  FPSNormal = frames * 1000 / dt;
  frames = 0;
  startTime = t;
  frames++;

  context.beginPath();
  context.fillText(parseInt(FPSNormal), 0, 20);
  context.closePath();
  context.stroke();
}

const balls = [
  // {
  //   posX: 0,
  //   posY: 80,
  //   velocityX: 5,
  //   velocityY: 0,
  //   accelerationX: 0,
  //   accelerationY: 0,
  //   mass: 1,
  //   orbitPosX: [null, null, null, null],
  //   orbitPosY: [null, null, null, null]
  // },
  // {
  //   posX: 0,
  //   posY: 100,
  //   velocityX: 5,
  //   velocityY: 0,
  //   accelerationX: 0,
  //   accelerationY: 0,
  //   mass: 1,
  //   orbitPosX: [null, null, null, null],
  //   orbitPosY: [null, null, null, null]
  // },
  {
    posX: 0,
    posY: 120,
    velocityX: 5,
    velocityY: 0,
    accelerationX: 0,
    accelerationY: 0,
    mass: 1,
    orbitPosX: [null, null, null, null],
    orbitPosY: [null, null, null, null]
  }
];

(function() {
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');

    window.addEventListener('resize', resizeCanvas, false);

    window.addEventListener('mousemove', e => {
        mousemove = e;
    });

    document.addEventListener("keydown", function(event) {
      if(event.code === 'Space') {
        play = !play;
      }
    })

    resizeCanvas(canvas, context);

    loop(canvas, context);

  })();

  function loop(canvas, context) {

    const width = context.canvas.width / 2;
    const height = context.canvas.height / 2;

    window.requestAnimationFrame(function() {
        loop(canvas, context);
    });

    context.clearRect(0, 0, width, height);

    resizeCanvas(canvas, context);
    if (mousemove !== null) {
      context.font = "20px Arial";
      context.fillText("X: " + (mousemove.clientX - width) + " Y: " + (height - mousemove.clientY), mousemove.clientX + 20, mousemove.clientY);
    }
    calculateFPSNormal(context);

  }

  function resizeCanvas(canvas, context) {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    callDrawings(context); 
  }

  function callDrawings(context) {
    drawBackground(context);
    drawColumns(context);
    drawNumbers(context);
    drawImages(context);
    drawArcs(context);
  }

  function drawBackground(context) {
    const width = context.canvas.width;
    const height = context.canvas.height;

    context.beginPath();
    context.drawImage(fundo, 0, 0, width, height);
    context.closePath();
    context.stroke();
  }

  function drawImages(context) {
    const width = context.canvas.width / 2;
    const height = context.canvas.height / 2;

    context.beginPath();
    context.drawImage(planeta, width - 50, height - 50, 100, 100)
    context.closePath();
    context.stroke();
  }

  function formatBallInfo(context, ball, width, height, distance) {
    let text = "";
    text += "posX: " + ball.posX + "\n";
    text += "posY: " + ball.posY + "\n";
    text += "velocityX: " + ball.velocityX + "\n";
    text += "velocityY: " + ball.velocityY + "\n";
    text += "accelerationX: " + ball.accelerationX + "\n";
    text += "accelerationY: " + ball.accelerationY + "\n";
    text += "distance: " + distance+ "\n"
    text += "mass: " + ball.mass;

    const lineheight = 15;
    const lines = text.split('\n');

    context.beginPath();
    for (let i = 0; i < lines.length; i++) {
      context.fillText(lines[i], width + ball.posX + 30, height - ball.posY + (i*lineheight));
    }
    context.closePath();
    context.stroke();
  }

  function drawOrbit(context, ball) {

    const ballSize = 5;
    const width = context.canvas.width / 2;
    const height = context.canvas.height / 2;

    if(ball.posY > ball.orbitPosY[0]) {
      ball.orbitPosY[0] = ball.posY;
      ball.orbitPosY[1] = ball.posX;
    }

    if(ball.posY < ball.orbitPosY[2]) {
      ball.orbitPosY[2] = ball.posY;
      ball.orbitPosY[3] = ball.posX;
    }

    if(ball.posX > ball.orbitPosX[0]) {
      ball.orbitPosX[0] = ball.posX
      ball.orbitPosX[1] = ball.posY
    }

    if(ball.posX < ball.orbitPosX[2]) {
      ball.orbitPosX[2] = ball.posX
      ball.orbitPosX[3] = ball.posY
    }

    if(ball.orbitPosY.every(element => element !== null) && ball.orbitPosX.every(element => element !== null)) {

      context.beginPath();

      context.moveTo(width - ball.orbitPosY[1], height - ball.orbitPosY[0]);
      // context.lineTo(width + ball.orbitPosX[0], height - ball.orbitPosX[1]);
      context.quadraticCurveTo(width + ball.orbitPosX[0], height + ball.orbitPosX[1], width + ball.orbitPosX[0], height - ball.orbitPosX[1])

      context.stroke()

      context.moveTo(width - ball.orbitPosY[3], height - ball.orbitPosY[2]);
      context.lineTo(width + ball.orbitPosX[0], height - ball.orbitPosX[1]);
      context.stroke();

      context.moveTo(width - ball.orbitPosY[3], height - ball.orbitPosY[2]);
      context.lineTo(width + ball.orbitPosX[2], height - ball.orbitPosX[3]);
      context.stroke();

      context.moveTo(width - ball.orbitPosY[1], height - ball.orbitPosY[0]);
      context.lineTo(width + ball.orbitPosX[2], height - ball.orbitPosX[3]);
      context.stroke();

      context.closePath();
    }

  }

  function drawArcs(context) {

    const width = context.canvas.width / 2;
    const height = context.canvas.height / 2;

    balls.forEach(ball => {
        context.beginPath();
        context.fillStyle = "white";
        context.arc(width + ball.posX, height - ball.posY, 5, 0, 2 * Math.PI);
        context.fill();
        context.closePath();

        drawOrbit(context, ball);

        let distance = Math.sqrt(Math.pow(ball.posX, 2) + Math.pow(ball.posY, 2));

        if(play) {
          let cos = ball.posX / distance;
          let sin = ball.posY / distance;

          let forceX = ball.mass * gravitationalForce(ball.mass, 2000, distance) * cos;
          let forceY = ball.mass * gravitationalForce(ball.mass, 2000, distance) * sin;

          ball.accelerationX = forceX;
          ball.accelerationY = forceY;

          ball.velocityX = ball.velocityX + ball.accelerationX;
          ball.velocityY = ball.velocityY + ball.accelerationY;

          ball.posX = ball.posX - ball.velocityX;
          ball.posY = ball.posY - ball.velocityY;

        }

        formatBallInfo(context, ball, width, height, distance);

    });

  }

  function drawColumns(context) {

    const width = context.canvas.width;
    const height = context.canvas.height;

    context.beginPath();
    context.strokeStyle = "white";

    context.moveTo(width / 2, 0);
    context.lineTo(width / 2, width);

    context.moveTo(width, height / 2);
    context.lineTo(0, height / 2);

    context.lineWidth = 2;

    context.closePath();

    context.stroke();
  }

  function drawNumbers(context) {

    context.beginPath();
    context.fillStyle = "white";
    const width = context.canvas.width;
    const height = context.canvas.height;
    const widthDividedByTwo = context.canvas.width / 2;
    const heightDividedByTwo = context.canvas.height / 2;
    const spacing = 30;

    // right
    counter = 0;
    while(true) {
        counter += 1;
        if(widthDividedByTwo + counter * spacing < width) {
            context.fillText(counter, widthDividedByTwo + counter * spacing, heightDividedByTwo + 30);
        } else {
            break;
        }
    }

    // left
    counter = 0;
    while(true) {
        counter += 1;
        if(widthDividedByTwo - counter * spacing > 0) {
            context.fillText("-"+counter, widthDividedByTwo - counter * spacing, heightDividedByTwo + 30);
        } else {
            break;
        }
    }

    //down
    counter = 0;
    while(true) {
        counter += 1;
        if(heightDividedByTwo + counter * spacing < height) {
            context.fillText("-"+counter, widthDividedByTwo - 30, heightDividedByTwo + counter * spacing);
        } else {
            break;
        }
    }

    //up
    counter = 0;
    while(true) {
        counter += 1;
        if(heightDividedByTwo - counter * spacing > 0) {
            context.fillText(counter, widthDividedByTwo - 30, heightDividedByTwo - counter * spacing);
        } else {
            break;
        }
    }

    context.closePath();
    context.stroke();

  }

  function gravitationalForce(m1, m2, d) {
    const f = m1 * m2 / (d * d);
    return f;
  }
* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
}

canvas {
    display: block;
}
<body>
   <canvas id="canvas"></canvas>
    <script src="app.js"></script>
</body>

Fonte Link

Como calcular a curvatura correta entre dois pontos em javascirpt

Olá, eu estou fazendo uma simulação da gravidade em javascript ate ai tudo bem, o problema é quando eu faço uma orbita ao redor de um ponto, eu quero desenhá-la na tela, porem eu não consigo fazer a curvatura correta, deixei um exemplo da curva incorreta entre o eixo Y+ e X+. Sei que para fazer curva no canvas usa-se o "quadraticCurveTo(cpx, cpy, x, y)" meu problema é o valor "cpx" e "cpy" dele, vou deixar o codigo aqui em baixo. (função -> drawOrbit)

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <canvas id="canvas"></canvas>
    <script src="app.js"></script>
</body>
</html>

CSS:

* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
}

canvas {
    display: block;
}

JS:

const planeta = new Image();   
planeta.src = 'https://cdn.pixabay.com/photo/2018/03/11/03/22/planet-earth-3215887_960_720.png';
const fundo = new Image();   
fundo.src = 'https://media.gazetadopovo.com.br/2021/06/19124411/universo-960x540.jpg';

let mousemove = null;
let play = true;

let frames = 0;
let startTime = performance.now();
let FPSNormal = 0;

function calculateFPSNormal(context) {
    let t = performance.now();
    let dt = t - startTime;
  FPSNormal = frames * 1000 / dt;
  frames = 0;
  startTime = t;
    frames++;

  context.beginPath();
  context.fillText(parseInt(FPSNormal), 0, 20);
  context.closePath();
  context.stroke();
}

const balls = [
  // {
  //   posX: 0,
  //   posY: 80,
  //   velocityX: 5,
  //   velocityY: 0,
  //   accelerationX: 0,
  //   accelerationY: 0,
  //   mass: 1,
  //   orbitPosX: [null, null, null, null],
  //   orbitPosY: [null, null, null, null]
  // },
  // {
  //   posX: 0,
  //   posY: 100,
  //   velocityX: 5,
  //   velocityY: 0,
  //   accelerationX: 0,
  //   accelerationY: 0,
  //   mass: 1,
  //   orbitPosX: [null, null, null, null],
  //   orbitPosY: [null, null, null, null]
  // },
  {
    posX: 0,
    posY: 120,
    velocityX: 5,
    velocityY: 0,
    accelerationX: 0,
    accelerationY: 0,
    mass: 1,
    orbitPosX: [null, null, null, null],
    orbitPosY: [null, null, null, null]
  }
];

(function() {
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');

    window.addEventListener('resize', resizeCanvas, false);
    
    window.addEventListener('mousemove', e => {
        mousemove = e;
    });

    document.addEventListener("keydown", function(event) {
      if(event.code === 'Space') {
        play = !play;
      }
    })

    resizeCanvas(canvas, context);

    loop(canvas, context);

  })();

  function loop(canvas, context) {

    const width = context.canvas.width / 2;
    const height = context.canvas.height / 2;

    window.requestAnimationFrame(function() {
        loop(canvas, context);
    });
    
    context.clearRect(0, 0, width, height);

    resizeCanvas(canvas, context);
    if (mousemove !== null) {
      context.font = "20px Arial";
      context.fillText("X: " + (mousemove.clientX - width) + " Y: " + (height - mousemove.clientY), mousemove.clientX + 20, mousemove.clientY);
    }
    calculateFPSNormal(context);
    
  }

  function resizeCanvas(canvas, context) {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    callDrawings(context); 
  }

  function callDrawings(context) {
    drawBackground(context);
    drawColumns(context);
    drawNumbers(context);
    drawImages(context);
    drawArcs(context);
  }

  function drawBackground(context) {
    const width = context.canvas.width;
    const height = context.canvas.height;

    context.beginPath();
    context.drawImage(fundo, 0, 0, width, height);
    context.closePath();
    context.stroke();
  }

  function drawImages(context) {
    const width = context.canvas.width / 2;
    const height = context.canvas.height / 2;

    context.beginPath();
    context.drawImage(planeta, width - 50, height - 50, 100, 100)
    context.closePath();
    context.stroke();
  }

  function formatBallInfo(context, ball, width, height, distance) {
    let text = "";
    text += "posX: " + ball.posX + "\n";
    text += "posY: " + ball.posY + "\n";
    text += "velocityX: " + ball.velocityX + "\n";
    text += "velocityY: " + ball.velocityY + "\n";
    text += "accelerationX: " + ball.accelerationX + "\n";
    text += "accelerationY: " + ball.accelerationY + "\n";
    text += "distance: " + distance+ "\n"
    text += "mass: " + ball.mass;

    const lineheight = 15;
    const lines = text.split('\n');

    context.beginPath();
    for (let i = 0; i < lines.length; i++) {
      context.fillText(lines[i], width + ball.posX + 30, height - ball.posY + (i*lineheight));
    }
    context.closePath();
    context.stroke();
  }

  function drawOrbit(context, ball) {

    const ballSize = 5;
    const width = context.canvas.width / 2;
    const height = context.canvas.height / 2;

    if(ball.posY > ball.orbitPosY[0]) {
      ball.orbitPosY[0] = ball.posY;
      ball.orbitPosY[1] = ball.posX;
    }

    if(ball.posY < ball.orbitPosY[2]) {
      ball.orbitPosY[2] = ball.posY;
      ball.orbitPosY[3] = ball.posX;
    }

    if(ball.posX > ball.orbitPosX[0]) {
      ball.orbitPosX[0] = ball.posX
      ball.orbitPosX[1] = ball.posY
    }

    if(ball.posX < ball.orbitPosX[2]) {
      ball.orbitPosX[2] = ball.posX
      ball.orbitPosX[3] = ball.posY
    }

    if(ball.orbitPosY.every(element => element !== null) && ball.orbitPosX.every(element => element !== null)) {

      context.beginPath();
      
      context.moveTo(width - ball.orbitPosY[1], height - ball.orbitPosY[0]);
      // context.lineTo(width + ball.orbitPosX[0], height - ball.orbitPosX[1]);
      context.quadraticCurveTo(width + ball.orbitPosX[0], height + ball.orbitPosX[1], width + ball.orbitPosX[0], height - ball.orbitPosX[1])

      context.stroke()

      context.moveTo(width - ball.orbitPosY[3], height - ball.orbitPosY[2]);
      context.lineTo(width + ball.orbitPosX[0], height - ball.orbitPosX[1]);
      context.stroke();

      context.moveTo(width - ball.orbitPosY[3], height - ball.orbitPosY[2]);
      context.lineTo(width + ball.orbitPosX[2], height - ball.orbitPosX[3]);
      context.stroke();

      context.moveTo(width - ball.orbitPosY[1], height - ball.orbitPosY[0]);
      context.lineTo(width + ball.orbitPosX[2], height - ball.orbitPosX[3]);
      context.stroke();

      context.closePath();
    }
     
  }
  
  function drawArcs(context) {

    const width = context.canvas.width / 2;
    const height = context.canvas.height / 2;

    balls.forEach(ball => {
        context.beginPath();
        context.fillStyle = "white";
        context.arc(width + ball.posX, height - ball.posY, 5, 0, 2 * Math.PI);
        context.fill();
        context.closePath();

        drawOrbit(context, ball);
        
        let distance = Math.sqrt(Math.pow(ball.posX, 2) + Math.pow(ball.posY, 2));

        if(play) {
          let cos = ball.posX / distance;
          let sin = ball.posY / distance;
  
          let forceX = ball.mass * gravitationalForce(ball.mass, 2000, distance) * cos;
          let forceY = ball.mass * gravitationalForce(ball.mass, 2000, distance) * sin;
  
          ball.accelerationX = forceX;
          ball.accelerationY = forceY;
  
          ball.velocityX = ball.velocityX + ball.accelerationX;
          ball.velocityY = ball.velocityY + ball.accelerationY;

          ball.posX = ball.posX - ball.velocityX;
          ball.posY = ball.posY - ball.velocityY;

        }

        formatBallInfo(context, ball, width, height, distance);
        
    });
     
  }

  function drawColumns(context) {

    const width = context.canvas.width;
    const height = context.canvas.height;

    context.beginPath();
    context.strokeStyle = "white";

    context.moveTo(width / 2, 0);
    context.lineTo(width / 2, width);

    context.moveTo(width, height / 2);
    context.lineTo(0, height / 2);

    context.lineWidth = 2;

    context.closePath();

    context.stroke();
  }

  function drawNumbers(context) {

    context.beginPath();
    context.fillStyle = "white";
    const width = context.canvas.width;
    const height = context.canvas.height;
    const widthDividedByTwo = context.canvas.width / 2;
    const heightDividedByTwo = context.canvas.height / 2;
    const spacing = 30;

    // right
    counter = 0;
    while(true) {
        counter += 1;
        if(widthDividedByTwo + counter * spacing < width) {
            context.fillText(counter, widthDividedByTwo + counter * spacing, heightDividedByTwo + 30);
        } else {
            break;
        }
    }

    // left
    counter = 0;
    while(true) {
        counter += 1;
        if(widthDividedByTwo - counter * spacing > 0) {
            context.fillText("-"+counter, widthDividedByTwo - counter * spacing, heightDividedByTwo + 30);
        } else {
            break;
        }
    }

    //down
    counter = 0;
    while(true) {
        counter += 1;
        if(heightDividedByTwo + counter * spacing < height) {
            context.fillText("-"+counter, widthDividedByTwo - 30, heightDividedByTwo + counter * spacing);
        } else {
            break;
        }
    }

    //up
    counter = 0;
    while(true) {
        counter += 1;
        if(heightDividedByTwo - counter * spacing > 0) {
            context.fillText(counter, widthDividedByTwo - 30, heightDividedByTwo - counter * spacing);
        } else {
            break;
        }
    }

    context.closePath();
    context.stroke();

  }

  function gravitationalForce(m1, m2, d) {
    const f = m1 * m2 / (d * d);
    return f;
  }