Unda Filamu za Kitaratibu Bila Rasilimali kwa JavaScript, Canvas na Web Audio

Kinachofanywa na procedural-film

procedural-film ni ujuzi wa wakala wa kubadilisha mada kuwa filamu ya wima yenye urefu wa takriban sekunde 30. Badala ya kuunganisha faili za picha, video au sauti, kila filamu huchora vielelezo vyake kwa JavaScript ya kawaida kwenye turubai ya HTML na kuunda wimbo wake kwa Web Audio API.

Mradi uliokamilika unaweza kutengeneza kichezeshi cha HTML kinachojitosheleza na uhamishaji wa MP4. Kwa kuwa vielelezo na sauti huzalishwa kwenye msimbo, filamu huja bila mali za midia.

Hazina hii inajumuisha uzalishaji kamili wa marejeleo katika examples/butterfly-life. Inaonyesha mzunguko wa maisha wa kipepeo monarch katika picha 17, hudumu kwa sekunde 32 kwa bpm 120, na hutumia fremu ya wima ya 1080-kwa-1920 kwa fremu 24 kwa sekunde.

Sifa kuu

• Vielelezo vya kitaratibu: Kila pikseli huchorwa kwa JavaScript ya kawaida na Canvas.
• Sauti iliyosanisishwa: Kila sauti huzalishwa kupitia Web Audio.
• Uwasilishaji bila mali za midia: Filamu haitegemei faili tofauti za midia.
• Pato la wima: Mtiririko wa marejeleo hulenga umbizo la 1080-kwa-1920 linalofaa simu.
• Matokeo mengi: Mchakato hutengeneza kichezeshi cha HTML kinachojitegemea na uhamishaji wa MP4.
• Uzalishaji unaotegemea mawakala: Mawakala wadogo sambamba wanaweza kuandika mandhari binafsi, huku mawimbi ya wakosoaji yakikagua picha hizo.
• Uthibitishaji uliojengwa ndani: Mfano huu unajumuisha lango la ubora lenye ukaguzi sita kabla ya uwasilishaji.

Elewa muundo wa hazina

Hazina imegawanywa katika ujuzi unaoweza kutumika tena na mfano uliokamilishwa:

• skills/procedural-film/ ina ujuzi wa wakala.
• skills/procedural-film/SKILL.md inafafanua mchakato kamili wa uzalishaji.
• skills/procedural-film/foundation/ ina injini na zana zinazonakiliwa katika kila filamu mpya.
• skills/procedural-film/templates/ ina violezo vinne vya nyaraka za mipango.
• skills/procedural-film/reference/ ina faharasa ya aina za picha, miongozo ya mandhari na muziki, pamoja na fremu za marejeleo.
• examples/butterfly-life/ ina nyaraka za mipango, msimbo chanzo, zana, kichezeshi cha HTML, na MP4 ya simu ya filamu ya kipepeo.

Mahitaji ya awali

Sakinisha programu zifuatazo kabla ya kutumia ujuzi huu:

• Node.js 20 au mpya zaidi
• ffmpeg, inayopatikana kwenye PATH ya mfumo wako
• Chromium kwa Playwright
• Wakala anayeunga mkono ujuzi na mawakala wadogo sambamba, kama Claude Code

Thibitisha kuwa Node.js na ffmpeg zinapatikana:

node --version
ffmpeg -version

Sakinisha ujuzi wa procedural-film

1. Nakili hazina

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

2. Unganisha ujuzi na wakala wako

Kutoka kwenye saraka iliyo na hazina iliyonakiliwa, tengeneza kiungo cha mfano katika folda ya ujuzi ya Claude Code:

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

Kiungo cha mfano ni muhimu kwa sababu huhifadhi mfano uliokamilishwa karibu na ujuzi katika examples/butterfly-life/. Ikiwa unatumia wakala mwingine unaooana, unganisha saraka hiyo hiyo ya ujuzi kwenye folda ya ujuzi ya wakala huyo.

3. Sakinisha vitegemezi vya zana za mfano

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

4. Sakinisha Chromium kwa Playwright

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

Tengeneza filamu kutoka kwa mada

Baada ya kuunganisha ujuzi, mwombe wakala wako atengeneze filamu ya kitaratibu kuhusu mada fulani. Kwa mfano:

Tengeneza filamu ya kitaratibu kuhusu maisha ya nyuki wa asali.

Wakala hufuata mchakato katika skills/procedural-film/SKILL.md. Uzalishaji ni mkubwa kimakusudi: wakala mmoja kwa kila picha huandika faili ya mandhari ambayo inaweza kuzidi mistari 1,000, kisha mawimbi ya wakosoaji hukagua kila picha.

Panga kwa ajili ya kipindi kirefu cha wakala kinachotumia rasilimali nyingi. README inabainisha kuwa filamu kamili inaweza kutumia sehemu kubwa ya mpango wa matumizi ya wakala.

Jenga upya filamu ya marejeleo ya kipepeo

Kujenga upya mfano uliojumuishwa ndiyo njia rahisi zaidi ya kuthibitisha kuwa Node.js, ffmpeg, Playwright na Chromium vimesanidiwa ipasavyo.

1. Endesha lango la uthibitishaji

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

Hati ya check.cjs huendesha lango la mradi lenye ukaguzi sita. Uthibitishaji uliofaulu hutoka kwa msimbo wa hali 0.

2. Wasilisha MP4

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

Kitoleaji huandika video inayotokana kwenye:

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

3. Jenga upya kichezeshi cha HTML kinachojitegemea

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

Amri hii hujenga upya kichezeshi cha HTML. Kichezeshi shirikishi kilichopo kiko kwenye examples/butterfly-life/dist/butterfly-life.html na kinaweza kupakuliwa au kufunguliwa kwenye kivinjari.

Mtiririko wa vitendo wa uundaji

1. Anza kwa mada iliyofafanuliwa wazi na umwombe wakala atengeneze filamu ya hatua kwa hatua kuihusu.
2. Mruhusu wakala na mawakala wadogo wanaofanya kazi sambamba watengeneze hati za upangaji na faili za matukio.
3. Ruhusu mawimbi ya wakosoaji yapitie picha badala ya kusitisha baada ya utengenezaji wa awali.
4. Tekeleza ukaguzi wa uthibitishaji wa mradi kabla ya kutengeneza renderi.
5. Shughulikia matatizo yoyote yaliyoripotiwa, kisha rudia ukaguzi hadi ukamilike kwa mafanikio.
6. Tengeneza MP4 na ujenge upya kichezeshi cha HTML kinachojitosheleza.
7. Fungua kichezeshi kwenye kivinjari na upitie filamu ya mwisho ya wima.

Vidokezo vya hali ya juu

Tumia filamu ya marejeo kama lengo la utayarishaji

Chunguza examples/butterfly-life unapojifunza mpangilio wa mradi unaotarajiwa na ubora wa matokeo. Hati zake za upangaji, msimbo chanzi, zana, kichezeshi kilichotengenezwa kwa renderi, na video ya simu iliyohamishwa vinaonyesha kile ambacho ujuzi huu umeundwa kuzalisha.

Soma marejeo saidizi kabla ya kubadilisha mtindo

Saraka ya reference/ inajumuisha faharasa ya aina za picha, mwongozo wa matukio, mwongozo wa muziki, na fremu za marejeo za kuona. Nyenzo hizi hutoa muktadha wa maamuzi yanayofanywa na mchakato wa mawakala.

Thibitisha kabla ya kila utengenezaji wa mwisho

Tekeleza check.cjs kabla ya render.cjs. Chukulia msimbo wa kutoka kwa mafanikio kutoka kwenye lango la ukaguzi sita kuwa sharti la kuzalisha MP4 ya mwisho.

Panga muda na matumizi ya mawakala

Mchakato huu unapendelea utengenezaji wa kina wa matukio na ukosoaji unaorudiwa kuliko matokeo ya haraka. Kwa kuwa faili mahususi za picha zinaweza kuwa na zaidi ya mistari 1,000, epuka kudhani kwamba mtiririko huu utakamilika kama kazi fupi ya kutengeneza kwa amri moja.

Weka ujuzi ukiwa umeunganishwa badala ya kunakiliwa

Kiungo cha kiishara huweka ujuzi ukiwa umeunganishwa na hazina iliyoklonwa na hudumisha ufikiaji rahisi wa mfano wa butterfly. Hii pia huepuka kuunda usakinishaji mwingine uliokopiwa ambao umetenganishwa na mpangilio wa hazina.

Hitimisho

procedural-film hutoa njia inayoendeshwa na wakala ya kutengeneza filamu za wima kwa kutumia michoro ya JavaScript na sauti iliyosanisishwa pekee. Baada ya kuunganisha ujuzi na kusakinisha zana zinazohitajika, unaweza kuomba filamu kwa mada, kuthibitisha matukio yake yaliyotengenezwa, kuhamisha MP4, na kujenga kichezeshi cha HTML kinachojitegemea bila kujumuisha rasilimali za kawaida za midia.

Mradi huu unapatikana chini ya Leseni ya MIT. Mbinu yake ya kuona na uhariri imeigwa kutoka kwa The life of a fruit fly ya Kevin Ngo, pamoja na maelezo yaliyorekodiwa katika examples/butterfly-life/docs/reference-analysis.md.