我有下面的代码渲染一组树,这个代码的问题是它包括noLoop.如果noLoop被删除,树继续脉动并生成新的树.我需要移动这个树函数到另一个长代码,这实际上是一个有很多对象的游戏。这个函数中的noLoop会停止我的draw函数中的所有其他操作。t无法重新构造代码以使其成为设置中的一部分。
下面的代码:
function setup() {
createCanvas(windowWidth, windowHeight);
background(200);
}
function draw() {
noLoop(); // NoLoop must be in draw in order for the code tho work
branchIteration(width / 2, height / 4);
}
function branch(len, firstTime = false, x, y) {
translate(x, y);
if (firstTime) {
translate(width / 2, height / 2);
firstTime = true;
}
angleMode(DEGREES);
push();
if (len > 10) {
strokeWeight(map(len, 10, 100, 1, 15));
stroke(70, 40, 20);
line(0, 0, 0, -len);
translate(0, -len);
rotate(random(-20, -30));
console.log(random(-20, -30));
branch(len * random(0.7, 0.9), 0, 0 - len);
rotate(random(50, 60));
branch(len * random(0.7, 0.9), 0, 0 - len);
} else {
var r = 80 + random(-20, 20);
var g = 120 + random(-20, 20);
var b = 40 + random(-20, 20);
fill(r, g, b, 150);
noStroke();
ellipse(0, 0, 10);
beginShape();
for (var i = 135; i > 40; i--) {
var rad = 15;
var x = rad * cos(i);
var y = rad * sin(-i) + 20;
vertex(x, y);
}
endShape(CLOSE);
}
pop();
}
function branchIteration(xPos, yPos) {
for (var j = 0; j < 10; j++) {
push();
var xPosOffset = -2000 + j * 350;
translate(xPos + xPosOffset, yPos);
branch(60, true);
pop();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
链接到试用代码https://editor.p5js.org/josefalk/sketches/taCAyFI4X
我希望从绘图中删除noLoop。
其他人建议我把这个函数放在安装程序中。我不能在安装程序中加载这个函数,因为我正在目标代码绘制函数中进行转换,我希望树与其他对象一起移动。如下所示:
绘制();
平移(-摄像机位置X * 0.2,0);
功能山
函数云
一些其他功能
树代码函数在这里//我不能添加
pop();//转换结束状态。
我希望删除noLoop
我不想使用条件语句。例如if(! branchesDrawn){branchIteration(宽度/2,高度/4);分支绘制=真;}
因为它会因为其他项目呈现在其上而快速消失。
我也尝试从设置功能导入值,但它不起作用。
我需要:
1.重新构造代码,不要使用noLoop,程序在每一帧都加载相同的树集。当你重新加载页面时,新的树将会生成。
1.在代码中,您会看到一个单独的日志随机值发送到控制台:console.log(随机(-20,-30))。控制台记录了很多随机值行,然后停止。即使它没有在它。但如果你把相同的随机控制台记录在安装程序中,你只会得到一行随机值。为什么随机值生成一些更多的数字在提请,但它只生成一个数字在安装程序中?我错过了一些知识在这里。
1条答案
按热度按时间tp5buhyn1#
树是随机的,所以每次生成一棵树时,它看起来都不一样。
一种选择是在draw函数的开头包含一个
randomSeed(42)
,这样每次生成树时,它们看起来都是一样的。(你可以输入任何数字,42只是一个例子)但是生成树的开销很大(特别是如果递归很深的话),所以我只生成一次树,然后使用
saveCanvas()
将当前画布保存为图像,然后在draw函数中使用该图像。如果在每一帧重绘背景会降低fps,还有其他技术可以只更新图像中所需的部分,而让背景的其余部分保持静态。
看一看https://osteele.github.io/p5.libs/p5.layers/库,它包含了很多有用的工具,可以在不同的层上进行绘制,因此您可以让一些层保持静态,只更新其他层,从而提高程序性能。
最后,我建议你开始使用类,这样你的代码会变得更有组织。创建一个
Tree
类,并把它放在一个不同的文件中,这样你的主文件就尽可能的简单和干净。这很重要,因为你会开始添加越来越多的东西,把东西封装在类中是一个非常好的主意。