استنادًا إلى خوضنا السابق في P5.js لإنشاء الرسومات المتجهة بصيغة SVG، ننتقل الآن بحماس وهدف متجددين إلى عالم برمجة الفن الرقمي. وانطلاقًا من العلاقة التكاملية بين التكنولوجيا والتعبير الفني، تدفعنا حاجتنا إلى أدوات مبتكرة لإنشاء أعمال فنية بصيغة SVG مصممة خصيصًا لراسمات الأقلام iDraw. وبصفتنا من الداعمين للإبداع البرمجي، نهدف إلى تزويد الفنانين الرقميين بالمهارات والمعرفة اللازمة للاستفادة من الإمكانات الكاملة لـ P5.js، وتحويل الخيال إلى روائع ملموسة على لوحة رقمية. هل تحتاج إلى بعض ملفات SVG مع أكواد برمجية؟ نزّلها من هنا>>>
الخطوة 1: إنشاء اللوحة
لبدء رحلتنا في برمجة الفن الرقمي باستخدام P5.js، نحدد أولًا اللوحة التي ستظهر عليها أعمالنا الفنية. وباستخدام دالة createCanvas() في P5.js، نعرّف لوحة بمقاس 400x400 بخلفية سوداء ومن دون تعبئة، مما يمهد الطريق لاستكشافنا الإبداعي.
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 - لرسم أعمالهم الفنية بدقة وأناقة، وسد الفجوة بين العالمين الرقمي والمادي في سبيل التميز الفني.
مقالات أخرى ذات صلة: