1 / 32

Week 2

Week 2. Book Chapter 1 RGB Color codes. 2.Additive Color Mixing RGB. The mixing of “ light ” Primary: Red, Green, Blue The complementary color “ White ” means. 2.Additive Color Mixing RGB. Primary : Red, Green, Blue Red+green = yellow Red+blue = purple

sheera
Download Presentation

Week 2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

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

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

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

  26. Radian to degrees

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

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

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

  30. exercise1 • Write the code the draw

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

More Related