Tag Archives : Design

HowTo JavaScript/jQuery place divs in a circle, calculate a cirlce etc. 4

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}; […]