Question

我使用P5.js和Perlin noise()函数尝试绘制一个带有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>

Answer 1

你应该养成debugging your code的习惯，以确切了解正在发生的事情。例如，我会在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(); }

柏林噪音不起作用（p5js）

1 个答案: