صايب أفلام إجرائية بلا أصول باستعمال JavaScript وCanvas وWeb Audio

شنو كيدير procedural-film

procedural-film هي مهارة ديال agent كتبدّل موضوع لفيلم عمودي مدّتو تقريباً 30 ثانية. عوض ما كيجمع ملفات ديال الصور ولا الفيديو ولا الصوت، كل فيلم كيرسم الصور ديالو بـ JavaScript عادي فوق HTML canvas، وكيصاوب الموسيقى التصويرية ديالو بـ Web Audio API.

المشروع النهائي يقدر يخرّج player HTML مستقل و exports بصيغة MP4. وحيت الصور والأصوات كيتولدو بالكود، الفيلم كيتوزّع بلا حتى media assets.

الـ repository فيه production مرجعية كاملة فـ examples/butterfly-life. كتصوّر دورة حياة فراشة monarch فـ 17 لقطة، وكتدوم 32 ثانية بسرعة 120 bpm، وكتستعمل إطار عمودي بقياس 1080-by-1920 وبسرعة 24 إطار فالثانية.

المزايا الرئيسية

• صور إجرائية: كل pixel كيتترسم بـ JavaScript عادي وCanvas.
• صوت مُركّب: كل صوت كيتولّد عبر Web Audio.
• توزيع بلا assets: الفيلم ما كيعتمدش على ملفات media منفصلة.
• إخراج عمودي: workflow المرجعي مستهدف صيغة 1080-by-1920 مناسبة للتلفون.
• أكثر من صيغة للتسليم: pipeline كينشئ player HTML مستقل و exports بصيغة MP4.
• إنتاج مبني على agents: subagents متوازيين يقدرو يكتبو مشاهد فردية، ومن بعد موجات ديال النقاد كيراجعو اللقطات.
• تحقّق مدمج: المثال فيه بوابة جودة من ستة اختبارات قبل الرندرة.

فهم بنية الـ repository

الـ repository مقسوم بين المهارة القابلة لإعادة الاستعمال ومثال مطبّق:

• skills/procedural-film/ فيها مهارة الـ agent.
• skills/procedural-film/SKILL.md كتحدّد pipeline كاملة ديال الإنتاج.
• skills/procedural-film/foundation/ فيها المحرك والأدوات اللي كيتنسخو لكل فيلم جديد.
• skills/procedural-film/templates/ فيها أربعة قوالب ديال وثائق التخطيط.
• skills/procedural-film/reference/ فيها فهرس أنواع اللقطات، وأدلة المشاهد والموسيقى، والإطارات المرجعية.
• examples/butterfly-life/ فيها وثائق التخطيط، والكود المصدري، والأدوات، والـ player HTML، وMP4 ديال التلفون للفيلم ديال الفراشة.

المتطلبات

ثبّت البرامج التالية قبل ما تستعمل المهارة:

• Node.js 20 ولا أحدث
• ffmpeg، ويكون متاح فـ PATH ديال النظام
• Chromium ديال Playwright
• Agent كيدعم skills وsubagents متوازيين، بحال Claude Code

تأكّد بلي Node.js وffmpeg متاحين:

node --version
ffmpeg -version

تثبيت مهارة procedural-film

1. نسخ الـ repository

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

2. ربط المهارة بالـ agent ديالك

من الدليل اللي فيه الـ repository المنسوخ، صايب symbolic link فـ skills folder ديال Claude Code:

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

الـ symbolic link مفيد حيت كيخلّي المثال التطبيقي متاح حدّ المهارة فـ examples/butterfly-life/. إلا كنت كتستعمل agent آخر متوافق، ربط نفس دليل المهارة بـ skills folder ديال داك الـ agent.

3. تثبيت dependencies ديال أدوات المثال

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

4. تثبيت Chromium ديال Playwright

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

صايب فيلم من موضوع

منين كتربط المهارة، طلب من الـ agent ديالك يصايب فيلم إجرائي على شي موضوع. مثلاً:

صايب فيلم إجرائي على حياة نحلة العسل.

الـ agent كيتبع الـ pipeline اللي فـ skills/procedural-film/SKILL.md. الإنتاج مقصود يكون كبير: agent واحد لكل لقطة كيكتب scene file يقدر يفوت 1,000 سطر، ومن بعد موجات ديال النقاد كيراجعو كل لقطة.

خطّط لجلسة ديال agent طويلة وكتستهلك بزاف ديال الموارد. الـ README كينبّه بلي فيلم كامل يقدر يستهلك جزء كبير من خطة الاستعمال ديال agent.

عاود بنِ الفيلم المرجعي ديال الفراشة

إعادة بناء المثال الموجود هي أسهل طريقة باش تتأكّد بلي 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

الـ renderer كيكتب الفيديو الناتج فـ:

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

3. عاود بنِ الـ player HTML المستقل

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

هاد الأمر كيعيد بناء الـ player HTML. الـ player التفاعلي الموجود كاين فـ examples/butterfly-life/dist/butterfly-life.html، وتقدر تحمّلو ولا تحلّو فالمتصفح.

workflow عملي للتطوير

1. بدا بموضوع محدد مزيان وطلب من الوكيل يدير عليه فيلم إجرائي.
2. خلي الوكيل والوكلاء الفرعيين اللي خدامين بالتوازي يولّدو وثائق التخطيط وملفات المشاهد.
3. خلي موجات الناقد تراجع اللقطات بلا ما توقف من بعد التوليد الأولي.
4. شغّل فحوصات التحقق ديال المشروع قبل التصيير.
5. صلّح أي مشاكل تبلّغ عليها الفحوصات، ومن بعد عاود شغّلها حتى تخرج بنجاح.
6. صيّر ملف MP4 وعاود بنِ مشغّل HTML مستقل بذاتو.
7. حلّ المشغّل فالمتصفح وراجع الفيلم العمودي النهائي.

نصائح متقدمة

استعمل الفيلم المرجعي كهدف للإنتاج

درس examples/butterfly-life ملي كتتعلم البنية المتوقعة للمشروع وجودة الإخراج. وثائق التخطيط ديالو، والمصدر، والأدوات، والمشغّل المصيّر، وفيديو الهاتف المصدّر كيبينو شنو مصمم هاد الـskill ينتج.

قرا المراجع المساندة قبل ما تبدل الأسلوب

المجلد reference/ فيه فهرس ديال أنواع اللقطات، وإرشادات المشاهد، وإرشادات الموسيقى، وإطارات مرجعية بصرية. هاد المواد كتعطي السياق للقرارات اللي كيديرها مسار الوكلاء.

تحقق قبل كل تصيير نهائي

شغّل check.cjs قبل render.cjs. اعتابر رمز الخروج الناجح ديال بوابة الفحوصات الستة شرط أساسي لإنتاج ملف MP4 النهائي.

خطط للوقت واستعمال الوكلاء

المسار كيركز على التوليد المفصل ديال المشاهد والنقد المتكرر أكثر من الإخراج السريع. حيث ملفات اللقطات الفردية تقدر يكون فيها أكثر من 1,000 سطر، ما تفترضش أن سير العمل غادي يكمل بحال مهمة قصيرة مبنية على prompt واحد.

خلي الـskill مربوط وما تنسخوش

الرابط الرمزي كيخلي الـskill مربوط بالمستودع المستنسخ وكيحافظ على الولوج السهل لمثال الفراشة. وكيجنب حتى إنشاء تثبيت منسوخ ومنفصل على بنية المستودع.

الخلاصة

procedural-film كيوفر طريقة مسيّرة بالوكلاء لإنتاج أفلام عمودية كاملة باستعمال الرسم بجافاسكريبت والصوت المركب. من بعد ما تربط الـskill وتثبت الأدوات المطلوبة، تقدر تطلب فيلم حسب الموضوع، وتتحقق من المشاهد المولدة ديالو، وتصدر MP4، وتبني مشغّل HTML مستقل بلا ما تجمع أصول الوسائط التقليدية.

المشروع متوفر برخصة MIT. الأسلوب البصري والتحريري ديالو مستوحى من The life of a fruit fly ديال Kevin Ngo، والتفاصيل مسجلة فـ examples/butterfly-life/docs/reference-analysis.md.