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

ما هو الفن التوليدي؟

يعتمد الفن التوليدي على إنشاء أنظمة يمكنها توليد عدد لا حصر له من الاختلافات في العمل الفني. ويمكن التحكم في هذه الأنظمة من خلال قواعد محددة، أو خوارزميات رياضية، أو حتى العشوائية. مع كل تنفيذ للنظام، يمكن إنتاج عمل فني جديد وفريد ​​ومثير للاهتمام بصريًا.

يرتبط هذا النوع من الفن ارتباطًا وثيقًا بالبرمجة، حيث تحدد القواعد والتعليمات البرمجية كيفية إنشاء النتائج المرئية. يستخدم الفنانون المبدعون الخوارزميات لتحديد الأنماط والألوان والأشكال والحركة، مما يجعل كل عمل بمثابة عملية اكتشاف.

لماذا جافا سكريبت؟

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

p5.js هي مكتبة جافا سكريبت مصممة خصيصًا لإنشاء رسومات تفاعلية ومرئية. بساطتها تجعلها أداة مثالية لبدء استكشاف الفن التوليدي.

الشروع في العمل مع p5.js

تهيئة البيئة

للبدء في إنشاء فن إبداعي باستخدام JavaScript، كل ما تحتاجه هو متصفح ومحرر أكواد. يمكنك استخدام محرر الويب p5.js أو تنزيل المكتبة وإضافتها إلى مشروعك.

الهيكل العظمي الأساسي للرسم p5.js

يتم تنظيم كل رسم p5.js إلى وظيفتين رئيسيتين:

• setup(): تعمل هذه الوظيفة مرة واحدة في البداية. إنه المكان الذي نقوم فيه بإعداد اللوحة القماشية والألوان وأي معلمات أولية.
• draw(): تعمل هذه الوظيفة بشكل متكرر في حلقة. هنا، نضع التعليمات لرسم وإنشاء العناصر المرئية.

إليك مثال أساسي:

function setup() {
  createCanvas(800, 800); // Create an 800x800 pixel canvas
  background(255); // White background
}

function draw() {
  noLoop(); // Prevent the draw function from looping
  for (let i = 0; i 



 في هذا الرسم الأساسي، نقوم بإنشاء لوحة قماشية فارغة ورسم 100 دائرة بألوان عشوائية، يتم وضع كل منها بشكل عشوائي. يكمن جمال الفن التوليدي في تنوع النتائج. مع كل تشغيل للشفرة، ستظهر الدوائر في مواقع مختلفة وبألوان مختلفة.


  
  
  خلق أنماط مع الرياضيات


 غالبًا ما يجمع الفن التوليدي بين العشوائية والهياكل الرياضية الدقيقة. دعونا نرى مثالاً حيث نقوم بإنشاء نمط هندسي يعتمد على الأشكال المنتظمة والحركات الدورية:



function setup() {
  createCanvas(800, 800);
  background(255);
  noFill();
  stroke(0, 50);
}

function draw() {
  translate(width / 2, height / 2); // Move the origin to the center
  let radius = 300;
  for (let i = 0; i 



 في هذا المثال، نستخدم الدوال المثلثية مثل cos() وsin() لتوزيع 100 دائرة حول مركز اللوحة القماشية بنمط دائري. جمال الرياضيات في الفن التوليدي هو أنه يمكنك استخدام معادلات بسيطة لإنشاء أنماط معقدة ومثيرة للدهشة.


  
  
  إضافة التفاعل


 إحدى المزايا الرائعة للعمل مع JavaScript وp5.js هي مدى سهولة إضافة التفاعل إلى إبداعاتك. فيما يلي مثال حيث تتغير ألوان النموذج وفقًا لموضع الماوس:



function setup() {
  createCanvas(800, 800);
}

function draw() {
  background(255);
  let numLines = 50;
  let spacing = width / numLines;

  for (let i = 0; i 



في هذا الرسم، يتغير لون الخطوط بناءً على موضع الماوس. يعد التفاعل عنصرًا أساسيًا في الفن التوليدي، لأنه يسمح للمشاهد بالتأثير بشكل مباشر على العمل الفني.


  
  
  خاتمة


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

 يعد استكشاف الفن التوليدي طريقة رائعة للمزج بين البرمجة والإبداع. قم بتجربة الأشكال والألوان والأنماط المختلفة لترى إلى أي مدى يمكنك دفع أعمالك الفنية الإبداعية!