个人中心
gpt4 book ai didi

javascript - 柏林噪音不起作用 (p5js)

转载 作者：行者123 更新时间：2023-12-03 01:44:44 25 4
gpt4 key购买 nike

我正在使用 P5.js 和 Perlin noise() 函数尝试使用 Perlin 噪声生成的 x 和 y 绘制一个圆> 坐标。我没有收到任何错误消息，但 Canvas 上没有绘制任何内容。我做错了什么？

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>

最佳答案

你应该养成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();
}

关于javascript - 柏林噪音不起作用 (p5js)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50691110/

25 4 0
文章推荐： azure - 使用 Let's Encrypt 和 Certes (Azure webrole) 的证书链不完整
文章推荐： jquery - 将 viewbag 与 jquery 一起使用 - asp.net mvc 3
文章推荐： c# - 无法将.Net Core 2.0项目的项目引用添加到Azure函数项目(netStandard2.0)
文章推荐： jquery - 克隆元素，添加时避免一次多个克隆
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com