5

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>

2
  • Há um objeto no centro e ao redor fica girando outro objeto sem a interação de controles ?... bem basico se chegar perto do centro o objeto gira sendo atraindo pelo centro da massa?? ou tera que exercer mais força e velocidade para sair da gravidade ? Commented 26/07/2022 às 22:48
  • Eu aplico a lei da gravitação universal na simulação, sendo assim eu tenho um centro estático (0, 0) e outro objeto em qualquer posição, o centro tende a atrair o objeto para ele por conta de sua massa, sendo assim eu calculo a força gravitacional que muda a aceleração que muda a velocidade que por sua vez muda a posição. O objeto em questão só "orbita" o centro pois ele já começa com uma velocidade inicial dando essa impressão de estar orbitando/caindo para sempre.
    – Eduardo
    Commented 27/07/2022 às 2:06

1 Resposta 1

1

Experimento interessante!

Bem, antes do código precisamos falar sobre a orbita. No caso de uma relação entre apenas 2 objetos, onde um é dominante e o outro é irrelevante, a orbita sempre é uma elipse. Portanto uma única bézier não seria capaz de representá-la, muito menos a "quadratic curve", que tem apenas uma "ponto de controle".

Caso você quisesse (ou precisasse) fazer uma aproximação com curvas bézier, seriam necessárias 4 curvas e é mais interessante tentar o método bezierCurveTo(). Essa é a estratégia do Inkscape para converter círculos e elipses em caminhos.

Entretanto você poderia usar diretamente o método ellipse(). Em especial, nesse seu exemplo, não há rotação dos eixos da elipse, portanto a sua estratégia de capturar os pontos máximos e mínimos da trajetória pode ser usada para encontrar os atributos da elipse com facilidade.

Nesse caso, basta atualizar o desenho do path, dentro da sua função drawOrbit() pelo seguinte:

context.beginPath();

let cx = (ball.orbitPosX[0] + ball.orbitPosX[2]) / 2;
let cy = (ball.orbitPosY[0] + ball.orbitPosY[2]) / 2;
let radiusX = ball.orbitPosX[0] - cx;
let radiusY = ball.orbitPosY[0] - cy;
context.ellipse(width+cx, height-cy, radiusX, radiusY, 0, 0, Math.PI*2);

context.stroke();

context.closePath();

MAAaaasss... (e quando alguém usa a palavra "mas", tudo antes dela torna-se irrelevante) mesmo num simulador simples como esse a infinitas outras orbitas possíveis cujos eixos das elipses estarão rotacionados, sendo assim essa estratégia de captura de máximos e mínimos é inválida.

Uma outra estratégia poderia envolver a mensuração da velocidade instantânea, calculando-se o tamanho do vetor { velocityX, velocityY }. O ponto onde o vetor fosse o mínimo seria uma das extremidades do maior diâmetro (é necessariamente o ponto mais distante do corpo dominante), O ponto onde o vetor é máximo seria a extremidade oposta (e está mais pŕoximo ao corpo dominante).

Com esses pontos você encontra cx, cy e a rotação da elipse (quinto parâmetro).

E quanto ao segundo raio da elipse? Assim que você descobrir os dois extremos com base na variação da velocidade, você já pode calcular cx e cy (uma simples média) e com mais 1/4 de volta você acabará encontrando o ponto mais próximo a criar um ângulo de 90 graus em relação a um extremo de velocidade e o centro. Tendo esse ponto, você já pode calcular o segundo raio.

Legal, agora você pode desenhar elipses rotacionadas. Acabou? Não. A elipse encontrada é um estado temporário. Dependendo da sua implementação você pode ter um efeito mais ou menos intenso de precessão:

inserir a descrição da imagem aqui

Dito isso, talvez, o melhor que você pode fazer para o seu simulador e descritor de órbitas, seria guardar um histórico de posições (literalmente um array com as últimas N posições para cada corpo), e usa-lo para plotar o caminho feito pelo corpo. Essa estratégia irá lhe permitir descrever órbitas caóticas de 3 elementos de massas pŕoximas ou órbitas estáveis mais complexas, como o sistema sol-terra-lua.

MAAaaasss... (lá vem ele de novo) Eu sou apenas um entusiasta, que aprendeu certos detalhes implementando jogos. É possível que um físico te indique estratégias bem mais espertas, uma função direta, para sistemas de 2 corpos... mas até onde sei, para 3 ou mais corpos, não há previsão, não há uma simples função.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .