Рисование спирали с помощью jquery - расстояние до точки

Question

Я пытаюсь нарисовать спираль из div, используя jquery. До сих пор я делал обычную спираль и, кажется, отлично сработал. Однако следующий шаг заключается в том, что мне нужно, чтобы это было большим расстоянием между div, когда оно начинается, и меньшим, когда оно начинается. Я знаю, что я должен добавить дополнительную переменную, которая будет делать это, но я не знаю, как это реализовать.

Вот мой код до сих пор

var radius = 50;
var x0 = 300;
var y0 = 300;
var segment = 50;
var angle = 0;    

for (var i=0; i<=segment; i++){
  angle = angle + (Math.PI * 2) / 30;
  var x=x0+radius*Math.sin(angle);
  var y=y0+radius*Math.cos(angle);
  $("#terrain").append("<div class='drag' style='top:"+ y +"px;left:"+ x +"px;'></div>")
  radius = radius + 5;   
}

jsfiddle

Answer 1

Вы можете сделать размер каждого div функцией радиуса. Одна седьмая, кажется, работает хорошо:

size = radius/7;
$("#terrain")
  .append("<div class='drag' style='top:"+ y +"px;left:"+x+
          "px;width:"+size+"px;height:"+size+"px;'></div>"
         );

Рабочая скрипка

---

редактировать

Исходя из наших комментариев, я теперь лучше понимаю проблему. Вы могли бы объявить distance переменная, которая является расстоянием между дивами. angle будет обновлен как:

angle += distance/radius;

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

distance -= 1.5;

Остальная часть вашего кода остается практически такой же.

Рабочая скрипка

Answer 2

Вы могли бы использовать transform:scale() для определения размеров

var newitem = $('<div>',{
    'class': 'drag',
    css:{
        top:y,
        left:x,
        transform: 'scale('+ scale +')'
    }
});
$("#terrain").append(newitem);

scale += 0.02;

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

transform-origin: 50% 50%;

Демо на http://jsfiddle.net/v7avLbej/7/