代码之家 › 专栏 › 技术社区 › KubiK888

如何在p5.js中的draw循环中使用random和loop?

p5.js javascript

KubiK888 · 技术社区 · 6 年前

我试着在屏幕上反复画对角线。我对p5.js很陌生,我不太确定如何正确构造随机函数调用,以及脚本中的for循环来实现它。目前,它为startPt和endPt分配了随机的x和y,并且似乎在一次又一次地循环和绘制同一条线。如何才能使每个循环都画出一条具有新坐标的新线?

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)
}

1 回复 | 直到 6 年前

Luke Garrigan 6 年前

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>