JavaScript، Canvas اور Web Audio کے ساتھ بیرونی اثاثوں کے بغیر پروسیجرل فلمیں بنائیں

procedural-film کیا کرتا ہے

procedural-film ایک ایجنٹ اسکل ہے جو کسی موضوع کو تقریباً 30 سیکنڈ کی عمودی فلم میں تبدیل کرتا ہے۔ تصویر، ویڈیو یا آڈیو فائلیں جوڑنے کے بجائے، ہر فلم اپنے مناظر vanilla JavaScript کے ذریعے HTML canvas پر بناتی ہے اور Web Audio API سے اپنا ساؤنڈ ٹریک تیار کرتی ہے۔

مکمل پروجیکٹ ایک خود کفیل HTML پلیئر اور MP4 ایکسپورٹس تیار کر سکتا ہے۔ چونکہ مناظر اور آوازیں کوڈ میں بنائی جاتی ہیں، اس لیے فلم میں میڈیا کے صفر اثاثے شامل ہوتے ہیں۔

ریپوزٹری میں examples/butterfly-life پر ایک مکمل حوالہ جاتی پروڈکشن شامل ہے۔ اس میں بادشاہ تتلی کے زندگی کے چکر کو 17 شاٹس میں دکھایا گیا ہے، یہ 120 bpm پر 32 سیکنڈ چلتی ہے، اور 24 فریم فی سیکنڈ کی رفتار سے 1080 بائی 1920 عمودی فریم استعمال کرتی ہے۔

اہم خصوصیات

• پروسیجرل مناظر: ہر پکسل vanilla JavaScript اور Canvas سے بنایا جاتا ہے۔
• ترکیب شدہ آڈیو: ہر آواز Web Audio کے ذریعے تیار کی جاتی ہے۔
• اثاثوں سے آزاد ڈیلیوری: فلم الگ میڈیا فائلوں پر منحصر نہیں ہوتی۔
• عمودی آؤٹ پٹ: حوالہ جاتی ورک فلو فون کے لیے موزوں 1080 بائی 1920 فارمیٹ کو ہدف بناتا ہے۔
• متعدد ڈیلیوری ایبلز: پائپ لائن ایک اسٹینڈ الون HTML پلیئر اور MP4 ایکسپورٹس تیار کرتی ہے۔
• ایجنٹ پر مبنی پروڈکشن: متوازی ذیلی ایجنٹس انفرادی مناظر لکھ سکتے ہیں، جبکہ نقادوں کی لہریں شاٹس کا جائزہ لیتی ہیں۔
• بلٹ اِن توثیق: مثال میں رینڈرنگ سے پہلے چھ جانچوں پر مشتمل کوالٹی گیٹ شامل ہے۔

ریپوزٹری کا ڈھانچہ سمجھیں

ریپوزٹری کو دوبارہ استعمال کیے جانے والے اسکل اور ایک عملی مثال میں تقسیم کیا گیا ہے:

• skills/procedural-film/ میں ایجنٹ اسکل موجود ہے۔
• skills/procedural-film/SKILL.md مکمل پروڈکشن پائپ لائن کی تعریف کرتا ہے۔
• skills/procedural-film/foundation/ میں وہ انجن اور ٹولز موجود ہیں جو ہر نئی فلم میں نقل کیے جاتے ہیں۔
• skills/procedural-film/templates/ میں منصوبہ بندی کی چار دستاویزاتی ٹیمپلیٹس موجود ہیں۔
• skills/procedural-film/reference/ میں شاٹ ٹائپ انڈیکس، منظر اور موسیقی کے رہنما، اور حوالہ جاتی فریم موجود ہیں۔
• examples/butterfly-life/ میں تتلی کی فلم کے لیے منصوبہ بندی کی دستاویزات، سورس کوڈ، ٹولز، HTML پلیئر اور فون MP4 موجود ہیں۔

ضروریات

اسکل استعمال کرنے سے پہلے درج ذیل سافٹ ویئر انسٹال کریں:

• Node.js 20 یا اس کے بعد کا ورژن
• ffmpeg، جو آپ کے سسٹم کے PATH میں دستیاب ہو
• Playwright کے لیے Chromium
• ایسا ایجنٹ جو اسکلز اور متوازی ذیلی ایجنٹس کو سپورٹ کرتا ہو، جیسے Claude Code

یقینی بنائیں کہ Node.js اور ffmpeg دستیاب ہیں:

node --version
ffmpeg -version

procedural-film اسکل انسٹال کریں

1. ریپوزٹری کلون کریں

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

2. اسکل کو اپنے ایجنٹ سے لنک کریں

کلون کی گئی ریپوزٹری پر مشتمل ڈائریکٹری سے Claude Code کے اسکلز فولڈر میں ایک علامتی لنک بنائیں:

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

علامتی لنک مفید ہے کیونکہ اس کے ذریعے عملی مثال اسکل کے ساتھ examples/butterfly-life/ میں دستیاب رہتی ہے۔ اگر آپ کوئی مختلف مطابقت رکھنے والا ایجنٹ استعمال کرتے ہیں تو اسی اسکل ڈائریکٹری کو اس ایجنٹ کے اسکلز فولڈر میں لنک کریں۔

3. مثال کے ٹولز کی انحصاریاں انسٹال کریں

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

4. Playwright کے لیے Chromium انسٹال کریں

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

کسی موضوع سے فلم بنائیں

اسکل لنک ہونے کے بعد اپنے ایجنٹ سے کسی موضوع پر پروسیجرل فلم بنانے کو کہیں۔ مثال کے طور پر:

شہد کی مکھی کی زندگی پر ایک پروسیجرل فلم بنائیں۔

ایجنٹ skills/procedural-film/SKILL.md میں موجود پائپ لائن کی پیروی کرتا ہے۔ پروڈکشن جان بوجھ کر وسیع رکھی گئی ہے: ہر شاٹ کے لیے ایک ایجنٹ ایک سین فائل لکھتا ہے جو 1,000 سے زیادہ سطروں پر مشتمل ہو سکتی ہے، پھر نقادوں کی لہریں ہر شاٹ کا جائزہ لیتی ہیں۔

ایجنٹ کے ایک طویل اور وسائل طلب سیشن کے لیے تیار رہیں۔ README میں بتایا گیا ہے کہ ایک مکمل فلم ایجنٹ کے استعمال کے منصوبے کا بڑا حصہ استعمال کر سکتی ہے۔

تتلی کی حوالہ جاتی فلم دوبارہ بنائیں

شامل مثال کو دوبارہ بنانا اس بات کی تصدیق کرنے کا آسان ترین طریقہ ہے کہ Node.js، ffmpeg، Playwright اور Chromium درست طور پر ترتیب دیے گئے ہیں۔

1. توثیقی گیٹ چلائیں

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

check.cjs اسکرپٹ پروجیکٹ کا چھ جانچوں پر مشتمل گیٹ چلاتا ہے۔ کامیاب توثیق اسٹیٹس کوڈ 0 کے ساتھ ختم ہوتی ہے۔

2. MP4 رینڈر کریں

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

رینڈرر نتیجے کی ویڈیو یہاں لکھتا ہے:

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

3. اسٹینڈ الون HTML پلیئر دوبارہ بنائیں

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

یہ کمانڈ HTML پلیئر دوبارہ بناتی ہے۔ موجودہ انٹرایکٹو پلیئر examples/butterfly-life/dist/butterfly-life.html پر موجود ہے اور اسے ڈاؤن لوڈ یا براؤزر میں کھولا جا سکتا ہے۔

ایک عملی ترقیاتی ورک فلو

1. ایک واضح طور پر متعین موضوع سے آغاز کریں اور ایجنٹ سے اس کے بارے میں ایک طریقہ کار پر مبنی فلم بنانے کو کہیں۔
2. ایجنٹ اور متوازی ذیلی ایجنٹس کو منصوبہ بندی کی دستاویزات اور منظر کی فائلیں تیار کرنے دیں۔
3. ابتدائی تخلیق کے بعد رکنے کے بجائے تنقیدی ادوار کو شاٹس کا جائزہ لینے دیں۔
4. رینڈرنگ سے پہلے پروجیکٹ کی توثیقی جانچ چلائیں۔
5. رپورٹ کیے گئے مسائل حل کریں، پھر جانچ کو دوبارہ چلائیں، یہاں تک کہ وہ کامیابی سے مکمل ہو جائے۔
6. MP4 رینڈر کریں اور خود کفیل HTML پلیئر دوبارہ بنائیں۔
7. پلیئر کو براؤزر میں کھولیں اور حتمی عمودی فلم کا جائزہ لیں۔

اعلیٰ درجے کی تجاویز

حوالہ فلم کو پروڈکشن کے ہدف کے طور پر استعمال کریں

متوقع پروجیکٹ لے آؤٹ اور آؤٹ پٹ کے معیار کو سمجھنے کے لیے examples/butterfly-life کا مطالعہ کریں۔ اس کی منصوبہ بندی کی دستاویزات، سورس، ٹولز، رینڈر شدہ پلیئر اور برآمد شدہ فون ویڈیو دکھاتے ہیں کہ یہ اسکل کیا تیار کرنے کے لیے بنائی گئی ہے۔

اسلوب تبدیل کرنے سے پہلے معاون حوالہ جات پڑھیں

reference/ ڈائریکٹری میں شاٹ کی اقسام کا اشاریہ، منظر سے متعلق رہنمائی، موسیقی سے متعلق رہنمائی اور بصری حوالہ فریم شامل ہیں۔ یہ مواد ایجنٹ پائپ لائن کے فیصلوں کے لیے سیاق و سباق فراہم کرتا ہے۔

ہر حتمی رینڈر سے پہلے توثیق کریں

render.cjs سے پہلے check.cjs چلائیں۔ حتمی MP4 تیار کرنے کے لیے چھ جانچوں کے گیٹ کے کامیاب ایگزٹ کوڈ کو لازمی شرط سمجھیں۔

وقت اور ایجنٹ کے استعمال کی منصوبہ بندی کریں

یہ پائپ لائن تیز آؤٹ پٹ کے بجائے تفصیلی منظر کی تخلیق اور بار بار تنقیدی جائزے کو ترجیح دیتی ہے۔ چونکہ انفرادی شاٹ فائلوں میں 1,000 سے زیادہ سطریں ہو سکتی ہیں، اس لیے یہ فرض نہ کریں کہ ورک فلو مختصر، ایک پرامپٹ والی تخلیق کے کام کی طرح مکمل ہو جائے گا۔

اسکل کو کاپی کرنے کے بجائے منسلک رکھیں

علامتی لنک اسکل کو کلون کیے گئے ریپوزٹری سے منسلک رکھتا ہے اور بٹر فلائی کی مثال تک آسان رسائی برقرار رکھتا ہے۔ اس سے ایک الگ نقل شدہ انسٹالیشن بنانے سے بھی بچا جا سکتا ہے جو ریپوزٹری کے لے آؤٹ سے منقطع ہو۔

نتیجہ

procedural-film ایجنٹ کے ذریعے عمودی فلمیں مکمل طور پر JavaScript ڈرائنگ اور ترکیب شدہ آڈیو سے تیار کرنے کا طریقہ فراہم کرتا ہے۔ اسکل کو منسلک کرنے اور مطلوبہ ٹولز انسٹال کرنے کے بعد، آپ موضوع کے لحاظ سے فلم کی درخواست کر سکتے ہیں، اس کے تیار کردہ مناظر کی توثیق کر سکتے ہیں، MP4 برآمد کر سکتے ہیں اور روایتی میڈیا اثاثے شامل کیے بغیر ایک اسٹینڈ الون HTML پلیئر بنا سکتے ہیں۔

یہ پروجیکٹ MIT License کے تحت دستیاب ہے۔ اس کا بصری اور اداریاتی طریقہ Kevin Ngo کی The life of a fruit fly سے ماخوذ ہے، جس کی تفصیلات examples/butterfly-life/docs/reference-analysis.md میں درج ہیں۔