Computer Stars -- Lesson #2 --Color

  1. Color really adds human interest to any graphic.  There is a reason that STOP signs are the color red in the United States.  The color system that is used in OpenGL is called RGB (red green blue).  Read more about RGB here. Read more about color here.
     
  2. Web pages and many other computer systems use the hexadecimal number system (base 16) to describe color.  Click here to learn more about hexadecimal (0 1 2 3 4 5 6 7 8 9 A10 B11 C12 D13 E14 F15).  Click here for a nice table with pictorial colors listed by hexadecimal value.  In hexadecimal, each color is represented as a value between 0 (00) and 255 (FF).  Thus, black (00 00 00) to white (FF FF FF) represent all possible colors.  Note that 0 to 255 is exactly the range of values that fit within one byte, which is the basic unit of all computer memory (i.e. 1kb is 1024 bytes, 1mb is 1,024x1,024 bytes).
  3. OpenGL maps colors into the range 0.0 to 1.0 (real numbers, also referred to as floating-point numbers in computer land).  This convention has the advantage of scaling to any level.  Remember that real numbers can be sub-divided infinitely (0.1, 0.11, 0.11111111111 etc.).  However, this presents a problem in converting a color expressed in hexadecimal notation to 0.0/1.0 notation and vice versa.
  4. What is needed for the conversion is an algorithm.  Algorithms are one of the main subjects in the study of computer science.  We observe that the hexadecimal range 00 (0) to FF (255) can be converted to 0.0/1.0 by dividing by 255.0.  The two end points are correct 0/255.0 == 0 and 255/255.0 == 1.  Note that / means "divide" in programming languages and == means "is equal to".  Remember that the = (equal symbol) was already used for assignment so it would be confusing to use it for two purposes.
  5. The OpenGL method glClearColor(<red>, <green>, <blue>,1.0) paints the whole window with the selected color.  The notation <red> highlights a meta-symbol; that is, a symbol that must be replaced to yield a valid program.  In this case, each of the symbols must be replaced by a real constant in the range 0.0 to 1.0 or an expression that computes a value between 0.0 and 1.0.  For example, 1.4 is not in the range 0.0 to 1.0.
  6. Vertex X,Y values can be any real number between -1.0 and +1.0; color values must be between 0.0 and 1.0.
  7. The glClearColor method should be typed on a separate line after glutCreateWindow.

Exercises  (if you get stuck, e-mail bobcook@georgiasouthern.edu)

  1. In the following exercises, double-click on adraw.txt to enter the Notepad editor.  Modify the program to answer each exercise.  then click the x to exit Notepad.  Double-click mc.exe to start the application, then type .adraw to try out your answer.  If you get a COMPILE ERROR, delete the error line and try again.  If necessary, go back to the original adraw.txt and start afresh.  You can also copy adraw.txt to bdraw.txt etc.  Just type .bdraw to run the copy.

  2. What library includes glClearColor?

  3. Give the correct syntax (language format) for a glClearColor statement?   opengl::glClearColor(0,0,1,1);

  4. Set the window color to red.   Note that if you make even a tiny mistake in syntax, you will get a message like <--COMPILE ERROR that indicates the approximate point of error.  The appropriate action is to delete the offending statement (or statements) until no error occurs.  Copy an example of a correct statement.  Look at an on-line reference for the statement.  OpenGL is extraordinarily well documented.  Just type glClearColor in Google.

  5. Set the window color to orange-red.  Hint: convert the red/green/blue hexadecimal values from the table to decimal values. HintHint: If you select Start/All_Programs?Accessories/Calculator, then select View/Scientific.  The result is an application that can be used to convert from hex to decimal.  However, it would be much nicer if the programming language had support for the hexadecimal notation.  Lucky you!!  The 0x prefix indicates a hexadecimal constant, e.g. 0x5a == 90 etc.  For example, the color crimson dc143c would be coded as glClearColor(0xdc/255, 0x14/255, 0x3c/255, 1.0).

  6. Set the window color to fire-brick.  Did you remember to divide each <red> <green> <blue> value by 255?

  7. The glColor3f(<red>,<green>,<blue>) method sets the drawing color.  It can be placed before or after a glBegin.  Note that there are only 3 numbers, not 4 as with glClearColor.

  8. What library includes this method?

  9. Set the triangle color to green by typing a line prior to glBegin.    opengl::glColor3f(0,1,0);

  10. Try adding a fourth vertex method call after the first three.  What is the result?  A fifth vertex method?  A sixth vertex method?

  11. Try placing one glColor3f method call (each with a different color) prior to each of the three glVertex calls.  In programming, engineering, science and mathematics, it is important to have a mental model of what you think will happen when testing the unknown.  Such a guess is called a hypothesis.  Each time you execute a program, you are performing an experiment that may prove, or disprove, your hypothesis.  In the physical world, repetitions of the same experiment with the same conditions may produce different results.  In the computer world, every effort is made to insure that improbable results are extremely rare.

Challenge Problem:  E-mail me an mc program that draws an animal made from 9 triangles or less.  The best entries will be posted here with your initials as credit. Creative coloring would be nice.  Hint: draw on graph paper to plan your design.

Challenge Problem: E-mail me an mc program that draws the following Labyrinth Triangle using the minimum number of triangles.  The best entries will be posted here with your initials as credit.  Creative coloring would be nice.