canvas实现DBSCAN聚类算法可视化过程代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：canvas实现DBSCAN聚类算法可视化过程代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html  lang="en-us">
<head>
        <meta charset="utf-8">


</head>
<body>



<div class="center">
        <article>
                <div class="social">
    
</div>
                <h1 class="title">DBSCAN</h1>
                

                <div class="content"><div>
  <p>A visualization of a <a href="http://en.wikipedia.org/wiki/DBSCAN">DBSCAN algorithm</a>.</p>
<style>
    .post {
        max-width: none;
        width: 640px;
        padding: 0;
    }
</style>
<header>
        <nav id="menu"></nav>
        <div class="clear"></div>
</header>
<p><canvas id="canvas" ></canvas></p>
<script>
    
Math.TAU = Math.PI*2;

function $P(x,y){ return new Point(x,y);}
function Point(x,y){
        this.x = x;
        this.y = y;
}

Point.prototype = {
        toString : function(){ 
                return "<" + this.x.toFixed(2) + ";" + this.y.toFixed(2) + ">"; 
        }
};

function $R(left, top, right, bottom){
        return new Rect(left, top, right, bottom);
}

function Rect(left, top, right, bottom){
        this.left = left;
        this.top = top;
        this.right = right;
        this.bottom = bottom;
}

Rect.prototype = {
        get width(){ return Math.abs(this.right - this.left); },
        get height(){ return Math.abs(this.bottom - this.top); },

        get dx(){ return this.right - this.left; },
        get dy(){ return this.bottom - this.top; },

        get topLeft(){ return new Point(this.left, this.top); },
        get bottomRight(){ return new Point(this.right, this.bottom); },

        intersect : function(rect){
                var left = this.left > other.left ? this.left : other.left,
                        top = this.top > other.top ? this.top : other.top,
                        right = this.right < other.right ? this.right : other.right,
                        bottom = this.bottom < other.bottom ? this.bottom : other.bottom;
                return new Rect(left, top, right, bottom);
        }
};

function sortRange(zero, from, to, delta){
        if (from < to) {
                return {from:from, to:to, delta:Math.abs(delta)};
        } else {
                return {from:to, to:from, delta:Math.abs(delta)};
        }
}
</script>
<script >
    
function clone(obj){
        if(typeof(obj) != "object")
                return obj;
        var result = {};
        for(var i in obj)
                result[i] = clone(obj[i]);
        return result;
}

function foreach(obj, f){
        if(obj instanceof Array){
                for(var i = 0; i < obj.length; i += 1){
                        f(obj[i], i, obj);
                };
        } else {
                for(var name in obj){
                        if(!obj.hasOwnProperty(name)) continue;
                        f(obj[name], name, obj);
                };
        }
}
</script>
<script >
    function $(id){ return document.getElementById(id); }
main = {
        canvas : $("canvas"),
        draw : null,
        nav  : $("menu"),
        size : {x: 480, y:480},
        
        updateTimer: 0,
        drawTimer: 0,
        history: [],

        tick : 0,
        updateRate: 1000,
        drawRate : 33,

        running : false,

        state : null,
        updates : function(state){},
        render : function(draw, size, state){},
        
        runRendering: function(){
                this.drawTimer = window.setInterval($render, this.drawRate);
        },
        stopRendering: function(){
                window.clearInterval(this.drawTimer);
        },
        
        run : function(){ 
                this.stop();
                this.running = true;
                this.updateTimer = window.setInterval($update, this.updateRate);
        },
        stop : function(){ 
                this.running = false;
                window.clearInterval(this.updateTimer);
        },
        reset : function(){
                this.stop();
                this.tick = 0;
                this.history = [];
                this.state = {};
                this.resetState(this.draw, this.size, this.state);
                this.render(this.draw, this.size, this.state);
        },

        log : function(data){
                this.history.unshift(data);
        },
        
        update : function(){
                this.tick += 1;
                this.updates(this.state);
        },
        updateDisplay : function(){
                this.render(this.draw, this.size, this.state);
        },
        setSize : function(w,h){
                this.size = {x:w, y:h};
                this.canvas.width = this.size.x;
                this.canvas.height = this.size.y;
        },

        mouse : $P(0,0)
};

$update = function(){main.update()};
$run    = function(){main.run()};
$stop   = function(){main.stop()};
$reset  = function(){main.reset()};
$render = function(){main.updateDisplay()};

main.draw = main.canvas.getContext("2d");

function button(caption, func){
        var elem = document.createElement("button");
        elem.innerHTML = caption;
        elem.addEventListener("click", func);
        main.nav.appendChild(elem);
        return elem;
}

function input(id, value){
        var elem = document.createElement("input");
        elem.id = id;
        elem.value = value;
        main.nav.appendChild(elem);
        return elem;
}

main.canvas.addEventListener("mousemove", function(e){
        main.mouse.x = e.pageX - main.canvas.offsetLeft;
        main.mouse.y = e.pageY - main.canvas.offsetTop;
});

</script>
<script >
    inputData = {
        A : {x : 2, y : 4 },
        B : {x : 7, y : 3 },
        C : {x : 3, y : 5 },
        D : {x : 5, y : 3 },
        E : {x : 7, y : 4 },
        F : {x : 6, y : 8 },
        G : {x : 6, y : .........完整代码请登录后点击上方下载按钮下载查看