Computer Graphics Lecture 2 Doç. Dr. Mehmet Gokturk
Mathematical Foundations l Hearn and Baker (A1 A4) appendix gives good review l Some of the mathematical tools l Trigonometry l Vector spaces l Points, vectors, and coordinates l Dot and cross products l Linear transforms and matrices M. Gokturk 2
2D Geometry l Know your high school geometry: l Total angle around a circle is 360 or 2π radians l When two lines cross: l Opposite angles are equivalent l Angles along line sum to 180 l Similar triangles: l All corresponding angles are equivalent M. Gokturk 3
Trigonometry l Sine: opposite over hypotenuse l Cosine: adjacent over hypotenuse l Tangent: opposite over adjacent l Unit circle definitions: l sin (Θ) = x l cos (Θ) = y l tan (Θ) = x/y l Etc (x, y) M. Gokturk 4
Slope-intercept Line Equation Slope = m = rise / run Slope = (y - y1) / (x - x1) = (y2 - y1) / (x2 - x1) Solve for y: y = [(y2 - y1)/(x2 - x1)]x + [-(y2-y1)/(x2 - x1)]x1 + y1 or: y = mx + b y P = (x, y) P2 = (x2, y2) P1 = (x1, y1) M. Gokturk 5
Parametric Line Equation l Given points P1 = (x1, y1) and P2 = (x2, y2) x = x1 + t(x2 - x1) y = y1 + t(y2 - y1) l When: l t=0, we get (x1, y1) l t=1, we get (x2, y2) l (0<t<1), we get points on the segment between (x1, y1) and (x2, y2) y P2 = (x2, y2) P1 = (x1, y1) x M. Gokturk 6
Other helpful formulas l Length = sqrt ((x2 - x1) 2 + (y2 - y1) 2 ) l Midpoint, p2, between p1 and p3 p2 = ((x1 + x3) / 2, (y1 + y3) / 2)) l Two lines are perpendicular if: M1 = -1/M2 cosine of the angle between them is 0 M. Gokturk 7
Coordinate Systems Grasp z-axis with hand Roll fingers from positive x-axis towards positive y-axis Thumb points in direction of z-axis Y Y Z X X Left-handed coordinate system Z Right-handed coordinate system M. Gokturk 8
Points l Points support these operations l Point-point subtraction: Q - P = v l Result is a vector pointing from P to Q l Vector-point addition: l Result is a new point P + v = Q l Note that the addition of two points is not defined Q v P M. Gokturk 9
Vectors l We commonly use vectors to represent: l Points in space (i.e., location) l Displacements from point to point l Direction (i.e., orientation) M. Gokturk 10
Vector Spaces l Two types of elements: l Scalars (real numbers): α, β, γ, δ, l Vectors (n-tuples): u, v, w, l Operations: l Addition l Subtraction l Dot Product l Cross Product l Norm M. Gokturk 11
Vector Addition/Subtraction l operation u + v, with: l Identity 0 v + 0 = v l Inverse - v + (-v) = 0 l Vectors are arrows rooted at the origin l Addition uses the parallelogram rule : y u+v y v v u u x -v u-v x M. Gokturk 12
Scalar Multiplication l Scalar multiplication: l Distributive rule: α(u + v) = α(u) + α(v) (α + β)u = αu + βu l Scalar multiplication streches a vector, changing its length (magnitude) but not its direction M. Gokturk 13
Dot Product l The dot product or, more generally, inner product of two vectors is a scalar: l Useful for many purposes v 1 v 2 = x 1 x 2 + y 1 y 2 + z 1 z 2 (in 3D) l Computing the length (Euclidean Norm) of a vector: length(v) = v = sqrt(v v) l l l Normalizing a vector, making it unit-length: v = v / v Computing the angle between two vectors: u v = u v cos(θ) Checking two vectors for orthogonality l u v = 0.0 v u θ M. Gokturk 14
Dot Product l Projecting one vector onto another l If v is a unit vector and we have another vector, w l We can project w perpendicularly onto v w v l And the result, u, has length u w v u = w cos(θ ) v w w = v w = v w M. Gokturk 15
Dot Product l Is commutative u v = v u l Is distributive with respect to addition u (v + w) = u v + u w M. Gokturk 16
M. Gokturk 17 Cross Product l The cross product or vector product of two vectors is a vector: l The cross product of two vectors is orthogonal to both l Right-hand rule dictates direction of cross product = 1 2 2 1 1 2 2 1 1 2 2 1 2 1 ) ( y x y x z x z x z y z y v v
Cross Product Right Hand Rule l Orient your right hand such that your palm is at the beginning of A and your fingers point in the direction of A l Twist your hand about the A-axis such that B extends perpendicularly from your palm l As you curl your fingers to make a fist, your thumb will point in the direction of the cross product http://www.phy.syr.edu/courses/video/righthandrule/index2.html M. Gokturk 18
Triangle Arithmetic l Consider a triangle, (a, b, c) l a,b,c = (x,y,z) tuples l Surface area = s a = ½ * (b a) X (c-a) l Unit normal = (1/2s a ) * (b-a) X (c-a) b a c M. Gokturk 19
Vector Spaces l A linear combination of vectors results in a new vector: v = α 1 v 1 + α 2 v 2 + + α n v n l If the only set of scalars such that l l α 1 v 1 + α 2 v 2 + + α n v n = 0 is α 1 = α 2 = = α 3 = 0 then we say the vectors are linearly independent The dimension of a space is the greatest number of linearly independent vectors possible in a vector set For a vector space of dimension n, any set of n linearly independent vectors form a basis M. Gokturk 20
Vector Spaces: Basis Vectors l Given a basis for a vector space: l Each vector in the space is a unique linear combination of the basis vectors l The coordinates of a vector are the scalars from this linear combination l If basis vectors are orthogonal and unit length: l Vectors comprise orthonormal basis l Best-known example: Cartesian coordinates l Note that a given vector v will have different coordinates for different bases M. Gokturk 21
Lines l (P1,P2) l Drawing lines l On paper with pencil l On screen? l Rasterization M. Gokturk 22
Line Drawing l Scan-conversion or rasterization l Due to the scanning nature of raster displays l Algorithms are fundamental to both 2-D and 3-D computer graphics l Transforming the continuous into this discrete (sampling) l Line drawing was easy for vector displays l l Most incremental line-drawing algorithms were first developed for pen-plotters M. Gokturk 23
The Ideal Line??? l The best we can do is a discrete approximation of an ideal line. 1. Important line qualities: l l l l l Continuous appearence Uniform thickness and brightness Accuracy (Turn on the pixels nearest the ideal line) Speed (How fast is the line generated) M. Gokturk 24
Simple Line l Based on the simple slope-intercept algorithm from algebra y = m x + b M. Gokturk 25
Simple Line Code public void linesimple(int x0, int y0, int x1, int y1, Color color) { } int pix = color.getrgb(); int dx = x1 - x0; int dy = y1 - y0; raster.setpixel(pix, x0, y0); if (dx!= 0) { } float m = (float) dy / (float) dx; float b = y0 - m*x0; dx = (x1 > x0)? 1 : -1; while (x0!= x1) { } x0 += dx; y0 = Math.round(m*x0 + b); raster.setpixel(pix, x0, y0); SEE THE EXAMPLE M. Gokturk 26
results for slopes > 1????? l Problem: linesimple( ) does not give satisfactory results for slopes > 1 l Solution: symmetry M. Gokturk 27
Solution Code public void lineimproved(int x0, int y0, int x1, int y1, Color color) { int pix = color.getrgb(); int dx = x1 - x0; int dy = y1 - y0; raster.setpixel(pix, x0, y0); if (Math.abs(dx) > Math.abs(dy)) { // slope < 1 float m = (float) dy / (float) dx; // compute slope float b = y0 - m*x0; dx = (dx < 0)? -1 : 1; while (x0!= x1) { x0 += dx; raster.setpixel(pix, x0, Math.round(m*x0 + b)); } } else if (dy!= 0) { // slope >= 1 float m = (float) dx / (float) dy; // compute slope float b = x0 - m*y0; dy = (dy < 0)? -1 : 1; while (y0!= y1) { y0 += dy; raster.setpixel(pix, Math.round(m*y0 + b), y0); } } SEE THE EXAMPLE M. Gokturk 28
Optimize Inner Loops l l l Optimize those code fragments where the algorithm spends most of its time Often these fragments are inside loops Overall code organization: linemethod( ){ // 1. general set up // 2. special case set up } while (notdone) { } // 3. inner loop M. Gokturk 29
Optimize Inner Loops l remove unnecessary method invocations l replace Math.round(m*x0 + b) with (int)(m*x0 + b + 0.5) Does this always work? use incremental calculations Consider the expression l y = (int)(m*x + b + 0.5) l The value of y is known at x 0 (i.e. it is y 0 + 0.5) Future values of y can be expressed in terms of previous values with a difference equation: l y i+1 = y i + m; or y i+1 = y i - m; M. Gokturk 30
public void linedda(int x0, int y0, int x1, int y1, Color color) { int pix = color.getrgb(); int dy = y1 - y0; int dx = x1 - x0; float t = (float) 0.5; // offset for rounding raster.setpixel(pix, x0, y0); if (Math.abs(dx) > Math.abs(dy)) { // slope < 1 float m = (float) dy / (float) dx; // compute slope t += y0; dx = (dx < 0)? -1 : 1; m *= dx; while (x0!= x1) { x0 += dx; // step to next x value t += m; // add slope to y value raster.setpixel(pix, x0, (int) t); } } else { // slope >= 1 float m = (float) dx / (float) dy; // compute slope t += x0; dy = (dy < 0)? -1 : 1; m *= dy; while (y0!= y1) { y0 += dy; // step to next y value t += m; // add slope to x value raster.setpixel(pix, (int) t, y0); } SEE THE } EXAMPLE } M. Gokturk 31
DDA Algorithm l Digital Differential Analyzer y2 = y1 + m Keeps adding the slope to nearest integer Can we improve it? M. Gokturk 32
Better Approach Bresenham s l Decide which circle is to be filled fraction += m; if (fraction >= 1) { y = y + 1; fraction -= 1; } fraction = 0.5; // Initial fraction += m; // Increment if 0.5 <= m <= 1 then fraction >= 1 Plot(x2,y1+1) if 0 < m < 0.5 then fraction < 1 Plot(x2,y1) BENCHMARK M. Gokturk 33
Bresenham s public void linebresenham(int x0, int y0, int x1, int y1, Color color) { int pix = color.getrgb(); int dy = y1 - y0; int dx = x1 - x0; int stepx, stepy; if (dy < 0) { dy = -dy; stepy = -1; } else { stepy = 1; } if (dx < 0) { dx = -dx; stepx = -1; } else { stepx = 1; } dy <<= 1; // dy is now 2*dy dx <<= 1; // dx is now 2*dx raster.setpixel(pix, x0, y0); if (dx > dy) { int fraction = dy - (dx >> 1); // same as 2*dy - dx while (x0!= x1) { if (fraction >= 0) { y0 += stepy; fraction -= dx; // same as fraction -= 2*dx 2*dy } x0 += stepx; fraction += dy; // same as fraction -= raster.setpixel(pix, x0, y0); } } else { int fraction = dx - (dy >> 1); while (y0!= y1) { if (fraction >= 0) { x0 += stepx; fraction -= dy; } y0 += stepy; fraction += dx; raster.setpixel(pix, x0, y0); } } M. Gokturk 34 }
Other Issues l Non-integer endpoints (occurs frequently when rendering 3D lines) l Can we make lines appear less "jaggy"? l What if a line endpoint lies outside the viewing area? l How do you handle thick lines? l Optimizations for connected line segments l Lines show up in the strangest places M. Gokturk 35
Drawing Circles use this equation to compute the pixels of the circle A circle exhibits a great deal of symmetry M. Gokturk 36
More Symmetry We can find any point's symmetric complement about these lines by permuting the indices. For example the point (x,y) has a complementary point (y,x) about the line x=y. And the total set of complements for the point (x,y) are {(x,-y), (-x,y), (-x,-y), (y,x), (y,-x), (-y,x), (-y,-x)} M. Gokturk 37
Bresenham s Algorithm EXAMPLE M. Gokturk 38
Other Primitives l Read Hearn Baker on How to Draw an Ellipse l Bresenham s algorithm fits as well l Hyperbolas l We will talk more on parametric curves later. Bresenham s and modified versions of it (midpoint) can be used for all parametric curves. M. Gokturk 39
Next Week l 2D transformations M. Gokturk 40
Assignment l Implement DDA and Bresenham s line drawing algorithms l Draw an arbitrary artwork (use your own intuition) l JAVA and/or OPENGL will be used l Turn in your assignments timely l WILL BE IMPLEMENTED ON ANDROID M. Gokturk 41