Минутный короткометражный мультфильм «Первая искра»: чёрная тушь на бумаге, анимация нарисована кодом на Canvas

Промпт

ПРОМПТ:
PROJECT: THE FIRST SPARK — Процедурный анимационный короткометражный фильм

Вы — опытный креативный программист, генеративный художник, режиссёр анимации и инженер по графике на JavaScript.

Ваша задача — создать визуально впечатляющий, полностью анимированный короткометражный фильм с использованием процедурной отрисовки на JavaScript.

Я прикрепил референсное изображение с минималистичной анимацией чёрными чернилами на фоне цвета слоновой кости.

Используйте референс, чтобы понять визуальный язык, но создайте оригинальную анимацию с собственной историей, композицией и движением.

Не создавайте слайд-шоу, статичную иллюстрацию или простую демонстрацию частиц. Создайте полноценный анимационный короткометражный фильм с развивающимися сценами, выразительной анимацией персонажей, кинематографичными переходами и непрерывным визуальным повествованием.

1. Технические требования

Создайте проект с использованием:

JavaScript
HTML5 Canvas 2D
requestAnimationFrame для воспроизведения в реальном времени
Процедурной геометрии и векторной отрисовки
Кривых Безье, контуров, частиц и пользовательских мазков кисти
Детерминированной анимации на основе единой временной шкалы

Все визуальные элементы должны генерироваться с помощью кода на JavaScript.

Не используйте:

API для генерации изображений с помощью ИИ
API для генерации видео с помощью ИИ
Внешние изображения или предварительно отрендеренное видео
Стоковые видеоматериалы
Анимацию только средствами CSS
Статичные иллюстрации, замаскированные под анимацию

Анимация должна действительно генерироваться кодом.

Можно использовать лёгкие библиотеки JavaScript, если они существенно улучшают анимацию, но отдавайте приоритет Canvas 2D.

2. Визуальное направление

Создайте рисованную, минималистичную, экспериментальную анимацию.

Визуальные характеристики:

Тёплый фон цвета слоновой кости, напоминающий бумагу
Иллюстрации глубокого чёрного цвета, выполненные чернилами
Слегка несовершенные рисованные контуры
Органичные мазки кисти
Переменная толщина линий
Брызги чернил и едва заметная текстура бумаги
Выразительный дизайн персонажа на основе силуэта
Плавное, органичное движение
Периодические драматичные движения камеры
Кинематографичная композиция

Визуальный результат должен восприниматься как профессиональный независимый анимационный короткометражный фильм.

Избегайте стандартной геометрической моушн-графики, повторяющихся эффектов частиц и простых прыгающих фигур.

Каждая сцена должна иметь чёткое визуальное предназначение.

3. История: THE FIRST SPARK

Создайте оригинальный 60-секундный анимационный короткометражный фильм.

История рассказывает о крошечном персонаже, который появляется из капли чёрных чернил и постепенно открывает, как создавать мир.

СЦЕНА 1 — НАЧАЛО (0–8 секунд)

Пустой холст цвета слоновой кости.

В центре появляется крошечная капля чёрных чернил.

Капля начинает дрожать.

Из неё выступают небольшие неровные мазки кисти.

Чернила медленно превращаются в крошечного живого персонажа.

Персонаж открывает глаза и оглядывается.

Камера постепенно приближается.

СЦЕНА 2 — ОТКРЫТИЕ (8–18 секунд)

Персонаж начинает идти по пустому миру.

Его движение должно ощущаться живым: с анимацией конечностей, деформацией тела и едва заметным вторичным движением.

Каждый шаг оставляет после себя небольшие чернильные следы.

Персонаж замечает один из этих следов и касается его.

След начинает разрастаться, превращаясь в органическую структуру.

СЦЕНА 3 — СОЗИДАНИЕ (18–32 секунды)

Персонаж обнаруживает, что его движения могут создавать новые объекты.

Он проводит линию в воздухе.

Линия превращается в дерево.

Появляются новые мазки кисти, которые превращаются в холмы, растения и абстрактные структуры.

Камера следует за персонажем по мере расширения мира.

Объекты должны визуально расти и трансформироваться посредством процедурной отрисовки, а не внезапно появляться.

СЦЕНА 4 — ХАОС (32–44 секунды)

Персонаж теряет контроль над своим творением.

Чёрные чернила быстро распространяются.

Ландшафт искажается.

Деревья закручиваются в абстрактные формы.

Брызги чернил заполняют экран.

Камера слегка дрожит, пока персонаж бежит.

Анимация становится быстрее и интенсивнее.

Используйте плавные переходы между всеми визуальными элементами.

СЦЕНА 5 — THE FIRST SPARK (44–55 секунд)

Персонаж прекращает бег.

Всё замирает.

В его руке появляется маленькая светящаяся точка.

Это единственный момент, когда можно использовать тонкий тёплый цветовой акцент.

Персонаж выпускает свет.

Свет расширяется в круговую волну.

Хаотичные чернила перестраиваются в красивый, гармоничный ландшафт.

Камера отдаляется, показывая завершённый мир.

СЦЕНА 6 — КОНЦОВКА (55–60 секунд)

Персонаж стоит на небольшом холме и смотрит вдаль.

Камера медленно отдаляется.

Весь ландшафт постепенно превращается в один небольшой рисунок тушью на исходном пустом холсте.

Переход к фону цвета слоновой кости.

Конец.

4. Требования к качеству анимации

Это самая важная часть проекта.

Каждая сцена должна содержать настоящую анимацию.

Персонаж должен обладать:

Процедурно анимированной ходьбой и бегом
Выразительным языком тела
Поворотами головы и тела
Сжатием и растяжением
Упреждением и последействием
Плавными переходами между позами

Элементы окружения должны обладать:

Органичной анимацией роста
Непрерывным едва заметным движением
Неповторяющимися процедурными вариациями
Плавными трансформациями между формами

Реализуйте виртуальную камеру с:

Положением
Масштабированием
Поворотом
Плавным слежением
Кинематографичными функциями плавности

Используйте многослойную глубину и движение камеры, чтобы создать визуальное богатство.

Не полагайтесь только на случайное движение.

Анимация должна быть осознанно выстроена вокруг истории.

5. Архитектура временной шкалы и рендеринга

Создайте централизованную временную шкалу анимации.

Каждое визуальное состояние должно определяться текущей позицией на временной шкале.

Реализуйте функцию, аналогичную:

renderFrame(time)

Функция должна отрисовывать правильный кадр анимации для любой запрошенной временной отметки.

Используйте инициализированную случайность, чтобы отрисовка одной и той же временной отметки всегда создавала одно и то же изображение.

Анимация не должна зависеть от количества ранее отрисованных кадров.

Это необходимо для детерминированного экспорта видео.

Целевые характеристики:

Разрешение: 1920 × 1080

Соотношение сторон: 16:9

Частота кадров: 30 FPS

Длительность: 60 секунд

Предусмотрите возможность переключения на вертикальный формат 1080 × 1920 для социальных сетей.

6. Предпросмотр и управление

Создайте локальный веб-интерфейс, который позволит мне:

Запускать и приостанавливать анимацию
Перезапускать анимацию
Перемещаться по временной шкале
Переходить между сценами
Настраивать скорость воспроизведения
Переключаться между горизонтальным и вертикальным форматами
Просматривать анимацию в реальном времени

Отображайте текущую временную отметку и название сцены.

7. Экспорт видео

Реализуйте надёжный процесс экспорта видео.

Итоговая анимация должна экспортироваться в высококачественный файл MP4.

Используйте детерминированную покадровую отрисовку, чтобы избежать пропущенных кадров и несогласованного тайминга.

Можно использовать подходящий браузерный конвейер рендеринга, экспортёр последовательности кадров или FFmpeg.

Не предполагайте, что записи окна браузера в реальном времени достаточно для экспорта производственного качества.

Предоставьте простую команду или интерфейс для экспорта.

8. Процесс разработки

Не пытайтесь создать весь фильм в виде одного огромного, непроверенного блока кода.

Работайте поэтапно.

Сначала:

Создайте архитектуру проекта.
Реализуйте движок рендеринга Canvas.
Реализуйте детерминированную временную шкалу.
Создайте систему анимации персонажа.
Создайте Сцену 1 в виде полностью функционального визуального прототипа.
Запустите проект и оцените визуальный результат.

После того как первая сцена заработает, продолжайте реализовывать остальные сцены.

Тестируйте анимацию на нескольких временных отметках.

Проверяйте ошибки рендеринга, сломанные переходы, несогласованные пропорции персонажа и проблемы с производительностью.

Если сцена выглядит слишком простой, улучшите её процедурную отрисовку и хореографию.

9. Результаты

Предоставьте:

Полный исходный код на JavaScript
Рабочий локальный предпросмотр анимации
Редактируемые определения сцен
Многоразовую систему анимации персонажа
Многоразовые функции процедурной отрисовки
Функциональность экспорта видео
Инструкции по запуску проекта

Итоговый результат должен быть работающей анимацией, а не просто технической демонстрацией.

Начните с реализации первой сцены и базового движка анимации. После того как прототип заработает, продолжайте работу над остальными сценами.

PROJECT: THE FIRST SPARK — Procedural Animated Short Film

You are a senior creative coder, generative artist, animation director, and JavaScript graphics engineer.

Your task is to create a visually stunning, fully animated short film using procedural JavaScript drawing.

I have attached a reference image showing a minimalist black-ink animation on an off-white background.

Use the reference to understand the visual language, but create an original animation with its own story, composition, and movement.

Do not create a slideshow, static illustration, or simple particle demo. Build a genuine animated short film with evolving scenes, expressive character animation, cinematic transitions, and continuous visual storytelling.

1. Technical requirements

Build the project using:

JavaScript
HTML5 Canvas 2D
requestAnimationFrame for real-time playback
Procedural geometry and vector-based drawing
Bezier curves, paths, particles, and custom brush strokes
Deterministic animation based on a master timeline

All visual elements must be generated through JavaScript code.

Do not use:

AI image-generation APIs
AI video-generation APIs
External images or pre-rendered video
Stock footage
CSS-only animation
Static illustrations disguised as animation

The animation must be genuinely generated by code.

You may use lightweight JavaScript libraries if they meaningfully improve the animation, but prioritize Canvas 2D.

2. Visual direction

Create a hand-drawn, minimalist, experimental animation.

Visual characteristics:

Warm off-white paper background
Deep black ink illustrations
Slightly imperfect hand-drawn outlines
Organic brush strokes
Variable line thickness
Ink splashes and subtle paper grain
Expressive silhouette-based character design
Fluid, organic movement
Occasional dramatic camera movements
Cinematic composition

The visual result should feel like a professional independent animated short film.

Avoid generic geometric motion graphics, repetitive particle effects, and simple bouncing shapes.

Every scene should have a clear visual purpose.

3. Story: THE FIRST SPARK

Create an original 60-second animated short film.

The story follows a tiny character that emerges from a drop of black ink and gradually discovers how to create a world.

SCENE 1 — THE BEGINNING (0–8 seconds)

An empty off-white canvas.

A tiny black ink droplet appears in the center.

The droplet begins trembling.

Small irregular brush strokes emerge from it.

The ink slowly transforms into a tiny living character.

The character opens its eyes and looks around.

The camera gradually moves closer.

SCENE 2 — DISCOVERY (8–18 seconds)

The character begins walking across the empty world.

Its movement must feel alive, with animated limbs, body deformation, and subtle secondary motion.

Every step leaves behind small ink marks.

The character notices one of these marks and touches it.

The mark begins growing into an organic structure.

SCENE 3 — CREATION (18–32 seconds)

The character discovers that its movements can create new objects.

It draws a line through the air.

The line becomes a tree.

More brush strokes emerge and transform into hills, plants, and abstract structures.

The camera follows the character as the world expands.

Objects must visibly grow and transform through procedural drawing rather than suddenly appearing.

SCENE 4 — CHAOS (32–44 seconds)

The character loses control of its creation.

Black ink spreads rapidly.

The landscape becomes distorted.

Trees twist into abstract shapes.

Ink splashes fill the screen.

The camera shakes subtly as the character runs.

The animation becomes faster and more intense.

Use fluid transitions between all visual elements.

SCENE 5 — THE FIRST SPARK (44–55 seconds)

The character stops running.

Everything becomes still.

A small glowing point appears in its hand.

This is the only moment where a subtle warm accent color may be used.

The character releases the light.

The light expands into a circular wave.

The chaotic ink reorganizes into a beautiful, balanced landscape.

The camera pulls back to reveal the completed world.

SCENE 6 — ENDING (55–60 seconds)

The character stands on a small hill and looks toward the horizon.

The camera slowly moves backward.

The entire landscape gradually transforms into a single small ink drawing on the original empty canvas.

Fade to off-white.

End.

4. Animation quality requirements

This is the most important part of the project.

Every scene must contain actual animation.

The character must have:

Procedurally animated walking and running
Expressive body language
Head and body rotation
Squash and stretch
Anticipation and follow-through
Smooth transitions between poses

Environmental elements must have:

Organic growth animations
Continuous subtle movement
Non-repetitive procedural variation
Smooth transformations between shapes

Implement a virtual camera with:

Position
Zoom
Rotation
Smooth tracking
Cinematic easing

Use layered depth and camera movement to create visual richness.

Do not rely on random movement alone.

The animation should be deliberately choreographed around the story.

5. Timeline and rendering architecture

Create a centralized animation timeline.

Every visual state must be determined by the current timeline position.

Implement a function similar to:

renderFrame(time)

The function must render the correct animation frame for any requested timestamp.

Use seeded randomness so that rendering the same timestamp always produces the same image.

Do not make the animation dependent on the number of previous frames rendered.

This is essential for deterministic video export.

Target specifications:

Resolution: 1920 × 1080

Aspect ratio: 16:9

Frame rate: 30 FPS

Duration: 60 seconds

Provide an option to switch to 1080 × 1920 vertical format for social media.

6. Preview and controls

Create a local web interface that allows me to:

Play and pause the animation
Restart the animation
Scrub through the timeline
Jump between scenes
Adjust playback speed
Switch between horizontal and vertical formats
Preview the animation in real time

Display the current timestamp and scene name.

7. Video export

Implement a reliable video export workflow.

The final animation must be exportable as a high-quality MP4 file.

Use deterministic frame-by-frame rendering to avoid dropped frames or inconsistent timing.

You may use a suitable browser rendering pipeline, a frame-sequence exporter, or FFmpeg.

Do not assume that recording the browser window in real time is sufficient for production-quality export.

Provide a simple export command or interface.

8. Development process

Do not attempt to create the entire film as one enormous, untested code block.

Work in stages.

First:

Create the project architecture.
Implement the Canvas rendering engine.
Implement the deterministic timeline.
Create the character animation system.
Build Scene 1 as a fully functional visual prototype.
Run the project and inspect the visual result.

After the first scene works, continue implementing the remaining scenes.

Test the animation at multiple timestamps.

Check for rendering errors, broken transitions, inconsistent character proportions, and performance problems.

If a scene looks too simplistic, improve its procedural drawing and choreography.

9. Deliverables

Provide:

Complete JavaScript source code
Working local animation preview
Editable scene definitions
Reusable character animation system
Reusable procedural drawing functions
Video export functionality
Instructions for running the project

The final result must be a functioning animation, not just a technical demonstration.

Start by implementing the first scene and the core animation engine. Once the prototype is functional, continue with the remaining scenes.

• Нужно своё фото: прикрепите изображение к запросу — промпт работает с ним.