1 of 16

Processing

Presented by:

Anggi Mardiyono

2 of 16

Introduction

Processing was born in spring 2001 as a brainstorming session on a sheet of paper. Our goal was to make a way to sketch (prototype) the type of software we were working on, which was almost always full-screen and interactive
Processing is for writing software to make images, animations, and interactions
The idea is to write a single line of code, and have a circle show up on the screenAdd a few more lines of code, and the circle follows the mouse
Another line of code, and the circle changes color when the mouse is pressed
We call this sketching with code

3 of 16

Sketching and Prototyping

Sketching is a way of thinking;

it’s playful and quick

4 of 16

Flexibility

Because a Processing program can be as short as one line or as long as thousands, there’s room for growth and variation. More than 100 libraries extend Processing even further into domains including sound, computer vision, and digital fabrication (Figure 1-2)

5 of 16

Giant

In life, we all stand on the shoulders of giants, and the titans for Processing include thinkers from design, computer graphics, art, architecture, statistics, and the spaces between. Have a look at Ivan Sutherland’s Sketchpad (1963), Alan Kay’s Dynabook (1968), and the many artists featured in Ruth Leavitt’s Artist and Computer 1 (Harmony Books, 1976). The ACM SIGGRAPH archives provide a fascinating glimpse into the history of graphics and software

6 of 16

Familty Tree

Processing is a dialect of a programming language called Java; the language syntax is almost identical, but Processing adds custom features related to graphics and interaction (Figure 1-4). The graphic elements of Processing are related to PostScript (a foundation of PDF) and OpenGL (a 3D graphics specifcation). Because of these shared features, learning Processing is an entry-level step to programming in other languages and using different software tools.

7 of 16

Starting to code

Go to https://processing.org/download/
Download
Extract the files
Create a shortcut for the Processing.exe file and place on the Desktop

8 of 16

Starting to code

9 of 16

First program

Draw an ellipse

Click Run

10 of 16

Try this one

12 of 16

Save

By default, your programs are saved to the “sketchbook,” which is a folder that collects your programs for easy access
Clicking the Open button on the toolbar (the arrow pointing up) will bring up a list of all the sketches in your sketchbook, as well as a list of examples that are installed with the Processing software

13 of 16

New

You can also create a new sketch by pressing the New button on the toolbar
This will replace the sketch in the current window with an empty one. Holding down Shift when you press the New button will create a new sketch in its own window, as will selecting File➝New. The Open button works the same way

14 of 16

Another theme of Processing is sharing your work. The Export button on the toolbar
will bundle your code into a single folder titled applet that can be uploaded to a web server (Figure 2-2). After exporting, the applet folder will open on your desktop. The PDE fle is the source code, the JAR fle is the program, the HTML fle is the web page, and the GIF fle is displayed in the web browser while the program is loading. Double-clicking the index.html file will launch your web browser and show your sketch on the web page it has created