• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

BMS Processing Class

A Course23.com Production

"Stop, Pause, and Think..." -- Ms. Elwell
"Take your time, it isn't a race" -- Mr. Helmke

  • Home
  • Graphing and Color
    • Graphing Shapes
      • Activity 1
      • Activity 2
    • Color (R,G,B) and Grey Scale
      • Activity 3
      • Activity 4
  • Code and Sketches
    • Parts of Code
      • Activity 5
    • Your Code & OpenProcessing Sketches
      • Activity 6
      • Activity 7
  • Variables, etc
    • Variables
      • Activity pre8 and 8
      • Activity 8.1
      • Activity 9
      • Activity 10
      • Activity 11
      • Activity 11.1
    • Operator Precedence
      • Activity 12
      • Activity 13
    • Random
      • Activity 14
      • Activity 15
  • Conditionals – If, Else, Else If
  • Resources

Color (R,G,B) and Grey Scale

COLOR (R,G,B)

Computers view color in terms of Red, Green, and Blue light (RGB) and this can be confusing at first. You are probably more used to color from mixing paint like knowing that mixing yellow and blue makes green.

Mixing colors of light works differently as you can see below:

RGB color can be understood as all colors that can be made up of shining a Red, Green, and Blue light on a wall and adjusting the lights with dimmer switches. If only red is on, the wall looks red. If red and green are on, the wall will look yellow (see above). Dimming the lights will change the intensity of the light.

Color functions include: stroke(...), fill(...), and background(...)

The parameters for color functions must go in this order:  R, G, B

With color you can use any number between 0 and 255 as your parameters depending on how much of the color (R, G, or B) that you want.  If you don’t want any of a color, use 0 in it’s spot.

1
2
3
4
5
6
7
stroke(R,G,B);
background(R,G,B);
fill(R,G,B);
 
stroke(255,0,0); // gives a red outline to your shapes with all red, no green, no blue
background(0,255, 0);  // gives you a green background with no red, all green, and no blue
fill(0, 0, 255); // fills the next shapes with blue with no red, no green, and all blue

 

Greyscale

Greyscale means describing terms of black, white, and the grey in between.

  • 0 = black
  • 255 = white
  • between 0 and 255 = greyscale

When writing code for grey colors, all three parameters (R, G, and B) must be the same value):

1
2
3
4
stroke(50, 50, 50); // gives you a dark grey outline to your shapes
background(255, 255, 255); // gives you a white background
background(128, 128, 128); // gives you a medium grey background
fill(0, 0, 0); // fills the next shapes with black

 

COMMENTS

// after the semi-colon ; means “comment”    This means you are telling the computer that you are done writing code but you want to write YOURSELF a note.

You are expected to comment // every line of your code to indicate the purpose of that line of code.  It may be what color you are trying to make or what your shape represents (such as a right eye or left leg).

Your COLOR function comes BEFORE the SHAPE function you are coloring when you write code.

EACH line of code gets it’s OWN line on your paper.  One line of code per line on paper.  Keep your code neat.

Functions available that affect your drawing include noStroke(), noFill(), and strokeWeight(.) and are used as follows:

1
2
3
noStroke(); // this takes out the outline of your shape
strokeWeight(5); // this makes your shape outline the width specified (1) is the default. (5) is thicker
noFill(); // this prevents a color from filling shapes

How do you find the RGB for ALL colors ever imagined?

There are charts of RGB colors and their common names on the web (google search) that you can find if you search for them.  For example, to search for orange, type:  “RGB for orange” in Google search.  Many charts will become available and now you will know how to interpret the information!

Complete Activity 3

Complete Activity 4

Primary Sidebar

Required Reading:

Course Coding Standards

Copyright © 2016–2021 Chris Elwell/Michael Helmke · This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License · Log in