라인 and 점

    var points = [],
    velocity2 = 5,
    canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    radius = 5;

    init();

    function init() {
        //포인트 만들기
        for (var i = 0; i<30; i++) {
            createPoint();
        }

        //포인트 라인 만들기
        for (var i=0, l=points.length; i<l; i++) {
            var point = points[i];
            if(i == 0) {
                points[i].buddy = points[points.length-1];
            } else {
                points[i].buddy = points[i-1];
            }
        }

        //애니메이션
        animate();
    }

    function createPoint() {
        var point = {}, 
            vx2, 
            vy2;

        point.x = Math.random() * 200;
        point.y = Math.random() * 200;
        
        point.vx = (Math.floor(Math.random())*2-1) * Math.random();
        vx2 = Math.pow(point.vx, 2);
        vy2 = velocity2 - vx2;

        point.vy = Math.sqrt(vy2) * (Math.random()*2-1);
        points.push(point);
    }

    function resetVelocity(point, axis, dir) {
        var vx, vy;
        if(axis == 'x') {
            point.vx = dir * Math.random();  
            vx2 = Math.pow(point.vx, 2);
            vy2 = velocity2 - vx2;
            point.vy = Math.sqrt(vy2) * (Math.random()*2-1);
        } else {
            point.vy = dir * Math.random();  
            vy2 = Math.pow(point.vy, 2);
            vx2 = velocity2 - vy2;
            point.vx = Math.sqrt(vx2) * (Math.random()*2-1);
        }
    }

    function drawCircle(x, y) {
        context.beginPath();
        context.arc(x, y, radius, 0, 2 * Math.PI, false);
        context.fillStyle = '#97badc';
        context.fill();  
    }

    function drawLine(x1, y1, x2, y2) {
        context.beginPath();
        context.moveTo(x1, y1);
        context.lineTo(x2, y2);
        context.strokeStyle = '#8ab2d8'
        context.stroke();
    }  

    function draw() {
        for(var i =0, l=points.length; i<l; i++) {
            var point = points[i];
            point.x += point.vx;
            point.y += point.vy;
            drawCircle(point.x, point.y);
            drawLine(point.x, point.y, point.buddy.x, point.buddy.y);
        
            if(point.x < 0+radius) {
                resetVelocity(point, 'x', 1);
            } else if(point.x > 200 - radius) {
                resetVelocity(point, 'x', -1);
            } else if(point.y < 0 + radius) {
                resetVelocity(point, 'y', 1);
            } else if(point.y > 200 - radius) {
                resetVelocity(point, 'y', -1);
            } 
        }
    }

    function animate() {
        context.clearRect ( 0 , 0 , 200 , 200 );
        draw();
        requestAnimationFrame(animate);
    }