week 2 book chapter 1 rgb color codes. 2 2.additive color mixing rgb the mixing of “ light ”...
Post on 29-Dec-2015
250 Views
Preview:
TRANSCRIPT
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
•
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);
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.
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");
top related