1. Basic Processing … Drawing pictures … It’s not art, it’s fun
Kelvin Sung
University of Washington, Bothell
(* Use/Modification with permission based on Larry Snyder’s CSE120 )
© Lawrence Snyder 2004

2. Review from Last Time …
Digital information can be processed by machines
Since Hollerith digitized census data in 1890 we’ve come a long way: computers, transistors and integrated circuits, PCs, Internet, WWW, and … each had a huge effect
5/16/2019
Kelvin Sung (Use/Modify with permission from © Larry Snyder, CSE)

3. Processing … It’s our main programming language
“Processing” is kind of a dumb name, but it is a good (and fun) language
It’s a language for programming graphical and image-based computations
More fun than programming an operating system
Easier to do because we “see” what’s happening
5/16/2019
Kelvin Sung (Use/Modify with permission from © Larry Snyder, CSE)

4. Short Interrupt: Grab Processing
If you have a personal computer that is convenient to do homework on, then grab a copy of the Processing system and put it on your machine … improve your convenience!
Grab it at:
You will want “Windows” or “Mac” versions
Following installation instructions … it takes less than 5 minutes and then you can work on your own computer!
5/16/2019
Kelvin Sung (Use/Modify with permission from © Larry Snyder, CSE)

5. What You See When you start up the Processing system… Run New Save
Stop
Open
Export
file name
programming window
5/16/2019
Kelvin Sung (Use/Modify with permission from © Larry Snyder, CSE)

6. Add Some Code Type in instructions that you will learn shortly
Then run your program
5/16/2019
Kelvin Sung (Use/Modify with permission from © Larry Snyder, CSE)

7. Looking At Simpler Code
Drawing a snow angel is straightforward …
5/16/2019
Kelvin Sung (Use/Modify with permission from © Larry Snyder, CSE)

8. Looking At Simpler Code
Drawing a snow angel is straightforward …
Demo of code here
Just Do It!
5/16/2019
Kelvin Sung (Use/Modify with permission from © Larry Snyder, CSE)

9. Coding Is ALL Detail Notice everything!
 Two Functions, One Common Form:
void <name> ( ) {
} all symbols + placement, matter
 Every statement ends with a semicolon (;)
 The software colors text it understands – helpful
 Some functions include stuff inside parentheses; these are called arguments
 If a function has arguments, each position has a specific meaning: size(<width>, <height>);
stroke(<red value>, <green value>, <blue value>);
 If your cursor is by a closing parenthesis or brace, the matching parenthesis or brace is highlighted
Keywords are highlighted in blue
Processing is case sensitive; notice!
5/16/2019
Kelvin Sung (Use/Modify with permission from © Larry Snyder, CSE)

10. The Color Purple
Colors in most Web programming are given as three values: RGB, for red, green, blue
The Color Purple, for example, is:  128,0,128  
These positions are the intensity of the little lights that make up a pixel on the screen
The least intensity is 0, that is, off
The greatest intensity is 255, maximum brightness
Amazingly, the three max RGB colors make white
So, purple is ½ intensity of Red, no Green, and ½ intensity of Blue … makes sense
5/16/2019
Kelvin Sung (Use/Modify with permission from © Larry Snyder, CSE)

11. Questions about “Iron Rich Snow”
The angel is on an rust-colored background specified by: background(192, 64, 0); …
which means?
Stroke sets line color: stroke(255,255,255);
Suppose the angel is “iron
rich” and the snow white
Fill sets color of object:
fill(128, 0, 128);
5/16/2019
Kelvin Sung (Use/Modify with permission from © Larry Snyder, CSE)

12. It’s All The Same
When the values for RGB are all the same, it’s some color of gray, or white, or black
Since writing background(255,255,255) is kind of a drag, Processing allows us to give just one argument; so background(255) is equivalent to giving all three 255s
What colors are these backgrounds?
background(255,0,0);
background(64);
background(0,0,64);
5/16/2019
Kelvin Sung (Use/Modify with permission from © Larry Snyder, CSE)

13. Simple Shapes Make Robots
Reas and Fry, in their book, show us a cute robot they programmed using simple shapes
They give their code
and we can see how they
built it
To make the point that
all code must “make
sense” – its not gibberish –
lets look at it even though
we don’t know Processing
yet
5/16/2019
Kelvin Sung (Use/Modify with permission from © Larry Snyder, CSE)

14. Robot Code, 1
5/16/2019
Kelvin Sung (Use/Modify with permission from © Larry Snyder, CSE)

15. Robot Code, 2
5/16/2019
Kelvin Sung (Use/Modify with permission from © Larry Snyder, CSE)

16. Knowing Only About Color …
We “improve” the robot by adding some color
Do it in a demo
Just Do It!
5/16/2019
Kelvin Sung (Use/Modify with permission from © Larry Snyder, CSE)