1. Prof. Harriet Fell Spring 2007 Lecture 19 – February 22, 2007
CS U540 Computer Graphics
Prof. Harriet Fell
Spring 2007
Lecture 19 – February 22, 2007
December 31, 2018

2. Adding R, G, and B Values http://en.wikipedia.org/wiki/RGB
December 31, 2018

3. RGB Color Cube (0, 0, 1) (0, 1, 1) (1, 0, 1) (1, 1, 1) (1, 0, 0)
(1, 1, 0)
(0, 0, 1)
(0, 1, 1)
(0, 1, 0)
(1, 0, 1)
(1, 0, 0)
December 31, 2018

4. RGB Color Cube The Dark Side
(0, 0, 0)
(1, 1, 0)
(0, 0, 1)
(0, 1, 1)
(0, 1, 0)
(1, 0, 1)
(1, 0, 0)
December 31, 2018

5. Doug Jacobson's RGB Hex Triplet Color Chart
December 31, 2018

6. Making Colors Darker (1, 0, 0) (.5, 0, 0) (0, 0, 0) (0, 1, 0)
(0, .5, 0)
(0, 0, 0)
(0, 0, 1)
(0, 0, .5)
(0, 0, 0)
(1, 1, 0)
(0, .5, .5)
(0, 0, 0)
(1, 0, 1)
(.5, 0, .5)
(0, 0, 0)
(1, 1, 0)
(.5, .5, 0)
(0, 0, 0)
December 31, 2018

7. Getting Darker, Left to Right
for (int b = 255; b >= 0; b--){
c = new Color(b, 0, 0); g.setPaint(c);
g.fillRect(800+3*(255-b), 50, 3, 150);
c = new Color(0, b, 0); g.setPaint(c);
g.fillRect(800+3*(255-b), 200, 3, 150);
c = new Color(0, 0, b); g.setPaint(c);
g.fillRect(800+3*(255-b), 350, 3, 150);
c = new Color(0, b, b); g.setPaint(c);
g.fillRect(800+3*(255-b), 500, 3, 150);
c = new Color(b, 0, b); g.setPaint(c);
g.fillRect(800+3*(255-b), 650, 3, 150);
c = new Color(b, b, 0); g.setPaint(c);
g.fillRect(800+3*(255-b), 800, 3, 150); }
December 31, 2018

8. Gamma Correction Gamma half black half red (127, 0, 0)
December 31, 2018

9. Making Pale Colors (1, 0, 0) (1, .5, .5) (1, 1, 1) (0, 1, 0)
(.5, 1, .5)
(1, 1, 1)
(0, 0, 1)
(.5, .5, 1)
(1, 1, 1)
(1, 1, 0)
(.5, 1, 1)
(1, 1, 1)
(1, 0, 1)
(1, .5, 1)
(1, 1, 1)
(1, 1, 0)
(1, 1, .5)
(1, 1, 1)
December 31, 2018

10. Getting Paler, Left to Right
for (int w = 0; w < 256; w++){
c = new Color(255, w, w); g.setPaint(c);
g.fillRect(3*w, 50, 3, 150);
c = new Color(w, 255, w); g.setPaint(c);
g.fillRect(3*w, 200, 3, 150);
c = new Color(w, w, 255); g.setPaint(c);
g.fillRect(3*w, 350, 3, 150);
c = new Color(w, 255, 255); g.setPaint(c);
g.fillRect(3*w, 500, 3, 150);
c = new Color(255,w, 255); g.setPaint(c);
g.fillRect(3*w, 650, 3, 150);
c = new Color(255, 255, w); g.setPaint(c);
g.fillRect(3*w, 800, 3, 150); }
December 31, 2018

11. Portable Pixmap Format (ppm)
A "magic number" for identifying the file type.
A ppm file's magic number is the two characters "P3".
Whitespace (blanks, TABs, CRs, LFs).
A width, formatted as ASCII characters in decimal.
Whitespace.
A height, again in ASCII decimal.
The maximum color value again in ASCII decimal.
Width * height pixels, each 3 values between 0 and maximum value.
start at top-left corner; proceed in normal English reading order
three values for each pixel for red, green, and blue, resp.
0 means color is off; maximum value means color is maxxed out
characters from "#" to end-of-line are ignored (comments)
no line should be longer than 70 characters
December 31, 2018

12. ppm Example P3
# feep.ppm
4 4 15
December 31, 2018

13. private void saveImage() { String outFileName = “my.ppm";
File outFile = new File(outFileName);
int clrR, clrG, clrB;
try {
PrintWriter out = new PrintWriter(new BufferedWriter(new FileWriter(outFile)));
out.println("P3");
out.print(Integer.toString(xmax-xmin+1)); System.out.println(xmax-xmin+1);
out.print(" ");
out.println(Integer.toString(ymax-ymin+1)); System.out.println(ymax-ymin+1);
out.println("255");
for (int y = ymin; y <= ymax; y++){
for (int x = xmin; x <= xmax; x++) {
// compute clrR, clrG, clrB
out.print(" "); out.print(clrR);
out.print(" "); out.print(clrG);
out.print(" "); out.println(clrB); }
out.close();
} catch (IOException e) {
System.out.println(e.toString());
December 31, 2018

14. Vectors A vector describes a length and a direction. a b a = b
a zero length vector a b 1
a unit vector
a = b
December 31, 2018

15. Vector Operations b a b+a a b Vector Sum Vector Difference c d -d c-d
December 31, 2018

16. Cartesian Coordinates
Any two non-zero, non-parallel 2D vectors form a 2D basis.
Any 2D vector can be written uniquely as a linear combination of two 2D basis vectors.
x and y (or i and j) denote unit vectors parallel to the x-axis and y-axis.
x and y form an orthonormal 2D basis.
a = xax + yay
a =( xa, ya) or
x, y and z form an orthonormal 3D basis.
or a =(ax,ay)
December 31, 2018

17. Vector Length
Vector a =( xa, ya )
||a|| a ya xa
December 31, 2018

18. Dot Product Dot Product a =( xa, ya ) b =( xb, yb )
ab = xa xb + ya yb
ab = abcos()
xa = acos(+)
xb = bcos()
xa = asin(+)
xb = bsin() a b  
December 31, 2018

19. Projection a =( xa, ya ) b =( xb, yb ) ab = abcos()
The length of the projection of a onto b is given by a b 
ab
December 31, 2018

20. 3D Vectors This all holds for 3D vectors too.
a =( xa, ya, za ) b =( xb, yb, zb )
ab = xa xb + ya yb + za zb
ab = abcos()
December 31, 2018

21. Vector Cross Product axb axb is perpendicular to a and b.
Use the right hand rule to determine the direction of axb. b  a
Image from
December 31, 2018

22. Cross Product and Area axb b b   ||a|| a a
||a||x||b|| = area pf the parallelogram.
December 31, 2018

23. Computing the Cross Product
December 31, 2018

24. Linear Interpolation LERP: /lerp/, vi.,n.
Quasi-acronym for Linear Interpolation, used as a verb or noun for the operation. “Bresenham's algorithm lerps incrementally between the two endpoints of the line.”
p = (1 – t) a + t b = a + t(b – a) a b L tL
(1-t)L
December 31, 2018

25. p = (1 – t) a + t b = a + t(b – a) b t = 1 t = .75 t = .5 t = .25L a
December 31, 2018

26. Triangles a If (x, y) is on the edge ab,
(x, y) = (1 – t) a + t b = a + t(b – a).
Similar formulas hold for points on the other edges.
If (x, y) is in the triangle:
(x, y) =  a +  b +  c
 +  +  = 1
( ,  ,  ) are the
Barycentric coordinates of (x, y).
(x,y) c b
December 31, 2018

27. Triangles p = a + (b-a) + (c-a) p = (1-  - )a + b + c
 = 2
 = 0
 = 1
 = -1
 = 2
p = (1-  - )a + b + c
 = 1-  - 
p = p(, , ) =
a + b + c
 = 1 c
c-a
 = 0 b a
b-a
Barycentric coordinates
 = -1
 = 0
 = 1
December 31, 2018

28. Computing Barycentric Coordinates
(x,y)
(x,y) b c
December 31, 2018

29. Barycentric Coordinates as Areas
(x,y)
where A is the area of the
triangle.
 +  +  = 1 c b
December 31, 2018

30. 3D Triangles a where A is the area of the triangle. c  +  +  = 1 b
This all still works in 3D.
(x,y,z)
where A is the area of the
triangle.
 +  +  = 1 c b
But how do we find the areas of the triangles?
December 31, 2018

31. 3D Triangles - Areas
axb b B C   a A
December 31, 2018

32. Triangle Assignment
December 31, 2018