在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,output

当然，这是一些代码，但是它并不复杂：只是一个类，它模拟一条多边形路径，当我们向其添加点时跟踪其长度，以及一个绘制多边形的绘制函数以及一些偏移函数，通过以规则的时间间隔对多边形进行采样并计算每个点的法线。

真正的问题是：如何处理偏移数据中的重叠？例如，在上面的示例中：

这里有一个非常明显的区域，我们需要做的事情……

那我们该怎么办？结果：没人知道，这完全取决于您。例如，您可能会绘制“不均匀”的正弦，以便始终在多边形截面的终点处结一个节点。可能会起作用，但是如果连续的线段之间的角度足够小，您可能还会重叠。再加上您的罪过是不均匀的，那么看起来不错吗？恩...取决于你。或者，您可以在多边形过渡处将偏移强度降低为零，然后将其渐变回100％，但这看起来不错吗？不知道，那是您的电话。您也可以使用插值法，以使正弦波在过渡时“融合”。 那个看起来好吗？再次，不知道，仍然取决于您。您甚至可以用诸如二次曲线或三次曲线之类的东西替换多边形的有问题的部分，因此您始终具有平滑的过渡，正弦偏移将沿着该过渡“起作用”，但这看起来不错吗？ ...你有主意=）

我们可以回答的问题部分不是很有趣，而不幸的是，我们很遗憾不能为您回答这个问题...

不过，我们可以提供一些建议：我不知道您的多边形代表什么，但是“曲线”几乎总是可以像刺一样工作（几乎是因为曲线可以也具有不连续性，这是（您要避免的事情），因此，如果您可以构造曲线，可能值得。但是，当您的角度太小时，不会解决奇怪的重叠问题：

与教科书“在这种情况下，请执行以下操作……”解决方案相比，您仍然只能通过“行政决策”解决问题。