drawing spiral using jquery - spot distance

Question

I am trying to draw a spiral from divs using jquery. I have done a regular spiral so far and seems to work fine for me. However the next step is that I need this to have big distance between divs when it starts and smaller one as it goes. I know that I should add an extra variable that will do this but I do not know how to implement this.

Here is my code so far

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

Rick Hitchcock · Accepted Answer · 2015-02-27T20:53:40.223

0

You could make the size of each div a function of the radius. One-seventh seems to work well:

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

Working Fiddle

Edit

Based on our comments, I now understand the problem better. You could declare a distance variable, which is the distance between divs. angle would then be updated as:

angle += distance/radius;

Each time through the loop, the distance would decrease, like this:

distance -= 1.5;

The rest of your code stays pretty much the same.

Working Fiddle

edited Feb 27 '15 at 20:53

answered Feb 27 '15 at 15:55

Rick Hitchcock

35,202
5
48
79

Thanks! Actually my idea is the reverse of what you have done. I want bigger divs when it starts and smaller ones as it goes. That's why I wanted big distance between divs in the beginning – georgekpc Feb 27 '15 at 16:06
I like @Gaby's answer a lot more than my own, but here's a Fiddle that has larger divs in the middle: http://jsfiddle.net/7vw4z76w/. Is that more what you're going for? – Rick Hitchcock Feb 27 '15 at 16:34
I think @Gaby's answer is very similar to yours. The idea is pretty much the same. I think the hard part is to start with a large distance between the very first divs (so even if they are big they will not overlap each other) and as the spiral getting bigger this distance decreases. – georgekpc Feb 27 '15 at 17:03
the answer to this post might help http://stackoverflow.com/questions/13894715/draw-equidistant-points-on-a-spiral . however I can't still figure out how to use the variable chord which is the distance between the divs. so i could set a big value in the beginning and decreased it in every loop. – georgekpc Feb 27 '15 at 17:10
Ahh, when you wrote that the distance should be big at the beginning and small at the end, did you mean the distance between divs should always be constant? See this fiddle: http://jsfiddle.net/nLyk4vps/ – Rick Hitchcock Feb 27 '15 at 18:42
And here's a version where the divs start out large and get smaller: http://jsfiddle.net/vpuhg1fa – Rick Hitchcock Feb 27 '15 at 18:52
probably I didn't write this right, that's why you might have understood it incorrectly. By distance between divs I mean the distance between the **following** divs, not the distance between coils (as you did in your last fiddle) – georgekpc Feb 27 '15 at 19:03
Hmm, if none of my fiddles solve your problem, I may need to see an example to understand your goal. – Rick Hitchcock Feb 27 '15 at 19:11
here is a pic of a spiral that would work great for me. http://imgur.com/yfPd4H6 distance between div #1 and div #2 is the maximum one. distance between div #3 and div #4 is a little bit smaller etc. I hope this makes sense – georgekpc Feb 27 '15 at 19:40
Thanks a tone!!!!!!! That's it. I will try to center the first div a little bit however workjs great for me!!!! Many thanks!!!! – georgekpc Feb 27 '15 at 20:44
Great, I've simplified the code and updated my answer. – Rick Hitchcock Feb 27 '15 at 20:57

score 0 · Answer 2 · answered Feb 27 '15 at 16:03

You could use transform:scale() for sizing

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

scale += 0.02;

and when using this you should set the origin of the transformation at the center (on CSS).

transform-origin: 50% 50%;

Demo at http://jsfiddle.net/v7avLbej/7/

drawing spiral using jquery - spot distance

2 Answers2