Week 2

1
Week 2
2
Todays Goals

• Introduce Processing.
• Fundamentals of programming.
• Learn to draw with Processing.
• Learn about variables.

3
What is Processing?

• Programming environment created by Ben Fry
  and Casey Reas.
• A simplified version of Java (A good
  introduction to Java).

4
Why was it made?

• To teach the fundamentals of programming to
  visual people.
• To be used as a software sketchbook for the rapid
  prototyping of ideas.
• To be used as a production tool for technologists
  and artists.
• To provide an alternative to Flash, and all those
  other boring apps...

5
What can I do with it?

• Information visualizations.
• Drawing tools.
• Musical instruments.
• Create software for installations.
• Lots of other creative things.

6
Information Visualizations
7
Drawing Tools
8
Musical Instruments
9
Software for Installations and Performance
10
Custom image processing.
11
See other a bunch of other interesting Processing
projects at http//www.Processing.org/exhibition/

12
All of the lab computers should have Processing
installed. If you want to use it on your own
computer, go tohttp//www.Processing.org/downloa
d/Its free! Its cross-platform!Get version
0125.
13
Why are we using Processing in this class? It
allows you to create and debug loops, arrays,
variables, and functions - the core class
concepts - plus its similar to Arduino.
14
Remember - Precision Programming is about
precise instructions that build up into something
cool.For examplewith ninjas.
15
Open Processing. You should see the following
window
16
In Processing write you code this window,
hit the run button to run your programhit
the stop button to stop your program.
17
Lets write our first Processing program. We
are going to draw a rectangle!
18
Type the following line in the Processing window
and press the run button.
// draw a rectanglerect(50, 20, 40, 40)
19
Whats happening here?
// draw a rectanglerect(50, 20, 40, 40)

• The first line is a comment. Writing
  comments about what your program is doing is
  good practice. In Processing, use // for a single
  line and / / for many line comments.
• The second line is a drawing function. It
  consists of 4 numbers. The first two are the x
  and y coodinates of where to start drawing.
  The second two numbers are the width, and
  height of our rectangle.
• Notice the semicolon. All statements in
  Processing must be followed by a
  semicolon. Remember your SemiColons!

20
Saving files.

• That double S means its not saved.
• Go to File, Save As.

• Save it - Processing will make the folder.
• This one has been saved.

21
More Options.

• New will create a new file.

• Open - yes - it opens a file.

• Save does that same thing as File gt Save

• Export makes it ready to post on the web.

22
Change the first two numbers and see where the
rectangle is drawn.
Changing Location.
Processing's coordinate system works this way
23
Q How do I know the correct syntax for drawing a
rectangle (or doing anything else in
Processing)?A I looked that the following
pagehttp//www.Processing.org/reference/index.ht
mlAlways keep a browser open to this page when
coding in Processing.
24
This the rect() page in the documentation
25
Back to our program.
Theres a lot more going on in our program than
it would first seem. Processing has a number of
default values. Here are some basic ones
26
We can change the defaults. For example, if we
wanted red as a background color, we add this
line of code to our programbackground(255,0,0)

27
Try putting this line of code before your
rectangle code and press run. Then, put it
after and press run.See what happens.
28
QWhy isn't my rectangle there anymore?A Order
matters.
29
Processing excutes the commands in the order you
tell it to. Think of it like writing the
instructions to a recipe... Don't spread the
Peanut Butter before scooping it out.
30
background(255,0,0)These three numbers in the
background function specify a color. In
Processing, colors can be set by specifying the
amount of red, green and blue values from 0-255.
You can also specify gray values with only one
number. Here are some examples
31
The colors are Red, Green, Blue.255 the most
of the color0 the least of the colorBut this
color is based on light, soBlack is the
absence of all color (0,0,0)White is the
presence of all colors (255, 255, 255)
RGB Color
32
For example
33
Adapt this code to draw the one on the right.1.
Add Red and Green Squares.2. Comment the code
to indicate code the draws each square.3. Save
and keep.
Your turn
34
Lets try changing the defaults by adding these
lines to our program
35
We can do other things besides draw rectangles.
Lets try out some other drawing functions.
36
Try out the following drawing functions in your
program
37
Remember day 1

• The Rules in Spot the Differences
• These ARE differences
• - Case SensiTive (capitalization matters)
• - Punctuation (. , _at_ etc)
• Spelling or text
• These ARE NOT differences
• - Line breaks
• Anything between // and a line break
• Anything between / and /
• Spacing ( white space )

38
Your Turn.
39
Programming Principles 1

• Precise Instructions.
• Syntax is vital.
• Order matters.
• Comment your code.
• Use the documentation.

40
VariablesThink of variables as little
containers that hold data.A 7A is now a
variable or holder and it contains the value
7.
41
Variables?4 4 8 4 x 84 x y
42
Why use Variables?4 x yIf we change the
value of x, then y changes.Repeated
actionsRandom or custom elementsMath
calculations Shorter simpler code
43
Before using variables in Processing, we first
need to specify what types of data we want our
variables to hold. These different types are
called datatypes.
44
Some basic datatypes in Processing
boolean Datatype for the Boolean values true
and false. char Datatype for characters,
typographic symbols such as A, d, and
. float Datatype for floating-point numbers
(numbers with a decimal point.) int Datatype
for integers, numbers without a decimal
point. color Datatype for storing color values.
45
The first time a variable is written, you must
state its datatype. Examples
boolean isComplete char letter int
xpos float velocity color c
You can also initialize variables the same time
you declare them.
int xpos 50 color c (255,120,0)
46
Variables are meant to change.Which means they
can be confusing.
Its generally good practice to declare your
variables at the top of your file so you can
easily find and change them when needed.
or

• size(200, 200)
• background(0)
• stroke(153)
• int a 20
• int b 50

• int a 20
• int b 50
• size(200, 200)
• background(0)
• stroke(153)

47
Lets write a simple program using a variable
48
Your Turn.
49
Lets look at some other math operators
Find other math operators and functions under
Math in the documentation.
50
Programming Principles 2

• Variables are named and have a datatype.
• Initializing a variable creating it, assigning
  a datatype, and naming it.
• Variables can be confusing so comment them well
  and initialize at the top of your code.

51
Thats all for today!

• Homework
• Set up your processing environment.
• Finish all in-class exercises.
• Processing sketch with custom size, background,
  and at least 2 different shapes with different
  color fill and stroke.
• Processing sketch using int and color variables
  to draw 3 identical shapes at different
  locations.
• Turn this weeks composition into a Processing
  sketch.
• Create a Processing sketch using ONLY solid
  shapes to draw your initials in an interesting
  way.
• Make a kick ass pattern using variables (use
  math!).
• Extra Credit Read http//www.aec.at/en/archiv_fil
  es/20031/FE_2003_reas_en.pdf and write a good
  paragraph in reaction to the ideas presented.
• Remember
• Export all Processing sketches and post on your
  site with your source code.