Graphics

1
Graphics

• Today graphics plays a pivotal role in computer
  systems
• Modern user interfaces are GUIs Graphical User
  Interfaces
• While you could write your own graphics functions
  from scratch, it's MUCH easier to use someone
  else's
• We'll use the easiest graphics library winbgim.h
  written by Konstantin Knizhnik
• Other C graphics libraries CMUGraphics,
  Allegro, SDL, DirectX and OpenGL

2
Coordinates in C

• Cs coordinate system is only positive, the
  origin is the top left corner of the window

3
A Simple Graphics Program

• include "winbgim.h"
• int main()
• //open a 640x480 graphics window
• initwindow(640,480)
• setcolor(WHITE)
• //Draw a white circle with center (320,240)
• //and radius 100
• circle(320,240,100)
• getch() //wait for user to press a key
  closegraph() //close graphics window
• return 0

4
A Simple Graphics Program
5
Creating and running a graphics program with
Dev-C

• Choose File New Project Empty Project OK.
  Choose a name for your new project.
• Type C code in the untitled window (like the
  simple graphics program that draws a circle)
• Save your program by choosing File Save Unit
  As.
• IMPORTANT Choose Project Project Options. In
  the Further object files or linker options field,
  enter
  -lbgi -lgdi32
• Choose Execute Compile and Run.

6
Colors in winbgim.h

• There are 16 basic colors in winbgim.h BLACK,
  BLUE, GREEN, CYAN, RED, MAGENTA, BROWN,
  LIGHTGRAY, DARKGRAY, LIGHTBLUE, LIGHTGREEN,
  LIGHTCYAN, LIGHTRED, LIGHTMAGENTA, YELLOW, WHITE
  
• The data type for the 16 colors is int
• int nColor WHITE
• setcolor(nColor)
• You can also use the integer equivalents
• setcolor(13)
• //sets the color to LIGHTMAGENTA
• For more complete information follow the link on
  the website to the winbgim.h help file

7
Colors in winbgim.h

• If you don't like the 16 "basic" colors, you can
  specify others by using RGB values
• //draw an orange circle
• setcolor(COLOR(255,155,0))
• circle(320,240,100)
• There is a chart of RGB combinations at
• http//www.pitt.edu/nisg/cis/web/cgi/rgb.html

8
Colors in winbgim.h

• Once you set the color, it "sticks." All drawing
  will continue in that color until is set to
  something else
• //draw two orange circles and one blue one
• setcolor(COLOR(255,155,0))
• circle(320,240,100)
• circle(220,140,70)
• setcolor(BLUE)
• circle(420,340,80)

9
In class practice Olympic Rings
10
Reopening your graphics project

• To open your graphics project you'll need to find
  the project file which ends in .dev
• Just the .cpp won't work (

11
for Loops

• Doing the same thing over and over
• one of three C repetition structures (the
  others are while and do-while loops)
• A for loop has
• A starting point
• A stopping point (sometimes called the control
  expression)
• A way to get from one to the other

12
A for that counts to ten

• int main()
• for(int nNum 1 nNum lt 10 nNum)
• coutltlt"Count is "ltltnNumltltendl
• system("PAUSE")
• return 0

13
The starting point

• int main()
• for(int nNum 1 nNum lt 10 nNum)
• coutltlt"Count is "ltltnNumltltendl
• system("PAUSE")
• return 0

14
The stopping point (control expression)

• int main()
• for(int nNum 1 nNum lt 10 nNum)
• coutltlt"Count is "ltltnNumltltendl
• system("PAUSE")
• return 0

15
means up by one ("increment")

• int main()
• for(int nNum 1 nNum lt 10 nNum)
• coutltlt"Count is "ltltnNumltltendl
• system("PAUSE")
• return 0
• nNum means nNumnNum1

16
Problem Use a for loop to make a series of
circles that move across the screen and grow in
size
17
Problem Use a for loop to make a series of
circles that move across the screen and grow in
size

• We'll make eight circles, so we'll use a loop
  that runs 8 times
• The x coordinate of the circle will increase to
  "move" the circle to the right.
• We'll start the x coordinate at 10, and increase
  it by 50 with each loop.
• The y coordinate of the circle will stay the
  same (240)
• The radius will start at 20 and grow by 20 each
  loop
• for(int nNum 1 nNum lt8 nNum)
• circle(10 50 nNum, 240, 20 20 nNum)

18
delay()

• We can make the circles appear one at a time by
  putting a delay in the loop
• for(int nNum 1 nNum lt8 nNum)
• circle(10 50 nNum, 240, 20 20 nNum)
• delay(500)//pause for 500 milliseconds

19
More on loops

• Loops are used for repetition, making things
  happen "over and over again"
• Better than cut and paste
• A loop says do what's inside the curly braces
  again and again and again

20
A loop that repeatedly calls a function

• for(int nI 1 nI lt5 nI)
• SomeFunction()
• Think "Go do what the function says to do" five
  times
• Notice that we don't have to use nI inside the
  curly braces of the loop

21
We can use other variables (mailboxes) besides
the one in the loop

• Here's a loop that makes a series of circles that
  move diagonally from the top left of the screen
  to the bottom right
• int nX 0
• for(int nY 0 nY lt 480 nY nY 10)
• circle(nX,nY,50)
• nX nX 13
• delay(50)

22
More loops

• Loops can count upwards, downwards or not even
  count at all
• Here's a loop that counts down from 10 to 1
• for(int nN 10 nN gt1 nN--)

23
More loops

• Loops can count upwards, downwards or not even
  count at all
• Here's a loop that counts down from 10 to 1
• for(int nN 10 nN gt1 nN--)
• Compare with a loop that goes from 1 to 10
• for(int nN 1 nN lt10 nN)

24
More loops

• Here's a loop that displays the alphabet
• for(char cLetter 'A' cLetter lt'Z' cLetter)
• coutltltcLetter

25
A while that counts to ten

• int main()
• int nNum 1
• while(nNum lt 10)
• coutltlt"Count is "ltltnNumltltendl
• nNum
• system("PAUSE")
• return 0

26
A do-while that counts to ten

• int main()
• int nNum 1
• do
• coutltlt"Count is "ltltnNumltltendl
• nNum
• while(nNum lt 10) //note semi-colon!
• system("PAUSE")
• return 0

27
If all three types of loops do the same thing,
which should I use?

• Good Style for loops
• If you know how many times the loop will repeat
  use a for, otherwise use a while or a do-while
• A do-while will always run once
• A while may never run at all

28
More loops

• Every loop has
• A starting point
• for(char cLetter 'A' cLetter lt'Z' cLetter)
• coutltltcLetter

29
More loops

• Every loop has
• A starting point
• A stopping point
• for(char cLetter 'A' cLetter lt'Z' cLetter)
• coutltltcLetter

30
More loops

• Every loop has
• A starting point
• A stopping point
• A way to get from the starting point to the
  stopping point
• for(char cLetter 'A' cLetter lt'Z' cLetter)
• coutltltcLetter

31
Converting a for loop to a while loop

• for(char cLetter 'A' cLetter lt'Z' cLetter)
• coutltltcLetter
• The while loop has the same three parts. It's
  just arranged differently
• char cLetter 'A'
• while(cLetter lt 'Z')
• coutltltcLetter
• cLetter

32
Practice Quiz Questions

• Write a loop that displays the letters of the
  alphabet in reverse order
• What's the output of this program?
• include ltiostream.hgt
• include ltstdlib.hgt
• void Mystery()
• int nNum 5
• int main()
• for(int nTimes 2 nTimes lt4 nTimes)
• Mystery()
• system("PAUSE")
• return 0
• void Mystery()

33
A loop controls what comes after it

• for(int nNum1nNumlt10nNum)
• //lots of C
• Whatever code is in the curly braces gets repeated

34
I could write it this way

• for(int nNum1nNumlt10nNum)//C
• and it would still work. The curly braces are the
  "next
• thing" after the loop

35
Now, C is confused

• for(int nNum1nNumlt10nNum)
• //lots of C

36
Now, C is confused

• for(int nNum1nNumlt10nNum)
• //lots of C
• The curly braces are no longer the "next thing"
  after the loopthe semi-colon is!

37
A common mistake

• What is the output of this program? (Hint it's
  a trick question!)
• int main()
• int nNum 0
• while( nNum lt5)
• coutltltnNumltltendl
• nNum
• system("PAUSE")
• return 0

38
A common mistake

• What is the output of this program? (Hint it's
  a trick question!)
• int main()
• int nNum 0
• while( nNum lt5)
• coutltltnNumltltendl
• nNum
• system("PAUSE")
• return 0
• Nothing! It's an infinite loop that goes
  "forever" and leaves the screen blank
• There is an extra semi-colon after the while

39
A common mistake

• Loops control the "next thing" that comes after
  them
• All C statements end in a semi-colon
• A semi-colon by itself is an empty, "do nothing"
  statement
• If the "next thing" after the loop is a
  semi-colon that does nothing, that's what the
  loop will do-over and over again!
• int main()
• for(int nNum30 nNumlt170 nNumnNum 20)
• circle(320,240,nNum)
• //makes ONE circle with radius 170!

40
Practice Quiz Questions

• True/false Assignment 6 did not use cin. This is
  because Redirection means writing a program that
  does not use cin
• True/false circle(1,2,3) will draw a circle with
  radius 1 and center (2,3)
• What is the output of the following program?
• int main()
• for(int nI 1 nI lt 243 nI nI 3)
• coutltltnIltlt", "
• coutltltendlltlt"done"ltltendl
• system("PAUSE")
• return 0

41
The line function

• Draws a line between 2 points
• Takes four arguments (also called parameters)
  The x and y coordinates of the first point, and
  the x and y coordinates of the second point
• Draws the line in whatever the current drawing
  color is, use setcolor()

42
Problem Write some code that draws a vertical
and a horizontal line through the center of the
screen

• int main()
• initwindow(640,480)
• setcolor(RED)
• line(320,0,320,480)
• line(0,240,640,240)
• getch()
• closegraph()
• return 0

43
Using a loopto make a Gradient

• A gradient is a gradual blend of
• color from low to high
• Here's red from 0 to 255
• initwindow(256,256)
• int nY 0
• int nR 0, nG 0, nB 0
• while(nR lt 256)
• setcolor(COLOR(nR,nG,nB))
• line(0,nY,256,nY)
• nY
• nR
• delay(10)

44
Another Gradient

• Green from 255 to 0
• Blue from 0 to 255
• initwindow(256,256)
• int nY 0
• int nR 0, nG 255, nB 0
• while(nB lt 256)
• setcolor(COLOR(nR,nG,nB))
• line(0,nY,256,nY)
• nY
• nB
• nG--
• delay(10)

45
Practice Quiz Question
Complete the following program fragment so that
it produces output similar to that shown

• void DrawLines()
• setcolor(WHITE)
• for(int nNum 0 nNum lt 480 nNum
  nNum60)
• line (________,________,________,_________)
  

46
Animation

• ALL animation (movies, TV, computer, etc) is
  based on the same principle
• If the eye sees a rapid succession of pictures,
  each with a small difference, it's "tricked" into
  believing smooth motion is taking place

47
Animation

• This is sometimes called the Universal Animation
  Loop
• Erase Move Draw Wait
• If we wait too long, the animation looks
  "choppy", too short the animation becomes a blur
• If we wait after the image is erased, the
  animation will "blink"

48
Problem Create an animation of a circle that
moves from the left of the screen to the right

• int main()
• initwindow(640,480)
• int nX -150
• while(nX lt 800)
• setcolor(BLACK) //Erase
• circle(nX,240,100)
• nX nX 10 //Move
• setcolor(WHITE)
• circle(nX,240,100)//Draw
• delay(30) //Wait
• closegraph()
• return 0

49
Goals of Good Style

• In real life, programs are rarely finished
• Once version 1.0 is finished, work begins on
  version 1.1
• Teams of programmers constantly modify and reuse
  existing code
• Good coding style makes your code more easily
  readable, fixable and modifiable by other people

50
Goals of Good Style

• Just like the rules for writing an essay,
  everyone has slightly different ideas of what
  good coding style is, but they generally agree
  that it is important to
• Choose descriptive names for variables, constants
  and functions
• Indent code consistently
• Avoid code that is too clever or obscure

51
Hungarian Notation

• The style used at Microsoft to name variables,
  constants and functions
• Variables start with a lower case letter that
  shows the data type
• Each word is capitalized
• No spaces
• nButterflies dSpendingMoney
• Constants also start with a lower case letter,
  but from then on are capitalized with underscores
  to separate words
• dGRAMS_PER_OUNCE

52
Hungarian Notation

• Functions start with Capital Letters
• Each word is capitalized
• No spaces
• GetInput()
• CalculatePeople()
• DrawCircles()
• EraseCircles()

53
Indentation and braces

• Code in braces is indented
• Braces have line to themselves
• Curly braces should line up with the first letter
  of the function name or the loop
• void main()
• initwindow(640,480)
• for(int nI0nIlt10nI)
• circle(320,240,nI10)
• closegraph()
• return 0

54
A former student sent me this code. Apparently,
he didn't learn good style in my class (

• include ltcstdlibgt
• include ltiostreamgt
• using namespace std
• const int nX 10
• const int nY 5
• int main()
• int naArraynXnY
• for(double dR 0, dC 0 dR lt nX dC, dR
  dC/nY)
• naArraystatic_cast ltintgt(dR)(static_cast
  ltintgt(dC)nY)
• static_castltintgt(dR
  static_castltintgt(dC)nY)
• for(double dR 0, dC 0 dC lt nY dR, dC
  dR/nX)
• coutltltnaArray(static_cast
  ltintgt(dR)nX)static_castltintgt(dC)
• ltlt", "
• coutltltendl
• for (int nNum 0 nNum lt nY nNum)
• for (int nNum1 0 nNum1 lt nX nNum1)

55
if and if/else

• int nNum 5
• if(nNum lt 10)
• coutltltnNumltlt" is less than 10"ltltendl
• An if controls some code that either runs or
  doesn't
• if(nNum gt 0)
• coutltltnNumltlt" is positive"ltltendl
• else
• coutltltnNumltlt" is not positive"ltltendl
• An if/else always runs the code in the if or the
  else, but never both

56
if and if/else

• int nNum 5
• if(nNum lt 10)
• coutltltnNumltlt" is less than 10"ltltendl
• nNum nNum 2
• //You can have an if control more than
• //one line of code by using curly braces
• //this is called a block of code

57
Relational Operators

• lt lt gt gt !
• Creates a condition by comparing two things,
  evaluated as true or false
• (5 lt 3)
• (nNum 5)
• (nNumgt5)
• (nNum ! 5)
• (nNum1 lt nNum2 lt nNum3) NOT!
• Only works with two numbers at a time

58
vs.

• A single equals (called the assignment operator)
  MAKES two things equal
• nNum 3
• Don't put this in an ifit will always be true!
• The double equals asks a question Are these two
  things equal?
• nNum3
• Use the double equals anywhere you would use a
  condition if, while, do-while, etc.
• if(nNum3)
• coutltlt"nNum is three"

59
"Chained" if/else

• if( dTemp gt 80)
• coutltlt"Go swimming"
• else if(dTemp gt 50)
• coutltlt"Go Fishing"
• else if(dTemp gt 32)
• coutltlt"Go hot tubbing"
• else
• coutltlt"Go sledding"

60
Practice Quiz Question What is the output of
this program?

• int main()
• int nNum1 2
• int nNum2 7
• double dNum 9
• if(nNum1 2)
• coutltlt"First"ltltendl
• else if (nNum2 3)
• coutltlt"Second"ltltendl
• else if (dNum 9)
• coutltlt"Third"ltltendl
• else
• coutltlt"Fourth"ltltendl
• if(nNum2/nNum1 ! 1)
• coutltlt"Fifth"ltltendl
• if(nNum2/nNum1 ! 3)

61
Selection The switch Statement

• Works just like a "chained" if/else
• switch (nNum)
• case 1
• coutltlt"nNum is 1"ltltendl
• break
• case 2
• coutltlt"nNum is 2"ltltendl
• break
• default
• coutltlt"nNum isn't 1 or 2"ltltendl

62
Selection The switch Statement

• Works just like a "chained" if/else
• if (nNum 1)
• coutltlt"nNum is 1"ltltendl
• else if (nNum 2)
• coutltlt"nNum is 2"ltltendl
• else
• coutltlt"nNum isn't 1 or 2"ltltendl

63
Selection The switch Statement...

• Selection switch
• Note the break
• Can only switch on integral values not decimals
  or conditions
• Switching on characters is OK, just remember to
  put them in single quotes 'A'
• Good Style Use switch for a "menu" of choices,
  if/else otherwise
• Good Style indent in curly braces and again in
  the case

64
switch

• coutltlt"Please enter a letter "
• cingtgtcLetter
• switch(cLetter)
• case 'A'
• coutltlt"You entered A"
• break
• case 'B'
• coutltlt"You entered B"
• break
• default
• coutltlt"You didn't enter A or B"

65
switchworks with both upper and lower cases

• coutltlt"Please enter a letter "
• cingtgtcLetter
• switch(cLetter)
• case 'a' case 'A'
• coutltlt"You entered A"
• break
• case 'b' case 'B'
• coutltlt"You entered B"
• break
• default
• coutltlt"You didn't enter A or B"

66
getch()

• In a graphics program, you don't want key presses
  to be displayed on the screen
• getch() "gets" a key press from the userwithout
  displaying it
• char cKey getch()
• //get the key pressed by the
• //user and store it in the
• //mailbox cKey
• getch() can also be used to make the program wait
  until the user presses a key

67
Watch out for this mistake in Assignment 10!

• do
• char cKey getch()
• //lots of C
• while(cKey ! 'q')

68
Watch out for this mistake in Assignment 10!

• do
• char cKey getch()
• //lots of C
• while(cKey ! 'q')
• The scope of cKey is limited to the curly braces
  where it was declared

69
Watch out for this mistake in Assignment 10!

• char cKey
• do
• cKey getch()
• //lots of C
• while(cKey ! 'q')
• Now the scope of cKey is extends outside the
  curly braces of the do-while loop

70
Practice Quiz Questions

• Each of the following loops has an error. Rewrite
  each so the first counts from 1 to 10 and the
  second counts from 10 to 1
• for(int nNum 1 nNum lt 10 nNum 1)
• for(int nNum 10 nNum lt1 nNum--)
• How many arguments does circle() take? How many
  does getch()?

71
Symmetrical reflections (mirrors)
(50,30)
480
640
72
Symmetrical reflections (mirrors)
(50,30)
50
480
640
73
Symmetrical reflections (mirrors)
(50,30)
50
50
480
640
74
Symmetrical reflections (mirrors)
(50,30)
(640-50,30)
50
50
480
640
75
Logical Operators

• //AND
• //OR
• ! //NOT
• Used to combine multiple conditions
• Truth tables shown at right above
• Examples
• ( 0 lt nCount ) ( nCount lt 100 )
• ( 0 lt nCount ) ( nCount lt 100 )
• (A lt cGrade) (cGrade lt F)
• ! (19 gt nAge nAge gt 13)
• 19 lt nAge nAge lt13

76
Practice Quiz Question What is the output of
this program?

• int main()
• int nNum 4
• double dNum 7.2
• if((nNum gt 5) (dNum lt 8))
• coutltlt"first"ltltendl
• if((nNum gt 5) (dNum lt 8))
• coutltlt"second"ltltendl
• if(!(nNum gt 5))
• coutltlt"third"ltltendl
• if(!(dNum lt 8))
• coutltlt"fourth"ltltendl
• system("PAUSE")
• return 0

77
What is the output of this program? What would
the output be if the was changed to ?

• int main()
• int nX 0
• int nY 0
• while (nX lt 10 nY gt -10)
• nX
• nY nY -2
• coutltltnXltlt", "ltltnYltltendl
• system("PAUSE")
• return 0