The Joy of Programming
Creating Colors

In the previous lesson we've seen how to use standard colors or pick a color from the web using the hexadecimal color code. In this lesson we'll see how to make own own colors.

The RGB components

In the computer, the colors are made of three components red, green and blue, usually called as th RGB components. Each component takes a value between 0-255.

The following example creates a red color and fills a circle with it.

fill = color(r=255, g=0, b=0)
c = circle(fill=fill, stroke='none')
show(c)

You could try creating multiple circles with increasing value of red.

fill = color(r=50, g=0, b=0)
c = circle(x=-100, y=0, r=50, fill=fill, stroke='none')
show(c)

fill = color(r=150, g=0, b=0)
c = circle(x=0, y=0, r=50, fill=fill, stroke='none')
show(c)

fill = color(r=250, g=0, b=0)
c = circle(x=100, y=0, r=50, fill=fill, stroke='none')
show(c)

Adding Transparency

Sometimes it good to create colors that are slightly transparent, so that we can see what is behind when there are overlapping shapes. It also makes very interesting patterns.

In the world of computer colors, the transparency is specified by an alpha value in the range of 0 and 1. The value 1 means the color is completely transparent and value 0 means it is completely opaque and you can't see any thing behind it. A value of 0.5 means it is half transparent.

Lets try creating overlapping circles with transparent colors.

# red with half transparency
c1 = color(r=255, g=0, b=0, a=0.5)
shape1 = circle(x=-50, y=0, r=100, fill=c1, stroke='none')

# green with half transparency
c2 = color(r=0, g=255, b=0, a=0.5)
shape2 = circle(x=50, y=0, r=100, fill=c2, stroke='none')

show(shape1, shape2)

Exercise 3.6: Shades of Gray

Write a program to draw three circles showing shades of gray with intensity 200, 150 and 100 respectively.

Can you guess how the RGB values be for creating gray shade?


Exercise 3.7: Three Concentric Circles with Transparency

Write a program to draw three circles with center at origin and with radius 50, 100 and 150. Fill them with red color with an alpha value of 0.5.


Questions
AK Abhinand K
3 years ago
Post
Dismiss
Exercise 3.6
Exercise 3.6
DG Devika G
3 years ago
Post
Dismiss
f1=color(r=50,g=50,b=50) c1=circle(x=100,y=0,r=50,fill=f1,stroke="none") f2=color(r=100,g=100,b=100) c2=circle(x=0,y=0,r=50,fill=f2,stroke="none") f3=color(r=150,g=150,b=150) c3=circle(x=-100,y=0,r=50,fill=f3,stroke="none") show(c1,c2,c3)
f1=color(r=50,g=50,b=50) c1=circle(x=100,y=0,r=50,fill=f1,stroke="none") f2=color(r=100,g=100,b=100) c2=circle(x=0,y=0,r=50,fill=f2,stroke="none") f3=color(r=150,g=150,b=150) c3=circle(x=-100,y=0,r=50,fill=f3,stroke="none") show(c1,c2,c3)
DG Devika G
3 years ago
Post
Dismiss
change RGB values according to question
change RGB values according to question
MS Muhammed Salih
3 years ago
Post
Dismiss
@Devika G for little bit neat code code you can use color() directly instead of store it into a variable c1 = circle(fill=color(200,200,200), stroke="none",r=50,x=-100,y=0) c2 = circle(fill=color(150,150,150), stroke="none",r=50) c3 = circle(fill=color(100,100,100), stroke="none",r=50,x=100,y=0) show(c1,c2,c3)
@Devika G for little bit neat code code you can use color() directly instead of store it into a variable c1 = circle(fill=color(200,200,200), stroke="none",r=50,x=-100,y=0) c2 = circle(fill=color(150,150,150), stroke="none",r=50) c3 = circle(fill=color(100,100,100), stroke="none",r=50,x=100,y=0) show(c1,c2,c3)
DG Devika G
3 years ago
Post
Dismiss
Okii thanku
Okii thanku
AB Abhinav Babukuttan
3 years ago
Post
Dismiss
ex 3.7?
ex 3.7?
MS Muhammed Salih
3 years ago
Post
Dismiss
@Abhinav Babukuttan Plz,dont try to Copy,try to understand c1=circle(r=150,fill=color(255,0,0,a=0.5),stroke="none") c2=circle(r=100,fill=color(255,0,0,a=0.5),stroke="none") c3=circle(r=50,fill=color(255,0,0,a=0.5),stroke="none") show(c1,c2,c3) in order to solve this problem,use must know character of transparency,when it same color overlaped the intensity of color increase(here,Red color)
@Abhinav Babukuttan Plz,dont try to Copy,try to understand c1=circle(r=150,fill=color(255,0,0,a=0.5),stroke="none") c2=circle(r=100,fill=color(255,0,0,a=0.5),stroke="none") c3=circle(r=50,fill=color(255,0,0,a=0.5),stroke="none") show(c1,c2,c3) in order to solve this problem,use must know character of transparency,when it same color overlaped the intensity of color increase(here,Red color)
AB Abhinav Babukuttan
3 years ago
Post
Dismiss
Ok thanks
Ok thanks
SM Samuel Mathew
3 years ago
Post
Dismiss
3.6, hope it helps someone # your code here c1=color(r=128, g=128, b=128) c2=color(r=59, g=59, b=59) c3=color(r=197, g=197, b=197) shape1 = circle(x=0, y=0, r=50, fill=c1, stroke="none") shape2 = circle(x=100, y=0, r=50, fill=c2, stroke="none") shape3 = circle(x=-100, y=0, r=50, fill=c3, stroke="none") show(shape1,shape2,shape3)
3.6, hope it helps someone # your code here c1=color(r=128, g=128, b=128) c2=color(r=59, g=59, b=59) c3=color(r=197, g=197, b=197) shape1 = circle(x=0, y=0, r=50, fill=c1, stroke="none") shape2 = circle(x=100, y=0, r=50, fill=c2, stroke="none") shape3 = circle(x=-100, y=0, r=50, fill=c3, stroke="none") show(shape1,shape2,shape3)
JG Jacob George
2 years ago
Post
Dismiss
How we get r g b value,??? Please replyyy
How we get r g b value,??? Please replyyy
AA Arjun Anil
2 years ago
Post
Dismiss
fill = color(r=169,g=169,b=169) c1 = circle(x=-100,y=0,r=50,fill=fill,stroke="none") show(c1) fill = color(r=128,g=128,b=128) c2 = circle(x=0,y=0,r=50,fill=fill,stroke="none") show(c2) fill = color(r=105,g=105,b=105) c3 = circle(x=100,y=0,r=50,fill=fill,stroke="none") show(c3)
fill = color(r=169,g=169,b=169) c1 = circle(x=-100,y=0,r=50,fill=fill,stroke="none") show(c1) fill = color(r=128,g=128,b=128) c2 = circle(x=0,y=0,r=50,fill=fill,stroke="none") show(c2) fill = color(r=105,g=105,b=105) c3 = circle(x=100,y=0,r=50,fill=fill,stroke="none") show(c3)
Want to discuss?
Post it here, our mentors will help you out.
Color transparency
TK Tarun Kumar
3 years ago
Post
Dismiss
Instruction is given that the value 1 means completely transparent and value 0 means completely opaque but code run is working exact opposite. Can you clarify on this ?
Instruction is given that the value 1 means completely transparent and value 0 means completely opaque but code run is working exact opposite. Can you clarify on this ?
AK ATHUL KRISHNA AB
3 years ago
Post
Dismiss
Same dount
Same dount
HH Hani Haris
3 years ago
Post
Dismiss
me too
me too
MS Muhammed Salih
3 years ago
Post
Dismiss
i think it is a mistake
i think it is a mistake
Want to discuss?
Post it here, our mentors will help you out.