畫布，沿正方形路徑使用正弦波形狀創建動畫

我正在嘗試使一個簡單的形狀沿基於「半徑」設置的方形路徑生成動畫。 Atm我使用正弦波來設置隨時間變化的位置，所以它基本上沿着圓形路徑進行動畫製作。有沒有一種方法使用數學來改變正弦波，使動畫正方形。我知道還有其他方法可以做到這一點，但我有興趣瞭解它背後的數學。畫布，沿正方形路徑使用正弦波形狀創建動畫

我有一個例子小提琴：

t = new Date().getTime() 

r = 25 

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

http://jsfiddle.net/Z5hrM/1/

來源

2014-06-06 user155595

jsFiddle Demo

它實際上不會花費太多的修改。考慮到餘弦表示x座標，並且sin表示y座標，應該很明顯，要製作正方形路徑，必須將這些值中的一個設置爲整個值而不是部分值。

結果，Math.cos噸和Math.sin噸將需要與一個變量和條件來調節

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)

來源

2014-06-06 16:16:22

你

變量r應該是兩個位置的向量（x，y）的將分別處理x和y上的位置/增量。看看你什麼時候做這個x =（0 * Math.cos t * 0.005）這個電路剛剛從上到下移動。爲了獲得形狀行爲，您需要在整個時間內控制向量（x和y位置），並使用餘數來包裝x和y位置（％）。

問候。

來源

2014-06-06 16:19:48 FreddGO

我們可以做的不僅僅是圓形或方形！爲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>

來源

2016-10-26 15:14:20 Rob

畫布，沿正方形路徑使用正弦波形狀創建動畫

回答

相關問題