So,

I was working with my father, a physicist and mathematician, who wants to have a little math example done in javascript. We haven’t finished the meat and potatoes of the project, but one hurdle was the necessity to place 8 divs in a circle on the page. This is a variation on the Tirgrams and Clifford Algebras demonstration that comes with the Mathmatics software Wolfram. Essentially this displays the trigrams in a clock formation, right to left around a circle.

I looked around for a few examples and none of them seemed to work out the way I wanted them too, so I asked him to help and this is what we came up with.

//trigrams are a class that contain divs displaying 1 of 8 trigrams.
function draw() {
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var center = {x: windowWidth / 2 - 100,y: windowHeight / 2}; //100 is the width of the div
var doc = 150; // radius
var cpos = {x: center.x, y: center.y - doc }; //because the first div needs to be on top
for (var i in trigrams) {
trigrams[i].css({top: cpos.y, left: cpos.x, position: 'absolute'});//this method just sets the .css left and top
cpos = {x: cpos.x - center.x, y: cpos.y - center.y};
cpos = get_position(cpos.x,cpos.y);
cpos.x = center.x + cpos.x;
cpos.y = center.y + cpos.y;
$('body').append(trigrams[i]);
}
}
function get_position(x,y) {
var z = x;
x = 1/Math.sqrt(2) * (z - y);
y = 1/Math.sqrt(2) * (z + y);
return {x: x, y: y};
}

As requested, here’s some code you can copy and paste into a page, as long as you have included jQuery, that should just work for you.

var trigrams = [
$("<div style='width: 100px;height:100px;background-color: red;'> </div>"),
$("<div style='width: 100px;height:100px;background-color: red;'> </div>"),
$("<div style='width: 100px;height:100px;background-color: red;'> </div>"),
$("<div style='width: 100px;height:100px;background-color: red;'> </div>"),
$("<div style='width: 100px;height:100px;background-color: red;'> </div>"),
$("<div style='width: 100px;height:100px;background-color: red;'> </div>"),
$("<div style='width: 100px;height:100px;background-color: red;'> </div>"),
$("<div style='width: 100px;height:100px;background-color: red;'> </div>"),
$("<div style='width: 100px;height:100px;background-color: red;'> </div>")
];
function draw() {
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var center = {x: windowWidth / 2 - 100,y: windowHeight / 2}; //100 is the width of the div
var doc = 150; // radius
var cpos = {x: center.x, y: center.y - doc }; //because the first div needs to be on top
for (var i in trigrams) {
trigrams[i].css({top: cpos.y, left: cpos.x, position: 'absolute'});//this method just sets the .css left and top
cpos = {x: cpos.x - center.x, y: cpos.y - center.y};
cpos = get_position(cpos.x,cpos.y);
cpos.x = center.x + cpos.x;
cpos.y = center.y + cpos.y;
$('body').append(trigrams[i]);
}
}
function get_position(x,y) {
var z = x;
x = 1/Math.sqrt(2) * (z - y);
y = 1/Math.sqrt(2) * (z + y);
return {x: x, y: y};
}

$(function () {
draw();
});