Шум Перлина не работает (p5js) - PullRequest
Новая
       54

Шум Перлина не работает (p5js)

0 голосов
/ 05 июня 2018

Я использую P5.js и функцию Perlin noise(), чтобы попытаться нарисовать круг с шумами Перлина, сгенерированными 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>

1 Ответ

0 голосов
/ 05 июня 2018

Вы должны привыкнуть к отладке вашего кода , чтобы точно понять, что происходит.Например, я бы добавил что-то подобное в вашу walk() функцию: 

console.log(this.x);

Это поможет вам понять, что происходит.Вы обнаружите, что this.x всегда null.Затем вы можете отследить код и выяснить, почему.

Еще одна вещь, которая бросается мне в глаза, это то, что вы не должны определять свои собственные переменные width и height.Вместо этого используйте переменные width и height, которые вам предоставляет P5.js.

Отслеживая код, вы также должны подумать, когда именно произойдет эта строка: 

var c = new Circle();

Эта строка кода выполняется до , вызывается функция setup().Я предполагаю, что изначально вы получили сообщение о том, что width не определено, поэтому вы добавили собственную переменную width.Но это на самом деле не решило проблему, которая заключается в том, что весь этот код выполняется до вызова функции setup().

Чтобы исправить это, просто переместите инициализацию так, чтобы она была внутри setup()функция: 

var c;

function setup() {
    createCanvas(windowWidth, windowHeight);
      c = new Circle();
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...