Point around a square with javascript

Question

I was kindly given the code below by AtomicRobot on stackoverflow.

var x,y;

// amount of chairs
var totalChairs = 12;
// square size
var squareSize = 200;
var chairSize = 60;

// issues with 3,5,7,8,9,10,11

for(var i=0; i<totalChairs; i++){

    var angle = 2*Math.PI * i/totalChairs;

    if (angle > Math.PI/4 && angle <= Math.PI* 3/4){
        x = (squareSize/2) / Math.tan(angle);
        y = -squareSize/2 - chairSize/2;
    } else if (angle > Math.PI* 3/4 && angle <= Math.PI* 5/4){
        x = -squareSize/2 - chairSize/2;
        y = (squareSize/2) * Math.tan(angle);
    } else if (angle > Math.PI* 5/4 && angle <= Math.PI* 7/4){
        x = -(squareSize/2) / Math.tan(angle);
        y = -squareSize/2 + squareSize + chairSize/2;
    } else {
        x = -squareSize/2 + squareSize + chairSize/2;
        y = -(squareSize/2) * Math.tan(angle);
    }

    x -= Math.round(chairSize/2) - squareSize/2;
    y -= Math.round(chairSize/2) - squareSize/2;

    $("#square").append("<div class='chair' style='left:"+x+"px;top:"+y+"px;'></div>");
}

which is to plot chairs around a table with javascript it works great for the following amount of chairs 1,2,4,6,12 the distances are plotted equally.

But with the following amount of chairs 3,5,7,8,9,10,11 the seems to be of by the chair width.

Is their anyone that can let me know why this might be occurring maths isn't my strong point and would really appreciate some help with this, you can see a example here with 8 chairs.

http://jsfiddle.net/Ld769/4/

Thanks

Ive been making progress with this completely change how i am doing it now actually understand whats going on with this one and can expand the table to suit still having issue with the remander to for certain people numbers????

       var x,y;

// amount of chairs
var totalChairs = 18;
var chairSize = 60;
// square size
var squareSize = Math.round(totalChairs/4) * chairSize;

//alert("squareSize: " + squareSize);
// issues with 5,9,13,17,21
// works with 1,2,4,6,12
var remainder = Math.round(totalChairs/4);

var s1 = 0;
var s2 = 0;
var s3 = 0;
var s4 = 0;

for(var i=0; i<totalChairs; i++){

    var iter = i;  
    if(iter+1 <= remainder){

         var s1i = s1++;
         console.log("s1i: " + s1i);

         x = s1i * chairSize;
         y = -chairSize;
         newr = remainder*2;

    } else if(iter+1 <= newr){
         var s2i = s2++;
         console.log("s2i: " + s2i);
         y = s2i * chairSize;
         x= squareSize;
         newe = remainder*3;

    } else if(iter+1 <= newe){

         var s3i = s3++;
         console.log("s3i: " + s3i);
         x =  - s3i * chairSize  + squareSize - chairSize;
         y = squareSize;

    }else{
         var s4i = s4++;
         console.log("s4i: " + s4i);
         y = - s4i * chairSize + squareSize - chairSize;
         x= -chairSize;

     }         

    $("#square").css({"width":(squareSize) + "px","height":(squareSize) + "px"});
    $("#square").append("<div class='chair' style='left:"+Math.round(x)+"px;top:"+Math.round(y)+"px;'><p>"+i+"<br/>x"+x+",y"+y+"</p></div>");
    $(".chair").css({"width":(chairSize) + "px","height":(chairSize) + "px"});
}

​

​ can see the jsfiddle version here http://jsfiddle.net/isimpledesign/Ld769/19/

Answer 1

i'd figure how many need to fit on one of the 4 sides. 4*2 = 8, not sufficient, 4*3 = 12 OK!, that means 3 sides get three and one gets 2. that means the minimum width and height must be the same as the most packed side (so that the seated fit comfortably)

if you want to have them evenly separated? Just figure out the number of chairs, say it's 11, divide into 360 to figure your angle of separation then project that onto the square