Pendahuluan. Komang Anom Budi Utama, SKom

Transkripsi

1 Pendahuluan Komang Anom Budi Utama, SKom

2 Pengenalan Processing Processing adalah salah satu dari bahasa pemrograman dan lingkungan pengembangan open sorce. Processing suatu projek terbuka yang dikerjankan oleh Ben Fry dan Casey Reas. Berkembang dari ide-ide yang dieksplorasi di Aesthetics and Computation Group (ACG). Sejak tahun 2001, software processing sudah mulai dipromosikan untuk bidang seni visual. Saat ini 10 dari 1000 siswa, artis, desainer, peneliti dan para penyuka (hobbyists) menggunakan processing untuk belajar, membuat prototype dan produksi.

3 Pengenalan Processing Program ditulis dengan Text Editor dan dieksekusi dengan menekan Button Run. Pada Processing, sebuah program komputer akan disebut dengan sketch. Sketch akan disimpan pada sketchbook, yang berada pada folder dikomputer anda. untuk membukanya hanya tinggal klik button open.

4 Konsep dan Tujuan Processing Konsep yang diadopsi oleh software processing dalam mengajarkan dasar-dasar dari pemrograman komputer adalah menggunakan konsep dari prinsip-prinsip bentuk visual, gerak dan interaksi. Dan software processing memiliki tujuan untuk menyajikan sebuah software sketchbook dan untuk mengajarkan dasar-dasar dari pemrograman komputar dengan menggunakan konteks visual dari hasil pemrograman komputer yang dilakukan.

5 Sketsa dan Prototype Sketsa adalah cara awal seseorang menuangkan buah pikiran, yaitu dengan tujuan untuk memvisualisasikan pemikiran. Sketsa biasanya dilakukan atau dituliskan menggunakan sebuah kertas, lalu menuangkannya dalam sebuah kode. Ide yang dituangkan pada sebuah sketsa akan sangat membantu anda dalam merancang alur/ proses, tentunya ini akan mempermudah pekerjaan yang akan anda kerjakan. Ide untuk animasi dan interaksi biasanya dituangkan dalam bentuk storyboard. setelah membuat sketsa dengan menggunakan beberapa software storyboard, ide-ide terbaik yang anda pilih dapat dikombinasikan kedalam suatu prototype.

6 Gambar 1 Perpindahan gambar dari sketchbook kesuatu layar

7 Perkembangan Processing Hingga saat ini, processing sudah banyak berkembang dari berbagai bidang, diantaranya bidang Game, Primitives 3D, Graphical User Interface (GUI) untuk mikrokontroller, animasi, deteksi wajah dengan kamera, dan masih banyak yang lain Gambar 2 Perkembangan Processing

8 Versi-Versi Software Processing Hingga saat ini, terdapat beberapa versi software processing dari awal munculnya hingga sekarang, yaitu : Versi yang dirilis pada tanggal 15 Mei Versi yang dirilis pada tanggal 19 Mei Versi 3.0a5 yang dirilis pada tanggal 16 November Versi 3.0a9 yang dirilis pada tanggal 19 Mei Versi 3.a10 yang dirilis pada tanggal 09 Juni Versi yang dirilis pada tanggal 29 Januari 2017 Versi 3.3 yang dirilis pada tanggal 12 Februari 2017

9 Aplikasi Processing 1. Anda harus mengnduh aplikasi tersebut melalui situs resmi pada alamat url berikut ini: Aplikasi ini disediakan untuk berbagai sistem operasi seperti Windows (64-bit/ 32-bit), Linux (64-bit/ 32-bit) dan Mac OS X. 2. Aplikasi ini bersifat portable (aplikasi sudah dapat menggunakan tanpa harus menginstall terlebih dahulu), dengan cara mengextract file yang telah anda unduh. 3. Langkah berikutnya adalah membuat shortcut pada desktop anda dari file aplikasi, seperti file processing.exe pada system operasi windows. Ini dapat memudahkan anda dalam menggunakan aplikasi tersebut.

10 Pembuatan Shortcut Program 1. Membuat shortcut program pada desktop yaitu dengan cara klik kanan processing.exe pilih menu send to pilih Desktop (Create shortcut). Gambar 3 Pembuatan Shortcut Program

11 2. Double-click shortcut processing pada desktop yang sudah anda buat. 3. Tampilan awal Gambar 4 Tampilan IDE Processing

12 Pengenalan Tools Program Dibawah ini adalah tampilan awal ketika anda mendouble-click program processing, dengan adanya label anda lebih mudah dapat mengenal program editor processing (PDE). Gambar 5 Tampilan IDE Processing dengan Label

13 Pengenalan Jendela Layar Suatu layar komputer terdiri dari grid cahaya yang disebut dengan pixel, setiap pixel memiliki posisi yang diwakili pada grid koordinat. Pada processing koordinat x yaitu dimulai dari pojok kiri atas pada layar, dan koordinat y pada processing dimulai dari tepi atas. Koordinatkoordinat tersebut diwakili dengan sumbu (x,y), jadi apabila ada screen dengan ukuran (200, 200) maka posisi tengah pada layar display tersebut adalah (100, 100).

14 Pengenalan Jendela Layar Untuk membuat jendela layar berukuran 800 x 400 maka sintaks yang dituliskan pada IDE Processing: size (800, 400); Output:

15 Menggambar Titik Percobaan berikutnya adalah membuat gambar titik, yang berada tepat pada posisi tengah-tengah layar display. Sintaks : size (480, 120); //Membuat jendela layar point (240, 60); //Membuat titik tepat pada tengah-tengah jendela layar Output program:

16 Menggambar bentuk dasar (Primitive Object)

17 Menggambar Garis Untuk menggambar sebuah garis yaitu menggunakan function line, dan menggunakan 4 parameter dua buah titik koordinat (x1, y1, x2, y2). Titik koordinat tersebut digunakan sebagai titik awal dan titik akhir pada garis yang anda buat, berikut ini adalah contoh pembuatan garis : Sintaks : size (480, 120); line (20, 50, 420, 110);

18 Menggambar Segitiga Untuk menggambar sebuah segitiga yaitu menggunakan function triangle, dan menggunakan 6 parameter tiga buah titik koordinat (x1, y1, x2, y2, x3, y3). Titik koordinat tersebut digunakan sebagai titik garis yang anda buat, berikut ini adalah contoh pembuatan garis : Sintaks : size (480, 120); triangle (160, 110, 240, 10, 320, 110);

19 Menggambar Segiempat Untuk menggambar sebuah persegi panjang yaitu menggunakan function rect, dan menggunakan 4 parameter (x1, y1, width, heigh). Titik koordinat tersebut digunakan sebagai titik awal serta width (lebar) dan heigh (panjang) pada garis yang anda buat, berikut ini adalah contoh pembuatan persegi panjang : Sintaks : size (480, 120); quad (120, 10, 320, 25, 300, 110, 90, 110);

20 Menggambar Persegi Panjang Untuk menggambar sebuah persegi panjang yaitu menggunakan function rect, dan menggunakan 4 parameter (x1, y1, width, heigh). Titik koordinat tersebut digunakan sebagai titik awal serta width (lebar) dan heigh (panjang) pada garis yang anda buat, berikut ini adalah contoh pembuatan persegi panjang : Sintaks : size (480, 120); rect (120, 30, 240,60);

21 Menggambar Ellipse Untuk menggambar sebuah ellipse yaitu menggunakan function ellipse, dan menggunakan 4 parameter (x1, y1, width, heigh). Titik koordinat tersebut digunakan sebagai titik awal serta width (lebar) dan heigh (panjang) pada garis yang anda buat, berikut ini adalah contoh pembuatan lingkaran : Sintaks : size (480, 120); ellipse (240, 60, 100,100);

22 Menggambar Sebagian Ellipse Untuk menggambar sebagian dari ellipse yaitu menggunakan function arc, dan menggunakan dengan 6 parameter (x1, y1, width, height, start, stop). Titik koordinat tersebut digunakan sebagai titik awal, (width dan height) berfungsi menentukan ukuran dari ellipse, dan (start dan stop) adalah parameter yang digunakan untuk mengambil bagian dari ellipse yang diinginkan.

23 Menggambar Sebagian Ellipse

24 Menggambar Sebagian Ellipse Sintaks1: size(480, 120); arc(90, 60, 80, 80, 0, radians (90)); arc(190, 60, 80, 80, 0, radians (270)); arc(290, 60, 80, 80, radians (180), radians(450)); arc(390, 60, 80, 80, radians (45), radians (225));

25 Menggambar Sebagian Ellipse Sintaks1: size(480, 120); arc(90, 60, 80, 80, 0, radians (90)); arc(190, 60, 80, 80, 0, radians (270)); arc(290, 60, 80, 80, radians (180), radians(450)); arc(390, 60, 80, 80, radians (45), radians (225));

26 Menggambar Sebagian Ellipse Sintaks2: size(480, 120); arc(90, 60, 80, 80, 0, HALF_PI); arc(190, 60, 80, 80, 0, PI+HALF_PI); arc(290, 60, 80, 80, PI, TWO_PI+HALF_PI); arc(390, 60, 80, 80, QUARTER_PI, PI+QUARTER_PI);

27 Menggambar Sebagian Ellipse Sintaks2: size(480, 120); arc(90, 60, 80, 80, 0, HALF_PI); arc(190, 60, 80, 80, 0, PI+HALF_PI); arc(290, 60, 80, 80, PI, TWO_PI+HALF_PI); arc(390, 60, 80, 80, QUARTER_PI, PI+QUARTER_PI);

28 Mengatur Gambar Ketika program berjalan, komputer akan menterjemahkan kode baris program mulai dari bagian atas hingga mencapai baris terakhir dan kemudian berhenti. Sintaks: size(480, 120); ellipse(140, 0, 190, 190); rect(160, 30, 260, 20); Output:

29 Mengatur Properti Bentuk 1. Fungsi Smooth: Membuat garis halus Sintaks: size(480, 120); smooth(); ellipse(140, 60, 90, 90); nosmooth(); ellipse(240, 60, 90, 90); Output:

30 Mengatur Properti Bentuk 2. Fungsi Stroke Weight: Mengatur berat goresan Sintaks: size(480, 120); smooth(); ellipse(75, 60, 90, 90); strokeweight(8); ellipse(175, 60, 90, 90); ellipse(279, 60, 90, 90); strokeweight(20); ellipse(389, 60, 90, 90); Output:

31 3. Stroke Join & Stroke Cap Mengatur Properti Bentuk Sintaks: size(480, 120); smooth(); strokeweight(12); strokejoin(round); rect(40, 25, 70, 70); strokejoin(bevel); rect(140, 25, 70, 70); strokecap(square); line(270, 25, 340, 95); strokecap(round); line(350, 25, 420, 95); Output:

32 Sintaks: size(480, 120); beginshape(); vertex(180, 82); vertex(207, 36); vertex(214, 63); vertex(407, 11); vertex(412, 30); vertex(219, 82); vertex(226, 109); endshape(close); Menggambar Bentuk Bebas Output:

33 Menggambar Bentuk Bebas Sintaks: size(480, 120); smooth(); beginshape(); vertex(50, 120); vertex(100, 90); vertex(110, 60); vertex(80, 20); vertex(210, 60); vertex(160, 80); vertex(200, 90); vertex(140, 100); vertex(130, 120); endshape(); fill(0); ellipse(155, 60, 8, 8); fill(255); beginshape(); vertex(370, 120); vertex(360, 90); vertex(290, 80); vertex(340, 70); vertex(280, 50); vertex(420, 10); vertex(390, 50); vertex(410, 90); vertex(460, 120); endshape(); fill(0); ellipse(345, 50, 10, 10);

34 Output: Menggambar Bentuk Bebas