3. analisis dan desain sistem 3.1 survei software-software

14 Universitas Kristen Petra

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

http://dewey.petra.ac.id/dgt_directory.php?display=classification

http://digilib.petra.ac.id/help.html

http://www.petra.ac.id


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 Screenshot Arrange-a-Room


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.


Objek dapat dirotasi dan ditranslasi, namun tidak dapat diubah

ukurannya

Gambar 3.3 Screenshot MyDeco


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


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

Fitur kamera terpisah dari canvas


Dapat membuat bentuk ruangan sesuai keinginan, namun tidak

dapat berbentuk lingkaran


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

ivers

itas K

riste

n P

etr

a


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.

Memungkinkan untuk membuat ruangan berbentuk lingkaran.


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.


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.

Gambar 3.8 Flowchart Menu Start Now


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.

Gambar 3.9 Flowchart Desain Isi Ruangan


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.

Gambar 3.10 Flowchart Penggambaran Object


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.


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

Gambae 3.13 Flowchart Desain Bentuk Ruangan


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

Save Load


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.


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.

3. analisis dan desain sistem 3.1 survei software-software

Documents