استكمالًا لمغامرتنا السابقة في P5.js لرسومات SVG المتجهة، نغوص الآن في عالم ترميز الفن الرقمي بحماس وهدف متجددين. مدفوعين بالعلاقة التبادلية بين التكنولوجيا والتعبير الفني، تستمد استكشافاتنا قوتها من الطلب على أدوات مبتكرة لإنشاء أعمال فنية بصيغة SVG مخصصة لأجهزة iDraw Pen Plotters. كمدافعين عن الإبداع البرمجي، نهدف إلى تزويد الفنانين الرقميين بالمهارات والمعرفة اللازمة لاستغلال الإمكانات الكاملة لـ 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 على محيط الدائرة الصغيرة الداخلية، وتمثل X و Y مراكز الدوائر في المربع الأوسط، يمكننا ربطها باستخدام أمر line: 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 Pen Plotters - لتجسيد أعمالهم الفنية بدقة وأناقة، جاعلين الجسر بين العالمين الرقمي والمادي في سبيل التميز الفني.
مقالات ذات صلة: