『毎週1時canvasアニメーション』-円周運動

「毎週1時canvasアニメーション」--波形運動
円周運動は、 と の2つの基本的な形態に分けることができる.円周運動を説明する前に、数学の公式が近づいてくるに違いない.so、皆さん、膝を守ってください.分からなくても大丈夫です.その原理さえ分かればいいです.もちろん、理解できるのが一番いいです.これは後で高級アニメを勉強するのに役立ちます.いいでしょう.くだらないことは言わないで、直接料理を出してください.
1.正円運動
一般に、円の直角座標方程式は、x2+y2=R2と表すことができ、この式に基づいて直角座標における円の軌跡を導くことができる.x,yの座標位置を変えることで物体を円周運動させることができるかもしれません.しかし、実際にはこの方法は不可能である.物体が円周運動をする座標位置を正確に計算できないからです.物体が円周運動の正確な座標を計算することに成功しても.OK!それがどんなに大きな仕事量なのか想像できます.だから、私たちは考えを変えて、コンピュータにこのような正確な計算問題をさせる必要があります.
上図は,円の関数式から円のパラメータ方程式への変換過程を示している.理解しても理解しても関係ないので、とにかく理解してください.最終的にはx,yとsinとcosを関係にしました.円のパラメータ方程式は円を表します.このように、1つの物体に円周運動をさせるには、コンピュータ自身に各フレームの物体に対応する座標値を計算させるだけです.私たちがしなければならないのは、θ値を簡単に変更することだけです.sinによれば、cos関数の周期性はフレームごとに1つの値を増やしたり、1つの値を減らしたりする必要があるからです.具体的なコードは以下の通りです.

    window.onload = function(){
               var canvas = document.getElementById('canvas'),
                   context = canvas.getContext('2d');

               var ball = new Ball();

               var angle = 0, //      
                   centerX = canvas.width/2,
                   centerY = canvas.height/2,
                   radius = 100, //     
                   speed = 0.05; //           

               (function drawFrame(){
                   window.requestAnimationFrame(drawFrame, canvas);
                   context.clearRect(0,0,canvas.width, canvas.height);

                   //centerX, centerY              
                   ball.x = centerX + Math.sin(angle)*radius;
                   ball.y = centerY + Math.cos(angle)*radius;

                   //    
                   angle += speed;
                   ball.draw(context);
               }());
           }

効果図
OK、自分でやってみよう!球体がキャンバスの中心を回って円周運動をしているかどうか見てみましょう.ここでは多くのangleとRadiusが必要であり,angleだけで円周運動を実現する方法について後述する.もっと理解しやすいように、中学校の知識を復習したほうがいいとお勧めします.ははは!!!
2.楕円運動
楕円と正円の違いは、x軸とy軸における正円半径の距離が同じであり、いずれもRadiusであることが理解できる.楕円は異なり、a,bで表されます.
具体的にコードに入ると、半径が違いますよね!so easyかどうか、上コード:

window.onload = function(){
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            var ball = new Ball();
            
            var centerX = canvas.width/2,
                centerY = canvas.height/2,
                angle = 0,
                radiusX = 50,
                radiusY = 100,
                speed = 0.05;
            
                ball.x = centerX;
                ball.y = centerY;
                
             context.fillStyle = "rgba(0,0,0,.01)"; 
            (function drawFrame(){
                window.requestAnimationFrame(drawFrame,canvas);
                context.fillRect(0,0,canvas.width,canvas.height);
                
                // radius          
                // radius           
                ball.x = centerX + Math.sin(angle)*radiusX; //radiusX = 50
                ball.y = centerY + Math.cos(angle)*radiusY; //radiusY = 100
                angle += speed;
                
                ball.draw(context);
            })();
        }

楕円の効果をより顕著に見せるためにclearRectの代わりにfillRectを採用するのは小球の運動が尾跡を形成する.
三、二点間の距離
そもそも,連点間の距離は三角関数には用いられない.しかし,実は2点間の距離公式は勾配定理によって推定できるので,ここでは直接三角関数に帰す.ここでは模式図を描かずに直接公式をあげましょう(怠け者を盗んで許してください)、2つの点があると仮定します.a(x 1,y 1),b(x 2,y 2).では、どのようにしてそれらの間の距離を求めますか?式は次のとおりです.

    dx = x2 - x1;
    dy = y2 - y1;
    distance = Math.sqrt(dx*dx + dy*dy); //        

ここでは小さなDemoをあげます.コードは以下の通りです.

    
           your browser not support canvas!
       
       

       
       
       window.onload = function(){
               var canvas = document.getElementById('canvas');
               var log = document.getElementById('log');
               var mouse = utils.captureMouse(canvas);
               var context = canvas.getContext('2d');

               //          
               var rect = {
                   x:canvas.width/2,
                   y:canvas.height/2
               };

               (function drawFrame(){
                   window.requestAnimationFrame(drawFrame,canvas);
                   context.clearRect(0,0,canvas.width,canvas.height);

                   var dx = mouse.x - rect.x;
                   var dy = mouse.y - rect.y;
                   var dis = Math.sqrt(dx*dx + dy*dy);

                   //   
                   context.fillStyle = '#ffffff';
                   context.fillRect(rect.x-2,rect.y-2,4,4);
                   //  
                   context.save();
                   context.strokeStyle = '#ffffff';
                   context.beginPath()
                   context.moveTo(rect.x,rect.y);
                   context.lineTo(mouse.x,mouse.y);
                   context.closePath();
                   context.stroke();
                   context.restore();
                   //    
                   log.style.left = (mouse.x + rect.x)/2 + 'px';
                   log.style.top = (mouse.y + rect.y)/2 + 'px';
                   log.innerHTML = dis;
               })();
           }
    

效果图

四、总结

    ##     
    dx = mouse.x - object.x;
    dy = mouse.y - object.y;
    object.rotation = Math.atan2(dy,dx)*180/Math.PI

    ##     
       value = center + Math.sin(angle)*range;
       angle += speed;

    ##     
       x_position = centerX + Math.sin(angle)*radius;
       y_position = centerY + Math.cos(angle)*radius;
       angle += speed;

    ##     
       x_position = centerX + Math.cos(angle)*radiusX;
       y_position = centerY + Math.sin(angle)*radiusY;
       angle += speed;

    ##     
    dx = x2 - x1;
    dy = y2 - y1;
    dist = Math.sqrt(dx*dx + dy*dy);