Question

I have this script I am working on that utilizes the oCanvas JS Library (http://ocanvas.org/) that creates an HTML5 canvas and displays multiple objects within the canvas. Currently, I have the script reading from an external XML document and loops through each project node and creates a circle object on the canvas.

I am having issues with trying to place this objects on the canvas evenly spaced from the middle circle (the logo variable in the code below).

// GLOBALS
    var xmlData = '<?xml version="1.0" encoding="UTF-8"?><root name="CompanyName"><projects><project name="Project1"></project><project name="Project2"></project></projects></root>'

    var xmlObj = []
    // var angle = (360 * Math.PI)/180
    var padding = 15
    var canvas = oCanvas.create({
        canvas: '#myCanvas'
    })
    var c_width = canvas.width
    var c_height = canvas.height

    var logo = canvas.display.ellipse({
        x: c_width / 2,
        y: c_height / 3,
        radius: 80,
        fill: '#d15851'
    })

    canvas.addChild(logo)

    // var getXML = function(file){
    //  $.ajax({
    //      url: file,
    //      type: 'GET',
    //      dataType: 'xml',
    //      async: false,
    //      success: parseXML
    //  })
    // }

    var parseXML = function() {
        var xmlDoc = $.parseXML(xmlData)
        var xml = $(xmlDoc)

        xml.find('project').each(function(i){
            xmlObj[i] = canvas.display.ellipse({
                fill: '#'+'0123456789abcdef'.split('').map(function(v,i,a){
                  return i>5 ? null : a[Math.floor(Math.random()*16)] }).join(''),
                radius: 40,
                opacity: 1
            })
        });

        var angleSingleton = {
            "currentAngle": 0,
            "currentOffset": 0,
            "incrementAngle": function() {
                this.currentAngle = this.currentAngle + this.currentOffset
            }
        }

        angleSingleton.currentOffset = Math.floor((360 * Math.PI)/xmlObj.length);

        for(h = 0; h < xmlObj.length; h++) {
            xmlObj[h].x = (logo.x + logo.radius * Math.cos(angleSingleton.currentAngle)) + xmlObj[h].radius + padding;
            xmlObj[h].y = (logo.y + logo.radius * Math.sin(angleSingleton.currentAngle)) + xmlObj[h].radius + padding;

            canvas.addChild(xmlObj[h])
            angleSingleton.incrementAngle()
        }
    }

//

$(document).ready(function(){
    parseXML()
})

Answer 1

What you want to take a look at is the Parametric equation for circles. Basically it defines a point along a circles perimeter at a specific angle. This answer covers it in more detail.

To get your x and y values for the new circle you use the following equations:

x = logo.x + logo.radius * Math.cos(angle)
y = logo.y + logo.radius * Math.sin(angle)

However you need to account for the room the new circle is going to take up plus any room for padding if you want it.

x = (logo.x + logo.radius * Math.cos(angle)) + newCircle.radius + circlePadding
y = (logo.y + logo.radius * Math.sin(angle)) + newCircle.radius + circlePadding

For the angle function try something like this:

var angleSingleton = {
    "currentAngle": 0,
    "currentOffset": 0,
    "incrementAngle": function() {
        this.currentAngle = this.currentAngle + this.currentOffset
    }
}

angleSingleton.currentOffset = (360 * Math.PI)/xmlObj.length;

Then you can use this to keep track of the angle you need for the formula. To get the current angle use angleSingleton.currentAngle and replace angle++ with angleSingleton.incrementAngle