/*
 * Dessine des cercles de couleurs differentes
 */
function draw(dots, couleurs) {
    var counter = 0;
    var icouleur = 0; //indice pour le tableau couleurs
    for (var i = 0; i < NB_POINTS; i++) {
        if (icouleur >= couleurs.length) {
            icouleur = 0;
        }

        createCircle(dots[counter], dots[counter + 1], couleurs[icouleur++], i);
        counter += 2;
    }
}

/*
 * creation d'un cercle svg
 */
function createCircle(x, y, couleur, id) {

    var rayon = 20;

// x * tailleCarre / 15 pour avoir des points entre 0 et taille de la div
// laisse une marge de la taille du rayon pour que les cercles ne depassent pas
    x = scale(x, rayon);
    y = scale(y, rayon);

    y = tailleCarre - y; //pour placer comme avec threeNoodle  

    var myCircle = document.createElementNS(svgNS, "circle"); //to create a circle. for rectangle use "rectangle"
    myCircle.setAttributeNS(null, "id", id);
    myCircle.setAttributeNS(null, "cx", x);
    myCircle.setAttributeNS(null, "cy", y);
    myCircle.setAttributeNS(null, "r", rayon);
    myCircle.setAttributeNS(null, "fill", couleur);
    myCircle.setAttributeNS(null, "stroke", "none");

    svg.appendChild(myCircle);
}