نشر على ٢٥-٠٩-٢٠١٩

مقدمة في الفن التوليدي: ما هو عليه وكيف تصنعه

مشتق ماندلبروت كسورية من معادلة بسيطة خادعة

يمكن أن يكون الفن التوليدي موضوعًا مخيفًا - يبدو أنه يوجد الكثير من الرياضيات ، والفن صعب في حد ذاته!

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

أولا ، ما هو رمز الفن؟

كود الفن هو أي فن مبني باستخدام كود. هناك أمثلة لا حصر لها على CodePen - على سبيل المثال فن CSS.

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

غالبًا ما يستلهم الفن التوليدي الفن الحديث ، خاصةً فن البوب ​​الذي يستخدم أنماطًا هندسية منظمة بشكل مكثف.

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

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

هناك أيضًا أنظمة مستقلة أكثر تنظيماً. ومن الأمثلة على ذلك ماندلبروت كسورية ، المستمدة من معادلة بسيطة خادعة.

يمكننا أيضا دمج كلا النهجين ، ترتيب المزج والفوضى!

يصبح العمل الفني تعاونًا بين الكمبيوتر والفنان. يتم التحكم في بعض جوانب العمل الفني بواسطة المبرمج ، ولكن ليس جميعها. يتحكم الفنان في كل من العشوائية والنظام في الفن.

بطريقة ما ، مع نظام الحكم الذاتي ، يتخلى الفنان عن السيطرة على فنه ، ويقوم الكمبيوتر بذلك من أجلهم. يظهر منظور أكثر دقة عند النظر في عملية إبداعية جديدة.

يشترك فنان المبرمج في حلقة تغذية مرتدة حيث يغيرون باستمرار نظامًا لإنتاج نتائج أكثر استحسانًا وغالبًا ما تكون مفاجئة.

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

أمثلة على الفن التوليفي

زهور كيت كومبتون

الخلوية التلقائية وحافة الفوضى

الرسوم المتحركة الفن توليفي في متعدد الألوان من قبل فيل ناش

الانطباعية Blobs بواسطة Murasaki أوما

شجرة تم إنشاؤها بواسطة مريم نادلر

ما يذهب إلى قطعة من الفن التوليدي؟

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

كيف يمكنك الاقتراب من قطعة فنية مولدة؟

هناك استراتيجيتان رئيسيتان لإنشاء الفن التوليدي ، على الرغم من أن معظمها سوف يقع بين الاستراتيجيتين.

الأول هو عدم وجود نتائج في الاعتبار ومعرفة ما يولد الكمبيوتر أثناء اللعب.

والثاني هو أن لديك فكرة نهائية للغاية عما تريد أن يبدو عليه الفن ، والعشوائية لا تؤدي إلا إلى تغيير النتيجة النهائية قليلاً.

من أين يجب أن تبدأ؟

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

مقدمة سريعة ل P5

أولا ، تحميل في p5 CDN. بعد ذلك ، في ملف JavaScript الخاص بك ، ستقوم بإضافة وظيفتين سيتم استخدامهما في نص p5 إلى حد كبير: الإعداد والرسم. هذه الأسماء ضرورية لـ p5 للاتصال بها.

يسمى الإعداد عند بدء تشغيل البرنامج. من المحتمل أن تقوم بإنشاء لوحة قماشية للرسم عليها باستخدام دالة createCanvas ، ويمكنك تعيين بعض الإعدادات الافتراضية هناك. يطلق عليه مرة واحدة فقط!

يتم استدعاء الرسم بعد الإعداد ، ويتم تنفيذه باستمرار حتى تقوم بالاتصال بـ noLoop ، مما يمنعه من التشغيل مرة أخرى. يمكنك التحكم في عدد المرات التي يتم فيها تشغيل الرسم في كل ثانية باستخدام وظيفة frameRate.

مع الفن التوليدي ، عادةً ما أضع noLoop في وظيفة الإعداد ، مما يجعل السحب يتم تشغيله مرة واحدة فقط بدلاً من الاستمرار.

إليك قالب بداية p5 على CodePen.

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

خطوط p5

يمكنك إنشاء سطر في p5.js مثل هذا:

خط (startX ، startY ، endX ، endY)

بعد ذلك ، يمكنك إنشاء مجموعة من الخطوط بشكل عشوائي وإنشاء قطعة بسيطة من الفن التوليفي مثل هذا:

حتى النصوص البسيطة حقا يمكن أن تولد قطعًا رائعة من الفن!

p5 الأشكال

يمكنك أيضًا إنشاء أشكال ذات دوائر تشبه p5 ومثلثات وساحات.

إليك مثال على إنشاء بعض الأشكال باستخدام p5:

// دائرة
القطع الناقص (xCoordinate ، yCoordinate ، العرض ، الارتفاع)
// ميدان
rect (xCoordinate ، yCoordinate ، العرض ، الارتفاع)
// مثلث
مثلث (xCoordinate1 ، yCoordinate1 ، x2 ، y2 ، x3 ، y3)

ثم ، يمكننا إنشاء بعض الأشكال لبناء شيء أكثر متعة!

حركة p5

يمكننا إضافة حركة إلى الرسومات الخاصة بنا عن طريق إزالة استدعاء دالة noLoop في وظيفة الإعداد - تحقق من ذلك!

اللون

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

يمكنك ضبط لون التعبئة مع وظيفة اللون. يستغرق الأمر مجموعة من التنسيقات المختلفة ، مثل الألوان المسماة و RGBAs والرموز السداسية.

يمكنك أيضًا تغيير لون المخطط التفصيلي باستخدام الحد. يمكنك أيضًا إزالة هذا المخطط التفصيلي باستخدام noStroke أو جعله مختلفًا بعرض strokeWeight.

ضع كل شيء معا

بمجرد أن يتم وضع كل هذه القطع في مكانها الصحيح ، يمكننا الجمع بين تقنيات بناء بعض الأشياء الرائعة حقًا.

استراتيجية أخرى: التغيير والتبديل التعليمية

يمكنك أيضًا إنشاء أعمال فنية رائعة حقًا عن طريق أخذ أعمال شخص آخر والبناء عليها. على سبيل المثال ، إليك نتيجة برنامج تعليمي لـ Dan Shiffman:

فيما يلي قرصان لإنشاء تأثيرات مختلفة:

إليك مجموعة Codepen مع المزيد!

يمكنك متابعة البرامج التعليمية ، ومشاريع CodePens ، أو Glitch وإنشاء شيء جديد وفريد ​​من نوعه. فقط تأكد من إعطاء الفنان الأصلي بعض الائتمان أيضا.

Cheatsheet

إليك ورقة الغش التي تحتوي على جميع وظائف P5 التي استخدمناها في هذا البرنامج التعليمي.

اقرأ أكثر

  • فن التوليد
  • قطار الترميز
  • تحدث تيم هولمان

أبق على اتصال

تمت مشاركة هذا المنشور مع جيمس ريتشارد. إذا قمت بإنشاء الفن الخاص بك ، فتأكد من تويته إلينا! (علي وجيمس).

نشرت أصلا في dev.to.

أنظر أيضا

الاستجابة للمطالباتالمشكلة العلمية التي يجب تجربتهاالسبب الحقيقي الذي يجب ألا تهتم بما يفكر فيه الناسعملك هو الشيء الوحيد الذي يهم3 قواعد للكتابة في القرن الحادي والعشرينالغفوة العرضية