Bezier2

ryuone

2011-11-09 01:05:46

License: MIT License

Fork: 0

Fav: 1

View: 414

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 150 lines
HTML 2 lines
CSS 4 lines

Bezier2

$(function(){
    /***************************************************
     * BezierPoint定義
     */
    function BezierPoint(ctx){
        this.ctx  = ctx;
        this.COLOR = 'rgb(0, 0, 0)';

this.point = new Point(0,0);
    }
    BezierPoint.prototype.x = function(xpos){
        if(!$.isNumeric(xpos)){
            return this.point.x;
        }
        this.point.x = xpos;
        return null;
    };

BezierPoint.prototype.y = function(ypos){
        if(!$.isNumeric(ypos)){
            return this.point.y;
        }
        this.point.y = ypos;
        return null;
    };
    BezierPoint.prototype.draw = function(point){
        this.ctx.beginPath();
        this.ctx.fillStyle = this.COLOR;
        this.ctx.arc(this.point.x, this.point.y, 2, 0, Math.PI*2, true);
        this.ctx.closePath();
        this.ctx.fill();
    };

/***************************************************
     * Point定義
     */
    function Point(x, y){
        this.xpos = x;
        this.ypos = y;
    }
    Point.prototype.x = function(){
        return this.xpos;
    };
    Point.prototype.y = function(){
        return this.ypos;
    };
    
    $.BezierPoint = BezierPoint;
    $.Point = Point;
});

$(function(){
    var INTERVAL_MSEC = 100;
    var canvasObj = $('canvas').get(0);
    var ctx = canvasObj.getContext('2d');
    var canvasWidth = canvasObj.width;
    var canvasHeight = canvasObj.height;
    var tpoint = 0;

var p0 = new $.BezierPoint(ctx);
    var p1 = new $.BezierPoint(ctx);
    var p2 = new $.BezierPoint(ctx);

setInterval(enterFrameHandler, INTERVAL_MSEC);

p0.x(10);  p0.y(280);
    p1.x(200);  p1.y(40);
    p2.x(300); p2.y(380);

function enterFrameHandler(){
        ctx.fillStyle = "rgb(255, 255, 255)";
        ctx.fillRect(0, 0, canvasWidth, canvasHeight);
        
        p0.draw();
        p1.draw();
        p2.draw();

drawLine(p0, p1);
        drawLine(p0, p2);

var pos1,pos2;
        for(var t=0, tmax=1; t<tmax; t+=0.05){
            pos1 = getInnerPoint(p0, p1, t);
            pos2 = getInnerPoint(p2, p0, t);
            drawLine(pos1, pos2);
        }
        
        var pos;
        pos = QuadraticBezPoint(p1, p0, p2, tpoint);
        drawPoint(pos.x(), pos.y());
        tpoint += 0.01;
        if(tpoint>1){ tpoint = 0;}
    }

function QuadraticBezPoint(p0,p1,p2,d){
        var expr = function(p0, p1, p2, d){
            var expA = (1-d)*p0 + d*p1;
            var expB = (1-d)*p1 + d*p2;

return (1-d)*expA + d*expB;
        };

// 上記の式を展開すると、
        // var expA = (1-d)*p0 + d*p1;
        // var expB = (1-d)*p1 + d*p2;
        // *expAとexpBを結ぶ直線のtの値を求める場合
        //   (1-t)*A + t*B
        //
        // *式を展開すると、
        //   (1-t)*((1-t)*p0 + t*p1) + t*((1-t)*p1 + t*p2)
        //
        // *さらに展開すると、
        //   (1-t)*(1-t)*p0 + (1-t)*t*p1 + t*(1-t)*p1 + t*t*X2
        //
        // *(1-t)*t*X2の見せ方を変えると、
        //   (1-t)*(1-t)*p0 + t*(1-t)*p1 + t*(1-t)*p1 + t*t*p2
        //
        // *同じ箇所をまとめる。この式で求めることができる。
        //   (1-t)*(1-t)*p0 + 2*t*(1-t)*p1 + t*t*p2

var x = expr(p0.x(), p1.x(), p2.x(), d);
        var y = expr(p0.y(), p1.y(), p2.y(), d);

return new $.Point(x,y);
    }
    
    function drawLine(p0, p1){
        ctx.save();
        ctx.strokeStyle = 'rgb(204, 204, 204)';
        ctx.beginPath();
        ctx.moveTo(p0.x(), p0.y());
        ctx.lineTo(p1.x(), p1.y());
        ctx.stroke();
        ctx.restore();
    }

function drawPoint(x,y){
        ctx.beginPath();
        ctx.fillStyle = 'rgb(255, 0, 0)';
        ctx.arc(x, y, 2, 0, Math.PI*2, true);
        ctx.closePath();
        ctx.fill();
    }
    
    function getInnerPoint(p0, p1, t){
        return new $.Point(p0.x() * (1 - t) + p1.x() * t,
                           p0.y() * (1 - t) + p1.y() * t);
    }

});

Bezier2

$(function(){ /*************************************************** * BezierPoint定義 */ function BezierPoint(ctx){ this.ctx = ctx; this.COLOR = 'rgb(0, 0, 0)'; this.point = new Point(0,0); } BezierPoint.prototype.x = function(xpos){ if(!$.isNumeric(xpos)){ return this.point.x; } this.point.x = xpos; return null; }; BezierPoint.prototype.y = function(ypos){ if(!$.isNumeric(ypos)){ return this.point.y; } this.point.y = ypos; return null; }; BezierPoint.prototype.draw = function(point){ this.ctx.beginPath(); this.ctx.fillStyle = this.COLOR; this.ctx.arc(this.point.x, this.point.y, 2, 0, Math.PI*2, true); this.ctx.closePath(); this.ctx.fill(); }; /*************************************************** * Point定義 */ function Point(x, y){ this.xpos = x; this.ypos = y; } Point.prototype.x = function(){ return this.xpos; }; Point.prototype.y = function(){ return this.ypos; }; $.BezierPoint = BezierPoint; $.Point = Point; }); $(function(){ var INTERVAL_MSEC = 100; var canvasObj = $('canvas').get(0); var ctx = canvasObj.getContext('2d'); var canvasWidth = canvasObj.width; var canvasHeight = canvasObj.height; var tpoint = 0; var p0 = new $.BezierPoint(ctx); var p1 = new $.BezierPoint(ctx); var p2 = new $.BezierPoint(ctx); setInterval(enterFrameHandler, INTERVAL_MSEC); p0.x(10); p0.y(280); p1.x(200); p1.y(40); p2.x(300); p2.y(380); function enterFrameHandler(){ ctx.fillStyle = "rgb(255, 255, 255)"; ctx.fillRect(0, 0, canvasWidth, canvasHeight); p0.draw(); p1.draw(); p2.draw(); drawLine(p0, p1); drawLine(p0, p2); var pos1,pos2; for(var t=0, tmax=1; t<tmax; t+=0.05){ pos1 = getInnerPoint(p0, p1, t); pos2 = getInnerPoint(p2, p0, t); drawLine(pos1, pos2); } var pos; pos = QuadraticBezPoint(p1, p0, p2, tpoint); drawPoint(pos.x(), pos.y()); tpoint += 0.01; if(tpoint>1){ tpoint = 0;} } function QuadraticBezPoint(p0,p1,p2,d){ var expr = function(p0, p1, p2, d){ var expA = (1-d)*p0 + d*p1; var expB = (1-d)*p1 + d*p2; return (1-d)*expA + d*expB; }; // 上記の式を展開すると、 // var expA = (1-d)*p0 + d*p1; // var expB = (1-d)*p1 + d*p2; // *expAとexpBを結ぶ直線のtの値を求める場合 // (1-t)*A + t*B // // *式を展開すると、 // (1-t)*((1-t)*p0 + t*p1) + t*((1-t)*p1 + t*p2) // // *さらに展開すると、 // (1-t)*(1-t)*p0 + (1-t)*t*p1 + t*(1-t)*p1 + t*t*X2 // // *(1-t)*t*X2の見せ方を変えると、 // (1-t)*(1-t)*p0 + t*(1-t)*p1 + t*(1-t)*p1 + t*t*p2 // // *同じ箇所をまとめる。この式で求めることができる。 // (1-t)*(1-t)*p0 + 2*t*(1-t)*p1 + t*t*p2 var x = expr(p0.x(), p1.x(), p2.x(), d); var y = expr(p0.y(), p1.y(), p2.y(), d); return new $.Point(x,y); } function drawLine(p0, p1){ ctx.save(); ctx.strokeStyle = 'rgb(204, 204, 204)'; ctx.beginPath(); ctx.moveTo(p0.x(), p0.y()); ctx.lineTo(p1.x(), p1.y()); ctx.stroke(); ctx.restore(); } function drawPoint(x,y){ ctx.beginPath(); ctx.fillStyle = 'rgb(255, 0, 0)'; ctx.arc(x, y, 2, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); } function getInnerPoint(p0, p1, t){ return new $.Point(p0.x() * (1 - t) + p1.x() * t, p0.y() * (1 - t) + p1.y() * t); } });<script charset='utf-8' src='http://code.jquery.com/jquery-git.js'></script> <canvas id='world' width=465 height=465></canvas>*{padding:0; margin:0;} body { background-color: #DDDDDD; font: 30px sans-serif; overflow:hidden;}

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/yNST/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/ryuone/yNST" title="Bezier2">Bezier2 - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code

Favorite by

yueliang

Bezier2

Description どんなゲームですか？

Control Device

Fullscreen

style

code

Tweet

twitter

Favorite by