Bezier2 ryuone Follow 2011-11-09 01:05:46 License: MIT License Fork0 Fav1 View414 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); } }); <script charset='utf-8' src='http://code.jquery.com/jquery-git.js'></script> <canvas id='world' width=465 height=465></canvas> Bezier2 *{padding:0; margin:0;} body { background-color: #DDDDDD; font: 30px sans-serif; overflow:hidden;} $(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;} use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか? Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet 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> Tweet twitter Favorite by yueliang