2d map

by adamkrisz

HTML

<canvas id="display" width=400 height=400>

JavaScript

var c, g;

var list = new Array();

$(document).ready(function(){
    c = document.getElementById('display');
    g = c.getContext("2d");  
    
    list.push({x: 200, y:200});
    for(i=0; i<100; ++i){
        var k = list[Math.round(Math.random() * (list.length-1))];
        list.push(gen(k.x, k.y, 150));
    }
    for(i=0; i<1000; ++i){
        var k = list[Math.round(Math.random() * (list.length-1))%100];
        list.push(gen(k.x, k.y, 20));
    }
    
    draw();
});

function gen(kx, ky, max){
    var d = Math.random();
    d *= d;
    d *= max;
    
    var alpha = Math.random() * 2 * Math.PI;
    
    var r = {
        x : Math.sin(alpha)*d + kx,
        y : Math.cos(alpha)*d + ky
    };
    
    return r;
}

function draw(){
//    g.fillText("pontok: "+list[2], 10, 10);
    g.fillStyle = "rgb(103, 159, 194)";
    g.fillRect(0, 0, 800, 800);
    
    g.fillStyle = "rgba(255, 204, 102, 0.75)"; 
    for(i in list)
      drawCircle(list[i].x, list[i].y, 7.5);
    
    g.fillStyle = "rgba(0, 124, 33, 0.25)"; 
    for(i in list)
      drawCircle(list[i].x, list[i].y, 5);
   /*
    g.fillStyle = "rgb(255, 0, 0)"; 
    g.fillRect(200, 200, 10, 10);*/
    
}

function drawCircle(x, y, r){
    g.beginPath();
    g.arc(x, y, r, 0, 2 * Math.PI, false);
    g.closePath();
    g.fill();
}