The document outlines temporary office hours and class activities for manipulating light pixels and colors using Processing. It details basic shapes, color modes, and the differences between standard and retina display image formats. Students are assigned readings from Shiffman's work to prepare for the next class.

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