Compétences algorithmic-art
🎨

algorithmic-art

Sûr 🌐 Accès réseau📁 Accès au système de fichiers⚙️ Commandes externes

إنشاء فن توليدي باستخدام p5.js

Également disponible depuis: Cam10001110101,davila7,sickn33,Azeem-2,ZhanlinCui,ArtemisAI,anthropics

حوّل المفاهيم الرياضية إلى فن بصري مذهل باستخدام تقنيات خوارزمية. توفر هذه المهارة قوالب موجهة لإنشاء أعمال فنية توليدية قابلة لإعادة الإنتاج مع عشوائية ببذرة وضوابط تفاعلية.

Prend en charge: Claude Codex Code(CC)
📊 70 Adéquat
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "algorithmic-art". Create a generative art piece called 'Cosmic Dust' with swirling particle patterns

Résultat attendu:

  • ملف HTML مع رسم p5.js مدمج
  • عناصر تحكم جانبية لعدد الجسيمات والسرعة ووضع الألوان
  • العشوائية ببذرة تضمن أنماطًا قابلة لإعادة الإنتاج
  • أزرار تنزيل لتصدير PNG و SVG
  • قماش متجاوب يتكيف مع حجم النافذة

Utilisation de "algorithmic-art". Generate a noise-based flow field that creates organic river-like patterns

Résultat attendu:

  • حساب حقل ضوضاء Perlin مُطابق لزوايا الجسيمات
  • تصيير آثار الجسيمات في الزمن الحقيقي
  • عناصر تحكم جانبية لمقياس الضوضاء وقوة التدفق
  • رسوم متحركة سلسة باستخدام requestAnimationFrame
  • وظيفة حفظ الأعمال الفنية لتصدير عالي الدقة

Audit de sécurité

Sûr
v5 • 1/17/2026

This skill contains only documentation and templates for creating generative art with p5.js. No executable code, network calls, or file operations exist. Static findings are false positives from misidentified markdown syntax and metadata references.

2
Fichiers analysés
376
Lignes analysées
3
résultats
5
Total des audits

Score de qualité

38
Architecture
100
Maintenabilité
87
Contenu
21
Communauté
100
Sécurité
91
Conformité aux spécifications

Ce que vous pouvez construire

إنشاء عمل فني فريد

أنشئ أعمالًا بصرية فريدة من نوعها باستخدام خوارزميات رياضية وعشوائية ببذرة لإمكانية إعادة الإنتاج.

بناء تصورات

أنشئ تصورات بيانات تفاعلية وتركيبات فن توليدي مع معلمات قابلة للتخصيص.

نمذجة الأنماط

أنشئ بسرعة نماذج أولية لأنماط إجرائية للأقمشة أو ورق الجدران أو مواد العلامة التجارية.

Essayez ces prompts

نمط تدفق أساسي
أنشئ قطعة فن توليدي باستخدام p5.js مع أنماط جسيمات متدفقة. تضمّن عشوائية ببذرة لإمكانية إعادة الإنتاج وشريطًا جانبيًا مع عناصر تحكم للسرعة والكثافة.
حقول تدفق عضوية
أنشئ عارض HTML لتصور حقل ضوضاء Perlin. يجب أن تتبع الجسيمات تدفق الضوضاء مكوّنة أنماط اضطراب عضوية. أضف عناصر تحكم لمقياس الضوضاء وعدد الجسيمات.
أنماط هندسية
أنشئ فنًا خوارزميًا قائمًا على متتاليات فيبوناتشي والنسبة الذهبية. نفّذ أنماطًا هندسية متكررة مع تدرجات لونية وعناصر تحكم للتعقيد.
محاكاة تفاعلية
ابنِ نظام جسيمات معقدًا بقوى جذب وتنافر، وتأثيرات ذيل، وتفاعل بالماوس. تضمّن عدة مصادر انبعاث وعناصر تحكم لمعلمات الفيزياء.

Bonnes pratiques

  • استخدم دائمًا دوال عشوائية ببذرة (randomSeed, noiseSeed) لضمان أعمال قابلة لإعادة الإنتاج
  • طبّق windowResized() لسلوك قماش متجاوب عبر أحجام الشاشات
  • استخدم requestAnimationFrame لرسوم متحركة سلسة بمعدل 60 إطارًا في الثانية دون حجب

Éviter

  • استخدام Math.random() بدلًا من الدوال العشوائية ذات البذرة يفسد إمكانية إعادة الإنتاج
  • إنشاء حلقات لا نهائية دون تحكم مناسب بمعدل الإطارات يسبب تعليق المتصفح
  • تثبيت أبعاد القماش بشكل ثابت يمنع السلوك المتجاوب على الشاشات المختلفة

Foire aux questions

هل هذا متوافق مع جميع المتصفحات الحديثة؟
نعم، p5.js يعمل في جميع المتصفحات الحديثة. يتضمن HTML المُنشأ روابط CDN للمكتبة.
ما هو الحد الأقصى لحجم القماش المدعوم؟
حجم القماش محدود بذاكرة المتصفح. لأفضل أداء، أبقِ الأبعاد أقل من 2000x2000 بكسل.
هل يمكنني تضمين هذا في مشروعي الويب الحالي؟
نعم، HTML المُنشأ مكتفٍ ذاتيًا ويمكن تضمينه أو تعديله للدمج.
هل بيانات أعمالي الفنية خاصة وآمنة؟
تحدث جميع عمليات التوليد محليًا في المتصفح لديك. لا يتم إرسال أي بيانات للعمل الفني إلى خوادم خارجية.
لماذا تعمل الرسوم المتحركة ببطء؟
قلّل عدد الجسيمات أو التعقيد. استخدم requestAnimationFrame وحسّن حلقات الرسم.
كيف يُقارن هذا بـ Processing؟
p5.js هو نسخة JavaScript من Processing، مصممة لمتصفحات الويب مع بنية نحوية ومفاهيم مشابهة.

Détails du développeur

Structure de fichiers

📄 SKILL.md