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

تعلم بايثون وكونها خلاقة. صنع الفن مع الكود.

كيف تبدو الكلمات كالألوان؟ ما شكل السوناتات شكسبير مثل الألوان؟ يعرض هذا المشروع المصغر النص كألوان باستخدام Python ويحفظها في شبكة كصورة.

جميع ألقاب سوناتات شكسبير

ما هذا؟

بدأ الأمر كمتعة من المرح في وقت متأخر من ليلة واحدة على codepen ، مع طرق لجعل الصور مع رمز. بطريقة بسيطة حقًا ، كيف يمكن أن يمثل اللون كلمة؟ من السهل ... مجرد تحويل كلمة إلى رمز اللون الصحيح؟

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

تخطي لرؤية الرمز على جيثب

لماذا ا؟ ولماذا بيثون؟

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

لماذا بيثون؟ حسنًا ، كانت JS جيدة ، لكنها كانت بطيئة وأصبحت أبطأ. سمعت أن الثعبان كان سريعًا بالفعل وخططت لإلقاء مئات الكلمات عليه. (يرجى عدم الحكم على كود الهواة الخاص بي أكثر من اللازم). لا أعرف الكثير من بيثون ، لذلك كان هذا ذريعة عظيمة للتعلم.

تخطيط

بعد إصدار Codepen ، توصلت إلى ما يلي:

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

مثال: الأحرف 'Abcd' ككلمة

يتم إعطاء "Abcd" لكل حرف من الكلمات قيمة إلى المكان الذي توضع فيه في الأبجدية مثل هذا:

# موقف 0 1 2 3 4 5 ...
الأبجدية = ["a" ، "b" ، "c" ، "d" ، "e" ، "f" ، ...]

نظرًا لأن قيم RGB لا تحتاج إلا إلى 3 أرقام ، فإننا نستخدم الحروف المتبقية لزيادة قيم الأرقام التي تمثل الأحرف الثلاثة الأولى. وبالتالي…

  • الكلمة "Abcd"
  • القيم هي [0،1،2]
  • القيم المتبقية هي [3]
  • أضف [3] إلى القيمة 1.
بعض الأمثلة كلمة صغيرة

ماذا يحدث مع الكلمات الكبيرة؟

هذا هو المكان الذي بدأت فيه تصبح صعبة. أريد أن تؤثر كل الحروف الموجودة في كلمة ما على قيم ألوان 3 RGB ، مما يجعلها تبدو مراوغة وغير عادلة. لذلك باستخدام دورة zip ، يمكننا تكرار وإضافة جميع القيم بعد الحرف الثالث وفقًا لذلك ، على سبيل المثال:

  • الكلمة هي "Abcdefghij"
  • القيم هي [0،1،2]
  • القيم المتبقية هي [3،4،5،6،7،8،9]
  • لكل من القيم المتبقية ، انتقل من خلال القيم الأولية وإضافتها إلى قيم 3 RGB واحدة في وقت واحد ،
  • تتم إضافة القيمة المتبقية 3 إلى val [0]
  • تتم إضافة القيمة المتبقية 4 إلى val [1]
  • تتم إضافة القيمة المتبقية 5 إلى val [2]
  • تتم إضافة القيمة المتبقية 6 إلى val [0]
  • تتم إضافة القيمة المتبقية 7 إلى val [1]
  • إلخ

أنقذت وظيفة دورة الرمز البريدي هذه الكثير من المتاعب:

بالنسبة إلى i و j في الرمز البريدي (دورة (نطاق (لين (ألوان))) والإضافات):
    الألوان [i] + = j
    الألوان [i] = int (الألوان [i])

هناك أيضًا بعض البتات اللطيفة الأخرى في الكود لضمان عدم تجاوز القيم [255،255،255] ، لقد كان في الحقيقة مجرد شيء يحتاج إلى بعض التفكير. ستلاحظ أنه في القائمة أعلاه ، قد تكون القيم الأولية صغيرة ، مثل [0،1،2]. لذلك يتم ضربها بـ (255/26) أو (حد القيمة / الحروف بالحروف الأبجدية). هذا يعطي قاعدة أفضل لإضافة قيم إلى. [0،9.8،19.6].

عندما نبدأ بإضافة قيم بقايا ، يتم ضربها ، لضمان عدم تجاوزنا لأكثر من 255 ، نقسم على 26 ، على قيم أعلى من 3 ولكن أقل من 6. ثم للكلمات التي تحتوي على أكثر من 6 أحرف ، تصبح صغيرة جدًا القيم بتقسيم أكثر. (س * ن / 26) (1/26). هذه هي الوظيفة:

(يسار) إي كامينغز - أحمل قلبك معي (يمين) ويليام كارلوس ويليامز - عربة ريد بُرو

ماذا عن مدخلات النص الكبيرة؟

لقد جعلت حجم اللوحة القماشية متغيرًا ، لذا إذا تم استخدام نصوص كبيرة ، يمكنك زيادة حجم اللوحة القماشية ... ستعمل حقًا على الوصول إلى أي شيء. هذا هو الكتاب المقدس للملك جيمس:

الملك جيمس الكتاب المقدس - في الساحات

الرسم والتخطيط وبعض تدوين الملاحظات.

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

العمل على تخطيط المربعات كلمة

فلماذا الكثير من الملاحظات والعمل بها؟ حسنًا في الكود في هذه المرحلة ، لدينا قائمة (قد تكون ضخمة) بقيم اللون ، على سبيل المثال:

[[45،65،221]، [36،187،35]، [66،84،224] ...]

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

إليك كيفية إجراء ذلك باستخدام 5 كلمات كمثال:

  • نظرًا لأنني أعرف كم عدد المربعات التي لدي (5) أعمل على تحديد "الشبكة" التي سأحتاجها. على سبيل المثال ، ستتطلب 5 كلمات شبكة 3 × 3.
  • الآن أعرف أن كل صف وعمود سيتكونان من ثلاثة مربعات ، ولدي حجم قماش يبلغ 1000. سيكون 1000/3 هو عرض وارتفاع كل مربع داخلي. وأيضًا مقدار المسافة التي أحتاج إليها لتغيير نقاط الرسم أفقياً وعموديًا. لطيف!
  • للعثور على "الشبكة" التي أحتاج إليها ، قمت بإنشاء وظيفة (شبكة (n ، m) تأخذ قائمة الكلمات وقائمة بالأرقام المربعة وتعمل بها:

أخيرًا ، كل ما تبقى هو التكرار الأكثر إرباكًا الذي كتبته على الإطلاق:

الكل في الكل ، بدأ هذا كقليل من المرح ، لكنني انتهيت إلى تعلُّم الكثير عن بيثون والرسم باستخدام الكود (شيء أحب القيام به أكثر من ذلك). ميزة واحدة لطيفة حقا هو أن قماش يمكن أن تكون ضخمة والساحات الخاصة بك بضعة ملليمترات. وشكراً لشريكتي آشلي بورديت لمساعدتي في تخطيط الرياضيات :)

تحقق من الكود على جيثب.

أنظر أيضا

لماذا 450 مليون دولار لهذه اللوحة ليست مجنونةالبيضة الذهبية: البقرة الفقيرةكيف يجعل الفن كل شيء أفضل (لذا يرجى تقديم المزيد من الفن)رسام الكاريكاتير غرانت سنايدر في الفن والحياة ومعرفة الفرقهذه هي الطريقة التي قمت بتحسين حياتيلماذا لن يكون YouTube of AR هو YouTube؟