1. ©College of Computer and Information Science, Northeastern UniversityFebruary 21, 20161 CS U540 Computer Graphics Prof. Harriet Fell Spring 2009 Lecture 19 – February 12, 2009

2. ©College of Computer and Information Science, Northeastern UniversityFebruary 21, 20162 Vectors A vector describes a length and a direction. a b a = b a zero length vector 1 a unit vector

3. ©College of Computer and Information Science, Northeastern UniversityFebruary 21, 20163 Vector Operations a a b b b+a -d c-d Vector Sum a -a c Vector Difference d

4. ©College of Computer and Information Science, Northeastern UniversityFebruary 21, 20164 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 = x a x + y a y a =( x a, y a ) or x, y and z form an orthonormal 3D basis. or a =(a x,a y )

5. ©College of Computer and Information Science, Northeastern UniversityFebruary 21, 20165 Vector Length Vector a =( x a, y a ) yaya xaxa ||a|| a

6. ©College of Computer and Information Science, Northeastern UniversityFebruary 21, 20166 Dot Product a =( x a, y a ) b =( x b, y b ) a  b = x a x b + y a y b a  b =  a    b  cos(  ) a b   x a =  a  cos(  +  ) x b =  b  cos(  ) x a =  a  sin(  +  ) x b =  b  sin(  )

7. ©College of Computer and Information Science, Northeastern UniversityFebruary 21, 20167 Projection a =( x a, y a ) b =( x b, y b ) a  b =  a    b  cos(  ) The length of the projection of a onto b is given by a b  abab

8. ©College of Computer and Information Science, Northeastern UniversityFebruary 21, 20168 3D Vectors This all holds for 3D vectors too. a =( x a, y a, z a ) b =( x b, y b, z b ) a  b = x a x b + y a y b + z a z b a  b =  a    b  cos (  )

9. ©College of Computer and Information Science, Northeastern UniversityFebruary 21, 20169 Vector Cross Product axb a b  axb is perpendicular to a and b. Use the right hand rule to determine the direction of axb. Image from www.physics.udel.edu

10. ©College of Computer and Information Science, Northeastern UniversityFebruary 21, 201610 Cross Product and Area axb a b  a b  ||a|| ||a||x||b|| = area pf the parallelogram.

11. ©College of Computer and Information Science, Northeastern UniversityFebruary 21, 201611 Computing the Cross Product

12. ©College of Computer and Information Science, Northeastern UniversityFebruary 21, 201612 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

13. ©College of Computer and Information Science, Northeastern UniversityFebruary 21, 201613 Lerp Demo b a L p = (1 – t) a + t b = a + t(b – a) t =.5 t = 1 t =.25 t =.75 t = 0

14. ©College of Computer and Information Science, Northeastern UniversityFebruary 21, 201614 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). Triangles a b c (x,y)

15. ©College of Computer and Information Science, Northeastern UniversityFebruary 21, 201615 Triangles a b c b-a c-a p = a +  (b-a) +  (c-a)  = 0  = 1  = 2  = -1  = 0  = 1  = 2  = -1 Barycentric coordinates  = 1-  -  p = p( , ,  ) =  a +  b +  c  = 0 p = (1-  -  )a +  b +  c  = 1

16. ©College of Computer and Information Science, Northeastern UniversityFebruary 21, 201616 Computing Barycentric Coordinates a b c (x,y)

17. ©College of Computer and Information Science, Northeastern UniversityFebruary 21, 201617 Barycentric Coordinates as Areas a b c (x,y) where A is the area of the triangle.  +  +  = 1

18. ©College of Computer and Information Science, Northeastern UniversityFebruary 21, 201618 3D Triangles b c (x,y,z) where A is the area of the triangle.  +  +  = 1 This all still works in 3D. But how do we find the areas of the triangles? a

19. ©College of Computer and Information Science, Northeastern UniversityFebruary 21, 201619 3D Triangles - Areas axb a b   C B A

20. ©College of Computer and Information Science, Northeastern UniversityFebruary 21, 201620 Triangle Assignment http://www.ccs.neu.edu/home/fell/CSU540/programs/CSU540ColorTriangle.html

21. ©College of Computer and Information Science, Northeastern UniversityFebruary 21, 201621 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. Whitespace. The maximum color value again in ASCII decimal. Whitespace. 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

22. ©College of Computer and Information Science, Northeastern UniversityFebruary 21, 201622 ppm Example P3 # feep.ppm 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

23. ©College of Computer and Information Science, Northeastern UniversityFebruary 21, 201623 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()); }