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 3, 2018

2. Adding R, G, and B Values http://en.wikipedia.org/wiki/RGB
December 3, 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 3, 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 3, 2018

5. Doug Jacobson's RGB Hex Triplet Color Chart
December 3, 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 3, 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 3, 2018

8. Gamma Correction Gamma half black half red (127, 0, 0)
December 3, 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 3, 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 3, 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 3, 2018

12. ppm Example P3
# feep.ppm
4 4 15
December 3, 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 3, 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 3, 2018

15. Vector Operations b a b+a a b Vector Sum Vector Difference c d -d c-d
December 3, 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 3, 2018

17. Vector Length
Vector a =( xa, ya )
||a|| a ya xa
December 3, 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 3, 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 3, 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 3, 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 3, 2018

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

23. Computing the Cross Product
December 3, 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 3, 2018

25. Lerp Demo p = (1 – t) a + t b = a + t(b – a) b t = 1 t = .75 t = .5
December 3, 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 3, 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 3, 2018

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

29. Barycentric Coordinates as Areas
(x,y)
where A is the area of the
triangle.
 +  +  = 1 c b
December 3, 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 3, 2018

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

32. Triangle Assignment
December 3, 2018