Блог

Главная - Вопросы по программированию - Как анимировать фракталы js turtle?

Как анимировать фракталы js turtle?

#javascript #turtle-graphics

#javascript #черепаха-графика

Вопрос:

Мне нужно нарисовать фрактал, используя библиотеку js turtle, поэтому фрактал анимируется до тех пор, пока он не будет полностью нарисован, как в примере python turtle здесь

Я пробовал использовать команду здесь. animate В документах есть функция, вызываемая, но я не могу ее использовать, она только ждет некоторое время, а затем рисует фрактал без какой-либо анимации.

Я ввожу ввод команды animate(demo, 1000)

Есть ли какие-либо предложения?

если я не могу использовать анимацию в js turtle, есть ли другая быстрая простая библиотека, которая может выполнять работу по рисованию фракталов ?!

Комментарии:

1. Покажите нам код, который вы пробовали. Вероятно, вам придется подождать на каждом шаге процесса рисования. Кажется, вы ждете только один раз (или все одновременно).

2. @JensV, я ввел это в заблуждение, но теперь обновил. Я только что скачал библиотеку с ее исходным кодом и попробовал это. Вы можете попробовать это здесь rawgit.com/wrschneider99/js-turtle/master/turtle.html

3. animate В библиотеке просто используется setInterval . Это означает, что движение действия на самом деле не анимировано . Он просто ждет и выполняет действие. Однако, пока он ожидает, выполнение продолжается. Чтобы получить такое же поведение, как в вашем примере с python, вы, вероятно, можете заглянуть в JS async await, чтобы упростить работу

Ответ №1:

Вы неправильно используете animate() . Вы не можете просто применить его к готовой программе и ожидать, что ее поведение изменится. Вместо этого вам нужно включить его в программу. Должна быть функция, которая рисует часть анимации при каждом ее вызове. Затем вызывайте его снова и снова animate() . Переписывание вашего примера:

 function square(side) {
    repeat(4, function () {
        forward(side);
        right(90);
    });
}

var s = 100

function draw() {
    square(s);
    right(36)

    s -= 10

    if (s < 0) {
        s = 100
        clear()
    }
}

function demo() {
    hideTurtle();
    colour(0, 0, 255, 1);
    animate(draw, 500);
}

Вызывайте его через demo() , не вызывайте animate() его. Основной единицей анимации является квадрат. Если вы хотите видеть, как рисуются квадраты, вам нужно изменить дизайн кода, чтобы сделать базовую единицу анимации стороной квадрата (т. Е. Линией).)