javascriptrotationhtml5-canvas

How to translate and rotate chairs around a table

I'd like to evenly devide a n number of chairs around a round table.
Tried several solutions that involve animation an object around a circle, but I'm not able to convert any of them to a solution for my problem.
(http://jsfiddle.net/m1erickson/dFctW/ and http://jsfiddle.net/Cu6Zv/1/)

The project I'm working on involves a chosen amount of chairs that need to be devided among a chosen amount of tables. I managed to sort of build a prototype, but the chairs are not evenly devided and not rotated toward the center of the table.

enter image description here

var step = 360 / chairs;
for(var count = 0; count < chairs; count++){
  angle += Math.acos(1-Math.pow(step/radius,2)/2);

  var x = cx + radius * Math.cos(angle);
  var y = cy + radius * Math.sin(angle);

  ctx.rect(x-5,y-5,10,10);
  ctx.stroke();
}

I created a jsfiddle of what I've got so far.

Hopefully someone can explain me how to:

Thanks in advance.

Solution

  • You're almost at right track with the code. Simply use radians instead and drop the acos line:

    var ctx = c.getContext("2d");
var angle = 0;
var chairs = 6;
var cx = c.width>>1, cy = c.height>>1, radius = (c.height>>1)-10;
var step = Math.PI * 2 / chairs;

for(var count = 0; count < chairs; count++){
  var x = cx + radius * Math.cos(angle);
  var y = cy + radius * Math.sin(angle);
  ctx.rect(x-5,y-5,10,10);
  angle += step;
}
ctx.stroke();
    <canvas id=c></canvas>

    Now, all the chairs will face the same direction. If you want to rotate them so they face center of tables it's perhaps easier to use transforms instead of manually calculating the position:

    var ctx = c.getContext("2d");
var angle = 0;
var chairs = 6;
var cx = c.width>>1, cy = c.height>>1, radius = (c.height>>1)-10;
var step = Math.PI * 2 / chairs;

// translate to center
ctx.translate(cx, cy);

for(var count = 0; count < chairs; count++){
  // rotate around center (0,0)
  ctx.rotate(step);
  
  // draw using radius as offser on x-axis only
  ctx.rect(radius -5,-5,10,10);
  ctx.rect(radius -5, -1, 4,2);
}
ctx.stroke();
    <canvas id=c></canvas>