radial motion in javascript

Question

By default HTML 5 canvas has rectangular shape, though if i do any animation under canvas, it will move into rectangular area.

What if i bound area to radial shape?It shouldn't definitely go out of radial shape.

Can we limit boundary to radial instead of default rectangular shape?

You can look at ball is going out of radial boundary- http://jsfiddle.net/stackmanoz/T4WYH/

I designed boundary in radial shape now i want to limit radial area too.

Limit area for ball-

function bounce() {
    if (x + dx > 293 || x + dx < 0) {
        dx = -dx;
    }
    if (y >= 290) {
        y = 290;
    }
    if (y + dy > 290 || y + dy < 0) {
        dx *= 0.99;
        dy = -dy;
    }
    if (Math.abs(dx) < 0.01) {
        dx = 0;
    }
    dy++;
}

What do you want to do ? Tweak your physics so that the ball doesn't leave the outer circle ? — Laurent Perrin, Feb 08 '13 at 11:31
take a look at http://stackoverflow.com/questions/9270214/html5-canvas-animating-an-object-following-a-path.that might help. — Ramin Omrani, Feb 08 '13 at 11:32

paul · Accepted Answer · 2013-02-08T11:43:00.997

1

The cartesian formula for a circle is (x − a)² + (y − b)² = r²

So check for this in your bounce condition:

function bounce() {
    if( Math.pow(x - 150, 2) + Math.pow(y - 150, 2) > Math.pow(150, 2))
    {
        dx = -dx * (0.6 + (Math.random() * 0.8));
        dy = -dy * (0.6 + (Math.random() * 0.8));
    }
}

I am using random bouncing because I could not work out the correct bounce angle using the incident speed and the normal at the bounce point (I'm sure there is somebody ele here who can)

updated fiddle here: http://jsfiddle.net/T4WYH/1/

edited Feb 08 '13 at 11:43

answered Feb 08 '13 at 11:36

paul

21,653
1
53
54

My go-to reference for "game" physics and such has been Hugo Elias' site: http://freespace.virgin.net/hugo.elias/models/m_snokr.htm – AKX Feb 08 '13 at 11:47

score 0 · Answer 2 · answered Feb 08 '13 at 11:57

Few points, use requestAnimationFrame rather than setInterval

I would draw the large circle in the canvas, rather than as a border, then you can use isPointInPath(x, y) to work out if your ball is within the circle (or any other arbitrary path for that matter)

function draw() {
    ctx.clearRect(0, 0, 300, 300);
    ctx.beginPath()
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#000';
    ctx.arc(150, 150, 150, 0, 2 * Math.PI, true);
    ctx.stroke();
    ctx.closePath();
    console.log(ctx.isPointInPath(x, y)); //Is (center) of ball in big circle
    ctx.beginPath();
    ctx.arc(x, y, 10, 0, 2 * Math.PI, true);
    ctx.closePath();
    ctx.fill();
    x += dx;
    y += dy;
    bounce();
}

score 0 · Answer 3 · answered Feb 08 '13 at 12:02

I don't want to implement this particular task, but you can get ideas how to bounce from circle from this site: bbdizains.com

And coresponding function:

move = function(){
 for (i=1; i<=3; i++) {
  A.x[i] = A.x[i] - A.v[i]*Math.sin(A.alfa[i]);
  A.y[i] = A.y[i] - A.v[i]*Math.cos(A.alfa[i]);
  x = A.x[i]-175;
  y = A.y[i]-233;
  x2 = x*x;
  y2 = y*y;
  if (x2+y2>=6561) {
    if (A.flag[i]==1) {
      gamma = Math.atan(y/x);    
      A.alfa[i] =  - 2*gamma - A.alfa[i];
      A.flag[i] = 0;
    }
  } else {
    A.flag[i] = 1;
  }                                                                   
  $('#r'+i).css('left',A.x[i]+'px');
  $('#r'+i).css('top',A.y[i]+'px'); 
  if ((Math.random()>0.95) && (x2+y2<6000)) {
    A.alfa[i] = A.alfa[i] + Math.PI*Math.random()*0.1;      
  }  
 }
}

radial motion in javascript

3 Answers3