HTML Circle Test

by Jake Cattrall

HTML

<h1>Drag the red blocks around</h1>
<div class="container"></div>

CSS

.container{
    position: relative;
    border: 1px solid black;
    width: 400px;
    height: 400px;
}

.point{
    position: absolute;
    width: 1px;
    height: 1px;
    background: black;
}

JavaScript

var coord = function (x,y) {
  if(!x) var x=0;
  if(!y) var y=0;
  return {x: x, y: y};
}

function getCirclePoint(degree,radius,center) {
    return {
        x: radius * Math.cos(degree),
        y: radius * Math.sin(degree)
    }
}

var container = $('.container');
var elems = "";

function newElement(classs, _id, point){
    elems += "<div class='"+classs+"' id='"+_id+"' title='"+_id+"' style='left:"+point.x+"px;top:"+point.y+"px'></div>";
}

function generatePoints(point, radius){
    container.empty();
    elems = "";
    
    for (var i = 0; i <= 360; i += (360 / 100)){
        var newpos = getCirclePoint(i, radius, point);
        newElement('point', 'point'+i, newpos);
    }
    
    container.html(elems);
}

var point = coord(200,200);
var radius = 100;
generatePoints(point, radius);