HTML 5 JavaScriptシミュレーション流体効果
5789 ワード
現実世界の物体をコンピュータにシミュレートするには、簡単な物理実験、衝突回転などの難易度はそれほど高くなく、難易度の高いものは流体シミュレーションであるべきだ.
本文はCanvasの中で1つの2 D平面内の水玉をシミュレートして、関連する知識点と技巧は含みます:Jscex基礎知識、ベッセル曲線の描画、CanvasRenderingContext 2 DのtranslateとrotateなどのAPIを合理的に利用します.
楕円を描画
水滴をシミュレートする前に、canvasで楕円を描く方法を考えてみましょう.
以下のいくつかの案を簡単に考えることができます.
1.楕円デカルト座標系方程式に基づいて描画
2.楕円極座標方程式に基づいて描画
3.楕円の曲率の変化に基づいて描画
4.4つのベッセル曲線で描画
第4には、複雑な計算を避けることができる、CanvasRenderingContext 2 DのAPI(APIの性能は厳格なテストによるものであり、一般的には比較的信頼できる)を十分に利用することができる性能が最も優れている.
4つ目の方法で楕円を描きます
(drawEllipseの4つのパラメータを変更してみてください)
かいてんだえん
ここでの回転は上のdrawEllipseの最初の2つのパラメータx,yの周りではなく,2つは楕円の中心の周りで回転する.だからCanvasRenderingContext 2 DだけCanvasRenderingContext 2 D.rotateはキャンバスの左上隅(0,0)を中心に回転します.まず(0,0)をCanvasRenderingContext 2 Dでtranslateは楕円の中心に着いて、それからdrawEllipse(-a/2,–b/2,a,b).
上の言葉は、中心を中心に回転するコアです.ここでは任意の図形や画像(約束の中心があると仮定)にも広げることができる.図:
鳥の巣を描くことができます
HTML 5実験:JavaScriptシミュレーション流体効果
水滴を描く
回転する楕円と鳥の巣の神馬の水滴はどんな関係がありますか?
楕円の長軸と短軸を変えることで、円形に非常に近づけ(近づくしかなく、円形に等しくならない)、キャンバスを回転するたびに消去すると、予想外の効果が得られます.
なお、消去キャンバスはCanvasRenderingContext 2 Dではない.clearRect(0,0,canvas.width,canvas.height)でいいです.キャンバスが回転し、キャンバスの原点がtranslateされているのでctxを使用します.clearRect(-canvas.width,-canvas.height,2*canvas.width,2*canvas.height)でキャンバスを消去します.
長軸42、短軸40の楕円を描き、キャンバスを回転させて消去します.
どんな効果がありますか?
オンラインプレゼンテーション効果の表示http://www.cnblogs.com/iamzhanglei/archive/2011/12/12/2284188.html
今みんなは1つの揺れる水玉を見ることができて、流体の実験はちょうど始まって、この編はただ1つの起点です・・・
記事はit 168から転載
本文はCanvasの中で1つの2 D平面内の水玉をシミュレートして、関連する知識点と技巧は含みます:Jscex基礎知識、ベッセル曲線の描画、CanvasRenderingContext 2 DのtranslateとrotateなどのAPIを合理的に利用します.
楕円を描画
水滴をシミュレートする前に、canvasで楕円を描く方法を考えてみましょう.
以下のいくつかの案を簡単に考えることができます.
1.楕円デカルト座標系方程式に基づいて描画
2.楕円極座標方程式に基づいて描画
3.楕円の曲率の変化に基づいて描画
4.4つのベッセル曲線で描画
第4には、複雑な計算を避けることができる、CanvasRenderingContext 2 DのAPI(APIの性能は厳格なテストによるものであり、一般的には比較的信頼できる)を十分に利用することができる性能が最も優れている.
4つ目の方法で楕円を描きます
var canvas;
var ctx;
canvas = document.getElementById("myCanvas1");
ctx = canvas.getContext("2d");
ctx.strokeStyle = "#fff";
function drawEllipse(x, y, w, h) {
var k = 0.5522848;
var ox = (w / 2) * k;
var oy = (h / 2) * k;
var xe = x + w;
var ye = y + h;
var xm = x + w / 2;
var ym = y + h / 2;
ctx.beginPath();
ctx.moveTo(x, ym);
ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
ctx.stroke();
}
ctx.clearRect(0,0,canvas.width,canvas.height);
drawEllipse(10, 10, 40, 82);
(drawEllipseの4つのパラメータを変更してみてください)
かいてんだえん
ここでの回転は上のdrawEllipseの最初の2つのパラメータx,yの周りではなく,2つは楕円の中心の周りで回転する.だからCanvasRenderingContext 2 DだけCanvasRenderingContext 2 D.rotateはキャンバスの左上隅(0,0)を中心に回転します.まず(0,0)をCanvasRenderingContext 2 Dでtranslateは楕円の中心に着いて、それからdrawEllipse(-a/2,–b/2,a,b).
上の言葉は、中心を中心に回転するコアです.ここでは任意の図形や画像(約束の中心があると仮定)にも広げることができる.図:
鳥の巣を描くことができます
var canvas;
var ctx;
var px = 0;
var py = 0;
function init() {
canvas = document.getElementById("myCanvas2");
ctx = canvas.getContext("2d");
ctx.strokeStyle = "#fff";
ctx.translate(70, 70);
}
init();
var i = 0;
function drawEllipse(x, y, w, h) {
var k = 0.5522848;
var ox = (w / 2) * k;
var oy = (h / 2) * k;
var xe = x + w;
var ye = y + h;
var xm = x + w / 2;
var ym = y + h / 2;
ctx.beginPath();
ctx.moveTo(x, ym);
ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
ctx.stroke();
ctx.translate(x + 70, y + 100);
px = -70;
py = -100;
ctx.rotate(10 * Math.PI * 2 / 360);
}
var ct;
var drawAsync = eval(Jscex.compile("async", function (ct) {
while (true) {
drawEllipse(px, py, 140, 200)
$await(Jscex.Async.sleep(200, ct));
}
}))
function Button1_onclick() {
ct.cancel();
}
function Button2_onclick() {
ct = new Jscex.Async.CancellationToken();
drawAsync(ct).start();
}
HTML 5実験:JavaScriptシミュレーション流体効果
水滴を描く
回転する楕円と鳥の巣の神馬の水滴はどんな関係がありますか?
楕円の長軸と短軸を変えることで、円形に非常に近づけ(近づくしかなく、円形に等しくならない)、キャンバスを回転するたびに消去すると、予想外の効果が得られます.
なお、消去キャンバスはCanvasRenderingContext 2 Dではない.clearRect(0,0,canvas.width,canvas.height)でいいです.キャンバスが回転し、キャンバスの原点がtranslateされているのでctxを使用します.clearRect(-canvas.width,-canvas.height,2*canvas.width,2*canvas.height)でキャンバスを消去します.
長軸42、短軸40の楕円を描き、キャンバスを回転させて消去します.
function drawEllipse(x, y, w, h) {
ctx.clearRect(-canvas.width, -canvas.height, 2 * canvas.width, 2 * canvas.height);
var k = 0.5522848;
var ox = (w / 2) * k;
var oy = (h / 2) * k;
var xe = x + w;
var ye = y + h;
var xm = x + w / 2;
var ym = y + h / 2;
ctx.beginPath();
ctx.moveTo(x, ym);
ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
ctx.stroke();
ctx.translate(x + 20, y + 21);
px = -20;
py = -21;
ctx.rotate(10 * Math.PI * 2 / 360);
}
var ct;
var drawAsync = eval(Jscex.compile("async", function (ct) {
while (true) {
drawEllipse(px, py, 40, 42)
$await(Jscex.Async.sleep(10, ct));
}
}))
どんな効果がありますか?
オンラインプレゼンテーション効果の表示http://www.cnblogs.com/iamzhanglei/archive/2011/12/12/2284188.html
今みんなは1つの揺れる水玉を見ることができて、流体の実験はちょうど始まって、この編はただ1つの起点です・・・
記事はit 168から転載