В Vanilla JSэлементы можно создавать и удалять прямо через код. Это значит, что интерфейс перестаёт быть фиксированным: он может меняться во время работы программы. Элементы появляются, исчезают и перестраиваются по правилу. Именно так начинается работа с интерактивными системами.
Когда ты работаешь с DOM, ты управляешь не рисунком, а самой структурой страницы. Через код можно создать новыйdiv, изменить его стиль, добавить в контейнер или удалить. Это делает интерфейс динамическим. Важно понять, что здесь код управляет уже не только графикой, но и элементами среды.
Создание элемента обычно начинается с document.createElement(). После этого элементу можно задать текст, размер, цвет и позицию, а затем добавить его в app. Удаление работает так же явно: элемент можно убрать из контейнера или очистить всю область целиком. За счёт этого код начинает работать как система управления интерфейсом.
Сначала создаётся новый элемент, затем ему задаются свойства, и после этого он добавляется в контейнер. Когда элемент больше не нужен, его можно удалить. Это простая, но очень важная логика: интерфейс собирается и разбирается прямо во время работы. Так появляется настоящая динамика.
В интерактивной системе элементы не заданы навсегда — они появляются и исчезают по правилу
Ниже ты увидишь одну и ту же идею в двух средах. Сначала элемент будет создаваться и удаляться черезVanilla JS, а потом похожее поведение появится в p5.js. Это поможет увидеть разницу между управлением DOM и управлением графическим холстом.
Практика
Начнём с Vanilla JS. Здесь элементы будут создаваться как настоящие DOM-объекты. Они появятся внутри контейнераapp, а через время исчезнут. Это простой пример динамического интерфейса.
Здесь код создаёт несколько новых элементов и добавляет их в app. Каждый элемент получает свою позицию и стиль. Через небольшую задержку элементы удаляются. Так одна и та же область вывода сначала заполняется, а потом очищается.
Теперь посмотрим на похожую идею в p5.js. Здесь элементы не существуют как DOM-объекты, а рисуются на холсте заново в каждом кадре. Это другой тип динамики: не создание узлов страницы, а постоянная перерисовка сцены.
В этом примере круги постепенно появляются на сцене, а потом исчезают, потому что список элементов очищается и заполняется заново. Здесь движение и изменение происходят не через DOM, а через циклdraw(). Это показывает, что динамика может строиться по-разному. В обоих случаях код управляет поведением системы, но среда работы отличается.
Вариация
В Vanilla JSты создаёшь и удаляешь реальные элементы страницы. Это удобно, когда работаешь с интерфейсом, кнопками, карточками и другими блоками. В p5.jsэлементы не живут как отдельные объекты DOM — они заново рисуются на холсте. Поэтому одна и та же задача решается двумя разными способами мышления.
Если тебе нужно управлять структурой страницы, лучше подходитVanilla JS. Если важнее визуальное движение и постоянное обновление сцены, естественнее использоватьp5.js. Оба подхода важны, потому что креативный код работает и с интерфейсом, и с графикой.
Вывод
В Vanilla JS элементы можно создавать и удалять как части DOM-структуры
В p5.js похожее поведение создаётся через постоянную перерисовку сцены
Одна задача может решаться по-разному в зависимости от среды
Задание
Измени количество элементов, чтобы сцена стала плотнее
Попробуй изменить размер или цвет создаваемых блоков
Раскомментируй дополнительные строки и посмотри, как меняется поведение системы
