Pada bagian ketiga dari seri ini, Anda akan belajar bagaimana feComponentTransfer bekerja dan bagaimana Anda dapat membuat poster gambar menggunakan filter SVG primitif yang kuat ini.

Rangkaian artikel yang diusulkan, "Efek Penyaringan SVG," oleh Sara Soueidan, pengembang antarmuka UI / UX lepas dan penulis banyak artikel teknis yang berbasis di Lebanon, berfokus pada karya filter SVG dan terdiri dari artikel-artikel berikut:

Efek Penyaringan SVG

1. Efek penyaringan SVG. Bagian 1. Filter SVG 101
2. Efek penyaringan SVG. Bagian 2. Garis besar teks dengan feMorphology
3. Efek penyaringan SVG. Bagian 3. Efek posterisasi gambar menggunakan feComponentTransfer
4. Efek Filter SVG: Gambar Duotone dengan feComponentTransfer .
5. Efek Filter SVG: Menyesuaikan Tekstur Teks ke Permukaan dengan feDisplacementMap

Artikel ini mengasumsikan bahwa Anda sudah terbiasa dengan dasar-dasar filter SVG atau telah membaca artikel pertama dalam seri ini - "SVG Filter 101". Jika Anda belum melakukannya, silakan menghabiskan beberapa menit untuk mengisi basis pengetahuan Anda.

feComponentTransfer adalah salah satu primitif filter SVG paling kuat. Ini memberi kita kendali atas saluran RGBA individu dari sumber grafik kita, memungkinkan kita untuk membuat efek seperti Photoshop di SVG. Pada artikel ini, yang merupakan bagian pertama dari artikel di feComponentTransfer , kita akan berkenalan dengan primitif ini dan melihat bagaimana ini dapat digunakan untuk memposting gambar.

Posterisasi atau pengerasan gambar melibatkan konversi transisi warna kontinu menjadi beberapa rentang warna yang lebih sedikit, dengan transisi tajam dari satu warna ke warna lainnya. Ini awalnya dilakukan menggunakan proses fotografi untuk membuat poster. - Wikipedia .

Posterisasi terjadi di seluruh gambar, tetapi paling jelas di bidang perubahan warna yang halus.

Fig_1. Contoh foto dalam format JPEG (warna 24-bit atau 16,7 juta warna) sebelum posterisasi, berbeda dengan hasil penyimpanannya dalam format GIF (256 warna). (Sumber: Wikipedia)

Pada artikel ini, kita akan menggunakan feComponentTransfer untuk mengurangi jumlah warna pada gambar, yang, pada gilirannya, akan menciptakan efek poster yang bagus, mirip dengan apa yang kita lihat dalam desain poster komersial atau grafis.

Fig_2. Menerapkan efek posterisasi pada gambar di sebelah kiri dengan feComponentTransfer mengurangi jumlah warna pada gambar ini (kanan).

Tapi pertama-tama, pertimbangkan dasar-dasar teknis ...

Sekilas tentang FeComponentTransfer

Primitive feComponentTransfer memungkinkan Anda untuk mengubah masing-masing komponen R , G , B, dan A yang ada dalam piksel. Dengan kata lain, feComponentTransfer memungkinkan Anda memanipulasi setiap saluran warna secara independen dengan cara yang sama seperti saluran alpha pada input grafis. Ini memungkinkan Anda mengontrol pengaturan kecerahan, penyesuaian kontras, keseimbangan warna atau pengaturan ambang batas secara tepat.

Komponen RGBA dimodifikasi dengan melakukan fungsi transfer komponen ini. Untuk ini, setiap komponen memiliki elemen sendiri yang disebut Elemen Fungsi Transfer . Sepanjang artikel saya akan merujuk ke elemen-elemen ini sebagai " elemen komponen " - yaitu. Elemen yang berhubungan dengan komponen RGBA individu. Elemen-elemen ini bersarang di feComponentTransfer . Jadi feComponentTransfer tidak melakukan apa-apa selain menempatkan elemen komponen RGB individual. Elemen komponen RGBA adalah: feFuncR , feFuncG , feFuncB dan feFuncA .

Atribut type digunakan dalam elemen komponen untuk menentukan tipe fungsi yang ingin Anda gunakan untuk memodifikasi komponen ini. Saat ini ada lima jenis fungsi: identitas , tabel , diskrit , linier , dan gamma . Jenis fungsi ini digunakan untuk memodifikasi komponen sumber grafis R / G / B / A. Kami akan melihat sebagian besar dari mereka dalam seri ini dan melihat bagaimana mereka dapat digunakan.

<feComponentTransfer> <!-- The RED component --> <feFuncR type="identity | table | discrete | linear | gamma"></feFuncR> <!-- The GREEN component --> <feFuncG type="identity | table | discrete | linear | gamma"></feFuncG> <!-- The BLUE component --> <feFuncB type="identity | table | discrete | linear | gamma"></feFuncB> <!-- The ALPHA component --> <feFuncA type="identity | table | discrete | linear | gamma"></feFuncA> </feComponentTransfer>"> 

Untuk setiap jenis fungsi, ada satu atau lebih atribut yang memungkinkan Anda menentukan informasi tambahan tentang fungsi yang digunakan. Misalnya, fungsi linear memiliki atribut slope , yang digunakan untuk menunjukkan kemiringan fungsi linear yang akan digunakan untuk mengubah komponen yang diterapkan.

Anda dapat mengubah satu atau beberapa komponen secara bersamaan . Ini berarti bahwa feComponentTransfer dapat berisi satu, dua, tiga atau semua elemen komponen secara bersamaan. Anda juga dapat mengubah saluran secara independen satu sama lain, menerapkan fungsi yang berbeda untuk setiap elemen komponen.

Kemampuan untuk menggunakan berbagai fungsi pada elemen komponen yang berbeda berarti bahwa Anda memiliki kontrol yang sangat besar atas warna sumber grafis pada level piksel terendah. Misalnya, Anda dapat mengubah saluran merah dan biru dengan mencocokkannya dengan dua warna baru, dan membiarkan hijau tidak berubah atau hanya meningkatkan intensitasnya. Manajemen komponen tingkat rendah ini berarti Anda dapat menerapkan fitur seperti Photoshop ke gambar di browser Anda menggunakan beberapa baris kode. Saya tidak tahu tentang Anda, tetapi perancang (pemula) dalam diri saya menganggap ini sangat menarik!

Contoh: menggunakan komponen alfa untuk mengurangi opacity suatu objek

Contoh kehidupan nyata yang sederhana adalah penggunaan elemen komponen feFuncA untuk mengurangi opacity dari sumber grafik. Pada artikel pertama dalam seri ini, kami melihat bagaimana feColorMatrix dapat digunakan untuk mengurangi opacity suatu elemen dengan mengubah nilai kanal alfa dalam matriks warna. Saya pribadi lebih suka menggunakan feComponentTransfer untuk jenis pekerjaan ini.

Menerapkan filter berikut ke sumber mengurangi opacity dari sumber ini menjadi 0,5:

 <filter id="redOp"> <feComponentTransfer> <feFuncA type="table" tableValues="0 0.5"></feFuncA> </feComponentTransfer> </filter> 

Kami sebutkan di atas bahwa kami memiliki lima fungsi berbeda yang dapat kami gunakan untuk mengontrol komponen RGBA. Jenis fungsi tabel bekerja dengan mencocokkan nilai-nilai komponen, yang merupakan saluran alpha dalam contoh kita, dengan serangkaian nilai yang disediakan oleh atribut tableValues .

Jadi apa artinya ini?

Saluran alpha dari suatu elemen biasanya terletak pada kisaran [0, 1]. Menggunakan fungsi tabel dan memberikan dua nilai: 0 dan 0,5, kami pada dasarnya memberitahu browser untuk memetakan rentang alpha [0, 1] ke rentang baru: [0, 0,5]. Dalam hal ini, opacity dikurangi setengahnya.

Kami akan mempertimbangkan contoh fungsi tabel yang lebih terperinci di artikel selanjutnya. Sekarang saya ingin menjelaskan jenis fungsi diskrit . Jadi, mari kita lihat cara kerjanya dan apa yang bisa kita lakukan dengannya.

Efek posterisasi gambar: mengurangi jumlah warna dalam suatu gambar menggunakan fungsi diskrit

Fungsi diskrit digunakan untuk mengurangi jumlah warna dalam gambar atau komponen jika hanya satu komponen yang digunakan. Mengurangi jumlah warna dalam gambar berarti bahwa alih-alih perubahan warna linier yang halus, Anda akan melihat transisi warna yang lebih tajam yang membuat gambar tampak seperti garis atau kelompok warna, yang mengarah ke efek yang terlihat seperti poster.

Fig_3. Gambar di sebelah kanan adalah salinan dari gambar di sebelah kiri, di mana fungsi diskrit diterapkan untuk mengurangi jumlah warna di dalamnya menjadi 5 per komponen.

Pada gambar di atas, Anda dapat melihat bahwa alih-alih transisi yang mulus, warna berubah secara dramatis, membuat bilah dan kluster warna, dan gambar terlihat lebih "terposting".

Secara pribadi, fungsi diskrit mengingatkan saya pada langkah - langkah () fungsi sinkronisasi di CSS. Dibandingkan dengan fungsi linear, fungsi langkah-demi-langkah bergerak dari satu nilai ke nilai lain, alih-alih secara linear bergerak di antara mereka.

Seperti fungsi tabel , fungsi diskrit mengambil serangkaian nilai seperti yang ditentukan dalam atribut tableValues . Fungsi diskrit berbeda dari tabel dalam cara menggunakan nilai-nilai ini.

Menggunakan tableValues , Anda memberikan browser dengan daftar nilai hingga yang harus dipetakan komponen warna. Dan karena Anda memberikan daftar nilai yang terbatas, Anda mendapatkan jumlah warna yang terbatas, sehingga menciptakan bar warna dan kluster yang akan menjadi transisi warna linier.

Fungsi ini ditentukan oleh langkah-langkah fungsi yang ditentukan dalam atribut tableValues , yang menyediakan daftar nilai n untuk mengidentifikasi fungsi langkah dari n langkah. — Spesifikasi SVG Filter

Mari kita lihat apa artinya ini secara sederhana. Misalkan kita memiliki fragmen kode berikut:

 <svg width="500" height="335" viewBox="0 0 500 335"> <filter id="posterize"> <feComponentTransfer> <feFuncR type="discrete" tableValues="0 .5 1" /> </feComponentTransfer> </filter> <image xlink:href="..."cwidth="100%" height="100%" x="0" y="0" filter="url(#posterize)"></image> </svg> 

Dalam fragmen kode di atas, kami menggunakan fungsi diskrit untuk mengubah saluran merah di sumber gambar. Kami memberikan 3 nilai berbeda yang harus dicocokkan oleh browser dengan nilai merah. Dalam filter SVG, nilai-nilai komponen direpresentasikan sebagai fraksi dalam rentang [0, 1]. Ini berarti bahwa nilai komponen merah dalam piksel apa pun bisa 0 (0% merah / hitam sepenuhnya), 1 (100% merah) atau nilai apa pun (teduh merah) di antara mereka. Hal yang sama berlaku untuk saluran hijau, biru dan alfa.

Untuk sejumlah ( n ) nilai yang Anda masukkan, browser akan membuat n rentang. Lebih khusus lagi, itu akan membagi [0, 1] menjadi n rentang. Kemudian akan menampilkan nilai warna yang berada dalam rentang ini dengan nilai n . Terapkan logika ini ke cuplikan kode kami:

• browser melihat tiga nilai merah yang berbeda di tableValues ;
• itu membagi nilai merah dalam kisaran [0, 1] menjadi tiga bagian yang sama. Jadi tiga rentang kami adalah sebagai berikut:
  
  • [0, 0,33]
  • [0,33, 0,66]
  • [0,66, 1]
• Selanjutnya, browser memeriksa nilai merah dari setiap piksel dalam gambar dan menentukan di mana rentang itu berada;
• maka semua nilai merah dari satu rentang ditampilkan dengan nilai baru yang terkait dengan rentang ini dari yang Anda berikan. Tampilannya sebagai berikut:
  
  • warna dalam kisaran [0, 0,33] ditampilkan sebagai 0;
  • warna dalam kisaran [0,33, 0,66] ditampilkan 0,5;
  • warna dalam kisaran [0,66, 1] ditampilkan sebagai 1.

Anda juga dapat menganggap proses ini sebagai menghidupkan atau mematikan nada warna. Ketika Anda memberikan nilai diskrit untuk suatu warna, Anda memberi tahu browser bahwa hanya nilai-nilai ini yang akan dimasukkan, dan jika piksel tersebut berisi nilai yang tidak sama dengan salah satu dari mereka, maka itu harus dimatikan dan diganti dengan salah satu yang diizinkan. Jadi, misalnya, nilai warna 0,8 dianggap dimatikan dan akan diganti dengan 1 (karena nilai ini terletak di kisaran ketiga).

Berikut ini adalah ilustrasi yang digambar tangan dari layar warna ini, yang saya lukis ketika saya memikirkannya. Mungkin Anda akan berguna.

Fig_4. Memetakan nilai warna untuk rentang warna.

Pada saat browser melewati semua piksel dalam gambar, Anda akan mengganti sejumlah besar nilai merah dengan jumlah kecil yang Anda pilih di tableValues , sehingga mengganti perubahan warna yang halus dengan transisi yang tajam, dan gambar tampak seolah-olah itu dibuat dari cluster atau garis-garis warna.

Berikut ini adalah demo penerapan cuplikan kode di atas ke gambar dengan banyak warna merah. Dengan membatasi jumlah merah dalam piksel suatu gambar dan memusatkan merah pada beberapa di antaranya, gambar tersebut menunjukkan penurunan keseluruhan yang terlihat pada warna merah, terutama di bagian bawah gambar:

Mengubah jumlah nilai diskrit dan / atau mengubah nilai itu sendiri akan mengubah hasil keseluruhan. Anda mungkin tidak ingin memberikan nilai warna 0 untuk menghilangkan beberapa area hitam pada gambar. Misalnya, pada gambar langit di atas, mungkin, tidak boleh ada kelompok atau garis-garis hitam dalam versi posterisasi gambar, karena masih merupakan gambar langit. Untuk melakukan ini, Anda harus memiliki lebih dari dua atau tiga warna, jika tidak gambar akan kehilangan sebagian besar gambarnya.

Untuk membuat efek ini, saya membatasi jumlah warna RGB menjadi lima, dimulai dengan nilai terendah 0,25:

 <filter id="posterize"> <feComponentTransfer> <feFuncR type="discrete" tableValues=".25 .4 .5 .75 1" /> <feFuncG type="discrete" tableValues=".25 .4 .5 .75 1" /> <feFuncB type="discrete" tableValues=".25 .4 .5 .75 1" /> </feComponentTransfer> </filter> 

Anda dapat bermain dengan efek di demo berikut:

Kesimpulan

Saya harap artikel ini membantu sedikit memperjelas feComponentTransfer dan menunjukkan kepada Anda seberapa kuat piksel dan kontrol warna komponen.

Pada artikel berikutnya, kami akan mempertimbangkan dua jenis fungsi transfer feComponentTransfer yang lebih kuat. Kami akan melihat bagaimana Anda dapat mensimulasikan efek gambar Photoshop dua nada, dan bagaimana Anda dapat mengontrol kecerahan, kontras, dan intensitas warna gambar menggunakan feComponentTransfer . Tetap bersama kami.