Annyeong!^^: Januari 2017

Bab 5

PENUTUP

5.1 Kesimpulan

Warna adalah spektrum tertentu yang terdapat di dalam suatu cahaya sempurna (warna putih) yang merupakan pantulan tertentu dari cahaya yang dipengaruhi oleh pigmen yang terdapat di permukaan benda. Ilmu tentang warna disebut chromatics. Teori warna sudah dikembangkan oleh Alberti (1435) dan diikuti oleh Leonardo da Vinci (1490). Teori warna mulai mendapat perhatian serius setelah dikembangkan oleh Sir Isac Newton (1704). Pada awalnya teori warna dikembangkan dengan warna dasar merah, kuning dan biru (Red, Yellow, Blue atau RYB). Pencampuran warna dari warna dasar tersebut banyak dipakai oleh para pelukis, percetakan dan lain-lain. Dalam seni rupa, warna merupakan unsur yang sangat penting karena warna bisa menjadi alat untuk berekpresi.

Ahli grafis Jerman Le Blond (1730) menyederhanakan temuan Newton menjadi 3 warna pokok, yaitu merah, kuning dan biru yang dinamakan warna primer. Percampuran dua warna pokok disebut warna sekunder, yaitu merah dan biru menjadi ungu, merah dan kuning menjadi oranye, hijau dan ungu menjadi hijau ungu. Percampuran warna sekunder disebut dengan warna tersier, yaitu orange dan ungu menjadi orange ungu, orange dan hijau menjadi orange hijau, hijau dan ungu menjadi hijau ungu.

Dalam teori warna, skema warna adalah pilihan warna yang digunakan dalam mengkombinasikan warna untuk berbagai media. Sumber penggunaan skema warna ini adalah lingkaran warna. Jenis skema yang digunakan :

• Warna Monokromatik

• Warna Komplementer

• Warna Split-Pelengkap

• Warna Akromatik

• Warna Analog

• Warna Beraksen Analog

• Warna Triadic

• Warna Tetradic

• Warna Persegi Panjang

• Warna Persegi

• Warna Polikromatik

Pemetaan warna adalah fungsi yang memetakan (transformasi) warna satu (sumber) gambar untuk warna (target) gambar lain. Sebuah pemetaan warna dapat disebut sebagai algoritma yang menghasilkan fungsi pemetaan atau algoritma yang mengubah warna gambar. Pemetaan warna juga kadang-kadang disebut Transfer warna atau, ketika gambar grayscale yang terlibat, fungsi transfer kecerahan (MTF). Mode warna merupakan salah satu metode yang digunakan suatu program untuk menampilkan suatu kode warna secara numerik. Dalam visualisali diagram ini menggunakan beberapa software, diantaranya:

• Cubehelix

Cubehelix adalah skema warna yang digunakan untuk menampilkan gambar Intensitas Astronomi. Skema ini digunakan untuk meningkat kontras cahaya saat greyscale dicetak dalam dua buah warna yaitu hitam dan putih. Cubehelix disarankan oleh Dave Green untuk menskema warna untuk mengaprosiasikan tampilan intensitas gambar. Skema ini dimaksudkan untuk meningkatkan kecerahan saat gambar ditampilkan di greyscale. Hal ini memungkinkan memberikan peningkatan visualisasi untuk penderita buta warna ketika dicetak hitam putih. Cubehelix tidak memiliki peningkatan yang mendasari dalam persepsi kecerahan warna yang digunakan (misalnya terbakar menjadi merah untuk nilai data yang tinggi, tetapi menggunakan kuning / hijau untuk nilai data menengah, yang dirasakan sebagai lebih terang dari warna merah).

• Veusz

Veusz merupakan salah satu jenis scientific plotting, aplikasi ini didirikan oleh QT company yang merupakan salah satu perusahaan perangkat lunak. Aplikasi ini diperuntukkan untuk membuat diagram.

Visualisasi untuk pewarnaan dalam diagram menggunakan diagram sebagai berikut:

• Interval

Interval yang dimaksud disini adalah jarak antara warna yang satu ke warna yang lain dalam proses perubahan warna.

• Line Chart

• Pie Chart

Pie Chart adalah chart yang berbentuk bundar menyerupai bentuk kue pie. Chart jenis ini sangat bagus digunakan untuk menampilkan grafik data presentasi dari sebuah kegiatan perubahan warna dan akan menemukan presentase dari hasil perubahan warna tersebut.

• Organization Chart

Organization chart adalah diagram yang memperlihatkan adanya saling keterkaitan berbagai posisi pada suatu organisasi.

DAFTAR PUSTAKA

1. Josescalia, 2014. Cara mudah membuat chart dalam web
http://blog.josescalia.net/2014/03/cara-mudah-membuat-chart-dalam-web.html Tanggal Akses : 10 Januari 2017

2. https://www.rgraph.net/download

Tanggal Akses : 10 Januari 2017

3. Matteo, 2013. PERCEPTUAL RAINBOW PALETTE – THE METHOD
https://mycarta.wordpress.com/2013/02/21/perceptual-rainbow-palette-the-method/

Tanggal Akses : 13 Januari 2017

4. https://id.wikipedia.org/wiki/MATLAB

Tanggal Akses : 13 Januari 2017

5. Michael Waskom, 2012. seaborn.cubehelix_palette
http://stanford.edu/~mwaskom/software/seaborn/generated/seaborn.cubehelix_palette.html

Tanggal Akses : 13 Januari 2017

6. James Davenport, 2014. Cubehelix Colormap for Python
http://www.ifweassume.com/2014/04/cubehelix-colormap-for-python.html
Tanggal Akses: 13 Januari 2017

7. Putri Prima, 2016. CUBEHELIX DIAGRAM
https://putriprima13.wordpress.com/2016/01/26/cubehelix-diagram/
Tanggal Akses : 13 Januari 2017

8. Amelia Ramadhan, 2015. Laporan praktikum colour reader
http://documents.mx/documents/laporan-praktikum-color-readerdocx.html
Tanggal Akses : 16 Januari 2017

9. http://blog.hubspot.com/marketing/color-theory-design#sm.0016z8mr617p0e3as5y26kkxx2vre
Tanggal Akses : 17 Januari 2017

10. https://id.wikipedia.org/wiki/Daftar_warna
Tanggal Akses : 17 Januari 2017

11. http://www.foreximf.com/belajar-forex/pemula/membaca-chart-grafik/
Tanggal Akses : 17 Januari 2017

12. Jaka Purnama, 2013. Membuat pie chart dengan microsoft excel
http://tukangteori.com/membuat-pie-chart/
Tanggal Akses : 17 Januari 2017

13. J. J. Thomson Avenue, 2011. A colour scheme for the display of astronomical intensity images
http://astron-soc.in/bulletin/11June/289392011.pdf
Tanggal Akses : 17 Januari 2017

14. http://www.mrao.cam.ac.uk/~dag/CUBEHELIX/#Astronomical

Tanggal akses : 17 Januari 2017

15. http://www.mrao.cam.ac.uk/~dag/CUBEHELIX/cubetry.html

Tanggal Akses : 17 Januari 2017

Bab 4

PENERAPAN PEWARNAAN KEDALAM DIAGRAM

4.1 Contoh Kasus

Warna merupakan sebuah nama yang muncul atas segala aktivitas pada retina mata. Selain itu, warna adalah hal penting bagi berbagai macam makanan. Warna juga menunjukkan indikasi adanya perubahan kimia dalam makanan seperti misalnya browning karamelisasi.

Klasifikasi warna paling penting adalah sistem CIE(Commision International de l’eclairage). Sistem lain yang digunakan untuk mendiskripsikan warna makanan antara lain system Munsell, Hunter, Lovibond (de Man,1999).

Sistem Hunter merupakan salah satu system warna yang telah luas digunakan untuk kolorimetri makanan. Dalam system Hunter warna dibedakan menjadi 3 dimensi warna. Simbol a untuk dimensi kemerahan dan kehijauan.Simbol b untuk dimensi kekuningan dan kebiruan. Dimensi warna yang ketiga adalah L (Lightness) atau kecerahan. Nilai CIE dapat dikonversi menjadi nilai warna dalam system Hunter menjadi L,a,b. Begitu pula sebaliknya nilai L,a,b dapat dikonversi menjadi nilai CIE X%, Y, Z% (de man, 1999).

Warna dapat diukur secara modern dengan sebuah alat, yaitu color reader seri CR – 10. Instrumen ini terdiri atas ujung reseptor (A),sebuah layar dan 4 buah tombol. 3tombol adalah target, lab, Lch yang terletak dibawah layar pada sisi smaping alat. 1 tombol terletak pada sisi atas alat yang berfungsi sebagai tombol start saat penembakan sampel (de Man,1999).

Panjang gelombang warna yang bisa ditangkap mata berkisar antara 380 – 780 nanometer dan panjang gelombang ini menentukan sifat warna. Warna juga berarti interpretasi otak dari campuran warna primer, yaitu merah, hijau dan biru dengan komposisi tertentu (Anonim, 2009).

Color reader adalah alat pengukur warna yang didesain dengan tiga reseptor sehingga mampu membedakan warna akurat antara terang dan gelap. Pengukuran warna ini menggunakan color reader dengan seri CR-10, dengan ukuran dan lebar sinar 360g/12.7oz, gampang digunakan karena hanya menggunakan satu tangan, dan perbedaan warna dalam bentuk delta (L,a,b), delta (E,a,b) atau delta (L,c,h), dapat beriluminasi 8/d. Menggunakan stander CIE D65, sumber energi berupa 4 batrai AA atau adapter AC-A12. Dapat mendeteksi dalam 10 detik dengan temperature operasi 0-40°C. Ukrannya 59 x 158 x 85 mm. Beratnya 360 gr tanpa batrai.Casing standar CR-A68, ap pelindung CR-A72.(Maryanto, dkk, 2004)

4.1.1 Interval

Interval yang dimaksud disini adalah jarak antara warna yang satu ke warna yang lain dalam proses perubahan warna. Berikut tabel interval pada perubahan warna yang dilihat dalam RGB, CMYK, dan HSV.

4.1.2 Line Chart

Line chart adalah grafik yang paling sederhana yang digambarkan sebagai garis yang menghubungkan harga-harga penutupan. Tampilan dari Line Chart sangat sederhana karena hanya berbentuk garis-garis saja. Misalnya disini akan menampilkan line chart yang dimana terdapat 2 tabel disini yaitu derajat dan warnanya.

Disini bisa mendapatkan data diatas dari pernyataan dibawah ini.

Pengukuran warna secara visual atau kualitatif sangat sulit dilakukan karena indera penglihatan manusia sulit untuk membedakan perbedaan warna yang sedikit. Pengukuran warna produk pertanian dapat dilakukan dengan menggunakan alat yang bernama Colour Reader. Alat ini dapat mengukur warna dengan hasil berupa angka dan dibagi menjadi Lightness, Chroma dan Hue. Hue merupakan karakteristik warna berdasarkan cahaya yang dipantulkan oleh objek, dalam warna dilihat dalam ukurannya mengikuti tingkatan 0-359. Sebagai contoh, pada tingkat 0 adalah warna merah, pada tingkat 60 adalah warna kuning, untuk warna hijau pada tingkatan 120, sedangkan pada tingkatan 180 adalah warna cyan. Untuk tingkat 240 merupakan warna biru, serta tingkat 300 adalah warna magenta.

Berikut contoh dari Line Chart yang kami buat dari Microsoft Excel.

Bisa dilihat disini dari merah ke magenta grafiknya yang didapat dari data diatas berbentuk garis diagonal yang dimana terdapat selisih interval sebanyak 60 derajatnya yang bisa dilihat semakin naik keatas lebih dari 0 maka warnanya akan semakin berubah.

4.1.3 Pie Chart

Berikut ini kami akan memaparkan pembuatan pie chart dengan bahasa pemrograman html menggunakan notepad++. Kami akan membuat chart yang nantinya bisa kita integrasikan ke dalam web aplikasi kami dengan menggunakan canvas yang merupakan elemen dari html5 dan javascript. Library yang akan kita gunakan dalam pembuatan chart ini adalah RGraph.

RGraph merupakan sebuah library javascript yang memanfaatkan element canvas html5 yang mampu membuat chart dengan cara yang sangat mudah. Visualisasi chart yang didukung oleh library RGraph ini lebih dari 20 jenis visualisasi yang berbeda. RGraph juga bisa memanfaatkan JSON data sebagai sumber data dalam pembuatan chart secara dinamis dan on the fly. Buat kami RGraph menawarkan kemudahan tersendiri dalam melengkapi web aplikasi yang dibuat dari sisi pembuatan layer presentasi yang berupa chart. Langsung saja kita mulai cara mudah membuat chart dalam web aplikasi kita ini. Kita akan melakukan percobaan ini dengan membuat sebuah web aplikasi html sederhana saja.

Sebagai langkah pertama, silahkan download terlebih dahulu library Rgraph. Buatlah sebuah folder web aplikasi html dan didalamnya terdapat folder css, js, dan datasource. Kemudian ekstrak file Rgraph.zip yang sudah di download tadi. Copy semua file yang ada dalam folder css hasil ekstrak dan letakkan dalam folder css yang kita buat. Kemudian copy seluruh file yang ada dalam folder libraries hasil ekstrak tadi dan letakkan dalam folder js yang sudah kita buat.

Kita akan membuat sebuah Pie Chart sederhana atau basic pie chart dengan menggunakan library RGraph yang sudah kita ekstrak tadi. Buatlah sebuah file html dengan nama basic-pie.html dan letakkan dalam folder web aplikasi html kita sejajar dengan folder js. Dan berikut ini isi file basic-pie.html tersebut.

<!DOCTYPE html>

<html>

<head>

//creating graph

window.onload = function () {

var pieGraph = new RGraph.Pie("cvsGraphBook", [30, 60, 120, 180, 240])

.Set("labels", ["red", "grey", "green", "blue", "magenta"])

.Set("tooltips", ["red [30]", "grey [60]", "green [120]", "blue [180]", "magenta [240]"])

.Draw();

}

</script>

</head>

<body>

<canvas id="cvsGraphBook" width="350" height="250">[No canvas support]</canvas>

</body>

</html>

Kemudian bukalah file tersebut pada browser anda dan akan menjadi seperti gambar berikut ini:

Mari kita coba pahami isi dari file basic-pie.html tersebut. Perhatikan tag body pada file basic-pie tersebut:

<canvas id="cvsGraphBook" width="350" height="250">[No canvas support]</canvas>

Disana kita membuat sebuah elemen canvas yang dimiliki oleh html5 dengan lebar 350 dan tinggi 250, kemudian di dalam tag canvas tersebut kita lihat sebuah teks “No canvas support”, teks ini akan tampil jika browser yang kita gunakan tidak mendukung html5. Kemudian perhatikan baris-baris berikut yang ada pada section ini:

Baris-baris diatas adalah baris-baris dimana kita meng-include library-library RGraph yang kita butuhkan. Oleh karena kita hendak membuat Pie maka kita meng-include file RGraph.pie.js. Kemudian perhatikan kembali baris-baris berikut ini:

//creating graph

window.onload = function () {

var pieGraph = new RGraph.Pie("cvsGraphBook", [30, 60, 120, 180, 240])

.Set("labels", ["red", "grey", "green", "blue", "magenta"])

.Set("tooltips", ["red [30]", "grey [60]", "green [120]", "blue [180]", "magenta [240]"])

.Draw(); }

</script>

Ya, disanalah baris-baris utama kita dalam membuat chart dengan library RGraph. Pada baris tersebut terlihat object RGraph.Pie dibuat berdasarkan parameter id dan data. Teks “cvsGraphBook” dalam konstruktor tersebut adalah id dari canvas tempat kita akan meletakkan hasil dari chart yang akan dibuat. Sementara parameter data, kita buat merupakan array dari angka-angka 30,60,120,180 dan 240. Kemudian untuk membuat label yang bisa mewakili deskripsi dari angka-angka tersebut kita set pada baris:

.Set("labels", ["red", "grey", "green", "blue", "magenta"])

Label tersebut juga merupakan array tapi terdiri dari jenis-jenis warna. Yang harus dipahami adalah urutan array data dan urutan array label, harus simetris jika kita ingin menempatkan data yang benar, maksudnya secara tabular data maka seharusnya simetris. Dan kemudian baris selanjutnya tertulis seperti ini:

.Set("tooltips", ["red [30]", "grey [60]", "green [120]", "blue [180]", "magenta [240]"])

Baris ini adalah baris dimana kita menge-set tooltips untuk chart yang kita buat. Sama halnya dengan label, tooltips ini juga mesti simetris dengan parameter data yang kita definisikan pada instansiasi object RGraph.Pie diatas. Tooltips ini berguna jika salah satu bagian pada pie chart tersebut di-click maka akan tampil tooltips sesuai dengan apa yang kita buat. Sampai disini kita sudah selesai membuat basic-pie-chart.

4.1.4 Organization Chart

Setelah menerapkan pewarnaan pada line chart dan pie chart, selanjutnya kami terapkan pada organization chart. Organization chart adalah diagram yang memperlihatkan adanya saling keterkaitan berbagai posisi pada suatu organisasi. Jika kami sesuaikan dengan materi yang sedang kami bahas, disini masing-masing warna saling berkaitan satu sama lain. Seperti contoh diatas, kami membuat sebuah diagram organisasi untuk organisasi warna pelangi.

Disini kami menurunkan menjadi beberapa bagian warna yang tedapat pada warna pelangi, yaitu warna merah, kuning, hijau, cyan, biru dan magenta. Untuk masing-masing warna, kami turunkan lagi dimana di setap turunan ini ada kaitannya dengan warna selanjutnya. Misalnya, turunan merah terdapat warna merah oranye, oranye tua, oranye serta warna-warna lainnya yang mendekati ke warna kuning. Ketiga turunan dapat mendekati ke warna kuning, tergantung besar kecilnya nilai yang kami input pada derajat RGB. Untuk warna merah kami memiliki nilai derajat RGB(255,0,0) lalu kami tingkatkan nilai derajatnya menjadi RGB(255,59,0) sehingga warna berubah menjadi merah-oranye, lalu untuk warna oranye tua kami tingkatkan kembali nilai derajat menjadi RGB(255,100,0) dan warna oranye ditingkatkan kembali menjadi RGB(255,165,0). Jika kami tingkatkan terus-menerus, maka semakin lama warna akan berubah menjadi lebih muda dari yang sebelumnya dan akan mndekati ke warna kuning. Lalu untuk warna selanjutnya, langkah-langkah yang dilakukan sama seperti warna merah tadi. Karena kami membuat organisasi chart yang membahas tentang organsasi warna pelangi, maka derajat nilai RGB yang kami input adalah untuk warna pelangi.

Annyeong!^^

Jumat, 20 Januari 2017

VISUALISASI DIAGRAM PEWARNAAN (BAB 5)

VISUALISASI DIAGRAM PEWARNAAN (BAB 4)

Pengantar Komputasi Modern Tugas 2