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.

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

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):

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

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:

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

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