随机生成弯曲/波浪形路径 [英] Randomly Generating Curved/Wavy Paths

问题描述

我有一张比视口大得多且位于视口中心的地图的大规模图像，用户可以通过拖动屏幕来对其进行浏览.为了产生视差效果，我在前景中使用了巨大的云层图像.当用户通过拖动浏览地图时，背景和前景均以视差方式移动.到目前为止，一切都很好.

I have a massive image of a map that is much larger than the viewport and centered in the viewport, which can be explored by the user by dragging the screen. In order to create a parallax effect, I used a massive image of clouds in the foreground. As the user explores the map via dragging, both the background and foreground move in a parallax fashion. So far, so good.

但是，我真正想做的是给云图像一个默认"运动，该运动将在每次页面加载时随机生成，这样即使用户没有拖动，云也将一直在移动.我知道可以通过对路径上的前景进行动画处理来完成此操作，但是我不确定如何执行此操作.

However, what I really want to do is give the image of clouds a "default" movement that would be randomly generated on each page load, so that the clouds would always be moving, even if the user is not dragging. I know this can be done by animating the foreground along a path, but I am not exactly sure how to go about this.

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

How can I randomly generate irregularly curved or wavy paths on each page load?

有人知道有什么算法可以做到这一点吗?

Does anybody know of any algorithms that can do this?

推荐答案

我还使用先前答案的副本来实现我在评论中所暗示内容的简化版本.

I also use a copy of the previous answers to realize a simplified version of what I hinted at in the comments.

在单位圆上(即角度)上随机行走，以确定速度矢量，该速度矢量缓慢但随机变化，并使用三次Bezier斑块向前移动.

Use a random walk on the unit circle, that is on the angle, to determine a velocity vector that slowly but randomly changes and move forward using cubic Bezier patches.

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>

这篇关于随机生成弯曲/波浪形路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！