JavaScript, Canvas va Web Audio yordamida assetsiz protseduraviy filmlar yarating

procedural-film nima qiladi

procedural-film mavzuni taxminan 30 soniyalik vertikal filmga aylantirish uchun mo‘ljallangan agent ko‘nikmasidir. Har bir film rasm, video yoki audio fayllarni birlashtirish o‘rniga o‘z tasvirlarini HTML canvas’da oddiy JavaScript yordamida chizadi va saundtrekini Web Audio API orqali sintez qiladi.

Tayyor loyiha mustaqil HTML pleer va MP4 eksportlarini yaratishi mumkin. Tasvirlar va tovushlar kod orqali hosil qilingani sababli film hech qanday media aktivi bilan birga kelmaydi.

Repozitoriyda examples/butterfly-life manzilida to‘liq namunaviy ishlab chiqish mavjud. Unda monarx kapalagining hayot sikli 17 ta kadrda tasvirlangan, davomiyligi 32 soniya, tempi 120 bpm va vertikal kadri 24 kadr/soniya tezlikda 1080 ga 1920 o‘lchamdan iborat.

Asosiy imkoniyatlar

• Protseduraviy tasvirlar: Har bir piksel oddiy JavaScript va Canvas yordamida chiziladi.
• Sintez qilingan audio: Har bir tovush Web Audio orqali yaratiladi.
• Aktivlarsiz yetkazib berish: Film alohida media fayllarga bog‘liq emas.
• Vertikal chiqish: Namunaviy ish jarayoni telefonda ko‘rishga qulay 1080 ga 1920 formatga mo‘ljallangan.
• Bir nechta natija: Konveyer mustaqil HTML pleer va MP4 eksportlarini yaratadi.
• Agentlar asosidagi ishlab chiqish: Parallel subagentlar alohida sahnalarni yozishi, tanqidchilar to‘lqinlari esa kadrlarni ko‘rib chiqishi mumkin.
• O‘rnatilgan tekshiruv: Misolda render qilishdan oldin olti bandli sifat nazorati mavjud.

Repozitoriy tuzilishini tushunish

Repozitoriy qayta ishlatiladigan ko‘nikma va amaliy namunaga bo‘lingan:

• skills/procedural-film/ agent ko‘nikmasini o‘z ichiga oladi.
• skills/procedural-film/SKILL.md to‘liq ishlab chiqish konveyerini belgilaydi.
• skills/procedural-film/foundation/ har bir yangi filmga ko‘chiriladigan dvigatel va vositalarni o‘z ichiga oladi.
• skills/procedural-film/templates/ rejalashtirish hujjatlarining to‘rtta shablonini o‘z ichiga oladi.
• skills/procedural-film/reference/ kadr turlari indeksi, sahna va musiqa qo‘llanmalari hamda namunaviy kadrlarni o‘z ichiga oladi.
• examples/butterfly-life/ kapalak filmi uchun rejalashtirish hujjatlari, manba kodi, vositalar, HTML pleer va telefon uchun MP4 faylni o‘z ichiga oladi.

Talablar

Ko‘nikmadan foydalanishdan oldin quyidagi dasturlarni o‘rnating:

• Node.js 20 yoki undan yangi versiyasi
• ffmpeg, tizimingizning PATH o‘zgaruvchisida mavjud bo‘lishi kerak
• Playwright uchun Chromium
• Ko‘nikmalar va parallel subagentlarni qo‘llab-quvvatlaydigan agent, masalan, Claude Code

Node.js va ffmpeg mavjudligini tasdiqlang:

node --version
ffmpeg -version

procedural-film ko‘nikmasini o‘rnating

1. Repozitoriyni klonlang

git clone https://github.com/kuhnhomeuk-cell/procedural-film.git

2. Ko‘nikmani agentingizga ulang

Klonlangan repozitoriy joylashgan katalogdan Claude Code’ning ko‘nikmalar papkasida ramziy havola yarating:

ln -s "$PWD/procedural-film/skills/procedural-film" ~/.claude/skills/procedural-film

Ramziy havola qulay, chunki u amaliy namunani examples/butterfly-life/ manzilida ko‘nikma yonida saqlab turadi. Boshqa mos agentdan foydalansangiz, xuddi shu ko‘nikma katalogini o‘sha agentning ko‘nikmalar papkasiga ulang.

3. Namuna vositalari bog‘liqliklarini o‘rnating

npm install --prefix examples/butterfly-life/tools

4. Playwright uchun Chromium’ni o‘rnating

npx --prefix examples/butterfly-life/tools playwright install chromium

Mavzudan film yarating

Ko‘nikma ulangach, agentingizdan biror mavzu haqida protseduraviy film yaratishni so‘rang. Masalan:

Asalarining hayoti haqida protseduraviy film yarating.

Agent skills/procedural-film/SKILL.md dagi konveyerga amal qiladi. Ishlab chiqish ataylab keng ko‘lamli: har bir kadr uchun bitta agent 1 000 qatordan oshishi mumkin bo‘lgan sahna faylini yozadi, keyin tanqidchilar to‘lqinlari har bir kadrni ko‘rib chiqadi.

Uzoq davom etadigan va ko‘p resurs talab qiladigan agent sessiyasiga tayyor bo‘ling. README’da to‘liq film agentdan foydalanish rejasining katta qismini sarflashi mumkinligi qayd etilgan.

Kapalak haqidagi namunaviy filmni qayta yarating

Kiritilgan namunani qayta yaratish Node.js, ffmpeg, Playwright va Chromium to‘g‘ri sozlanganini tekshirishning eng oson usulidir.

1. Tekshiruv bosqichini ishga tushiring

node examples/butterfly-life/tools/check.cjs

check.cjs skripti loyihaning olti bandli tekshiruvini ishga tushiradi. Tekshiruv muvaffaqiyatli yakunlansa, jarayon 0 holat kodi bilan tugaydi.

2. MP4’ni render qiling

node examples/butterfly-life/tools/render.cjs

Render dasturi hosil bo‘lgan videoni quyidagi manzilga yozadi:

examples/butterfly-life/exports/butterfly-life.mp4

3. Mustaqil HTML pleerni qayta yarating

node examples/butterfly-life/tools/build.cjs

Bu buyruq HTML pleerni qayta yaratadi. Mavjud interaktiv pleer examples/butterfly-life/dist/butterfly-life.html manzilida joylashgan bo‘lib, uni yuklab olish yoki brauzerda ochish mumkin.

Amaliy ishlab chiqish ish jarayoni

1. Aniq belgilangan mavzudan boshlang va agentdan shu mavzu haqida protseduraviy film yaratishni so‘rang.
2. Agent va parallel quyi agentlarga rejalashtirish hujjatlari hamda sahna fayllarini yaratishga imkon bering.
3. Dastlabki generatsiyadan keyin to‘xtash o‘rniga, tanqidchilar to‘lqinlari kadrlarni ko‘rib chiqsin.
4. Renderlashdan oldin loyiha validatsiyasi tekshiruvlarini ishga tushiring.
5. Bildirilgan muammolarni hal qiling, so‘ng tekshiruvlar muvaffaqiyatli yakunlanguncha ularni qayta ishga tushiring.
6. MP4 faylini renderlang va mustaqil HTML pleyerni qayta yarating.
7. Pleyerni brauzerda oching va yakuniy vertikal filmni ko‘rib chiqing.

Ilg‘or maslahatlar

Namunaviy filmdan ishlab chiqarish maqsadi sifatida foydalaning

Kutilayotgan loyiha tuzilishi va chiqish sifati bilan tanishishda examples/butterfly-life papkasini o‘rganing. Undagi rejalashtirish hujjatlari, manba kod, vositalar, renderlangan pleyer va eksport qilingan telefon videosi ushbu ko‘nikma nimalar yaratishga mo‘ljallanganini ko‘rsatadi.

Uslubni o‘zgartirishdan oldin qo‘llab-quvvatlovchi ma’lumotnomalarni o‘qing

reference/ katalogida kadr turlari indeksi, sahna bo‘yicha yo‘riqnoma, musiqa bo‘yicha yo‘riqnoma va vizual ma’lumotnoma kadrlari mavjud. Ushbu materiallar agentlar pipeline’i qabul qilgan qarorlar uchun kontekst beradi.

Har bir yakuniy renderdan oldin validatsiya qiling

render.cjs dan oldin check.cjs ni ishga tushiring. Olti tekshiruvli nazorat bosqichining muvaffaqiyatli chiqish kodini yakuniy MP4 yaratish uchun zarur shart deb hisoblang.

Vaqt va agentlardan foydalanishni rejalashtiring

Ushbu pipeline tezkor natijadan ko‘ra batafsil sahna yaratish va takroriy tanqidni afzal ko‘radi. Ayrim kadr fayllari 1 000 qatordan ortiq bo‘lishi mumkinligi sababli, ish jarayoni qisqa, bitta prompt asosidagi generatsiya topshirig‘idek tez yakunlanadi deb o‘ylamang.

Ko‘nikmani nusxalash o‘rniga unga havola qoldiring

Simvolik havola ko‘nikmani klonlangan repository bilan bog‘lab turadi va butterfly misoliga qulay kirishni saqlab qoladi. Bu, shuningdek, repository tuzilishidan uzilib qolgan alohida nusxalangan o‘rnatmani yaratishning oldini oladi.

Xulosa

procedural-film JavaScript yordamida chizish va sintez qilingan audio orqali to‘liq vertikal filmlar yaratishning agent boshqaruvidagi usulini taqdim etadi. Ko‘nikmaga havola yaratib, kerakli vositalarni o‘rnatgach, mavzu bo‘yicha film so‘rashingiz, yaratilgan sahnalarni validatsiya qilishingiz, MP4 eksport qilishingiz va odatiy media resurslarini biriktirmasdan mustaqil HTML pleyer yaratishingiz mumkin.

Loyiha MIT litsenziyasi ostida taqdim etilgan. Uning vizual va tahririy yondashuvi Kevin Ngo’ning The life of a fruit fly asari asosida yaratilgan; tafsilotlar examples/butterfly-life/docs/reference-analysis.md faylida qayd etilgan.