استنادًا إلى رحلتنا السابقة في استخدام P5.js لإنشاء الرسومات المتجهة بصيغة SVG، نخوض الآن مجددًا وبحماس وهدف متجددين في عالم برمجة الفن الرقمي. وانطلاقًا من العلاقة التكاملية بين التكنولوجيا والتعبير الفني، يستند استكشافنا إلى الحاجة إلى أدوات مبتكرة لإنشاء أعمال فنية بصيغة SVG مصممة لأجهزة رسم القلم iDraw. وبصفتنا مناصرين للإبداع البرمجي، نهدف إلى تزويد الفنانين الرقميين بالمهارات والمعرفة اللازمة للاستفادة من الإمكانات الكاملة لـ P5.js، وتحويل الخيال إلى روائع ملموسة على لوحة رقمية. هل تحتاج إلى بعض ملفات SVG مع أكواد برمجية؟ نزّلها من هنا>>>
الخطوة 1: إنشاء اللوحة
لبدء رحلتنا في برمجة الفن الرقمي باستخدام P5.js، نحدد أولًا اللوحة التي ستنبض عليها أعمالنا الفنية بالحياة. وباستخدام الدالة createCanvas() في P5.js، نحدد لوحة بحجم 400×400 بخلفية سوداء ومن دون تعبئة، لنمهد الطريق لاستكشافنا الإبداعي.
function setup() {
createCanvas(400,400);
noFill(0);
stroke(255);
}
الخطوة 2: رسم دوائر مرتبة في مربع بالمنتصف
نلاحظ بدقة الدائرة الداخلية المكوّنة من دوائر صغيرة ونجد نمطًا معينًا: فهي تتكون من 64 دائرة موزعة بالتساوي على محيط قطره 75. في هذه المرحلة، يمكننا استخدام حلقة for لتحديد إحداثيات (X, Y) لمراكز الدوائر الصغيرة. وتحديدًا، في كل تكرار للحلقة، ستزداد قيمة 'i' بمقدار π/32 إلى أن تتجاوز قيمة TAU، التي تمثل دائرة كاملة. ويمكن كتابة جسم الحلقة كما يلي.
let r=75;
let x=sin(i)*r+200;
let y=cos(i)*r+200;
ellipse(x,y,6,6);
تمثل قيمتا X وY إحداثيات قطبية. لماذا نضيف 200؟ لأن أصل نظام الإحداثيات في P5.js يقع في الزاوية العلوية اليسرى، بينما تزداد قيم Y الموجبة نحو الأسفل.
لذلك، لوضعها في المنتصف، نحتاج إلى إضافة نصف عرض اللوحة وارتفاعها، أي 200. نستخدم الأمر ellipse(x,y,6,6) لرسم دائرة قطرها 6 بكسلات. بعد ذلك، لنلقِ نظرة على الدوائر الموجودة في القسم الأوسط. تقع المراكز على أضلاع مربع طول ضلعه 280، ومركزه هو مركز اللوحة. يمكننا تقييد موضع مراكز الدوائر باستخدام عبارة IF كما يلي:
if(X>320) X=320;
if(X<80) X=80;
if(Y>320) Y=320;
if(Y<80) Y=80;
if(X>320) X=320;
إذا كان إحداثي X أكبر من 320، فاضبط إحداثي X على 320. ويظل إحداثي Y من دون قيود. وهذا يعني أن دوائر الحلقة الخارجية ستحتفظ بإحداثيات Y الخاصة بها، بينما ستُضبط جميع إحداثيات X على 320. وينتج عن ذلك انتقال الجزء الأحمر إلى الجزء الأخضر، كما هو موضح في الرسم التوضيحي.
وبالمثل، if(X<80) X=80;
if(Y>320) Y=320;
if(Y<80) Y=80;
الخطوة3 ، توصيل الأشكال من الخطوتين 1 و2 بالخطوط
بعد أن أصبحت قيمتا X وY على محيط الدائرة الصغيرة الداخلية، وأصبحتا تمثلان مركزي الدوائر في المربع الأوسط، يمكننا توصيلهما باستخدام أمر الخط: line(x,y,X,Y);
الخطوة 4، رسم دوائر صغيرة في الحلقة الخارجية وتوصيلها مباشرةً بدوائر الخطوة 2
بما أننا نقلنا الدوائر الخارجية إلى المنتصف، فلنُعد إضافة الدوائر الخارجية. في هذه المرحلة، تُعطى قيمتا x وy بواسطة r * sin(i) وr = cos(i). في البداية، كانت قيمة r تساوي 78، لكنها الآن تساوي 170. ما علينا سوى إسناد القيم إلى x وy:x=sin(i)*r+200; y=cos(i)*r+200; والآن تمثل x وy مركزي الدوائر الصغيرة الخارجية. ويؤدي رسم الدوائر والخطوط إلى إكمال هذا العمل الفني الرقمي البسيط. ويكون الكود كما يلي: circle(x,y,6); line(x,y,X,Y);
يمكنك ضبط قيمة تقسيم PI في حلقة for لجعل العمل الفني الرقمي أكثر كثافة أو أكثر تباعدًا.
الكود الكامل كما يلي:
function setup() {
createCanvas(400,400);
noFill(0);
stroke(255);
}
function draw() {
background(0);
for(i=0;i<TAU;i+=PI/36){
let r=75;
let x=sin(i)*r+200;
let y=cos(i)*r+200;
ellipse(x,y,6,6);
r=78;
x=sin(i)*r+200;
y=cos(i)*r+200;
r=170;
let X=sin(i)*r+200;
let Y=cos(i)*r+200;
if(X>320) X=320;
if(X<80) X=80;
if(Y>320) Y=320;
if(Y<80) Y=80;
circle(X,Y,6);
line(x,y,X,Y);
x=sin(i)*r+200;
y=cos(i)*r+200;
circle(x,y,6);
line(x,y,X,Y);
}
}
الملخص
في الختام، كشف استكشافنا لبرمجة الفن الرقمي باستخدام P5.js عن عالم من الإبداع اللامحدود والإمكانات الواسعة. وبينما نتأمل التفاعل الدقيق بين الكود والخيال، الذي أعاد أعمالنا الفنية إلى الحياة، نتذكر القوة التحويلية للتكنولوجيا عندما تكون في أيدي الفنانين. واستلهامًا من هذه الرحلة، ندعو المبدعين الآخرين إلى خوض مغامرتهم البرمجية الخاصة، والاستفادة من الأدوات والتقنيات التي اكتشفناها لصياغة روائعهم الفريدة. أما الذين يسعون إلى نقل إبداعاتهم الرقمية إلى العالم المادي، فنوصيهم بصدق باستخدام منتجنا - أجهزة رسم القلم iDraw - لتنفيذ أعمالهم الفنية بدقة وأناقة، وردم الفجوة بين العالمين الرقمي والمادي في سبيل التميز الفني.
مقالات أخرى ذات صلة: