1. From last time…
•
Temporary Office Hours!
MW 6th Period (12:50pm – 1:40pm)!
CSE 520 C, AKA “The Sky Labyrinth”!
•
If you’re new today, come see me now, after
class, or in office hours!
•
Schedule is fixed!

2. Manipulating
Light
Pixels!
& Color
CAP

5. Y
(10,10)
Origin (0,0)
X

6. Origin (0,0)
X
(10,10)
Y

7. 0,0
1,0
2,0
3,0
4,0
0,1
1,1
2,1
3,1
4,1
0,2
1,2
2,2
3,2
4,2
0,3
1,3
2,3
3,3
4,3

8. 0,0
1,0
2,0
3,0
4,0
0,1
1,1
2,1
3,1
4,1
0,2
1,2
2,2
3,2
4,2
0,3
1,3
2,3
3,3
4,3
point(3,2)

9. 0,0
1,0
2,0
3,0
4,0
0,1
1,1
2,1
3,1
4,1
0,2
1,2
2,2
3,2
4,2
0,3
1,3
2,3
3,3
4,3
line(0,3,3,0)

10. 0,0
1,0
2,0
3,0
4,0
0,1
1,1
2,1
3,1
4,1
0,2
1,2
2,2
3,2
4,2
0,3
1,3
2,3
3,3
4,3
corner: rect(0,0,5,3)

11. 0,0
1,0
2,0
3,0
4,0
0,1
1,1
2,1
3,1
4,1
0,2
1,2
2,2
3,2
4,2
0,3
1,3
2,3
3,3
4,3
center: rect(2,1,5,3)

12. 0,0
1,0
2,0
3,0
4,0
0,1
1,1
2,1
3,1
4,1
0,2
1,2
2,2
3,2
4,2
0,3
1,3
2,3
3,3
4,3
corners: rect(0,0,4,2)

13. 0,0
1,0
2,0
3,0
4,0
0,1
1,1
2,1
3,1
4,1
0,2
1,2
2,2
3,2
4,2
0,3
1,3
2,3
3,3
4,3
center: ellipse(2,1,5,3)

14. Basic Shapes
point(x, y);
rect(x, y, w, h);
rectMode(CORNER); (also CENTER,CORNERS)!
ellipse(x, y, w, h);
ellipseMode(CENTER);

15. Demo Shapes

16. Grayscale
0
0000 0000
255
1111 1111

17. Background Color
background() fills the sketch with a color
background(0);
background(255);

18. Object Color
stroke(0);
fill(115);
rect(x,y,w,h);
noStroke();
noFill();

19. Demo Grayscale

20. RGB Color
0
255
fill(255,0,0);
0
255
fill(0,255,0);
0
255
fill(0,0,255);

21. Alpha Channel
0
255
0
255
0
255

22. Demo RGB(A)

23. colorMode();
•
How does colorMode() work?!
•
Consult the reference!!
•
http://processing.org/reference/colorMode_.html

24. HSB (or V) Color
•
Hue: the “pure form” of a color!
•
Saturation: brightness or dullness!
100%
•
Brightness/Value: lightness or darkness!
100%
•
HSB Game
360°

25. Demo HSB

26. Hexadecimal
•
#ffffff
•
#000000
•
#ff0000
•
#0000ff
•
#a8a8a8
•
Pro: one single code containing all 3 colors!
•
Con: cannot capture alpha

27. Retina Display
•
http://www.apple.com/macbook-pro/featuresretina/!
•
Cuts each pixel into 4 (“pixel depth” = 2)!
•
But images are often rasterized…!
•
Why might I like the term “retina display?”

28. mario.png (26 x 26)
Standard (26 x 26)
mario.png
Retina (52 x 52)

29. refresh.png (30 x 30)
refresh@2x.png (60 x 60)
@2x to the rescue…

30. For next time…
•
Read Shiffman p. 3–16 (Pixels & Color)!
•
Read Shiffman p. 17–29 (Processing)!
•
We will install Processing on Friday