algorithm - 随机生成弯曲/波浪路径

Question

我有一张比视口(viewport)大得多并位于视口(viewport)中心的 map 的巨幅图像，用户可以通过拖动屏幕来浏览它。为了创造视差效果，我在前景中使用了巨大的云层图像。当用户通过拖动探索 map 时，背景和前景都以视差方式移动。到目前为止，还不错。

但是，我真正想要做的是为云的图像提供一个“默认”运动，该运动将在每次页面加载时随机生成，这样即使用户没有拖动，云也会一直在移动。我知道这可以通过沿路径为前景设置动画来完成，但我不确定如何去做。

如何在每次加载页面时随机生成不规则弯曲或波浪路径？

有人知道可以做到这一点的算法吗？

Answer 1

我还使用以前答案的副本来实现我在评论中暗示的简化版本。

在单位圆上随机游走，即在角度上，确定缓慢但随机变化的速度矢量，并使用三次贝塞尔曲线 block 向前移动。

var c = document.getElementById("c");
var ctx = c.getContext("2d");
var cw = c.width = 600;
var ch = c.height = 400;
var cx = cw / 4, cy = ch / 2;

var angVel = v.value;
var tension = t.value;
ctx.lineWidth = 4;

var npts = 60;
var dw = Array();
var xs = Array();
var ys = Array();
var vxs = Array();
var vys = Array();

function Randomize() {
    for (var i = 0; i < npts; i++) {
        dw[i] = (2*Math.random()-1);
    }
}

function ComputePath() {
    xs[0]=cx; ys[0]=cy; 
    var angle = 0;
    for (var i = 0; i < npts; i++) {
        vxs[i]=10*Math.cos(2*Math.PI*angle);
        vys[i]=10*Math.sin(2*Math.PI*angle);
        angle = angle + dw[i]*angVel;
    }
    for (var i = 1; i < npts; i++) {
        xs[i] = xs[i-1]+3*(vxs[i-1]+vxs[i])/2; 
        ys[i] = ys[i-1]+3*(vys[i-1]+vys[i])/2;
    }
}

function Draw() {
  ctx.clearRect(0, 0, cw, ch);
  ctx.beginPath();
  ctx.moveTo(xs[0],ys[0]); 
  for (var i = 1; i < npts; i++) {
    var cp1x = xs[i-1]+tension*vxs[i-1];
    var cp1y = ys[i-1]+tension*vys[i-1];
    var cp2x = xs[i]-tension*vxs[i];
    var cp2y = ys[i]-tension*vys[i]
    ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, xs[i], ys[i]); 
  }
  ctx.stroke();
}
Randomize();
ComputePath();
Draw();

r.addEventListener("click",()=>{
  Randomize();
  ComputePath();
  Draw();
})

v.addEventListener("input",()=>{
  angVel = v.value;
  vlabel.innerHTML = ""+angVel;
  ComputePath();
  Draw();
})

t.addEventListener("input",()=>{
  tension = t.value;
  tlabel.innerHTML = ""+tension;
  Draw();
})

canvas{border:1px solid}

<canvas id = 'c'></canvas>
<table>
  <tr><td>angular velocity:</td><td> <input type="range" id="v" min ="0" max = "0.5" step = "0.01" value="0.2" /></td><td id="vlabel"></td></tr>
  <tr><td>tension</td><td> <input type="range" id="t" min ="0" max = "1" step = "0.1" value="0.8" /></td><td id="tlabel"></td></tr>
  <tr><td>remix</td><td> <button id="r"> + </button></td><td></td></tr>
</table>