Presentation from session 1. CCLab 2010 section B. Information was compiled from the following sources: processing.org Processing - Creative coding and computational art, Ira Greenberg Processing, A Programming Handbook for Visual Designers and Artists, Casey Reas, Ben Fry Programming Interactivity - A Designer's Guide to Processing, Arduino, and openFrameworks, Joshua Noble

1. CREATIVITY AND
COMPUTATION LAB

2. THE PLAN
Week 1 - Introductions
Week 2 - Nothing.
Week 3 - 6 - Fundamentals, OOP
Week 7 - 10 - Midterm project/support, oF
Week 11 - 15 - Final project/support

3. ADVANCED STUDENTS
Come up with ideas for super cool projects and work
on them.
Advanced section? Maybe, maybe not.

4. WHAT IS PROCESSING?
Processing is a simple programming environment that
was created to make it easier to develop visually
oriented applications with an emphasis on animation
and providing users with instant feedback through
interaction.

5. WHAT CAN IT DO?
Originally built as a domain-specific extension to Java
targeted towards artists and designers, Processing has
evolved into a full-blown design and prototyping tool
used for large-scale installation work, motion
graphics, and complex data visualization.

6. WHAT ARE IT’S ROOTS?
Processing is based on Java, but because program
elements in Processing are fairly simple, you can learn
to use it even if you don't know any Java.
Java in turn, derives much of its syntax from C and C
++ but has a simpler object model and fewer low-
level facilities.

7. ...THAT'S...COOL. WHY DO I
CARE?
Processing -> Java -> C/C++
The fundamentals of Processing carry over nicely to
other languages. They'll help you lay a foundation for
picking up languages with more complex syntax.

8. THE PROCESSING IDE
PROGRAMMING INTERACTIVITY | EXPLORING THE
PROCESSING IDE | 55

9. SYNTAX
A set of rules that defines the combination of
symbols and expressions
Defines the surface form of a language

11. CURLY BRACES
Always work in
balanced pairs (an
open and closed pair)
Used to structure
code blocks

12. NAMING CONVENTION
Legal names can only
contain letters,
underscores, numbers, and
the dollar sign
The initial character must
be a letter, underscore, or
dollar sign - not a number
The names you define are
called identifiers

13. VOCABULARY

14. VARIABLES
A container for storing
data
Allows a data element to
be reused
Every variable had a name,
value and data type
A variable must be
declared before it is used

15. DATA TYPES
int - integer data
Processing can store and
manipulate different kinds float - floating-point
of data including numbers, numbers that have a
letters, words, colors, etc decimal point
The computer stores each String - Words and
in a different way so it sentences
needs to know which kind
of data it is in order to boolean - True or false
manage it
And MORE!

16. OPERATORS
Symbols used to write
mathematical
expressions
+ (Addition)
- (Subtraction)
* (Multiplication)
/ (Division)

17. RELATIONAL OPERATORS
> (greater than)
>= (greater than and
equal to)
< (less than)
<= (less than and
equal to)
== (equal to)
!= (not equal to)

18. COMMENTS
Ignored by the
computer
Helps us write notes
Helps remember what
that part of the
program does

19. EXPRESSIONS, STATEMENTS
An expression
like a phrase
Often a combination of
operators
A statement
A set of expressions
Like a sentence
Ends with the statement
terminator

20. FUNCTIONS
Allow us to execute
certain actions like draw
shapes, set colors
Usually lowercase followed
by parentheses

21. PROGRAMMING MODES
Processing has 3 programming modes - Basic,
Continuous, and Java. For our purposes, pretend the
Java mode does not exist.

22. BASIC MODE
This mode is used drawing
static images and learning
fundamentals of
programming. Simple lines
of code have a direct
representation on the
screen.

23. CONTINUOUS MODE
This mode provides a
setup() structure that is
run once when the
program begins and a
draw() structure which by
default continually loops
through the code inside.
This additional structure
allows writing custom
functions and classes and
using keyboard and mouse
events.

24. CONTROL STRUCTURES

25. ITERATION: WHILE
Controls a sequence of
repetitions. The while
structure executes a series
of statements continuously
while the expression is
true.

26. ITERATION: FOR
Controls a sequence of
repetitions. A for structure
has three parts: init, test,
and update. Each part must
be separated by a semi-
colon ";". The loop
continues until the test
evaluates to false.

27. CONDITIONAL: IF
Allows the program to
make a decision about
which code to execute. If
the test evaluates to true,
the statements enclosed
within the block are
executed and if the test
evaluates to false the
statements are not
executed.

28. CONDITIONAL/SELECTIVE:
SWITCH
Works like an if else
structure, but switch() is
more convenient when you
need to select between
three or more
alternatives. Program
controls jumps to the case
with the same value as the
expression. All remaining
statements in the switch
are executed unless
redirected by a break.

29. DRAWING, SHAPES AND
COLOR

30. COORDINATES
Processing uses a Cartesian
coordinate system with the
origin in the upper-left corner.
If your program is 320 pixels
wide and 240 pixels high,
coordinate [0, 0] is the upper-
left pixel and coordinate [320,
240] is in the lower-right. The
last visible pixel in the lower-
right corner of the screen is at
position [319, 239] because
pixels are drawn to the right
and below the coordinate.

31. SHAPES
Ellipse: ellipse() | ellipse(x, y, width, height);
Line: line() | line(x1, y1, x2, y2);
Point: point() | point(x,y);
Rectangle: rect() | rect(x, y, width, height);
Triangle: triangle() | triangle(x1, y1, x2, y2, x3, y3);
Quadrilateral: quad() | quad(x1, y1, x2, y2, x3, y3, x4, y4);
And more!

32. COLOR
Setting Creating & Reading
background() alpha()
colorMode() blendColor()
fill() brightness()
noFill() color()
noStroke() hue()
stroke() And More!

33. LET’S MAKE SOMETHING!

34. ASSIGNMENT
Create a self portrait! - It could be a drawing of you, your
pet, your zodiac sign, an abstract pattern, etc. etc.
The sketch should incorporate some of what we’ve covered
in class and contain at least one function and one control
structure.
Advanced - Make things move, use - events, libraries, OOP.
Come up with ideas for projects you would like to work
on.
Bonus - Use Eclipse to create your sketch.