spiral

by alvertos

HTML

<button id="btn"> generate </button>
<div id="terrain"></div>

CSS

.drag {
    position: absolute;
    border: 1px solid #89B;
    background: #BCE;
    height: 58px;
    width: 58px;
    cursor: move;
    top: 120px;
}

JavaScript

jQuery(function($){
    $("#btn").click(function() {
        
        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;
            
        }
        
        
        
                
                
    });
});