Математической маятник с шаром

#javascript #canvas

Итак, у нас есть математический маятник.
Помогите реализовать, чтобы маятник ударялся о шар, и шар катился.



var canvas = document.getElementById("canvas")

var ctx = canvas.getContext("2d")
var ctx2 = canvas2.getContext("2d")
var h = canvas.height = 500
var w = canvas.width = 600
var h2 = canvas2.height = 0.1
// var w2 = canvas2.width = 800
ctx.translate(w / 2, h / 2)

// ctx2.translate(0,h2/2)
// ctx2.beginPath()
// ctx2.moveTo(0,0)

var initPhi = Math.PI * 0.2
var L = 200
var dt = 1 / 60
var g = 1500
var t = 0

bob = {
  phi: initPhi,
  v: 3.5,
  a: 4
}

function drawPendulum() {
  ctx.beginPath()
  ctx.arc(Math.sin(bob.phi) * L, Math.cos(bob.phi) * L, 10, 0, 2 * Math.PI)
  ctx.fill()
  ctx.moveTo(0, 0)
  ctx.lineTo(Math.sin(bob.phi) * L, Math.cos(bob.phi) * L)
  ctx.stroke()
}

function update() {
  // L*phi''=-g*sin(phi)
  bob.a = -(g / L) * Math.sin(bob.phi)
  bob.v += bob.a * dt
  bob.phi += bob.v * dt
  // t += dt
}

function drawGraph() {
  // ctx2.lineTo(t*20,(bob.phi%Math.PI)*20 )
  // ctx2.stroke()
}

function draw() {
  ctx.clearRect(-w / 2, -h / 2, w, h)
  drawPendulum()
  update()
  // drawGraph()
  requestAnimationFrame(draw)
}
draw()
* {
  padding: 0;
  margin: 0;
}

canvas {
  display: block;
  margin: 0 auto;
}





    

Ответы

Ответ 1

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var h = canvas.height = 500;
var w = canvas.width = 600;
ctx.translate(w / 2, h / 2);

const L = 200;
const dt = 1 / 60;
const g = 1500;
const bob = {
  phi: Math.PI * 0.2,
  v: 2.5,
  a: 4,
  r: 10
};

function drawPendulum() {
  ctx.beginPath()
  ctx.arc(bob.x, bob.y, bob.r, 0, 2 * Math.PI)
  ctx.fill()
  ctx.moveTo(0, 0)
  ctx.lineTo(bob.x, bob.y)
  ctx.stroke()
}

// Шарик
const ball = {
  x: 0,
  y: 200,
  r: 10,
  v: 0,
  draw(){
   ctx.beginPath();
   ctx.arc(this.x, this.y, this.r, 0, 2*Math.PI);
   ctx.fill();      
  }
}


function update() {
  bob.a = -(g / L) * Math.sin(bob.phi);
  bob.phi += bob.v * dt;
  bob.v += bob.a * dt;
  ball.x += ball.v * dt;

  // Перенесём расчет координат сюда, чтоб здесь же проверить коллизию:
  bob.x = Math.sin(bob.phi) * L;
  bob.y = Math.cos(bob.phi) * L;

  // Проверяем коллизию:
  if(Math.abs(bob.x - ball.x) <= 2*ball.r && Math.abs(bob.y - ball.y) <= 2*ball.r){
    // если столкнулись - передадим импульс:
    const bobV = bob.v * L; // Домножаем на плечо, потому что V у вас угловая скорость 
    
    // Неупругий удар, массы будем считать равными
    bob.v = ball.v / L;
    ball.v = bobV;
  }

  // Типа отскок от стенки, чтоб было веселей)
  if(Math.abs(ball.x) + ball.r > 300) ball.v = -ball.v;
}


(function draw(dt) {
  update();
  ctx.clearRect(-w / 2, -h / 2, w, h)
  drawPendulum()
  ball.draw();
  requestAnimationFrame(draw);
})();
canvas {
  display: block;
  margin: 0 auto;
  padding: 0;
}