رسم وجه مبتسم باستخدام p5.js

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

ما هو p5.js؟

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

البنية الأساسية للرسم في p5.js

الرسم في p5.js له وظيفتان رئيسيتان:

1. setup(): يتم تنفيذه مرة واحدة في البداية. هذا هو المكان الذي نقوم فيه بتهيئة اللوحة القماشية، وتعيين الألوان، وإعداد أي عناصر ضرورية.
2. draw(): يتم تنفيذه في حلقة، إطارًا تلو الآخر. هنا نضع التعليمات التي نريد تكرارها بشكل مستمر (مثل الرسوم المتحركة). في حالتنا، لا نطلب رسمًا متحركًا، لذا سنتركه فارغًا.

المشروع: وجه مبتسم

الهدف هو رسم وجه مبتسم باستخدام أشكال بسيطة: دائرة كبيرة للوجه، ودائرتان صغيرتان للعيون، وقوس للفم.

الخطوة 1: إنشاء اللوحة القماشية

أول شيء نقوم به هو تحديد حجم اللوحة القماشية. في هذه الحالة سنستخدم حجم 400×400 بكسل ونضع خلفية سوداء.

function setup() {
  createCanvas(400, 400);
  background(0); // Fondo negro
}

الخطوة 2: ارسم الوجه

الوجه ببساطة دائرة كبيرة. لرسم دائرة في p5.js، نستخدم الدالة ellipse()، والتي تتطلب إحداثيات مركزها وعرضها وارتفاعها. في حالتنا، سنرسم الدائرة في وسط اللوحة بقطر 200 بكسل.

stroke(255); // Color de línea blanco
strokeWeight(5); // Grosor de la línea
noFill(); // Sin relleno para el círculo
ellipse(200, 200, 200, 200); // Dibuja la cara

الخطوة 3: ارسم العيون

العينان عبارة عن دائرتين صغيرتين باللون الأبيض. يمكننا استخدام نفس الدالة ()Ellipse، لكن هذه المرة نعطيها اللون الأبيض ونضعها قليلاً للأعلى وعلى جانبي منتصف الوجه.

fill(255); // Relleno blanco para los ojos
noStroke(); // Sin borde para los ojos
ellipse(160, 170, 20, 20); // Ojo izquierdo
ellipse(240, 170, 20, 20); // Ojo derecho

الخطوة 4: ارسم الابتسامة

أخيرًا، بالنسبة للابتسامة نستخدم الدالة arc(). تسمح لك هذه الوظيفة برسم قوس بيضاوي الشكل، والذي يبدو في هذه الحالة كابتسامة. نقوم بضبط الإحداثيات بحيث يتم توسيط المنحنى ويبدو مثل الفم.

noFill(); // Sin relleno para la boca
stroke(255); // Líneas blancas de nuevo
arc(200, 220, 100, 80, 0, PI); // Dibuja la sonrisa

الكود الكامل:

function setup() {
  createCanvas(400, 400);
  background(0); // Fondo negro

  stroke(255); // Color de línea blanco
  strokeWeight(5); // Grosor de la línea
  noFill(); // Sin relleno para el círculo

  // Dibuja la cara (un círculo grande)
  ellipse(200, 200, 200, 200);

  // Ojos (dos círculos pequeños)
  fill(255); // Relleno blanco para los ojos
  noStroke(); // Sin borde para los ojos
  ellipse(160, 170, 20, 20);
  ellipse(240, 170, 20, 20);

  // Boca sonriente
  noFill(); // Sin relleno para la boca
  stroke(255); // Líneas blancas de nuevo
  arc(200, 220, 100, 80, 0, PI); // Dibuja la sonrisa
}

function draw() {
  // No se requiere animación, por lo que dejamos el draw vacío
}

خاتمة

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

تابع وأنشئ نسختك الخاصة من هذا الوجه المبتسم واستكشف ما يقدمه p5.js!