Код не хочет исполняться. p5.js

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(0);
  for (let i=1; i<100; i++) {
    circle (width/2, height/2, i);
  }
}

По идее должна быть создана анимация с увеличивающимся в диаметре кругом, но на исходе получаю сразу круг с диаметром 100px. Подскажите, что изменить что бы все таки получить анимацию


Ответы (1 шт):

Автор решения: Maxgmer

Дело в том, что на экран выводится то, что получилось после полного выполнения метода draw().

Следовательно, все круги уже нарисованы к показу кадра.

Самое простое решение этой проблемы будет выглядеть так:

let d = 1;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(0);
  circle(width/2, height/2, d);
  if (d < 100) {
    d++;
  }
}
→ Ссылка