如何在p5.js的draw loop中使用random和loop？

Question

我正在尝试反复绘制沿对角线穿过屏幕的线条。我是 p5.js 的新手，我不太确定如何正确构建随机函数调用以及脚本中的 for 循环以使其发生。目前它为 startPt 和 endPt 分配随机的 x 和 y，看起来它在循环并一遍又一遍地绘制同一条线。怎样才能做到每循环一次，绘制一条新坐标的新线？

此外，我尝试将创建 startPt 和 endPt 的代码放在 draw () 循环中，但它会无限期地继续下去。

const margin = 50;
var loop_num = 100;

var startPt = {
    x:0,
    y:0,
    domain:0,
}

var endPt = {
    x:0,
    y:0,
    domain:0,
}

function setup() {
    createCanvas (600, 400);
    background (0);

    create_startPt();
    create_endPt();

    // re-select endPt if it's not in diagonal domain of startPt
    while (startPt.domain*endPt.domain != -2) {
        endPt.x = random(0+margin, width-margin);
        endPt.y = random(0+margin, height-margin);
        endPt.domain = point_domain(endPt.x, endPt.y)
    }
}

function draw() {
    for (let i=0; i<=loop_num; i++) {
        stroke (200);
        line (startPt.x, startPt.y, endPt.x, endPt.y);
    }
}

// check and assign domain number based on point location
function point_domain(x, y) {
    if ((x>=0) && (x<width/2)) {
        if ((y>=0) && (y<width/2)) {
            return 1
        }
        else {return -1}
    }

    if ((x>=width/2) && (x<=width)) {
        if ((y>=0) && (y<width/2)) {
            return 2
        }
        else {return -2}
    }
}

// create startPt
function create_startPt() {
    startPt.x = random(0+margin, width-margin);
    startPt.y = random(0+margin, height-margin);
    // get domain tag of startPt
    startPt.domain = point_domain(startPt.x, startPt.y)
}

// create endPt
function create_endPt() {
    endPt.x = random(0+margin, width-margin);
    endPt.y = random(0+margin, height-margin);
    // get domain tag of startPt
    endPt.domain = point_domain(endPt.x, endPt.y)
}

Answer 1

您想在设置函数中调用 create_endPt() 和 create_startPt() 函数，不需要绘制函数，因为您不需要屏幕更新每一帧。

const margin = 50;
var loop_num = 100;

var startPt = {
  x: 0,
  y: 0,
  domain: 0,
}

var endPt = {
  x: 0,
  y: 0,
  domain: 0,
}

function setup() {
  createCanvas(600, 400);
  background(0);
  for (let i = 0; i <= loop_num; i++) {
    stroke(200);
    create_startPt();
    create_endPt();
    line(startPt.x, startPt.y, endPt.x, endPt.y);
  }

}


// check and assign domain number based on point location
function point_domain(x, y) {
  if ((x >= 0) && (x < width / 2)) {
    if ((y >= 0) && (y < width / 2)) {
      return 1
    } else {
      return -1
    }
  }

  if ((x >= width / 2) && (x <= width)) {
    if ((y >= 0) && (y < width / 2)) {
      return 2
    } else {
      return -2
    }
  }
}

// create startPt
function create_startPt() {
  startPt.x = random(0 + margin, width - margin);
  startPt.y = random(0 + margin, height - margin);
  // get domain tag of startPt
  startPt.domain = point_domain(startPt.x, startPt.y)
}

// create endPt
function create_endPt() {
  endPt.x = random(0 + margin, width - margin);
  endPt.y = random(0 + margin, height - margin);
  // get domain tag of startPt
  endPt.domain = point_domain(endPt.x, endPt.y)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>

如何在p5.js的draw loop中使用random和loop？

How to use random and loop in the draw loop in p5.js?

javascript

p5.js