Week 2

Book Chapter 1RGB 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.

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

Exampletry this

size(500,500); // window sizebackground(255); // background color stroke(255,0,0); // red strokestrokeWeight(50);// weight of the strokerect(30,30,300,300);

noStroke()

• stroke() can be eliminated with noStroke()• Example:

size(500,500); // window sizebackground(255); // background colorstroke(255,0,0); // red strokestrokeWeight(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 sizebackground(255); // white background black strokeWeight(5);fill(255,0,0); //whiterect(40,40,60,100);

The above code outputs:

Example

background(255);noStroke();

// Bright redfill(255,0,0);ellipse(20,30,16,25);

// Dark redfill(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.

Examplesize(200,200);background(255);strokeWeight(10);fill(255,0,0); // red colornoFill();// eliminates the redrect(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 colornoFill();// eliminates the redrect(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.

Examplebackgroud(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

Transparencysize(200,200);background(0); // ground is backnoStroke();// No fourth argument means 100% opacity.fill(0,0,255);// fill bluerect(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 colorrect(50,50,80,80); //

• Bothe code and below output the same shape.

Fill(255,0,0); // red colorrect(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

Examplesize(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

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