柏林噪音不起作用 (p5js)
发布于2023-12-26 22:14 阅读(1149) 评论(0) 点赞(10) 收藏(0)
我正在使用 P5.js 和 Perlinnoise()函数尝试用生成的 Perlin 噪声x和y坐标绘制一个圆。我没有收到任何错误消息，但画布上没有绘制任何内容。我究竟做错了什么？
let width;
let height;
function setup() {
createCanvas(windowWidth, windowHeight);
width = windowWidth;
height = windowHeight;
}
var Circle = function () {
this.x = width / 2;
this.y = height / 2;
this.tx = 0;
this.ty = 0;
};
Circle.prototype.display = function () {
stroke(0);
ellipse(this.x, this.y, 200, 200);
};
Circle.prototype.walk = function () {
this.x = map(noise(this.x), 0, 1, 0, width);
this.y = map(noise(this.y), 0, 1, 0, height);
this.tx += 0.01;
this.ty += 0.01;
};
var c = new Circle();
function draw() {
c.walk();
c.display();
}
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
</style>
</head>
</html>
解决方案
您应该养成调试代码的习惯，以准确了解发生了什么。例如，我会在您的walk()函数中添加这样的内容：
console.log(this.x);
这将帮助您了解正在发生的事情。你会发现那this.x始终是null。然后您可以回溯代码以找出原因。
我突然想到的另一件事是，您不应该定义自己的width和height变量。相反，请使用P5.js 为您提供的width和变量。height
跟踪代码，您还应该准确考虑这一行发生的时间：
var c = new Circle();
这行代码在函数调用之前执行。setup()我的猜测是您最初收到一个错误，指出width未定义，这就是您添加自己的width变量的原因。但这并没有真正解决问题，所有这些代码都是在setup()调用函数之前发生的。
要解决此问题，只需将初始化移至setup()函数内部即可：
var c;
function setup() {
createCanvas(windowWidth, windowHeight);
c = new Circle();
}
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/533294/9f3b4365bb6ac7b18fb3/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力