Pendahuluan Komang Anom Budi Utama, SKom
[email protected]
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.
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.
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.
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.
Gambar 1 Perpindahan gambar dari sketchbook kesuatu layar
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
Versi-Versi Software Processing Hingga
saat
ini,
terdapat
beberapa
versi
software
processing
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
dari
awal
munculnya
hingga
Aplikasi Processing 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.
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
2.
Double-click shortcut processing pada desktop yang sudah anda buat.
3.
Tampilan awal
Gambar 4 Tampilan IDE Processing
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
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).
Pengenalan Jendela Layar • Untuk membuat jendela layar berukuran 800 x 400 maka sintaks yang dituliskan pada IDE Processing: size (800, 400); Output:
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:
Menggambar bentuk dasar (Primitive Object)
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);
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);
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);
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);
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);
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.
Menggambar Sebagian Ellipse
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));
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));
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);
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);
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:
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:
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:
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:
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:
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);
Menggambar Bentuk Bebas Output:
