Pendahuluan. Komang Anom Budi Utama, SKom

(1)

Pendahuluan

Komang Anom Budi Utama, SKom [email protected]

(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 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 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)

(7)

• 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)

Hingga saat ini, terdapat beberapa versi software processing dari awal munculnya hingga sekarang, yaitu :

• Versi 1.5.1 yang dirilis pada tanggal 15 Mei 2011. • Versi 2.2.1 yang dirilis pada tanggal 19 Mei 2014.

• Versi 3.0a5 yang dirilis pada tanggal 16 November 2014. • Versi 3.0a9 yang dirilis pada tanggal 19 Mei 2015.

• Versi 3.a10 yang dirilis pada tanggal 09 Juni 2015. • Versi 3.2.4 yang dirilis pada tanggal 29 Januari 2017 • Versi 3.3 yang dirilis pada tanggal 12 Februari 2017

(9)

1. Anda harus mengnduh aplikasi tersebut melalui situs resmi pada alamat url berikut ini: https://processing.org. 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)

1. Membuat shortcut program pada desktop yaitu dengan cara klik kanan processing.exe – pilih menu send to – pilih Desktop (Create shortcut).

Pembuatan Shortcut Program

(11)

2. Double-click shortcut processing pada desktop yang sudah anda buat. 3. Tampilan awal

(12)

Dibawah ini adalah tampilan awal ketika anda mendouble-click program processing, dengan adanya label anda lebih mudah dapat mengenal program editor processing (PDE).

Pengenalan Tools Program

Gambar 5 Tampilan IDE Processing dengan Label

(13)

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)

• 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

(16)

(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);

(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);

(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);

(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);

(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);

(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)

(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);

(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);

(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);

(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)

Mengatur Properti Bentuk

3. Stroke Join & Stroke Cap

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)

Menggambar Bentuk Bebas

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); 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)