2

複雑な関数プロッタ用に次のコードがあります。複素関数f（z）= z *（z + 5）（zv）の位相プロットを作成します。ここで、vはマウスが指している場所です。ご覧のとおり、かなり遅いです。これをスピードアップしてスムーズなアニメーションを取得する方法はありますか？私を正しい方向に向けるだけで助かります。

<html>
<head>
<script type="text/javascript" src="jquery-1.8.1.js"></script>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
var ctx;// = canvas.getContext("2d");

//The following functions convert pixel Xs and Ys to real and imaginary 
//parts of a complex    number, and back again
var pixToReal = function(n){return n/15.0-10.0};
var pixToImag = function(n){return  - n/15.0+10}
var realToPix = function(x){return Math.round((x+10.0)*15)}
var imagToPix = function(y){return Math.round((-y+10.0)*15)}

//Storing the complex number a+bi as [a,b], the following functions add, 
//multiply, and  find the modulus of the complex number
var add = function(z1,z2){return [z1[0]+z2[0],z1[1] + z2[1]]}
var mult = function(z1,z2){return [z1[0]*z2[0]-z1[1]*z2[1],z1[0]*z2[1]+z1[1]*z2[0]]}
var modulus = function(z){
    if (z[1]>0){return Math.atan2(z[1],z[0])}
    else {return Math.atan2(z[1],z[0])+2*Math.PI}
    };

//Takes a complex number and returns the RGB value of the corresponding 
//point on the color wheel.
var complexToRGB = function(z){
var theta = modulus(z)%(2*Math.PI)
var Hp = (theta/(2*Math.PI))*6
var X = Math.abs(Math.round((1 - Math.abs(Hp%2 -1))*255))
var C =  "rgb(0,0,0)"
if (Hp>=0 && Hp<1){
    C = "rgb("+255+","+X+",0)"
    };
if (1<=Hp && Hp<2){
    C = "rgb("+X+","+255+",0)"}
if (2<=Hp && Hp<3){
    C = "rgb("+0+","+255+","+X+")"}
if (3<=Hp && Hp<4){
    C = "rgb("+0+","+X+","+255+")"}
if (4<=Hp && Hp<5){
    C = "rgb("+X+","+0+","+255+")"}
if (5<=Hp && Hp<6){
    C = "rgb("+255+","+0+","+X+")"}
return  C

}

//a complex number
var v = [0,4] 

//the function f(z) = z*(z+5)*(z+v)
var f = function(z){return mult(add(mult(z,z),mult([5,5],z)),add(z,v))}

//makes v the opposite complex number your mouse is pointing at, 
//i.e. your mouse points at a root of f
function onMouseMove(evt) {
v = [-pixToReal(evt.pageX), -pixToImag(evt.pageY)];
}

$(document).mousemove(onMouseMove);

makeFrame = function(){
 ctx.clearRect(0,0,300,300);
 for (var n =0;n<300;n++){
     for (var m=0;m<300;m++){
        var x = pixToReal(n)
        var y = pixToImag(m)
        var z = [x,y]
        var w = f(z) 
        ctx.fillStyle = complexToRGB(w)
        ctx.fillRect(n,m,1,1)
        }
       }
   }

 function animate() {
 ctx = canvas.getContext("2d");
 return setInterval(makeFrame, 1);
 }

 animate();

}
 </script>
</head>
<body onload="draw()">
  <canvas id="canvas" width="300" height="300"></canvas>
</body>

4

2 に答える 2

3

私はそれを約500％スピードアップするいくつかの迅速な最適化を行いました。さらにスピードアップできると思いますが、もう少し手間がかかります。

私がしたことは：

  • fillStyleとfillRectを使用してピクセル値を設定する代わりに、すべてのピクセル値を配列（imageData）として取得し、makeFrame（）がimageData配列を操作してから、putImageData（）を使用してすべてのピクセルを一度に設定します。
  • 上記の変更では、complexToRGB（）が文字列ではなく、赤、緑、青の色の値で配列を再調整する必要がありました。
  • complexToRGB（）関数で、if-caseのリストがif-elseのチェーンに変更されました（これは、真の条件の後の条件が評価されないため、より高速です）。
  • setIntervalを1000fpsから25に変更しました。アルゴリズムがそのフレームレートに追いつくことができないため、より現実的なフレームレートに設定することをお勧めします。

これがjsFiddleとしてのコードです。

次のステップ：できるだけ多くの関数呼び出しを削除しようとします。たとえば、内側のforループでpixToReal（）式とpixToImag（）式をインライン化します。

for (var m = 0; m < 300; m++) {
   var x = n / 15.0 - 10.0;
   var y = -m / 15.0 + 10;

次に、complexToRGB（）でコードを最適化し、その関数に対して同じことを行って、その関数呼び出しを削除することを検討してください。

于 2012-09-09T19:41:53.463 に答える
3

ここでフィドルを作成し、を使用requestAnimationFrameして描画しましImageDataた。かなりうまく機能します、多分あなたは私のものをstrilleのアプローチとマージすることができます。

于 2012-09-09T19:52:48.463 に答える