2D Graphics Introduction and Pixel Manipulation Overview

Computer Graphics Computer Graphics Chapter Chapter 2 2 First Lecture First Lecture

Two Two- -Dimensional Dimensional Graphics Graphics

Introduction Introduction In In order order to must must determine determine the ame ame buffer buffer that his his task task we we must ing ing algorithms algorithms. . Both Both the the frame given given a a two two- -dimensional the the origin origin at at the to draw draw a a picture the corresponding corresponding points that make make up up the must write write scan scan conversion picture on on a a raster raster display, points in in the the picture picture. . To conversion point display, we we the fr fr To perform perform t t point plott plott frame buffer dimensional coordinates the lower lower left left corner buffer and and the coordinates system corner. . the display display screen screen are system with are with

2 2. .1 1 Pixels, Pixels, Coordinates, Coordinates, and and Colors Colors To To create create a a two oint oint in in the the image in in 2 2D D can can be coordinates coordinates. . Colors merically merically. . However, ers ers to to points points or So So we we need need to ordinate ordinate systems, o o points, points, and numbers numbers to two- -dimensional dimensional image, image is is assigned assigned a a color be identified identified by by a a pair Colors can can also However, the the assignment or colors colors is is somewhat to spend spend some some time systems, which which associate and color color models, models, which to colors colors. . image, each color. . A A point pair of of numerical numerical also be be specified specified nu assignment of somewhat arbitrary time studying studying co associate numbers which associate each p p point nu of numb numb arbitrary. . co numbers t t associate

2.1.1 2.1.1 Pixel Pixel Coordinates Coordinates A A digital digital image s s of of pixels pixels. . A A pixel ecified ecified by by saying contains contains it it. . In In terms be be identified identified by umn umn number number and , , the the pixel pixel with column column number number 3 3 and image is is made pixel in in such saying which terms of by a a pair and the with coordinates coordinates ( (3 3, ,5 5) ) would and row row number made up such an which column column and of coordinates, coordinates, a a pixel pair of of integers integers giving the row row number number. . For up of of rows rows and an image image can and which and column column can be which row pixel can giving the the col For example example would lie be sp row can col sp lie in in number 5 5. .

2.1.1 2.1.1 Pixel Pixel Coordinates Coordinates Conventionally Conventionally, , columns left left to to right, right, starting systems, systems, including including the this this chapter, chapter, number m, m, starting starting from columns are starting with with zero the ones number rows from zero zero. . are numbered numbered from zero. . Most Most graphics ones we we will will study rows from from top top to from graphics study in in to botto botto

2.1.1 2.1.1 Pixel Pixel Coordinates Coordinates

2.1.1 2.1.1 Pixel Pixel Coordinates Coordinates To To draw lotting lotting procedure procedure is is required availability availability of of the draw a a point point on the Matlab Matlab panel, required. . We the command command: : on the panel, a a point We assume assume the point p p the plot plot (x , y , color) (x , y , color)

2.1.1 2.1.1 Pixel Pixel Coordinates Coordinates The The drawing drawing on down, down, and and from ates ates on on the figure figure below below: : on the from left the screen screen (VGA the screen screen starts left to to right right. . The (VGA 640 starts from The pixel pixel coordin 640 480 480) ) is is shown from top coordin shown in in top to to X (0,0) Y (639,479)

Scan Scan conversion conversion The The process process of ics ics objects objects as led led Scan Scan conversion of representing representing continuous as a a collection collection of conversion. . continuous graph of discrete discrete pixel graph pixel cal cal Figure 2.1 Block diagram of a computer with raster display. Figure 2.1 Block diagram of a computer with raster display.

Line Line Drawing Drawing Algorithms Algorithms Many Many computer computer pictures ight ight line line segments segments. . A A line d d by by turning turning on order order to to draw draw a a line, ne ne which which pixels pixels lie e e the the best best approximation approximation to are composed composed of line segment segment is is displaye on a a string string of of adjacent adjacent pixels line, it it is is necessary necessary to lie nearest nearest the the line to the the desired pictures are of stra stra displaye pixels. . In In to determi determi line and and provid desired line provid line. . (a) Low Resolution (b) High Resolution

Line Line Drawing Drawing Algorithms Algorithms (a) Low Resolution (b) High Resolution Above Above figure that that the the accuracy accuracy and e e resolution resolution of 1024 1024) ) draw draw lines art art and and end end accurately with with gaps gaps. . Line ystems ystems are are implemented implemented in in hardware xels xels comprising comprising the the line t t low low cost cost display display systems to to accomplish accomplish line line drawing ne ne should should be be accurate, accurate, fast, figure illustrates illustrates a a line and quality of the the display lines that accurately. . Lower Line drawing drawing routines line drawn drawn on quality of of the display device device. . High that look look straight Lower resolution routines in in high hardware that line when when it it is is given systems still still relay drawing. . In In either fast, and and easy on a a raster raster display the displayed displayed line High resolution resolution displays straight and and continuous, continuous, and resolution displays displays may high performance performance graphics that rapidly rapidly generates given the the two two end relay on on slower slower software either case, case, the the line easy to to implement implement. . display. . Observe line depends depends on displays ( (1024 and that may draw draw lines graphics s s generates the end points points. . Mos software routines line drawing drawing routi Observe on th th 1024 that st st lines the pi pi Mos routines routi

Horizontal Horizontal and and Vertical Vertical Lines Lines: : The The simplest simplest lines 1 1. . Horizontal Horizontal Lines The The screen screen coordinates ained ained by by keeping keeping the enting enting the the (x) lines to Lines: : coordinates of the value (x) value value by to draw draw are are horizontal horizontal and and vertical vertical lines lines. . of the the points value of of (y) by one one unit unit as points on (y) constant constant and as in in algorithm algorithm ( (1 1) ). . on a a horizontal horizontal line and repeatedly repeatedly increm line are are obt increm obt Algorithm ( Algorithm (1 1): ): Input: Input: Xstart Xstart, , Xend Xend, , Yspecified Yspecified. . Output Output: Horizontal line. : Horizontal line. { { for for x= x= Xstart Xstart to to Xend Xend plot } } If Xstart Xstart > > Xend loop at loop at Algorithm(1 Algorithm(1). ). plot (x , (x , Yspecified Yspecified , color); , color); If Xend then replace then replace Xend Xend by by Xstart Xstart and vice versa in for and vice versa in for

Horizontal Horizontal and and Vertical Vertical Lines Lines: : Algorithm ( Algorithm (1 1): ): Input: Input: Xstart Xstart, , Xend Xend, , Yspecified Yspecified. . Output Output: Horizontal line. : Horizontal line. { { for for x= x= Xstart Xstart to to Xend Xend plot } } plot (x , (x , Yspecified Yspecified , color); , color); If If Xstart Xstart > loop at loop at Algorithm(1 Algorithm(1). ). > Xend Xend then replace then replace Xend Xend by by Xstart Xstart and vice versa in for and vice versa in for

Horizontal Horizontal and and Vertical Vertical Lines Lines: : 2 2. . Vertical Vertical Lines The screen coordinates of the points on a vertical lin e are obtained by keeping the value of (x) constant a nd repeatedly incrementing the (y) value by one unit as in algorithm (2). Algorithm Algorithm ( (2 2): ): Input: Ystart,Yend, Xspecified. Output: Vertical line. { for y= Ystart to Yend plot (Xspecified , y , color); } Lines: : If If Ystart Ystart > loop at algorithm ( loop at algorithm (2 2). ). > Yend Yend then replace then replace Yend Yend by by Ystart Ystart and vice versa in for and vice versa in for

Horizontal Horizontal and and Vertical Vertical Lines Lines: : Algorithm Algorithm ( (2 2): ): Input: Ystart,Yend, Xspecified Output: Vertical line. { for y= Ystart to Yend plot (Xspecified , y , color); } If If Ystart Ystart > loop at algorithm ( loop at algorithm (2 2). ). > Yend Yend then replace then replace Yend Yend by by Ystart Ystart and vice versa in for and vice versa in for

Horizontal Horizontal and and Vertical Vertical Lines Lines: : 3 3. . Diagonal Diagonal Lines To draw a diagonal line with a slope equal to (+1), w e need only repeatedly increment by one unit both x and y values from the start to end pixels as shown in algorithm (3). Lines: : Algorithm Algorithm (3 Input: Xstart,Ystart, Xend, Yend. i=0 Output: Diagonal line. { while (xstart + i) Xend ) { plot (xstart + i, ystart + i, color); i= i+1; } } (3): ): To draw a line with slop equals to ( To draw a line with slop equals to (- -1 1), replace ( algorithm ( algorithm (3 3). ). ), replace (ystart+i ystart+i) by ( ) by (ystart ystart- -i i) in ) in

Algorithm Algorithm ( (3 3): ): Input: Xstart,Ystart, Xend, Yend. i=0 Output: Diagonal line. { while (xstart + i) Xend ) { plot (xstart + i, ystart + i, color); i= i+1; } } To draw a line with slop equals to ( To draw a line with slop equals to (- -1), replace ( algorithm (3). algorithm (3). 1), replace (ystart+i ystart+i) by ( ) by (ystart ystart- -i i) in ) in

3 3. . Diagonal Diagonal Lines What are the things a good line-drawing algorithms should do wel l: 1. straight Lines must be appear as straight lines. 2. Lines must start and end accurately. 3. Lines should have constant brightness along their length. 4. Lines should be drawn rapidly. Lines: : Note Note 1. Vertical ,horizontal lines ,no jaggies. 2. Sloped lines end up having jaggies. 3. Rounded pixel value is off actual line path (jaggy). 4. Rounding may be required computed point (10.48,20.51) rounded to (10,21). Jaggy lines