p5.js：让电脑画点东西

Question

我想让电脑画点东西。它应该看起来像一个人在纸上画东西，具有随机值。

这是我的尝试：

function setup() {
  createCanvas(500, 500);
  frameRate(30);
}

function draw() {
  x1 = random(500);
  y1 = random(500);
  x2 = random(500);
  y2 = random(500);
  line(x1, y1, x2, y2);
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>

所以目前，它只是将随机的行放在彼此之上。但它应该会产生一个带有曲线的长连接涂鸦，如下所示：

怎么可能这样编码？

Answer 1

希望对您有所帮助。仍然不完美，但可以使用和进一步改进的方法 ;-) 玩得开心

var x1, y1, x2=250, y2=250, maxVal = 500;

function setup() {
  createCanvas(maxVal, maxVal);
  frameRate(30);
}

// just uncomment one line, comment another and do restart please
// var a = 2, b = 1;
 var a = 40, b = 20;
// var a = 100, b = 50;
//var a = 200, b = 100;

function draw() {

  function tryFix(val) {

    let res = val < 0 ? 0 : val > maxVal ? maxVal : val;

    return res;

  }

  dx = random(a)-b;
  dy = random(a)-b;
  x1 = x2;
  y1 = y2;
  x = x2 + dx;
  y = y2 + dy;
  x = tryFix(x);
  y = tryFix(y);
  x2 = x;
  y2 = y;
  line(x1, y1, x2, y2);
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>

p5.js：让电脑画点东西

p5.js: Let the computer draw something

javascript

p5.js