Custom Colors With RGB

by Janet Terra

You were probably taught in school that the primary colors are Red – Yellow – Blue. You might have even mixed food coloring to prove that Red + Yellow = Orange, Yellow + Blue = Green, Blue + Red = Purple. While these primary colors work well with cake frosting, they don’t work well computers. In truth, monitors interpret yellow as a combination of red and green. Hence the term: RGB.

The Just BASIC programming language offers you a choice of 16 colors you can assign by name: Yellow
Brown
Red
Darkred
Pink
Darkpink
Blue
Darkblue
Green
Darkgreen
Cyan
Darkcyan
White
Black
Lightgray (can also be called Palegray)
Darkgray

There is also special color named Buttonface. From the Just BASIC helpfile

Buttonface is the default background color currently set on a user's system, so it will vary according to the desktop color scheme.

This tutorial does not apply to the color Buttonface.

These colors can be assigned by the literal color

print #handle, “color red”

or by a string variable that stores the name of a valid color

      clr$ = “red”
      print #handle, “color “;clr$

When using a string variable, be sure the variable lies OUTSIDE the quotation marks and that a space exists between “color “ and the closing quotation mark.

Essentially there are 3 ways to use color: fill, pen and background. Always be sure the “DOWN” command has been executed before issuing graphic commands. The FILL command causes the entire graphic window or box to be filled with the assigned color.

      Open “Fill Green” for graphics as #1
      Print #1, “Trapclose [close]”
      Print #1, “Down” ‘Pen must be DOWN for drawing to take place
      Print #1, “Fill Green”
      Print #1, “Flush” ‘Causes color to stick if window minimized or resized
      WAIT

      [close]
      Close #1
      End

The pen color is the line color. The command is COLOR.

      Open “Fill Green, Color Blue” for graphics as #1
      Print #1, “Trapclose [close]”
      Print #1, “Down”
      Print #1, “Fill Green”
      Print #1, “Line 10 10 250 250” ‘Draw a line from 10, 10 to 250, 250
      Print #1, “Flush”
      Wait

      [close]
      Close #1
      End

The BACKCOLOR is the color used as the background for text and also the fill for filled objects (circlefilled, boxfilled, ellipsefilled)

      Open “Fill Green, Color Blue, Backcolor Brown” for graphics as #1
      Print #1, “Trapclose [close]”
      Print #1, “Down”
      Print #1, “Fill Green”
      Print #1, “Line 10 10 250 250” ‘Draw a line from 10, 10 to 250, 250
      Print #1, “Place 100 100” ‘Goto 50, 50 WITHOUT drawing a line
      Print #1, “Backcolor Brown”
      Print #1, “Boxfilled 200 200”
      Print #1, “Flush”
      Wait

      [close]
      Close #1
      End

This is all very nice, but supposing you want orange or even a turquoise (bluish green)? Maybe you have your heart set upon an olive green or a burgundy red. Enter the rgb colors. From the helpfile:

print #handle, "color red(0-255) green(0-255) blue(0-255)" The second form of color specifies a pure RGB color. This only works with display modes greater than 256 colors. To create a violet color for example, mix red and blue: print #handle, "color 127 0 127"

The closer a color gets to 0, the closer that color gets to Black. When all 3 rgb values are 0, the color is perfectly black.

print #handle, “color black”

is the same as

print #handle, “color 0 0 0”

The closer a color gets to 255, the closer that color gets to White. When all 3 rgb values are 255, the color is perfectly white.

print #handle, “color white”

is the same as

print #handle, “color 255 255 255”

To get bright yellow, add the full amounts of red and green (255 each), WITHOUT adding any blue. Increasing the blue will cause the yellow to pale.

      Open "Shades of Yellow" for graphics as #1
      Print #1, "Trapclose [close]"
      Print #1, "Down"
      Print #1, "Fill Lightgray"
      Print #1, "Backcolor 255 255 0" 'Bright Yellow
      Print #1, "Place 50 150"
      Print #1, "Boxfilled 200 100"
      Print #1, "Backcolor 255 255 100" 'Pale Yellow
      Print #1, "Place 25 125"
      Print #1, "Circlefilled 50"
      Print #1, "Backcolor 255 255 200" 'Even Paler Yellow
      Print #1, "Place 250 125"
      Print #1, "Circlefilled 50"
      Print #1, "Flush"
      Wait

      [close]
      Close #1
      End

Orange is less green, more red.

      Open "Orange Fill" for graphics as #1
      Print #1, "Trapclose [close]"
      Print #1, "Down"
      Print #1, "Fill 255 128 0"
      Print #1, "Flush"
      Wait

      [close]
      Close #1
      End

Anytime the three color values are the same, the resulting color is gray. The closer the numbers get to 0, the darker the gray; the closer the numbers get to 255, the lighter the gray.

So many choices. You can, of course, use the trial and error method of choosing just the right color for you. A better plan is to download and use John Davidson’s free Color Picker for Just BASIC users . While you’re at it, download and use John Davidson’s free Font Picker for Just BASIC users as well.

GRADIENT FILLS

It’s true that the naked eye can’t see the difference between the “128 0 0” shade of red and the “126 0 0” shade of red, but, eventually, there will be a discernable difference. A gradual increase or decrease in shades leads to a smooth gradient effect where one hue blends into another hue. This is accomplished line by line.

      WindowWidth = 200
      WindowHeight = 285
      Open "Red Gradient Fill" for Graphics_nsb as #1
      Print #1, "Trapclose [close]"
      Print #1, "Down"
      redHue = 0

      For y = 0 to 255
      Print #1, "Color ";redHue;" 0 0" 'Neither green nor blue changes in this demo
      Print #1, "Line 0 ";y;" 200 ";y
      redHue = redHue + 1 'Increasing value of red causes hue to lighten
      Next y

      Print #1, "Flush"
      Wait

      [close]
      Close #1
      End

And example of a blue gradient fill can be seen in this sky graphic demo (Reply #3)

Another version of gradient technique is to fill the graphicbox completely, wait a few milliseconds, then fill again with a slightly deeper or lighter hue. This gives a waxing and waning effect to the background hue.

      WindowWidth = 200
      WindowHeight = 285
      Open "Lighter - Darker - Lighter . . ." for Graphics_nsb as #1
      Print #1, "Trapclose [close]"
      Print #1, "Down"
      redHue = 200
      hueInc = -5 'Plus or Minus 5 shade
      gradientEffect = 1

      While gradientEffect = 1

      redHue = redHue + hueInc
      greenHue = redHue - 25
      blueHue = redHue
      Print #1, "Fill ";redHue;" ";greenHue;" ";blueHue

      Timer 100, [nextFill] 'Wait 1/10 second
      Wait
      [nextFill]
      Timer 0

      If redHue = 35 Then 'Don't let get too dark
           hueInc = 5 'Start adding by 5
      End If
      If redHue = 220 Then 'Don't let get too light
           hueInc = -5
      End If

      Print #1, "Discard" 'Don't clutter memory
      'No FLUSH needed since graphic is constantly changing

      Wend

      [close]
      gradientEffect = 0 'Exit While Wend
      Timer 0 'Reset timer just in case
      Close #1
      End

RANDOM COLORS

Another look at the rainbow pot of gold scene (reply #3) shows two instances of controlled random effects. The grass is made by a series of vertical lines of random lengths. Each ‘blade’ of grass is drawn with a green value between 64 and 192. By controlling the limits of the random function, you, the programmer, can achieve some very pretty effects with very little effort.

Now that you know how to use RGB, your Sky-Blue can now be Sky-Blues!