قم بإنشاء تأثير قلم رصاص في SVG

تقوم لعبة Dragons Abound بإنشاء خرائط بتنسيق رسومات متجهة SVG. تحتوي الرسومات المتجهة على العديد من الميزات (على سبيل المثال ، تكبير بدون فقدان) ، وهو مناسب للخرائط. أيضًا ، الرسومات المتجهة جيدة لإنشاء خطوط واضحة ، مثل محيط الحبر:

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

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

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

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

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

إذا نظرت إلى خطوط القلم الرصاص الموضحة أعلاه وأدناه:

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

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

ل لقد بدأت بإعداد خطوط رمادية بسيطة:

رسمت خطوطًا "مكتوبة بخط اليد" بسماكة 4 و 2 و 1 بكسل. لسوء الحظ ، عادة ما تبدو تأثيرات SVG مختلفة لخطوط ذات أطوال مختلفة ، لذلك أردت مقارنة التأثير على أحجام مختلفة.

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

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

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

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

عند التكبير مع زيادة قياسية في اللعبة ، يبدو التأثير كما يلي (بعد تحديد المعلمات لتحسين التأثير):

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

إليك ما يبدو عليه التأثير عند رسم الجبال (تأثير قلم رصاص على اليسار):

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

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

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

لإضافة نسيج إلى الداخل من الحد ، أستخدم مرشح SVG ثم أقوم بدمج الضوضاء مع الحد:

عند التكبير ، يمكنك أن ترى أن داخل كل حد يمتلئ الآن بنسيج الجرافيت الزائف. إليك ما يبدو على مقياس طبيعي:

جيد جدًا ، خاصة على الخطوط السميكة. إليك ما يبدو عند رسم الجبال:

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

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

من الواضح أنه يمكن الجمع بين كلا الحلين. مع الزيادة ، تبدو النتيجة جيدة جدًا:

من خط القلم الرصاص نتوقع كلاً من الحافة الخشنة والملمس الداخلي. على المستوى القياسي ، كل شيء ليس على ما يرام:

بسبب التحف الحادة التي ظهرت على هذا المقياس.

الحيلة الجيدة لتحسين هذا الملمس هي إضافة نسيج الورق إلى الخلفية:

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

فيما يلي مثال على استخدام هذا المرشح على الخريطة (بمادة الورق):

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

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

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

وهذا يخلق التأثير (ثلاثة خطوط مع زيادة):

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

إليك ما يبدو على نطاق قياسي:

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

يمكن دمج هذا الأسلوب مع مرشح النسيج الداخلي الموصوف أعلاه وإضافة نسيج داخل خطوط القلم الرصاص ، بالإضافة إلى نسيج الورق:

إليك ما يبدو بعد التقديم على الجبال:

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

فيما يلي مثال على استخدام هذا الفلتر على الخريطة:

يحافظ على الظلام الأصلي أفضل من المرشح الأول ، وعلى الرغم من أنه في رأيي لا يبدو بالضبط مثل قلم رصاص ، فإن التأثير لطيف للغاية. بزيادة 200٪:

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

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