AI-взрыв: как я зажёг фитиль, не зная JavaScript
Около года назад я завёл YouTube и Rutube-каналы в поддержку своего сайта про секундомеры и таймеры. Опубликовал там пару простеньких видео с таймерами и занялся другими делами. Недавно вернулся - вижу, что на Rutube даже есть какие-то просмотры, а на YouTube всё грустно. Решил, что можно попробовать ещё раз и сделал что-то посложнее. Результат мне понравился. Подумал: почему бы не поделиться и своей историей про Vibe-coding.
Вводные: делаем таймер в виде бомбы с фитилём, горением, обратным отсчётом, поджигом в начале и взрывом в конце.
Скилы: знаю основы создания сайтов и программирования, на этом всё. Весь код писался с помощью ИИ.
Что использовал: HTML, CSS, JavaScript, VS Code, ChatGPT, InShot, Shotcut, запись экрана в Windows.
Что получилось:
Или если удобнее
Затраченное время: около 14 часов.
Как делал
1. Сначала - формулировка идеи
Перед тем как давать задания ИИ, нужно понять, что ты вообще хочешь сделать, и описать общую концепцию.
Привет. Хочу сделать таймер с анимацией бомбы. В центре мультяшная бомба, на ней в центре цифры таймера. От бомбы идёт фитиль. Когда таймер запускается, фитиль должен загораться. Когда он догорит, бомба взрывается. Всё понятно? Если да, давай разложим проект по шагам и начнём со структуры HTML.
Чем подробнее опишешь проект, тем лучше и для ИИ, и для тебя. Но не проси сгенерировать весь проект сразу. Если это не что-то простое, лучше идти поэтапно.
2. Структура
Чат накидал базовый HTML, CSS, JS. Я перенёс всё в отдельные файлы: index.html, index.css, index.js. Так удобнее - можно просить переписывать весь код, не выискивая, что именно править.
3. Рисуем фитиль
Давай сделаем фитиль: он должен идти сверху от бомбы и быть достаточно длинным, чтобы интенсивно гореть всё время.
Тут возник затык. Через 5-6 промтов понял, что нарисовать извилистую линию фитиля автоматически не получится (или я не знаю, как правильно задать промт). Решил так:
А давай я буду сам рисовать фитишь мышкой, а то у нас с тобой не получается сделать так как я хочу.
4. Анимация горения фитиля
Фитиль готов, теперь анимируем горение фитиля. Сначала получалась просто пульсирующая точка. Посмотрел другие анимации и предложил:
Давай сделаем анимацию горения фитиля в виде иголочек, исходящих от центра и меняющих длину не синхронно. Так должна получиться имитация горения.
5. Зажигаем фитиль
Сначала хотел, чтобы огонёк ставился автоматически, но потом решил:
Давай будем ставить огонёк вручную. Сначала рисуем фитиль, потом клик мышкой и в этом месте должен появляться огонёк.
Дорабатываем логику
Огонёк должен двигаться к концу фитиля по прямой и достигать его к моменту запуска таймера. После этого огонёк должен исчезать.
6. Анимация взрыва
Давай когда таймер заканчивается и фитиль догорает, будем делать анимацию взрыва. Например, трясти экран.
Анимация дорабатывалась в 5-10 итераций. Пришлось отдельно просить, чтобы бомба исчезала, цифры тоже исчезали, вместо взрыва появлялся огонь.
7. Запуск таймера
Чтобы кнопка «Старт» не попала в кадр, я решил скрывать её перед запуском.
Таймер готов. Далее остаётся сделать запись с экрана и озвучить.
8. Запись и озвучка
Думал, будут проблемы со звуком. Хотел попробовать Suno, но без платной версии и опыта не стал тратить время. Решил использовать музыку из InShot. Залил видео, наложил музыку, выгрузил на Desktop, потом в Shotcut добавил звуки поджига и взрыва. Всё-таки с ПК привычнее работать, хотя в будущем хочется упростить процесс.
9. Публикация
Далее идём на видеохостинги, прописываем заголовок и описание, ориентируясь на популярность ключевых слов из WordStat, добавляем автора музыки и кликаем Опубликовать.
С идеями, как сделать лучше или просто мыслями о процессе или вопросами жду в комментариях.