在JavaScript中圍繞路徑制作正弦波曲線

Question

我試圖找出一種很好的方法來使正弦波自然地沿着javascript路徑流動。 我做了這樣的事情：

捕獲了一些意圖，但是它是非常強迫和不自然的，尤其是在變更方向周圍。 我也很想適應更高的坡度，但是不確定是否能帶來更自然的效果。

關於我如何能夠做到這一點的任何想法？

目的是：

1）取一點

2）分成相等的段

3）通過正弦坐標和實際坐標的差來調整實際坐標的位置。

但是，這會產生非常弱的顯示效果，我想創建一種更自然，更流暢的東西，好像捕獲沿路徑傳播的正弦波的流動一樣。

var c = document.getElementById("c");
var ctx = c.getContext("2d");
var cw = c.width = window.innerWidth;
var ch = c.height = window.innerHeight;
var cx = cw / 2,
  cy = ch / 2;
var rad = Math.PI / 180;
var w = cw;
var h = ch * 0.3;
var amplitude = h;
var frequency = 0.01;
var phi = 0;
var frames = 0;
var stopped = true;
ctx.lineWidth = .4;

var offset = 100;

var points = interpolateLineRange( [ [0, 0], [ 95, 58], [84, 158], [350, 300], [540, 190] ], 20);
points = interpolateLineRange(points, 100);

ctx.moveTo(0, 0);
var distance_traveled = 0;
var current_slope = 0;

for (var ii in points) {

  if (ii == 0) {
    continue;
  }
  distance_traveled += dist(points[ii - 1], points[ii]);
  current_slope = slope(points[ii - 1], points[ii]);

  var newY = Math.sin(distance_traveled * .07) * 45 + points[ii][1];
  var diff = newY - points[ii][1];

  if (points[ii][1] > points[ii - 1][1]) {
    ctx.lineTo(points[ii][0] - diff, newY);
  } else {
    ctx.lineTo(points[ii][0] + diff, newY);
  }
}

ctx.stroke();
ctx.moveTo(0, 0);

for (var ii in points) {
  ctx.lineTo(points[ii][0], points[ii][1]);
}
ctx.strokeStyle = 'red';
ctx.stroke();

Answer 1

問題並不是真正的“沿路徑繪制正弦波”：這部分實際上是微不足道的。 采取路徑部分，用距離或時間變量表示，然后將正弦（或其他任何東西）繪制為偏移函數：

for t=0; t<distance; t+=fraction of distance:
  point = path.get(t)
  normal = path.normal(t)
  strength = sin(t)
  if t=0:
    ctx.moveTo(point + strength * normal)
  else: 
    ctx.lineTo(point + strength * normal)

足夠簡單，讓我們實現一下： http : //jsbin.com/nefemazovo/edit?js，輸出

當然，這是一些代碼，但是卻並不復雜：只是一個模擬多邊形路徑的類（當我們向其添加點時跟蹤其長度），以及一個通過采樣繪制多邊形的繪制函數以及一些偏移函數以規則的間隔繪制多邊形並計算每個點的法線。

真正的問題是：您將如何處理偏移數據中的重疊？ 例如，從上面的示例中：

這里有一個非常明顯的區域，我們需要做的事情...

那么我們該怎么辦？ 結果：沒人知道，這完全取決於您。 例如，您可能會繪制“不均勻”的正弦，以便始終在多邊形截面的終點處結一個節點。 可能會起作用，但是如果連續的線段之間的角度足夠小，您可能還會重疊。 再加上您的罪過是不均勻的，那么看起來不錯嗎？ 恩...取決於你。 或者，您可以在多邊形過渡處將偏移強度降低為零，然后將其漸變回100％，但這看起來不錯嗎？ 不知道，那是您的電話。 您也可以使用插值法，以使正弦波在過渡時“融合”。 會好看 ？ 再次，不知道，仍然取決於您。 您甚至可以用諸如二次曲線或三次曲線之類的東西替換多邊形的有問題的部分，因此您始終具有平滑的過渡，正弦偏移將沿着該過渡“起作用”，但這看起來不錯嗎？ ...你有主意=）

這個問題我們可以回答的部分並不是超級有趣，而不幸的是我們很抱歉無法為您回答這個有趣的部分。

不過，我們可以提供一些建議：我不知道您的多邊形代表什么，但是“曲線”幾乎總是可以像刺一樣工作（幾乎是因為曲線也可能具有不連續性，這是您要避免的事情），因此如果您可以構造曲線，可能值得。 但是，如果您的角度太小，那將無法解決奇怪的重疊問題：

與教科書“在這種情況下，請執行以下操作……”解決方案相比，您仍然只能通過“執行決策”解決問題。