مقدمة

في هذا البرنامج التعليمي، ستتعلم كيفية إنشاء رسوم متحركة هندسية ديناميكية وملونة باستخدام p5.js. ترمز هذه الرسوم المتحركة إلى فكرة أن "العالم مليء بأشخاص رائعين ورائعين يقومون بأشياء رائعة." ستتحرك الأشكال بشكل عشوائي عبر اللوحة القماشية، مما يؤدي إلى تغيير الألوان وإنشاء تأثير جذاب بصريًا.

الخطوة 1: إعداد بيئتك

1. تنزيل p5.js:

   • انتقل إلى موقع p5.js وقم بتنزيل أحدث إصدار من p5.js.
   • بدلاً من ذلك، يمكنك استخدام محرر p5.js عبر الإنترنت editor.p5js.org، والذي يسمح لك بكتابة التعليمات البرمجية وتشغيلها مباشرةً في متصفحك.

2. إنشاء مشروع جديد:

   • إذا كنت تستخدم المحرر عبر الإنترنت، فأنشئ رسمًا جديدًا بالنقر على "جديد" في الزاوية العلوية اليسرى.
   • إذا كنت تقوم بالبرمجة محليًا، فقم بإنشاء ملف HTML جديد واربط مكتبة p5.js.

الخطوة الثانية: كتابة الهيكل الأساسي

لنبدأ بإعداد البنية الأساسية لرسم p5.js الخاص بنا. يتضمن ذلك تحديد الدالتين setup() و draw().

function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();  // Disable stroke for the shapes
}

function draw() {
  background(30, 30, 60, 25);  // Dark background with transparency
}

توضيح:

createCanvas(windowWidth, windowHeight);: يؤدي هذا إلى ضبط حجم اللوحة ليتناسب مع نافذة المتصفح الخاص بك.
noStroke();: يؤدي هذا إلى إزالة الحدود من الأشكال التي سنقوم بإنشائها.
الخلفية (30، 30، 60، 25)؛: يؤدي هذا إلى تعيين لون الخلفية إلى اللون الأزرق الداكن مع بعض الشفافية، مما يؤدي إلى إنشاء تأثير لاحق للأشكال.

الخطوة 3: إضافة الأشكال الهندسية الديناميكية

الآن، دعونا نضيف الكود لإنشاء أشكال عشوائية بألوان ومواضع وأحجام مختلفة.

function draw() {
  background(30, 30, 60, 25); // Dark background with transparency

  for (let i = 0; i 



توضيح:

• المتغيرات العشوائية:

  • تحدد x وy موضع كل شكل على اللوحة القماشية.
  • الحجم يتحكم في حجم كل شكل.
  • تقوم colorR وcolorG وcolorB بإنشاء قيم عشوائية للمكونات الحمراء والخضراء والزرقاء للون التعبئة.
  • fill(colorR, colorG, colorB, 150);: يؤدي هذا إلى تعيين لون التعبئة بشفافية طفيفة.

• أنواع الشكل:

  • القطع الناقص (س، ص، الحجم، الحجم)؛: رسم دائرة أو قطع ناقص.
  • rect(x, y, size, size);: رسم مربع أو مستطيل.
  • مثلث(x, y, x size, y, x size / 2, y - size);: رسم مثلث.

الخطوة 4: جعل الرسوم المتحركة مستجيبة

للتأكد من تغيير حجم اللوحة القماشية مع النافذة، أضف الوظيفة التالية:

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

الخطوة 5: تشغيل الرسم الخاص بك

• إذا كنت تستخدم محرر p5.js عبر الإنترنت، فما عليك سوى الضغط على الزر "تشغيل" لمشاهدة الرسوم المتحركة الخاصة بك.
• إذا كنت تقوم بالبرمجة محليًا، فافتح ملف HTML الخاص بك في متصفح الويب لعرض الرسوم المتحركة.