3. ANALISIS DAN DESAIN SISTEM

3. ANALISIS DAN DESAIN SISTEM

3.1 Survei Software-software sejenis

Dalam pengerjaan skripsi ini, dilakukan survei terlebih dahulu terhadap software-software sejenis, untuk menganalisa fitur-fitur yang ada. Ada tiga software yang akan digunakan sebagai referensi, yaitu Autodesk Homestyler, Arrange-a-room, dan MyDeco.

1. Autodesk Homestyler (http://www.homestyler.com)  Ruangan dapat berbentuk lingkaran

 Ketika dalam mode 3D, ruangan tidak dapat dijelajahi dan hanya dapat dilihat pada sudut-sudut tertentu saja.

 Tidak dapat memasukkan barang ketika dalam mode 3D  Hasil design dapat disimpan dan dishare dengan media sosial  Terdapat fitur autosave

 Objek dapat ditranslasi dan rotasi. Juga dapat diubah ukurannya

Gambar 3.1 Screenshot Autodesk Homestyler

Gambar 3.1 merupakan sebuah pengambilan gambar/screenshot ketika sedang dalam proses mendesain sebuah ruangan. Gambar 3.1 diambil ketika

15

Universitas Kristen Petra berada pada 3D view. Dalam mode ini, hanya bisa melihat ruangan saja dan tidak bisa melakukan desain ruangan.

2. Arrange-a-room (http://www.bhg.com)  Ruangan tidak dapat berbentuk lingkaran  Dua dimensi

 Furniture kurang menarik  Hasil pekerjaan dapat disimpan  Objek dapat diubah ukurannya

Gambar 3.2 merupakan pengambilan gambar ketika dalam proses mendesain sebuah ruangan pada Arrange-a-Room.

3. MyDeco (http://www.mydeco.com)

 Ruangan tidak dapat berbentuk lingkaran

 Barang-barang lengkap dan tersedia harga barang sesungguhnya  Ketika dalam mode 3D, ruangan tidak dapat dijelajahi dan hanya

dapat dilihat pada sudut-sudut tertentu saja.

 Tersedia objek kamera untuk melihat ruangan secara 3D, tetapi waktu rendering cukup lama.

 Hasil pekerjaan dapat disimpan

 Objek dapat dirotasi dan ditranslasi, namun tidak dapat diubah ukurannya

17

Universitas Kristen Petra Gambar 3.3 merupakan contoh tampilan ketika dalam proses mendesain sebuah ruangan dalam aplikasi MyDeco. Pada bagian tengah halaman merupakan desain ruangan yang dikerjakan, sedangkan pada bagian kanan halaman terdapat pengambilan gambar ruangan menggunakan objek kamera yang disediakan oleh aplikasi.

4. Google Sketchup Version 8.0.16846

 Ruangan dapat dibentuk sesuai keinginan user.  Terdapat kamera yang bekerja secara 3 dimensi.  Terdapat pengukuran dalam skala sesungguhnya  Hasil pekerjaan dapat disimpan

 Objek dapat dirotasi dan dapat diubah ukurannya

 Dapat membuat objek sendiri maupun meng-import model 3D.

Gambar 3.4 Screenshot Google Sketchup 8

Pada gambar 3.4 dapat dilihat tampilan dari Google Sketchup 8. Objek yang tampak pada gambar tersebut merupakan component dari Google Sketchup 8.

5. Sweet Home 3D

 Dapat membuat bentuk ruangan sesuai keinginan, namun tidak dapat berbentuk lingkaran

 Hasil pekerjaan dapat disimpan

 Furniture sudah disediakan dan terbagi dalam beberapa kategori  Furniture dapat dirotasi dan juga dapat diubah ukurannya  Dapat meng-import objek 3D untuk dijadikan furniture.

Gambar 3.5 Screenshot Sweet Home 3D

Gambar 3.5 merupakan contoh tampilan yang ada pada software Sweet Home 3D. Bagian atas merupakan tempat untuk melakukan proses desain. Sedangkan bagian bawah merupakan tampilan dari camera untuk menunjukkan dalam bentuk 3 dimensi.

19 3.2 Analisis

Tabel 3.1 Tabel Perbandingan Web-based Software

Fitur \ Program Autodesk Arrange-a-room MyDeco

3D Mode Bisa (hanya sudut tertentu) Tidak tersedia Bisa, terdapat kamera untuk melihat ruangan

Save Bisa Bisa Bisa

Bentuk dan ukuran ruangan

Sesuai keinginan, dapat berbentuk lingkaran

Sesuai keinginan, tetapi tidak dapat berbentuk lingkaran

Sesuai keinginan, tetapi tidak dapat berbentuk lingkaran

Pencahayaan Tidak bisa Tidak bisa Tidak bisa

Furniture Lengkap, tersedia ukuran, dan beberapa furniture bisa diubah ukurannya

Terbatas, ukuran dan warna furniture bisa diubah.

Lengkap, tersedia ukuran dan harga furniture.

Tabel 3.2 Tabel Perbandingan Desktop Software

Fitur \ Program Google Sketchup Sweet Home 3D

3D Mode Bisa Bisa, terdapat kamera untuk melihat ruangan

Save Bisa Bisa

Furniture Dapat dibuat secara custom atau import 3D objek

Tersedia berbagai macam kategori, dan juga dapat import 3D objek

Pencahayaan Menggunakan plug-in Menggunakan plug-in

Bentuk dan Ukuran Ruangan Sesuai keinginan Sesuai keinginan, tidak dapat berbentuk lingkaran Un iv er sitas Kri sten P etra

Setelah dilakukan survei pada software-software sejenis, semua software tersebut menyediakan menu untuk menyimpan hasil pekerjaan. Hasil dan perbandingan dari survei dapat dilihat pada Tabel 3.1. Juga hampir semua menyediakan tampilan dalam bentuk tiga dimensi. Akan tetapi, tidak bisa menjelajahi isi ruangan secara keseluruhan dan bebas. Dalam ketiga software tersebut juga tidak ada yang menyediakan efek lighting atau pencahayaan pada ruangan.

Untuk ukuran ruangan, semuanya memberikan ukuran dalam skala sesungguhnya, dan juga bentuk ruangan dapat dibentuk sesuai keinginan user. Hanya saja, tidak semuanya menyediakan fitur untuk membentuk lingkaran pada ruangan.

Dalam setiap software yang dicoba juga menyediakan menu untuk menyimpan hasil pekerjaan, sehingga dapat dilanjutkan lagi nantinya. Ada juga yang menyediakan menu untuk dapat melakukan share hasil pekerjaan melalui email atau media sosial seperti facebook dan twitter.

Tabel 3.2 merupakan perbandingan software-software untuk membuat desain dalam versi desktop. Semuanya menyediakan fitur untuk menambahkan atau meng-import custom objek 3 dimensi.

3.3 Desain Sistem

Setelah melakukan survei terhadap software-software sejenis, maka pada skripsi ini akan dibuat fitur-fitur sebagai berikut:

 Membuat tampilan dalam bentuk tiga dimensi sehingga ruangan dan furniture akan tampak lebih nyata.

 Menyediakan fitur save dan load project agar dapat melanjutkan pekerjaan sewaktu-waktu.

 Menyediakan efek pencahayaan pada barang yang dapat menghasilkan cahaya sehingga dapat mengubah suasana pada ruangan.

21

Universitas Kristen Petra

3.4 Struktur Data

Pemrograman yang dibuat menggunakan sistem class yang disediakan pada library Three.js. Class tersebut memiliki constructor, properties, dan juga method / void yang dapat digunakan. Untuk fungsi constructor, akan dijalankan ketika pertama kali variabel dideklarasikan. Sedangkan properties atau method yang ada pada class, dapat dipanggil sewaktu-waktu.

Gambar 3.6 Gambar Class Diagram

Pada Gambar 3.6, terdapat 7 macam class, yaitu class basicObject, mesh, directionalLight, renderer, geometry, material, dan camera. Class camera dan class mesh merupakan turunan dari class basicObject. Pada class basicObject, terdapat properties position untuk menentukan posisi objek, rotation untuk menentukan perputaran objek, dan scale untuk menentukan skala perbesaran sebuah objek. Pada class camera, terdapat method lookAt, untuk menentukan titik mana yang dilihat oleh camera. Juga terdapat method up, untuk menentukan titik mana yang menjadi arah atas dari sebuah kamera. Parameter kedua method tersebut berupa vektor. Sedangkan pada class mesh, terdapat properties geometry, untuk menentukan bentuk dan geometry sebuah mesh, dan juga properties material untuk memberi material dan tekstur.

Properties geometry dan material yang ada pada class mesh, merupakan variabel dari class Geometry dan Material. Class Geometry memiliki properties colors yang berguna untuk menentukan warna, vertices yang merupakan titik-titik yang membentuk geometry, dan juga triangle yang berguna untuk menentukan vertices mana yang berhubungan untuk membuat sebuah bidang.

Pada class directionalLight, terdapat properties boolean castShadow, yang dapat membuat objek yang dilalui dapat menghasilkan bayangan. Selain itu, juga terdapat properties position dan target, untuk menentukan titik awal dan akhir dari cahaya.

Class renderer, memiliki properties shadowMapEnabled berupa boolean, untuk memnyediakan efek pencahayaan jika bernilai true. Method render, berguna untuk menggambar ulang jika ada perubahan pada canvas. Sedangkan setSize, berguna untuk menentukan besar canvas. Method setSize digunakan pada awal program.

Untuk penyimpanan objek yang ada, digunakan sistem array untuk menampung objek-objek yang ada. Objek tersebut berupa mesh. Jadi array yang ada merupakan kumpulan data dari sebuah class.

3.5 Flowchart

Dalam aplikasi yang dibuat, terdapat beberapa tahapan yang harus dilakukan. Tahapan tersebut berupa proses-proses pada program yang berkelanjutan. Pada bagian ini dibuat flowchart untuk memperjelas tahapan atau proses-proses yang dilakukan pada program.

23

Universitas Kristen Petra Pada Gambar 3.7 dapat dilihat bahwa menu utama akan terdapat tiga pilihan menu, yaitu What’s this?, Tutorial, dan Start now. Pada menu What’s this?, user akan dijelaskan mengenai aplikasi dan apa saja yang dapat dilakukan. Pada menu Tutorial, user akan diajarkan bagaimana cara menggunakan aplikasi. Dan pada menu Start now, user dapat langsung membuat design sebuah ruangan.

Gambar 3.7 Flowchart Menu Utama

Ketika mulai mendesain ruangan, pertama-tama yang dilakukan adalah mendesain bentuk ruangan terlebih dahulu. Setelah selesai mendesain bentuk ruangan, user akan diarahkan pada halaman selanjutnya yaitu halaman untuk mendesain isi ruangan. Ketika dalam proses mendesain ruangan, user juga dapat kembali mendesain bentuk ruangan jika bentuk ruangan ingin diganti. Setelah

selesai melakukan desain, user dapat menyimpan hasil pekerjaannya. Flowchart pada menu Start Now dapat dilihat pada Gambar 3.8.

25

Universitas Kristen Petra Ketika mendesain ruangan, user dapat menambahkan barang dengan cara memilih kategori barang terlebih dahulu, baru memilih barang yang ada. Sedangkan untuk memindah barang, barang yang dipindah diklik terlebih dahulu dan lalu mouse digeser ke kiri-kanan atau atas-bawah (drag). Untuk me-rotate barang, user dapat menggunakan tombol rotate yang ada dibagian navigasi. Flowchart mendesain ruangan dapat dilihat pada Gambar 3.9.

Pada proses penggambaran object, ada beberapa proses yang harus dilakukan. Pertama-tama adalah menyiapkan objek yang akan di-load dalam format .js. Setelah diload, objek tersebut di-scaling hingga sesuai dengan ukuran yang diinginkan. Lalu, object ditampilkan dan disimpan di dalam sebuah array bernama objects. Flowchart penggambaran object dapat dilihat pada gambar 3.10.

27

Universitas Kristen Petra Pada aplikasi ini juga terdapat fitur untuk menyimpan pekerjaan, sehingga dapat dilanjutkan sewaktu-waktu. Hasil pekerjaan akan berupa file yang dapat disimpan oleh user.

Dalam file tersebut, disimpan jumlah dinding yang ada, diikuti posisi dinding sebanyak jumlah dinding. Object yang ada pada canvas juga disimpan dalam file tersebut. Cara penyimpanan pada file juga mirip dengan penyimpanan dinding, yaitu pertama-tama disimpan jumlah object yang ada, diikuti dengan posisi dan rotasi masing-masing object. Flowchart save project dapat dilihat pada Gambar 3.11.

Gambar 3.11 Flowchart Fitur Save .

Untuk melanjutkan project yang sebelumnya dikerjakan (load), user perlu memilih file yang didapat ketika melakukan save. Setelah sukses dipilih, program akan membaca variabel yang ada pada file tersebut. Setelah dibaca, program melakukan penggambaran pada canvas. Flowchart load project dapat dilihat pada Gambar 3.12.

29

Universitas Kristen Petra Gambar 3.12 Flowchart Fitur Load

Tidak hanya isi ruangan yang perlu didesain, melainkan juga bentuk ruangan. Di halaman untuk mendesain ruangan, pada canvas akan terbentuk grid. Untuk membentuk dinding, titik yang ada pada grid diklik dan lalu disambungkan dengan titik yang lainnya. Pada kolom navigasi, disediakan pilihan apakah akan disambungkan dengan garis lurus biasa, atau dengan kurva. Jika memilih dengan kurva, user perlu mengklik tiga titik, yaitu titik awal, titik tujuan, dan juga titik puncak dari kurva nya. Flowchart desain bentuk ruangan dapat dilihat pada Gambar 3.13

31

Universitas Kristen Petra

3.6 Desain Struktur Menu

Berdasar flowchart yang telah dibuat, maka dapat dibentuk struktur menu utama pada program.

Gambar 3.14 Struktur Menu Program

Pada saat user pertama kali masuk pada program, user akan berada pada menu utama, dan akan ada tiga menu pilihan, yaitu What’s This?, Tutorial, Start Now seperti pada Gambar 3.14. Setelah memilih salah satu dari menu, user akan dihadapkan dengan menu selanjutnya.

Menu Utama

What’s This? Tutorial Start Now

Desain Bentuk Ruangan

Desain Isi Ruangan

3.7 Desain Interface

Pada aplikasi ini, disediakan beberapa tools berupa button, image button, radio button, untuk melakukan proses yang dibutuhkan. Di bagian ini akan dijelaskan mengenai komponen yang ada pada interface program.

Gambar 3.15 Desain Awal Menu Utama

Pada tampilan awal program, terdapat tiga menu utama seperti pada Gambar 3.15. Menu-menu tersebut berupa image button. Ketika salah satu dari image button tersebut diklik, maka user akan langsung diarahkan pada halaman selanjutnya.

33

Universitas Kristen Petra Gambar 3.16 Desain Interface Desain Bentuk Ruangan

Pada bagian navigasi, disediakan pilihan apakah dinding berbentuk lurus atau kurva. User dapat memilihnya dengan menggunakan radio button pada bagian navigasi. Contoh tampilan dapat dilihat pada Gambar 3.16.

Gambar 3.17 Desain Interface Desain Isi Ruangan

Tampilan ketika memulai melakukan desain pada ruangan. Pada sidebar di sebelah kiri, terdapat combobox category untuk memilih kategori furniture seperti tampak pada Gambar 3.17. Setelah memilih category, akan muncul beberapa button di bawahnya untuk memilih furniture. Ketika diklik, furniture yang dipilih akan muncul pada ruangan. Untuk memindahkan furniture, user dapat mengklik dan menggesernya.