visualized K-means

k-means可視化

by s_yoshiki

HTML

<br>
<div id="content">
    <canvas id="canvas" width="512" height="512"></canvas>
</div>
<hr>

<table>
    <tr>
        <td>クラスタ数 </td>
        <td><input type="text" value="30" id="claster"></td>
    </tr>
    <tr>
        <td>ノード数 </td>
        <td><input type="text" value="600" id="node"></td>
    </tr>
    <tr>
        <td>アニメーションフレーム </td>
        <td><input type="text" value="50" id="frame"></td>
    </tr>
</table>
<div id="msg"></div>

JavaScript

(function(){
    
    //クラスタ数
    var classNode = 9;
    //次元数
    var dim = 2;
    var animationFrame = 10;
    var textArrayMax = 5300;
    
    var range = 512;
    
    //point matrix
    var ptnMap = initMat(dim,textArrayMax); 
    var ptnMapBuffer = new Array(textArrayMax) ;
    var grvArr = initMat(dim,classNode); //nodeの重心
    var grvArrColor = initMat(3,classNode,0,255); //nodeの重心
    
    main();
    //btn.addEventListener("click",function(){});
    
    function init(){
        classNode = parseInt(document.getElementById("claster").value,10);
        textArrayMax= parseInt(document.getElementById("node").value,10);
        animationFrame = parseInt(document.getElementById("frame").value,10);
    }
    
    function main(){
        init()
        
        ptnMap = initMat(dim,textArrayMax); 
        ptnMapBuffer = new Array(textArrayMax) ;
        grvArr = initMat(dim,classNode); 
        grvArrColor = initMat(3,classNode,0,255);
        
        var count = 0;
        try{
            logic();
            document.getElementById("msg").innerHTML= "";
        }catch(e){
            document.getElementById("msg").innerHTML= e;
            setTimeout(main, animationFrame);
        }
        
        function logic(){
            clearCanvas();
            //showPoints(ptnMap,3,"rgb(0,0,0)");
            var buffer = JSON.stringify(grvArr);
            calcClaster();
            var result = JSON.stringify(grvArr);
            //showPoints(grvArr,10,"rgb(255,0,0)");
            for(var i=0;i<grvArr.length;i++){
                drawPoint(grvArr[i],17,vec2rgb(grvArrColor[i],true));
                //drawPoint(grvArr[i],7,"rgb(255,0,0)");
            }
            if(buffer === result){
                //showPoints(grvArr,10,"rgb(255,0,0)");
                setTimeout(main, animationFrame);
                return;
            }
            count++;
            setTimeout(logic, animationFrame);
        }
    }
    function calcClaster(){
        //配列初期化
    ...