Olá, eu estouEstou fazendo uma simulação da gravidade em javascript
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+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
)
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>
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;
}