Question

我一直在尝试按照此示例here创建一个逐点平滑的随机生成的行。

以下是我的代码片段：

var ptheta = 50;
var theta = 50;
var px = 0;
var py = 0;
var x = 50;
var y = 50;
var a = 0.3;

var rand = 0;
var angleVar = 0;


function animate(){
    rand = Math.random() * (10.0 - 1.0) * 1.0;
    angleVar = ((2*rand-1) * a * Math.PI);
    theta = ptheta + angleVar;
    px = x;
    py = y;
    r = rand//Math.random() * (10.0 - 1.0) * 1.0;
    x = (px + r * Math.cos(ptheta));
    y = (py + r * Math.sin(ptheta));
    ptheta = theta;

    //draw
    ctx.lineWidth = 3 //make this random
    ctx.beginPath()
    ctx.moveTo(this.px, this.py)
    ctx.strokeStyle = this.color
    ctx.lineTo(this.x, this.y)
    ctx.lineCap = "round"
    ctx.stroke()
}

看起来代码几乎完成了必要的操作。它确实创建了一个随机生成的行，但我遇到了两个问题：

生成的行太小了。我对算法所做的任何小改动都会使得这条线太大了。我不明白为什么会这样。
该行似乎并不完全符合所提供链接中列出的规则。方向上似乎仍然存在不和谐的变化，链接中提供的接受答案表明这应该避免。

我正在尝试使用html画布并使用下面的代码和上面提供的示例在其上绘制笔画来实现此目的。

非常感谢任何帮助！

编辑：Here's a link to a codepen example

Answer 1

我的笔created a fork并进行了一些修改：

有一个用于设置新角度的rand的随机值，因为您认为使用rand = Math.random();需要过于急转弯，这将为您提供介于0-1而不是0-9之间的值
为r设置单独的随机值，用于控制步长，例如r = Math.random() * 20;
如果您想通过以下方式将起点放在屏幕中间：

var x = window.innerWidth / 2; var y = window.innerHeight / 2;

创建平滑的随机生成的行

1 个答案: