Fun Approach to Learning

Creative Computer Programming

ismailadha@rocketmail.com
 Processing adalah bahasa pemrograman dan
lingkungan untuk pemrograman (development
environment) yang bersifat open source untuk
memprogram gambar, animasi, dan suara.
(www.processing.org)

ismailadha@rocketmail.com
 It is especially good for someone studying or working
in a visual field, such as graphic design, painting,
sculpture, architecture, film, video, illustration, web
design, and so on.
 The language has been used to create various data
visualization and installation art pieces
 But most often you just see people playing with it
 creating complex and beautiful pictures and
animations.

ismailadha@rocketmail.com
 The Processing software runs on the Mac, Windows, and
GNU/Linux platforms.
 With the click of a button, it exports applets for the Web or
standalone applications for Mac, Windows, and
GNU/Linux.
 Graphics from Processing programs may also be exported
as PDF, DXF, or TIFF files and many other file formats.
 Future Processing releases will focus on faster 3D graphics,
better video playback and capture, and enhancing the
development environment.
 Some experimental versions of Processing have been
adapted to other languages such as JavaScript,
ActionScript, Ruby, Python, and Scala; other adaptations
bring Processing to platforms like the OpenMoko, iPhone,
and OLPC XO-1.
ismailadha@rocketmail.com
 Multi-platform: Any program runs on Windows, Mac OS,
or Linux.
 Secure: Allows high-level cryptography for the exchange of
important private information.
 Network-centric: Applications can be built around the
internet protocols.
 Dynamic: Allows dynamic memory allocation and
memory garbage collection.
 International: Supports international characters.
 Performance: Provides high performance with just-in-
time compiles and optimizers.
 Simplicity: Processing is easier to learn than other
languages such as a C, C++, or even Java.
ismailadha@rocketmail.com
 In 1967, the Logo programming language was developed by
Daniel G. Bobrow, Wally Feurzeig, and Seymour Papert.
 With Logo, a programmer writes instructions to direct a turtle
around the screen, producing shapes and designs.
 John Maeda’s Design By Numbers (1999) introduced
computation to visual designers and artists with a simple, easy to
use syntax.
 While both of these languages are wonderful for their simplicity
and innovation, their capabilities are limited.
 Processing, a direct descendent of Logo and Design by Numbers ,
was born in 2001 in the “ Aesthetics and Computation ” research
group at the Massachusetts Institute of Technology Media Lab.
 It is an open source initiative by Casey Reas and Benjamin Fry,
who developed Processing as graduate students studying with
John Maeda.
ismailadha@rocketmail.com
 Casey and Ben began developing Processing in the fall of 2001,
releasing early alpha versions of the software soon after.
 In April 2005, they released the beta version for Processing 1.0 &
over 125,000 people have had downloaded the Processing
software.
 Many leading universities around the world have begun
including Processing in their digital arts curriculum, including
- Parsons School of Design
- Bandung Institute of Technology, Indonesia
- Helsinki University
- Royal Danish Academy of Fine Arts, Copenhagen
- School of the Art Institute of Chicago
- University of Washington
- Elisava School of Design, Barcelona
- (and many, many others).
ismailadha@rocketmail.com
 Tens of thousands of companies, artists, designers, architects,
and researchers use Processing to create an incredibly diverse
range of projects.
 Design firms such as Motion Theory provide motion graphics
created with Processing for the TV commercials of companies
like Nike, Budweiser, and Hewlett-Packard.
 Bands such as R.E.M., Radiohead, and Modest Mouse have
featured animation created with Processing in their music
videos.
 The University of Washington's Applied Physics Lab used
Processing to create a visualization of a coastal marine
ecosystem as a part of the NSF RISE project.
 The Armstrong Institute for Interactive Media Studies at
Miami University uses Processing to build visualization tools
and analyze text for digital humanities research.

ismailadha@rocketmail.com
 Tool Processing bisa didownload di:
http://processing.org/download/
(for windows 59,6 Mb)
- Format filenya berekstensi *.zip
 Extract file program (boleh di-extract di direktori
mana pun).
 Karena program ini dibangun dengan bahasa Java,
maka sebelumnya user sudah meng-install Java
Development Kit (JDK). Disarankan untuk
menggunakan JDK versi 6 ke atas.
 Untuk memulai, jalankan file processing.exe

ismailadha@rocketmail.com
 Menu

Toolbar
Untuk
Tabs keterangan lebih
jelas, user bisa
mempelajari
beberapa
Text Editor
kegunaan PDE
seperti menu
File, Edit,
Sketch,Tools, dan
Message Area Help.
Pada menu:
Help ->
Text Area Environtment

ismailadha@rocketmail.com
 Dalam Processing struktur program dapat
dibuat dalam tiga tingkat kompleksitas:
- Mode Statik.
- Mode Aktif.
- Mode Java.

ismailadha@rocketmail.com
 Mode Statik digunakan untuk membuat gambar
statik.
 Contoh berikut menggambar sebuah segi empat
kuning di layar.
size(200, 200);
background(255);
noStroke();
fill(255, 204, 0);
rect(30, 20, 50, 50);

ismailadha@rocketmail.com
 Mode Aktif menyediakan bagian setup() opsional yang
akan berjalan ketika program mulai berjalan.
 Bagian draw() akan berjalan selamanya sampai
progam dihentikan.
 Contohnya menggambar segi empat yang mengikuti
posisi mouse (disimpan dalam variabel mouseX dan
mouseY).

ismailadha@rocketmail.com
• Contoh segi empat yang mengikuti posisi mouse

void setup() {
size(200, 200);
rectMode(CENTER);
noStroke();
fill(255, 204, 0);
}
void draw(){
background(255);
rect(width-mouseX, height-mouseY, 50, 50);
rect(mouseX, mouseY, 50, 50);
}

ismailadha@rocketmail.com
 Mode ini memungkinkan menulis program Java secara
lengkap.
 Salah satu caranya adalah dengan mengimport
Processing library (lokasinya: \Processing-
1.1\lib\core.jar) ke dalam tool program Java itu sendiri.
Misalnya bisa menggunakan tool NetBeans.
 Misalkan ingin juga mengintegrasikan dengan
OpenGL library, user juga dimungkinkan untuk meng-
import-nya ke dalam tool program Java tersebut.
Lokasinya:
- \Processing-1.1\libraries\opengl\library\opengl.jar
dan
- \Processing-1.1\libraries\opengl\library\jogl.jar
ismailadha@rocketmail.com
Contoh program yang diintegrasikan dengan Netbeans

package letsp5;
import processing.core.*;
public class Main extends PApplet{
public Main(){

}
public static void main(String[] args) {
PApplet.main(new String[] {"letsp5.Main"});
}
public void setup(){
// Set the size of the window
size(200,200);
}
public void draw(){
background(255);
// Body
stroke(0);
fill(175);
rectMode(CENTER);
rect(mouseX,mouseY,50,50);
}
} ismailadha@rocketmail.com
 Untuk mode statik sangat direkomendasikan bagi
pemula.
 Untuk mode aktif, dianjurkan agar struktur penulisan
kode program lebih terstruktur dan rapi.
 Untuk mode Java, diperuntukkan bagi Java advance
programmer.

ismailadha@rocketmail.com
 User bisa mempelajari perintah-perintah bahasa
Processing secara lengkap pada menu:
Help -> Reference
 Atau bisa membaca buku-buku berikut ini:
- “Learning Processing - A Beginner’s Guide to
Programming Images, Animation, and Interaction” by
Daniel Shiffman.
- “Processing - A Programming Handbook for Visual
Designers and Artists” by Casey Reas & Ben Fry.
- “Algorithms for Visual Design Using the Processing
Language” by Kostas Terzidis.
- “Processing Creative Coding and Computational Art” by
Ira Greenberg.
ismailadha@rocketmail.com
 Dapat mengaplikasikan dasar-dasar teori komputasi
grafis dengan cepat dan mudah tanpa harus
mempelajari bahasa pemrograman dari awal.
 Bisa diterapkan untuk Pengolahan Citra Digital.
 Bisa dijadikan sebagai alat percobaan, dasar
pemodelan, dan sketsa grafis sebelum
diimplementasikan ke dalam project sebenarnya.
 Dapat meningkatkan skill komputasi grafis.
 Bisa diintegrasikan dengan pemrograman Java.
 Sebagai wadah untuk menyalurkan bakat seni dan
imajinasi.

ismailadha@rocketmail.com
 Kunjungi: http://processing.org/
 Forum umum & daftar koleksi hasil karya dari
beberapa Universitas di dunia:
http://www.openprocessing.org/collections/

ismailadha@rocketmail.com