Как работает функция рисования p5.js?

Question

Как работает функция рисования p5.js?

1

Не могу понять, что я делаю неправильно. Глядя на код ниже, моя логика заключается в том, что каждый раз, когда вызывается функция draw, координаты эллипса изменяются на другое случайное число.

Однако вместо измененных координат эллипс просто перерисовывается в "новых" координатах.

Кто-нибудь хочет пролить свет на то, почему фигура перерисовывается, а не перемещается? Я использую javascript-библиотеку p5.

var frate = 10;
var elliX = 500;
var elliY = 400;

function setup() {
    createCanvas(100, 100);
    frameRate(frate);
}

function draw() {
    elliX = (random(0,100));
    elliY = (random(0,100));
    ellipse(elliX, elliY, 30);
}

Jake2018 31 июль 2018, в 06:31

Источник

Теги:

javascript

p5.js

visual-web-developer

1 ответ

Ещё вопросы

Steve · Accepted Answer · 2018-07-31T02-31-00.000Z

p5 не очищает холст по умолчанию, поэтому он добавляет новый круг каждый раз, когда вы рисуете. Чтобы очистить, вы можете позвонить clear() заранее, например:

var frate = 10;
var elliX = 500;
var elliY = 400;

function setup() {
    createCanvas(100, 100);
    frameRate(frate);
}

function draw() {
    clear();
    elliX = (random(0,100));
    elliY = (random(0,100));
    ellipse(elliX, elliY, 30);
}

<script src="https://unpkg.com/[email protected]/lib/p5.min.js"></script>

Обратите внимание, что вы также можете вызвать функцию background() .