Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Fuzzy Sample</title>
        <script type="text/javascript" src="fuzzy.js"></script>
    </head>
    <body>
        <p>
            <canvas id="CANVAS_A" width="300" height="200"></canvas>
            <canvas id="CANVAS_B" width="300" height="200"></canvas>
        </p>
        <p>
            <canvas id="CANVAS_C" width="300" height="200"></canvas>
            <canvas id="CANVAS_D" width="300" height="200"></canvas>
        </p>
        <p>
            <canvas id="CANVAS_E" width="300" height="200"></canvas>
            <canvas id="CANVAS_F" width="300" height="200"></canvas>
        </p>
        <script type="text/javascript">
        <!--
        onload = function(){
            plot(new Fuzzy(100,200),"Fuzzy(100,200)","CANVAS_A");
            plot(new Fuzzy(100,200, true),"Fuzzy(100,200, true)","CANVAS_B")
            plot(Fuzzy.Triangle(100, 150, 200),"Fuzzy.Triangle(100, 150, 200)","CANVAS_C");
            plot(Fuzzy.Palse(100, 200),"Fuzzy.Palse(100, 200)","CANVAS_D");
            plot(Fuzzy.Trapezoid(100, 125, 175, 200),"Fuzzy.Trapezoid(100, 125, 175, 200)","CANVAS_E");
            plot(Fuzzy.Circle(100, 200),"Fuzzy.Circle(100, 200)","CANVAS_F");
            
            function plot(fuzzy, name, canvas){
                var canvas = document.getElementById(canvas);
                var ctx = canvas.getContext("2d");
                var w = canvas.width, h = canvas.height;
                //title
                ctx.font = "16px sans-serif";
                ctx.fillText(name,10 ,20);
                //ruler
                ctx.beginPath();
                ctx.moveTo(0, h / 4);
                ctx.lineTo(w, h / 4);
                ctx.stroke();
                ctx.beginPath();
                ctx.moveTo(0, h / 4 * 3);
                ctx.lineTo(w, h / 4 * 3);
                ctx.stroke();
                //border
                ctx.beginPath();
                ctx.rect(0, 0, w, h);
                ctx.stroke();
                //plot
                ctx.beginPath();
                ctx.lineWidth = 5;
                ctx.strokeStyle = "rgb(255, 0, 0)";
                for(var i = 0; i < w; i++){
                    ctx.lineTo(i, h / 4 * (3 - 2*fuzzy.getT(i)));
                }
                ctx.stroke();
            }
        };
        //-->
        </script>
    </body>
</html>
 
/*
    Fuzzyオブジェクトを作成する
    始点から終点の間で0～1と直線的に変化する真理値を表すファジー論理クラス
    start 始点のx座標
    end 終点のx座標
    [flip] 1～0と変化する場合trueにする
*/
function Fuzzy(start, end, flip){
    var startVal = +!!flip;
    var endVal = +!flip;
    var delta = (endVal - startVal) / (end - start);
    
    /*
        x地点での真理値を返す
        x 真理値を得たい地点のｘ座標
    */
    this.getT = function(x){
        if(start >= x)return startVal;
        else if(end <= x)return endVal;
        else return startVal + delta * (x - start);
    };
}
Fuzzy.prototype = {
    /*
        以下、論理演算
        x このオブジェクトのx地点
        fuzzy 演算するFuzzyオブジェクトまたは値
    */
    and : function(x, fuzzy){
        return Math.min(
            this.getT(x),
            isNaN(fuzzy)?fuzzy.getT(x):fuzzy);
    },
    or : function(x, fuzzy){
        return Math.max(
            this.getT(x),
            isNaN(fuzzy)?fuzzy.getT(x):fuzzy);
    },
    not : function(x){
        return 1 - this.getT(x);
    }
};
​
/*
    以下、サブクラス
*/
//三角（引数：始点、頂点、終点のx座標）
Fuzzy.Triangle = function(start, top, end){
    var fuzzyUp = new Fuzzy(start, top);
    var fuzzyDown = new Fuzzy(top, end, true);
    function Triangle(){}
    Triangle.prototype = new Fuzzy();
    Triangle.prototype.getT = function(x){
        return fuzzyUp.and(x, fuzzyDown);
    };
    return new Triangle();
};
//パルス（引数：始点、終点のx座標）
Fuzzy.Palse = function(start, end){
    var fuzzyUp = new Fuzzy(start, start);
    var fuzzyDown = new Fuzzy(end, end, true);
    function Palse(){}
    Palse.prototype = new Fuzzy();
    Palse.prototype.getT =  function(x){
        return fuzzyUp.and(x, fuzzyDown);
    };
    return new Palse();
};
//台形（引数：上りの始点、上りの終点、下りの始点、下りの終点のx座標）
Fuzzy.Trapezoid = function(upStart, upEnd, downStart, downEnd){
    var fuzzyUp = new Fuzzy(upStart, upEnd);
    var fuzzyDown = new Fuzzy(downStart, downEnd, true);
    function Trapezoid(){}
    Trapezoid.prototype = new Fuzzy();
    Trapezoid.prototype.getT = function(x){
        return fuzzyUp.and(x, fuzzyDown);
    };
    return new Trapezoid();
};
​
//半円（引数：始点、終点のx座標）
Fuzzy.Circle = function(start, end){
    var r = (end - start) / 2;
    function Circle(){}
    Circle.prototype = new Fuzzy();
    Circle.prototype.getT = function(x){
        if(start > x || end <= x)return 0;
        else return Math.sin(Math.acos((x - start) / r - 1));
    };
    return new Circle();
};
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers