如何在p5.js中的绘制循环中使用随机和循环？
如何在p5.js中的绘制循环中使用随机和循环？
提问于 2019-01-13 04:47:01
我正在尝试重复地绘制在屏幕上沿对角线的线。我是p5.js的新手，我不太确定如何正确地构造随机函数调用，以及脚本中的for-loop来实现它。目前，它为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)
}回答 1
Stack Overflow用户
回答已采纳
发布于 2019-01-13 06:01:56
如果您希望在设置函数中调用create_endPt()和create_startPt()函数，则不需要使用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);
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54163728
复制相关文章
相似问题
腾讯云开发者
