我试图根据一组半径'在方形路径上制作一个简单的形状动画。 Atm我使用正弦波来设置位置随着时间的推移,所以它基本上沿着圆形路径动画。 有没有办法使用数学来改变正弦波,使动画成为正方形。我知道还有其他方法可以做到这一点,但我有兴趣学习它背后的数学。
我有一个例子:
t = new Date().getTime()
r = 25
x = (r * Math.cos t * 0.005)
y = (r * Math.sin t * 0.005)
答案 0 :(得分:1)
我们可以做得更好而不仅仅是圆形或方形! 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 - >无限,你得到一个正方形。 尝试使用此代码段;你可以在动画进行时输入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>
答案 1 :(得分:0)
<强> jsFiddle Demo
强>
它实际上不会进行太多修改。考虑到余弦代表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)
答案 2 :(得分:0)
你的变量r应该是两个位置(x,y)的向量,它将分别处理x和y上的位置/增量。看你何时这样做x =(0 * Math.cos t * 0.005),圆圈刚从上到下移动。为了获得形状行为,您需要控制时间上的向量(x和y位置)并使用余数来包装x和y位置(%)。
问候。