• The nature of code – intro to coding
  • Intro to Processing

1. The Nature of Code

Simple Logic Programming Language Basic Algebra Math Symbol

2. Download and Install Processing

Download Processing



  • Code :Code is a series of instructions that a computer will execute when the code is run. It is written in a programming language that is essentially a contract between two parties. In the case of code, though, the two parties are the programmer and the compiler
  • File : Processing projects use .pde files and sometimes .java files You can link multiple files together(to create the sum of the code for the application) ( the different file types do different things and have different purposes)
  • Compiler : A compiler is a program that takes a code file and turns it into a series of instructions that a computer will run as a program. Most modern computers do not directly process any instructions that you write; instead, you ask a compiler to turn your code into machine instructions.
  • Executable : An executable is a file that can be run as an application. It is the result of writing code and compiling it.


  • Variable :Variables in computing are very similar to in algebra. They represent something, and in fact they always represent a certain kind of something.

i.e) int x;  x = 5; // can be more concise like : int x =5;
int x =5; int y =10; int z = x +y; // z = 15

  • Data Type : All variables are typed. This means that they have a type that tells the computer what sorts of things are going to be stored in the variable. This is because numbers, letters (usually called characters), and true/false (called boolean values) all require different amounts of space to store and move around.
  1. int : numbers without a decimal point 
  2. float : the data type for floating-point numbers (with a decimal point) 
  3. char : contain characters, that is, single letters or typographic symbols
  4. boolean : store two possible values: true  and false string : a sequence of characters
  • Operators :Operators are the symbols that a compiler uses to perform commands and calculations in your program

1. the mathematical operators that perform mathematical operations

+ : ADD      – : SUBTRACTION      * : MULTIPLICATION      / : DIVISION      % : MODULO

2. assignment operators that change values  (=)

3. comparison operators, which determine whether two variables are equal, different, greater than, or less than another variable (< , > , = =  )

3. Processing

Processing Official Website

The Processing project includes an integrated development environment (IDE) that can be used to develop applications, a programming language specifically designed to simplify programming for visual design, and tools to publish your applications to the web or to the desktop.

4. The Art of Creative Coding

Watch The Art of Creative Coding on PBS. See more from Off Book.

4. Exploring IDE (Integrated Development Environment)

‘Getting Started’ processing page

Screen Shot 2013-02-13 at 1.37.18 PM

The controls area is where all the buttons to run, save, stop, open, export, and create new applications appear.The Export button creates a folder called applet within your project folder and saves all the necessary files there.

The Code window is where you enter all the code for the application. It supports a few of the common text editor functions, like ⌘-F for Find and ⌘-Z for Undo. The Messages window is where any system messages that might appear will be shown. It isn’t widely used. The Console window is where any trace statements or errors that occur while your application is running will be shown

5. Starting to write a code

<The Basics of a Processing Application>

A Processing application has two fundamental methods. These methods are the instructions for your application at two core moments. The first, setup(), is invoked when the application first starts. The second, draw(), is invoked over and over again from right after startup until the application closes.

void setup(){}
: Any instructions put in the setup() method run when the application first starts. In Processing application, the setup() method makes sure any information you want to use in the rest of the application is prepared properly

void setup(){
size(200, 200);
print(” all done setting up”);

void draw(){}
:The draw() method is where the drawing of the application happens, but it can be much more than that. The draw() method is the heartbeat of your application; any behavior defined in this method will be called at the number of times per second specified as the frame rate of your application.

void draw() {

Demo Sketch

Sketch #1 (Optional Assignment)

: Drawing shapes with 2D primitives and Filling colors : reference page

Screen Shot 2013-02-13 at 2.00.29 PM

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s