Mathematical pendulum with a ball

Question

So, we have a mathematical pendulum. Help to realize that the pendulum hits the ball and the ball rolls.

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; }

 <canvas id="canvas"></canvas> <canvas id="canvas2" style="background: #eee"></canvas>

Answer 1 · 2018-04-16T12:55:21

 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; }

 <canvas id="canvas"></canvas>

I saw how they intersected) Sometimes they interlock and move together.
@Qwertiy this happens when the pendulum catches the ball rolling in the same direction, due to the fact that the pendulum has an acceleration, and the ball does not have it.

Mathematical pendulum with a ball

1 answer 1

More articles: