Week 2 Book Chapter 1 RGB Color codes

2 2.Additive Color Mixing RGB The mixing of “ light ” Primary: Red, Green, Blue The complementary color “ White ” means

3 2.Additive Color Mixing RGB Primary: Red, Green, Blue Red+green = yellow Red+blue= purple Green+blue=cyan(blue-green) Red+green+blue=white No colors= black

4 2.Additive Color Mixing RGB (continue) You have to provide to exact amout of each color. The individual color elements are expressed as ranges from 0 toe 255.

RGB color table HTML/CSS Name HexCode (#RRGGBB) DecCode (R,G,B) Black#000000(0,0,0) White #FFFFFF(255,255,255) Red#FF0000(255,0,0) Lime#00FF00(0,255,0) Blue#0000FF(0,0,255) Yellow#FFFF00(255,255,0) Cyan / Aqua#00FFFF(0,255,255)

RGB color table HTML/CSS Name Hex Code (#RRGGBB) Decimal Code (R,G,B) Silver#C0C0C0(192,192,192) Gray#808080(128,128,128) Maroon#800000(128,0,0) Olive#808000(128,128,0) Green#008000(0,128,0) Purple#800080(128,0,128) Teal#008080(0,128,128) Navy#000080(0,0,128)

Default color By default processing uses: Black color for stroke: stroke(0) White color for background: background(255); For example: – rect(30,30,50,50); – outputs

Change window color Size(500,500); Background(255);// makes the window white

stroke() function You can change the the stroke. – stroke(0);// black stroke – stroke(255);// white stroke – stroke(255,0,0); // red stroke

stroke weight You can change the weight of the stroke by using? – strokeWeight(0); // thin stroke – StrokeWeight(10);// bold stroke

Example try this size(500,500); // window size background(255); // background color stroke(255,0,0); // red stroke strokeWeight(50);// weight of the stroke rect(30,30,300,300);

noStroke() stroke() can be eliminated with noStroke() Example: size(500,500); // window size background(255); // background color stroke(255,0,0); // red stroke strokeWeight(50); noStroke();// this will eliminate the stroke() rect(30,30,300,300); This above code will eliminate the red stroke.

fill function fill() function can be used to change the inside color of the shape. – fill(250,0,0); // red color – fill(255); // white color – fill(0); //black color

Example size(500,500); // window size background(255); // white background black strokeWeight(5); fill(255,0,0); //white rect(40,40,60,100); The above code outputs:

Example background(255); noStroke(); // Bright red fill(255,0,0); ellipse(20,30,16,25); // Dark red fill(127,0,0); ellipse(50,30,16,25); // Pink (pale red) fill(255,200,200); ellipse(80,30,16,25);

noFill() fill() can be eliminated with noStroke() functions.

Example size(200,200); background(255); strokeWeight(10); fill(255,0,0); // red color noFill();// eliminates the red rect(50,50,80,80); The above code outputs:

noFill() Example noFill() leaves the shape with only an outline. size(500,500); background(255); strokeWeight(10); fill(255,0,0); // red color noFill();// eliminates the red rect(50,50,80,80); // white background instead of red

Multiple shapes If we draw two shapes at one time, Processing will always use the most recently specified stroke() and fill(), reading the code from top to bottom.

Example backgroud(150); stroke(0); line(0,0,100,100); stroke(255) noFill(); rect(25 25, 50, 50); The above code outputs

Transparency In addition to the red, green, and blue components of each color, there is an additional optional fourth component, referred to as the color's "alpha.” Alpha means transparency and is particularly useful when you want to draw elements that appear partially see-through on top of one another. It is important to realize that pixels are not literally transparent, this is simply a convenient illusion that is accomplished by blending colors. – Behind the scenes, Processing takes the color numbers and adds a percentage of one to a percentage of another, creating the optical perception of blending

Transparency size(200,200); background(0); // ground is back noStroke(); // No fourth argument means 100% opacity. fill(0,0,255);// fill blue rect(0,0,100,200); // 255 means 100% opacity. fill(255,0,0,255); // fill red(no transparency 100% opacity) rect(0,0,200,40); // 75% opacity. fill(255,0,0,191); // fill red (75% opacity) rect(0,50,200,40); // 55% opacity. fill(255,0,0,127); // fill red (55% opacity) rect(0,100,200,40); // 25% opacity. fill(255,0,0,63); // fill red (25% opacity) rect(0,150,200,40);

colorMode() Processing allows to think of a color as percentage We can do this by using – colorMode(RGB,100);

Example colorMode(RGB,100); fill(100,0,0); // red color rect(50,50,80,80); // Bothe code and below output the same shape. Fill(255,0,0); // red color rect(50,50,80,80); //

Draw an Arc arc(x, y, w, h, start-Angle, stop-Angle) The first and second parameters set the location. The third and fourth set the width and height. The fifth parameter sets the angle to start the arc. The sixth sets the angle to stop. The angles are set in radians, rather than degrees.

Radian to degrees

Example size(480, 120); fill(255,0,0); arc(90, 60, 80, 80, 0, HALF_PI); fill(255,255,0); arc(190, 60, 80, 80, 0, PI+HALF_PI); Outputs

Example size(480, 120); fill(255,0,0); arc(90, 60, 80, 80,PI, TWO_PI+HALF_PI); fill(255,255,0); arc(190, 60, 80, 80,QUARTER_PI, PI+QUARTER_PI); Outputs

Save your sketch size(480, 120); fill(255,0,0); arc(90, 60, 80, 80,PI, TWO_PI+HALF_PI); fill(255,255,0); arc(190, 60, 80, 80,QUARTER_PI, PI+QUARTER_PI); save("sketch-arc.jpg");

exercise1 Write the code the draw

Solution size(480, 120); arc(90, 60, 80, 80, QUARTER_PI, HALF_PI); fill(255,0,0); arc(190, 60, 80, 80, 0, PI+HALF_PI); fill(255,255,0); arc(290, 60, 80, 80, PI, TWO_PI+QUARTER_PI); fill(255,0,255); arc(390, 60, 80, 80, QUARTER_PI, PI +HALF_PI);