Week 2

1. Week 2 Book Chapter 1 RGB Color codes

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

3. 2.Additive Color MixingRGB • 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 MixingRGB (continue) You have to provide to exact amout of each color. The individual color elements are expressed as ranges from 0 toe 255.

5. 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)

6. 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)

7. 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

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

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

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

11. Exampletry 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);

12. 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.

13. 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

14. 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:

15. 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);

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

17. 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:

18. 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

19. 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.

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

21. 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

22. 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);

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

25. 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); //

26. 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.

27. Radian to degrees

28. 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

29. 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

30. 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");

31. exercise1 • Write the code the draw

32. 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);