Изменение формы объекта при перемещении с использованием библиотеки Javascript processing.js

Question

Я занимаюсь онлайн-курсом Javascript в ханской академии. Я делаю проект по этому курсу.

Я хочу, чтобы мой объект изменил форму с затмения на прямоугольник и повторил его во время движения. Я написал код. Но я не вижу затмения. То, как оно движется, правильное.

Вот что я написал.

var xPos = 20;
var yPos = 20;

draw = function() {
    //variables change position
    xPos++;
    yPos++;

    //ellipse
    background(29, 40, 115);
    fill(255, 242, 0);
    ellipse(xPos, yPos, 10, 10);

    //rectangle
    background(29, 40, 115);
    fill(151, 76, 189);
    rect(xPos, yPos, 10, 10);
}

Что здесь не так? Я вижу только движение прямоугольника. Где мой эллипс? Пожалуйста, помогите мне. Я новичок

Answer 1

Инструкция background () очищает эскиз, устанавливая каждый пиксель в нем одинакового цвета. Обычно это вызывается только один раз, как первая инструкция в draw(), потому что, как вы обнаружили, не очень полезно вызывать его после того, как вы уже начали рисовать вещи.