Fatal编程技术网
  • javascript/
  • Javascript 画布上，使用正弦波沿方形路径设置形状动画

Javascript 画布上，使用正弦波沿方形路径设置形状动画

javascript animation math canvas coffeescript

Javascript 画布上，使用正弦波沿方形路径设置形状动画,javascript,animation,math,canvas,coffeescript,Javascript,Animation,Math,Canvas,Coffeescript,我正试图使一个简单的形状沿着一个基于“半径”设置的正方形路径设置动画。我用正弦波来设定时间的位置，所以它基本上是沿着一条圆形路径进行动画。 有没有一种方法可以用数学来改变正弦波，使动画变成正方形。我知道还有其他方法可以做到这一点，但我有兴趣学习背后的数学知识 我举了一个小提琴的例子： t = new Date().getTime() r = 25 x = (r * Math.cos t * 0.005) y = (r * Math.sin t * 0.005) 它实际上不需要太多修改。

我正试图使一个简单的形状沿着一个基于“半径”设置的正方形路径设置动画。我用正弦波来设定时间的位置，所以它基本上是沿着一条圆形路径进行动画。 有没有一种方法可以用数学来改变正弦波，使动画变成正方形。我知道还有其他方法可以做到这一点，但我有兴趣学习背后的数学知识

我举了一个小提琴的例子：

t = new Date().getTime()

r = 25

x = (r * Math.cos t * 0.005) 
y = (r * Math.sin t * 0.005)

它实际上不需要太多修改。考虑到余弦表示x坐标，sin表示y坐标，很明显，要创建正方形路径，必须将其中一个值设置为整数值，而不是部分数值

因此，Math.cos t和Math.sin t需要使用变量和条件进行调节

xcos = Math.cos t * 0.005
ysin = Math.sin t * 0.005

if Math.abs(xcos) > Math.abs(ysin)
 xcos = Math.round(xcos)                                       
else
 ysin = Math.round(ysin)     

x = @cx + (radius * xcos)
y = @cy + (radius * ysin)
变量r应该是两个位置（x，y）的向量，分别处理x和y上的位置/增量。看，当你这样做的时候，x=（0*Math.cos t*0.005）圆圈从上到下移动。为了获得形状行为，您需要随时间控制向量（x和y位置），并使用余数来包裹x和y位置（%）

问候。

我们可以做得比只做圆形或方形更好！x和y的方程可以用指数D来概括：

 x = (r^D * cos(theta))^(1/D) and y = (r^D * sin(theta))^(1/D)
当D=1时，你会得到一个圆的熟悉方程。当D=0.5时，得到一颗钻石；当D<0.5时，得到尖星。当D>1时，你会得到越来越块状的形状，当D->infinity时，你会得到一个正方形。 用这个片段试一试；可以在动画进行时键入D的新值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>animation problem</title>
<script type='text/javascript'>
    function demo(){
        var w = 400;
        var ctx = document.getElementById("canvas").getContext("2d");
        ctx.canvas.width = w;
        ctx.canvas.height = w;
        var r = w/4;
        var theta = 0;

        setInterval(function(){
            ctx.canvas.width += 0;    //  clear the canvas
            ctx.translate(w/2, w/2);  //  center it on (0,0)
            var D = +document.getElementById("exponent").value;

            var xSign = Math.cos(theta) < 0 ? -1 : 1;  // Handle all quadrants this way
            var ySign = Math.sin(theta) < 0 ? -1 : 1;
            var x = xSign*Math.pow( Math.pow(r, D)*Math.abs(Math.cos(theta)), 1/D );
            var y = ySign*Math.pow( Math.pow(r, D)*Math.abs(Math.sin(theta)), 1/D );
            ctx.fillStyle = "blue";
            ctx.arc( x, y, 20, 0, 6.2832, false );
            ctx.fill();

            theta += Math.PI/100;
        }, 20);
    }
</script>
</head>
<body onload='demo()'>
    <input id='exponent' type=text value='1'\>
    <br />
    <canvas id='canvas'></canvas>
</body>
</html>


动画问题
函数demo（）{
var w=400；
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
ctx.canvas.width=w；
ctx.canvas.height=w；
var r=w/4；
varθ=0；
setInterval（函数（）{
ctx.canvas.width+=0；//清除画布
ctx.translate（w/2，w/2）；//将其置于（0,0）中心
var D=+document.getElementById（“指数”）.value；
var xSign=Math.cos（θ）<0？-1:1；//以这种方式处理所有象限
var-ySign=Math.sin（θ）<0？-1:1；
var x=xSign*Math.pow（Math.pow（r，D）*Math.abs（Math.cos（θ）），1/D）；
变量y=ySign*Math.pow（Math.pow（r，D）*Math.abs（Math.sin（θ）），1/D）；
ctx.fillStyle=“蓝色”；
ctx.arc（x，y，20，0，6.2832，假）；
ctx.fill（）；
θ+=数学π/100；
}, 20);
}