3D Concept - Part 2

Oke, ini dia lanjutan dari 3D Concept di bagian pertama, mari kita bahas.

• Z-axis

Konsep utama di balik 3D adalah adanya dimensi lain di luar X dan Y. Ini adalah dimensi kedalaman (depth), dan biasanya diberi label Z. Bisa dilihat disini adanya axis baru yang diberi label Z.

Untuk memulainya, kita perlu menentukan arah sumbu Z kemana mengarahnya. Ke kanan-kah atau ke kiri-kah? Mari saya jelaskan. Jika anda ingat kembali ke diskusi tentang sistem koordinat 2D, Anda akan ingat bahwa dalam beberapa hal ada sistem koordinat yang berlawanan dengan kebanyakan sistem koordinat umum lainnya. Sumbu Y positif ke bawah bukannya ke atas, dan sudut diukur berlawanan arah jarum jam bukan searah. Just like that, pokoknya.

Memang di sistem koordinat 3D juga ada dua metode yang dipakai. Sistem tangan kiri dan sistem tangan kanan.

Coba buka tangan kiri dan bentuk huruf L dengan ibu jari dan telunjuk, lalu tekuk jari tengah Anda 90 derajat dari jari telunjuk Anda, masing-masing akan menunjuk ke dimensi lain. Sekarang anggap jari tengah Anda mengarah sumbu X positif, dan jari telunjuk Anda ke arah sumbu Y positif. Dalam sistem tangan kanan, ibu jari Anda sekarang akan menunjuk ke arah sumbu Z positif.

Sistem rotasi-nya untuk nilai positif searah jarum jam. (CW)

Image from 3dgep.com

Begitu pula dengan sistem tangan kanan sudah pasti arah sumbu Z positif-nya kebalikan dari sistem tangan kiri. Sistem rotasi-nya untuk nilai positif berlawanan arah jarum jam. (CCW)

Image from 3dgep.com

Untuk aplikasi-aplikasi 3D grafis, pemakaian sistem ini tergantung dari engine rendering graphic card yang dipakai.

Untuk Microsoft DirectX default-nya memakai sistem koordinat tangan kiri, sedangkan koordinat tangan kanan default-nya dipakai oleh OpenGL.

Seperti contohnya yang umum aplikasi 3ds Max yang default-nya memakai driver DirectX dan Cinema 4D yang default-nya memakai engine OpenGL, tentunya bakalan berbeda sistem koordinasi yang digunakan.

Ke depannya saya akan terus memakai sistem tangan kanan, karena tutorial-tutorial 3D selanjutnya kita akan memakai aplikasi Maxon Cinema 4D.

Mengapa Cinema 4D? Karena aplikasi 3D yang satu ini cukup mudah penggunaannya dibandingkan 3ds Max, Blender, Maya, LightWave, dan aplikasi lainnya yang sejenis. Selain itu interface-nya pun menarik dan sederhana.

Example Modeling by Anders Kjellberg | dogday-design.com

Tentunya manfaat dari aplikasi 3D sangatlah banyak. Untuk 3D models, Computer-aided design, Graphic design, Video games, Visual effects, Virtual engineering, Virtual reality, Animation  dan masih banyak lagi.

Dalam koordinat 3D, tentu saja ada penambahan satu sumbu lagi sesudah X dan Y, yaitu Z. Penulisan posisi suatu objek pun tidak hanya (x, y) saja seperti di koordinat 2D, namun sudah menjadi (x, y, z). Perlu diketahui, dalam dunia 3D masing-masing axis diberi warna yang berbeda. X-axis berwarna merah, Y-axis berwarna hijau, dan X-axis berwarna biru. Jadi apabila ditulis seperti ini___ (x, y, z) = (R, G, B). Hmm.. sepertinya familiar dengan mode warna seperti ini. Ya, sistem yang dipakai menggunakan RGB, yang tidak lain adalan mode warna untuk resolusi layar monitor di komputer.

Kembali lagi ke koordinat posisi di 3D. Contoh ada sebuah objek geometri bundar yang terletak di dalam ruang di dunia 3D (anggap titik sumbu-nya ada di tengah-tengah objek). Bagaimana mencari posisinya?

Seperti biasa, aktifkan lagi grid-nya supaya mudah.
Disini terlihat grid ada di setiap pertemuan dari dua buah sumbu. Grid XY, grid XZ, dan grid YZ.

Pertama coba kita lihat dari grid XZ dahulu. Terlihat objek tersebut ada di posisi X=5 dan Z=3 unit. (5, n/a, 3).

Di grid XY, objek berada di X=5 dan Y=3.5 unit. (5, 3.5, n/a).

Grid YZ. (n/a, 3.5, 3)

Dengan grid XY dan XZ saja kita sudah bisa mengetahui letak dari objek tersebut. Jadi koordinat posisi objek tersebut ada di (5, 3.5, 3).

Mudah kan?

Sistem rotasi yang ada di 3D adalah sebagai berikut.

Objek geometri kubus dengan rotation-axis-nya. Kita bisa lihat gelang-gelang berwarna yang mengelilingi objek yang merupakan arah perputaran dari tiap axis, dari gambar tersebut kita bisa tahu objek diputar ke arah mana apabila objek diputar di sumbu X, Y, atau Z.

Tentu saja untuk masalah koordinat skala cukup mudah juga, tinggal melihat arah dari tiap axis. Contohnya, apabila X-axis menghadap ke atas dan kita mengubah skala pada objek di sumbu X saja maka objek tersebut akan menjadi melar tinggi atau pendek tergantung dari nilai skala di sumbu X.

• Perspective

Dalam dunia nyata, apabila kita melihat dua buah benda yang berukuran sama namun dua benda tersebut berbeda di jarak yang berbeda dengan kita, maka objek yang jauh dari kita terlihat kecil sedangkan objek yang dekat dengan kita terlihat besar. Biasanya hal ini dinamakan dengan perspektif.

Kadang skala dan jarak pandang (apabila dilihat dari sudut tertentu), akan terlihat sama. Contohnya, apabila kita melihat mobil yang jauh dan berjalan mendekati kita, kita akan melihat mobil tersebut akan semakin terus membesar ketika mobil tersebut semakin dekat dengan kita.

Dahulu, animasi kartun 2D menggunakan prinsip seperti itu. Jika ada animasi objek yang bergerak mendekati kamera, objek tersebut diperbesar sehingga terlihat objek tersebut seakan-akan mendekati.

Namun dunia 3D tidaklah seperti itu, seperti contoh di bawah ini. Ada beberapa buah bola yang berbeda warna tapi besar ukurannya sama. Semakin jauh bola tersebut dari kamera terlihat semakin kecil.

Oke, kadang hal ini menjadi rancu. Bagaimana kita bisa tahu kalau bola-bola tersebut ada di jarak pandang yang berbeda?

Tentunya dalam dunia 3D kita bisa melihat apa yang terjadi di dunia nyata.

Dalam dunia fotografi kita mengenal adanya ruang tajam (depth of field). Apabila titik fokus kamera ada di bola paling depan, maka bola di belakang-nya menjadi buram (blur).

Jadi intinya, dalam dunia 3D kita diharapkan untuk bisa melihat dan mengamati keadaan sekitar di dunia nyata. Tentu saja untuk mengasah feeling dan kemampuan apabila nanti membuat suatu kreasi di aplikasi 3D.

Mungkin (dan sudah pastinya), masih banyak kekurangan yang bisa saya jelaskan disini tentang 3D. Namun sekiranya dasar-dasar pemahaman 3D ini bisa bermanfaat untuk Anda.

Di pertemuan berikutnya, kita akan langsung ke penggunaan aplikasi 3D. Ditunggu saja ya. :))

Hope you enjoy and stay creative, stay neat!!

*Denzel Invulnerable for Creative Folder*

Facebook Notes Tutorial

3D Concept - Part 1

Kali ini saya akan share mengenai konsep 3D (3 dimensi). Apa itu 3D? Bagaimana gagasan utama 3D? Dan apa kegunaannya?

Namun sebelum itu kita akan bahas dulu sedikit dasar tentang 2D Concept, agar bisa dipahami hubungannya dengan 3D.

2D Axis & Coordinate Systems

Waktu kita belajar matematika atau pelajaran berhitung lainnya, sempat kita mengenal grafik (chart).

Dimana kita mengenal adanya sumbu X (x-axis) dan sumbu Y (y-axis). Sumbu X yang horisontal dan sumbu Y vertikal. Sistem koordinasi seperti ini sudah umum dalam hal pemetaan dua dimensi. Dan sebagai contohnya seperti di sistem koordinat Cartesius (Cartesian coordinate system);___ kalau gak salah! (Agak lupa-lupa ingat sih.. :P). Mohon koreksi dan maklum-nya.

Mari kita ambil contoh sebagai berikut.

Misalkan panjang sumbu X (merah) dan sumbu Y (hijau) sama-sama berukuran 10 unit. Dimana sumbu yang bersebrangan (origin) adalah di X=0 dan Y=0, maka titik koordinat-nya ada di (0, 0)__(bulatan hitam). Origin biasa dilambangkan dengan huruf O.

Dan biar tidak membingungkan coba kita buat garis-garis koordinat-nya (grid), yang dimana setiap garis-nya mewakili satuan untuk ukuran unit.

Area di grid ini sebagai patokan untuk posisi dari suatu objek. Misalnya ada sebuah titik di posisi seperti gambar dibawah ini. Kita bisa menentukan posisinya dengan menarik salah satu garis di grid yang bersinggungan dengan titik tersebut. Dalam contoh gambar ini posisi titik berada di X=2 dan Y=2 (2, 2).

Mudah sekali bukan untuk menentukan posisi suatu titik di koordinat X dan Y?

Namun bagaimana jika ada suatu objek geometris 2D (shape), bagaimana cara menentukan posisinya? Contoh dibawah ini ada sebuah shape yang berbentuk segi-empat yang  sudah kita kenal sebagai persegi panjang (karena ada dua pasangan rusuk yang tidak sama panjangnya).

Coba kita aktifkan lagi grid-nya agar lebih jelas. Tentunya disini kita bisa langsung menghitung panjang dan lebar dari persegi panjang tersebut, iya kan? Untuk panjangnya berukuran 5 unit dan lebarnya berukuran 3 unit. Panjang keliling-nya 2(5+3) = 16 unit. Menghitung luas pun mudah, 5x3 = 15 unit persegi. Namun yang susah menentukan posisinya saja kan?

Nah, makanya agar tidak membingungkan, maka di tiap bangun geometri mempunyai sumbu sendiri.

Dalam software-software vektor seperti Adobe Illustrator, CorelDRAW, Freehand, dan lain sebagainya, apabila kita membuat suatu objek maka ada pengaturan sumbu-nya dan kita bisa tentukan letak sumbu tersebut mau dimana. Tapi kebanyakan (kita ambil contoh di software Adobe Illustrator), sumbu objek tersebut bisa di tengah-tengah objek, di tengah-tengah tiap rusuk-nya, atau di tiap-tiap sudut-nya.

Seperti contoh gambar di-bawah ini, kita mau menentukan sumbu-nya di sudut objek persegi panjang ini, maka bisa terlihat posisi masing-masing dari titik-titik yang ada di sudut.

Jika sumbu-nya berada di sudut kiri bawah (titik A) maka posisi koordinat-nya (3, 3), jika sumbu-nya di kiri atas (titik B) maka posisi koordinat-nya (3, 6), dan seterusnya___ silakan lihat saja gambar-nya agar lebih jelas. :D

Dalam sistem koordinasi seperti ini, dan seperti yang sudah kita ketahui___ jika sumbu X yang berada di kanan sumbu Y maka hasilnya positif, dan sumbu X yang berada di kiri sumbu Y maka hasilnyanegatif. Begitu juga dengan sumbu Y yang berada di atas sumbu X maka hasilnya positif, kebalikannya jika sumbu Y berada di bawah sumbu X maka hasilnya negatif.

Untuk mudahnya: X --> ke kanan positif, ke kiri negatif | Y --> ke atas positif, ke bawah negatif

Contoh gambar di bawah ini menjelaskan bagaimana jika posisi objek berada di kiri bawah dari titikorigin.

Namun dalam software-sofware 2D vektor maupun grafis kebanyakan sistem koordinasi-nya tidak seperti ini. Ada sedikit perubahan di sumbu Y. Namun hanya dibalik saja, sumbu Y ke atas negatif, ke bawah positif. Sistem rotasi-nya pun terbalik (di Adobe Illustrator) __ apabila objek diputar searah jarum jam maka hasil besar sudut-nya negatif dan apabila diputar berlawanan arah jarum jam maka hasil besar sudut-nya positif. Namun di Adobe Photoshop malahan kebalikannya.

Dan tidak hanya itu, dalam software-software 2D sumbu X (horisontal) biasa disebut dengan Weight (W) dan sumbu Y (vertikal) biasa disebut Height (H).

Ini beberapa contoh sistem transformasi di Adobe Illustrator.

Sekian saja dulu mengenai sistem koordinat di 2D___ terlalu panjang kalau dijabarin disini semua, huehehe___, di bagian ke-dua nanti kita akan bahas sistem koordinasi dari 3D.

...to be continued.

Hope you enjoy and stay creative, stay neat!!

*Denzel Invulnerable for Creative Folder*

Jump to 3D Concept - Part 2

Facebook Notes Tutorial

Membangun Budaya Kreatif

Ketika mengamati kehidupan di zaman sekarang, sepertinya sikap mengumbar nafsu dan amarah sudah menjadi 'mode' yang trend. Entah apa sebabnya dan dari mana asalnya. Apa akibat dari liberisasi kehidupan yang dikomando oleh materi atau degradasi moral yang begitu parahnya? Buktinya, tidak keluarga tidak saudara, dalam memperebutkan kedudukan dan penghasilan harus terkena dengan yang namanya the survival of the fittest (yang unggul yang mempunyai kekuatan). Artinya, hubungan saudara atau famili tidak menjadi bahan timbangan. Kita sudah lupa dengan tali saudara, malah saling menjatuhkan. Akibatnya, hidup kita tidak humanis lagi.

Apabila diukur dari parameter budaya, kejadian ini sudah keluar dari jalur, tidak nyaman, dan tidak etis. Oleh sebab itu, tidak ada salahnya apabila ada sebuah opini yang mengatakan kalau budaya kita sedang sakit parah. Yang diperlukan saat ini adalah langkah yang strategis untuk memperbaikinya. Bukan hanya saling banyak bicara namun tidak ada pelaksanaan. Yang menjadi pemimpin, jangan hanya mengeluarkan perintah saja tapi juga harus memberi contoh yang patut untuk dicontoh. Rakyat harus dibekali motivasi yang baik supaya kreatif untuk kemandirian hidupnya, bukan dicetak menjadi pengemis atau tukang minta-minta (the beggar nation). Semua ikhtiar pembangunan diharapkan bisa menjawab masalah yang yang sedang dihadapi sekarang. Utamanya harus bisa mengurangi kemiskinan (pro-poor), menyediakan lapangan pekerjaan (pro-job), meningkatkan kehidupan (pro-growth), dan menjaga lingkungan hidup (pro-environment).

Selama Indonesia merdeka, masyarakat yang tinggal di wilayah tertentu, misalnya masyarakat Sunda, belum mempunyai daya saing yang menjadi andalan. Katanya daerah agraris, tapi tidak bisa memenuhi kebutuhan pokok sendiri. Apalagi bidang yang lainnya, kita masih bergantung kepada kebaikan orang lain. Hal ini bukanlah dari sebab sumberdaya alam yang sedikit, tapi dari sumberdaya manusia yang perlu dibangun kreatifitas-nya. Jangan putus asa, gampang mengalah dan malas. Harus malu dengan bangsa Jepang yang miskin sumberdaya alam. Orang-orang Jepang penuh dengan rasa penasaran dan rasa keinginan yang kuat, dibarengi dengan ikhtiar dan semangat dalam pekerjaan. Walaupun begitu, kehidupan masyarakat Jepang tetap berpegang teguh pada kebudayaannya.

Sewaktu Hiroshima dan Nagasaki hancur di bom atom oleh sekutu, kaisar menugaskan kaum-kaum terdidik untuk menerjemahkan segala buku-buku tentang ilmu pengetahuan ke dalam bahasa Jepang. Bukan artinya orang Jepang tidak bisa bahasa asing, tapi bertujuan untuk  memelihara kultur Jepang dalam segala kondisi kehidupan ke depannya. Buktinya, walaupun sekarang Jepang sudah menjadi negara maju namun masyarakatnya tetap cinta kepada budayanya sendiri. Beda dengan keadaan kita, melupakan budaya sendiri, adat istiadat dikalahkan oleh pengaruh dari luar, budaya sendiri seperti tamu yang tidak pernah dilirik. Apalagi dalam hal kreatifitas, sepertinya masih terbiasa menjadi konsumen daripada produsen. Kehidupan menjadi konsumtif, berhutang menjadi pepatah kehidupan. Sawah di desa biar saja dijual dipakai beli motor untuk ngojek, atau dibawa pergi ke kota biarpun jadi kuli.

Keadaan ini tentunya tidak boleh dibiarkan. Semua stakeholders bangsa, harus bisa merubah keadaan dibarengi gotong-royong dan saling bekerjasama membangun kemitraan yang kuat. Keterampilan harus menjadi modal untuk kebahagiaan hidup. Kemiskinan dan kebodohan bukan turunan juga bukan warisan. Semua bisa dirubah dimulai dari pribadi diri sendiri, membiasakan diri berbuat kebajikan agar lama berjaya di buana (semangat bekerja atau kreatif akan membahagiakan kehidupan di dunia ini). Ke depannya, Insya Allah kita akan menjadi bangsa yang mempunyai harga diri dan tidak takut menghadapi globalisasi. Dengan ikhtiar membangunkan budaya kreatif (creativepreneur), kita akan mempunyai daya tahan yang baik dalam bidang ideologi, politik, ekonomi, sosial budaya, dan hankam, Wallahu A’lam.


Facebook Notes

03. Special FX in Adobe Photoshop

Note: This tutorial uses Adobe Photoshop CS5

1. Buat lembar baru di Photoshop. File > New... (Ctrl + N) Windows / (Cmd + N) Mac OS 

2. Buat sebuah layer baru. Layer > New > Layer... (Shift + Ctrl + N) Windows / (Shift + Cmd + N) Mac OS. Atau dengan klik tombol Create a new layer.

3. Aktifkan Brush Tool (B) dan pastikan settingan Hardness-nya 0% agar tepiannya halus.

4. Ubah warna Foreground menjadi warna yang anda inginkan. Untuk mempermudah pemilihan intensitas warna pastikan di jendela Color Picker pilihan Only Web Colors aktif.

5. Jika sudah memilih warna, klik sekali di lembar kerja untuk membuat sebuah bulatan yang halus.

6. Ganti lagi warnanya dengan warna dengan intensitas yang lebih terang dari warna sebelumnya.

7. Klik lagi di tengah-tengah bulatan yang tadi dibuat namun dengan sedikit mengecilkan ukuran Brush-nya. Ulangi lagi dengan mengganti warna dengan intensitas yang terang dari warna sebelumnya. Klik lagi di tengah bulatan dengan ukuran Brush yg lebih kecil. Lakukan terus berulang-ulang sampai warna terakhir berwarna putih.

8. Aktifkan Smudge Tool, dan tariklah di sisi bulatan yang telah dibuat. Bentuklah sesuai dengan yang anda inginkan. Tarik dari intenstas warna yang paling gelap (pinggiran) lalu di teruskan dengan bagian yang terang (dalam).

9. Atur juga Strength-nya. Apabila anda ingin bentuk yang panjang maka naikkan Strength-nya, begitu pula sebaliknya.

10. Apabila ingin mengubah warna dari bulatan bisa dengan memberinya Hue/Saturation... (Ctrl + U) Windows / (Cmd + U) Mac OS, atur Hue-nya.
Anda juga bisa menambah elemen lainnya seperti ini.

Yang paling penting untuk bisa menambah macam-macam efek anda bisa explore terus.



Hope you enjoy and stay creative, stay neat!!


*Denzel Invulnerable for Creative Folder*

Facebook Notes Tutorial

02. Introducing to WPAP

WPAP adalah singkatan dari Wedha's Pop Art Portrait. WPAP adalah salah satu gaya ilustrasi popart khusus portrait (wajah atau ekspresi figur). Dan nama Wedha sendiri?

Bagi yang dulu pernah membaca novel Lupus karya Hilman Hariwijaya mungkin ada yang tahu siapa yang menjadi sang ilustrator Lupus.

Ya, beliau adalah Wedha Abdul Rasyid; sang pembuat aliran WPAP.

Bila di teliti dengan cermat gaya ilustrasi WPAP ini seperti bergaya kubisme namun popart, jadi gambar wajah itu disusun dalam mosaik warna yang dipecah menurut faset-fasetnya. Namun bukan berarti benar-benar kubisme, tapi lebih ke penggabungan ragam warna-warna yang harmonis sehingga membentuk gambar wajah seseorang itu. Walau tidak detail, namun mampu mewakili karakter/ekspresi wajah dengan baik.

Info source: www.desainstudio.com


* * * * *

01. Displacement in Adobe Photoshop

Displace atau Displacement adalah teknik wrapping suatu gambar/objek mengikuti kontur dari suatu gambar lain yang memiliki kontur.

Misalkan kita akan menempelkan sebuah logo atau tulisan di atas gambar sebuah kaos yang kusut, maka logo tersebut harus bisa mengikuti kontur dari kain yang kusut tersebut.



Berikut tutorialnya.

Download tutorial source files disini.

Note: this tutorial uses Adobe Photoshop CS4.


01. Buka Photoshop lalu Open (Ctrl+O) file kaos.jpg






02. Di panel Channels layer kaos, pilih salah satu channel yang paling kontras (dalam hal ini channel Blue).
Klik kanan channel Blue lalu pilih Duplicate Channel...




03. Di jendela Duplicate Channel di bagian Destination ubah Document menjadi New. Ini untuk menduplikasi channel ke lembar kerja baru. Beri juga nama di kolom Name.
Lembar kerja baru ini untuk membuat file displacement map dari image kaos.




04. Beri kontras pada gambar dengan memberi adjustment Levels.
Image > Adjustments > Levels (Ctrl+L)




05. Beri juga sedikit blur agar tidak terlalu tajam.
Filter>Blur>Gaussian Blur...




06. Simpan dengan format PSD, karena displacement map di Photoshop hanya bisa file berbentuk PSD.
Beri nama lalu klik Save (disini diberi nama displacement.psd) . Simpan di hard drive dan anda harus ingat dimana itu di simpan!




07. Open file CF_logo.png, pilih Select All (Ctrl+A) lalu pilih Edit > Copy (Ctrl+C).
Kembali lagi ke lembar kerja kaos.jpg lalu Edit > Paste (Ctrl+V).






08. Atur penempatan serta ukuran logo di atas kaos dengan Edit > Free Transform (Ctrl+T)




09. Masih dalam keadaan layer logo terpilih, beri Filter > Distort > Displace...




10. Di jendela Displace atur Horizontal Scale dan Vertical Scale. Klik OK.




11. Jendela baru akan terbuka dan meminta displacement map yang telah tadi kita simpan (displacement.psd). Pilih file displacement.psd lalu Open.

12. Maka logo akan mengikuti kontur dari kaos.
Terakhir ubah blending mode untuk layer logo menjadi Multiply agar bayangan gelap dari kaos muncul.






13. Dan inilah hasil akhirnya.




Anda bisa meng-eksplore lagi efek Displacement.
Berikut contoh-contoh lainnya:








Hope you enjoy and stay creative, stay neat!! Semoga bermanfaat.

Facebook Notes Tutorial