Позиционирующие элементы случайным образом по кругу

Question

Я пишу приложение быстрого питания, в основном позволяя пользователям настраивать свою пиццу, добавляя к ней материал.

так, я показываю простой pitza к ним и на боковой панели у них есть все эти вещи ... как пепперони, говядина, грибы и ...

<div id = "pitz" style="background-image: url("pitza.png");" > </div> 

<div class="custom" id="pepperoni">peppeoni</div> 
<div class="custom" id="beef">beef </div> 
<div class="custom" id="mushroom">mushroom </div> 

поэтому, когда пользователь нажимает на пользовательские дивы как mushroom я хочу добавить немного грибов к моему pitza ... что-то вроде

$('.custom').click(function(e) { 

    var backgroung = $(this).attr('id')+'.png'; 

    for(i = 0 ; i < 40 ; i++) 
    { 
     var top , left = i ; 

     var add = '<div style="top:'+top+'px ; left:'+left+'px ; width:100;height:100px;background-image:url("'+background+'");" ></div>'; 
     $('#pitza').append(add); 
    } 

}); 

так вот это проблема, для того, чтобы добавить немного предметов (грибы) в мой родительский элемент (pitza) я должен поместить их ... в этом случае в круге (pitza), поэтому мне нужно создать случайное положение иона для каждого элемента, чтобы они не перекрывались, и эти позиции должны быть в воображаемом круге, и он должен охватывать все части круга, я не хочу, чтобы левая сторона была пустой и правой стороной, полной грибов.

, очевидно, это не работает, и я понятия не имею, как это сделать:

for(i = 0 ; i < 40 ; i++) 
{ 
    var top , left = i ; 

Answer 1

В основном вы смотрите на двух кругов, один с радиусом вашей пиццы, и один с радиусом ваш рост. Таким образом, вы бы сделали что-то подобное.

var pizzaRadius = 200, 
    toppingRadii = { 
     mushroom: 40, 
     pepperoni: 50, 
     onions: 25 
    }; 

function getToppingPosition(toppingRadius){ 
    var posX, posY; 
    do { 
     posX = Math.floor(Math.random() * ((pizzaRadius * 2) - 1)); 
     posY = Math.floor(Math.random() * ((pizzaRadius * 2) - 1)); 
    } while(Math.sqrt(Math.pow(pizzaRadius - posX, 2) + Math.pow(pizzaRadius - posY, 2)) > pizzaRadius - toppingRadius) 

    return { x: posX, y: posY } 
} 

В основном то, что функция делает получает случайное число в пределах пиццы и убеждается, что положение + размер долива на пицце (так что нет ни одного начинки висит над краем. После что вы бы просто подключить эту функцию в вашей петле

$('.custom').click(function(e) { 

    var backgroung = $(this).attr('id')+'.png', 
     topping = 'mushroom'; 

    for(i = 0 ; i < 40 ; i++) 
    { 
     var pos = getToppingPosition(toppingRadii[topping]) 

     var add = '<div style="top:'+pos.x+'px ; left:'+pos.y+'px ; width:100;height:100px;background-image:url("'+background+'");" ></div>'; 
     $('#pitza').append(add); 
    } 

}); 

Вот скрипка http://jsfiddle.net/19h242yc/