title

Теория

В Vanilla JS элементы можно создавать и удалять прямо через код. Это значит, что интерфейс перестаёт быть фиксированным: он может меняться во время работы программы. Элементы появляются, исчезают и перестраиваются по правилу. Именно так начинается работа с интерактивными системами.

Когда ты работаешь с DOM, ты управляешь не рисунком, а самой структурой страницы. Через код можно создать новый div, изменить его стиль, добавить в контейнер или удалить. Это делает интерфейс динамическим. Важно понять, что здесь код управляет уже не только графикой, но и элементами среды.

Создание элемента обычно начинается с document.createElement(). После этого элементу можно задать текст, размер, цвет и позицию, а затем добавить его в app. Удаление работает так же явно: элемент можно убрать из контейнера или очистить всю область целиком. За счёт этого код начинает работать как система управления интерфейсом.

const block = document.createElement("div");
block.textContent = "●";
app.appendChild(block);

block.remove();

Сначала создаётся новый элемент, затем ему задаются свойства, и после этого он добавляется в контейнер. Когда элемент больше не нужен, его можно удалить. Это простая, но очень важная логика: интерфейс собирается и разбирается прямо во время работы. Так появляется настоящая динамика.

Ниже ты увидишь одну и ту же идею в двух средах. Сначала элемент будет создаваться и удаляться через Vanilla JS, а потом похожее поведение появится в p5.js. Это поможет увидеть разницу между управлением DOM и управлением графическим холстом.

Практика

Начнём с Vanilla JS. Здесь элементы будут создаваться как настоящие DOM-объекты. Они появятся внутри контейнера app, а через время исчезнут. Это простой пример динамического интерфейса.

Здесь код создаёт несколько новых элементов и добавляет их в app. Каждый элемент получает свою позицию и стиль. Через небольшую задержку элементы удаляются. Так одна и та же область вывода сначала заполняется, а потом очищается.

Теперь посмотрим на похожую идею в p5.js. Здесь элементы не существуют как DOM-объекты, а рисуются на холсте заново в каждом кадре. Это другой тип динамики: не создание узлов страницы, а постоянная перерисовка сцены.

В этом примере круги постепенно появляются на сцене, а потом исчезают, потому что список элементов очищается и заполняется заново. Здесь движение и изменение происходят не через DOM, а через цикл draw(). Это показывает, что динамика может строиться по-разному. В обоих случаях код управляет поведением системы, но среда работы отличается.

Вариация

В Vanilla JS ты создаёшь и удаляешь реальные элементы страницы. Это удобно, когда работаешь с интерфейсом, кнопками, карточками и другими блоками. В p5.js элементы не живут как отдельные объекты DOM — они заново рисуются на холсте. Поэтому одна и та же задача решается двумя разными способами мышления.

Если тебе нужно управлять структурой страницы, лучше подходит Vanilla JS. Если важнее визуальное движение и постоянное обновление сцены, естественнее использовать p5.js. Оба подхода важны, потому что креативный код работает и с интерфейсом, и с графикой.

Вывод

1. В Vanilla JS элементы можно создавать и удалять как части DOM-структуры
2. В p5.js похожее поведение создаётся через постоянную перерисовку сцены
3. Одна задача может решаться по-разному в зависимости от среды

Задание

1. Измени количество элементов, чтобы сцена стала плотнее
2. Попробуй изменить размер или цвет создаваемых блоков
3. Раскомментируй дополнительные строки и посмотри, как меняется поведение системы