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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 www.physics.udel.edu December 31, 2018

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

Computing the Cross Product December 31, 2018

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

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

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

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

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

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

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

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

Triangle Assignment http://www.ccs.neu.edu/home/fell/CSU540/programs/CSU540ColorTriangle.html December 31, 2018