Question

I am trying to plot coordinates around a square programatically here it is hard coded to show what i am after.

http://jsfiddle.net/zwkny/

// amount of chairs
var aoc = 4;
// table width
var tw = 200;
// table height
var th = 200;

// chair width height
var cwh = 60 / 2;

var space = tw * 4 / aoc;

var left = [-30,100,-30,-160];
var top = [-160,-30,100,-30];

// straing point
var sp = 12;

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


    var x = cwh + space * i / aoc;
    console.log(x);
    //var y = space / 2 - cwh * i;

    $("#center").append("<div class='chair' style='left:"+left[i]+"px;top:"+top[i]+"px;'>"+i+"</div>");

}

Maths is definately not my strong point just thought i would post up here see if anyone can help point me in the right direction i keep going and update if i get it???

I need it this way to represent people the small circles standing around the large square but there will be random amounts of people and they all need to be at equal distances.

I posted the same post about a circle object yesterday and now i am on squares i just cant get my head around the maths, any help.

Sore that this has been voted down just thought i would update with a post putting all these together
http://devsforrest.com/116/plot-positions-around-shapes-with-javascript
Hope it helps someone else

Answer 1

var x,y;

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

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

x -= chairSize/2;
y -= chairSize/2;

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

Demo