Hour of Code
- Welcome to our Hour of Code™!
- Learning coding on Khan Academy
- Making drawings with code
- Quick tip: number scrubbing
- Challenge: Simple snowman
- Drawing more shapes with code
- Challenge: Waving snowman
- Coloring with code
- Quick tip: color picking
- Challenge: Sunny snowy day
- Quick tip: Use the docs!
- Pick a drawing project!
- Project: Super snowman
- Project: Wild animal
- Project: Self portrait
- Code beyond the hour
Quick tip: color picking
In the last talk-through, we explored how to use the color picker to easily find a color. Since you can't see the color picker in action in our talk-throughs, here's a GIF of it being used:
Recording of the color picker being used to change the background color.
Click anywhere in the numbers to get the color picker to pop up. Then, click on the right hand color bar to change the general color you're picking, and click in the left hand side to change the lightness/brightness of the color. You'll get to try it in the next challenge!
Want to join the conversation?
- how do you do the color thing(21 votes)
- I'm not sure which "thing" you are referring to but maybe this will help.
In order to Color a Background the following line of code must be at the beginning of a program.
After typing "background( " the function should auto complete. All coloring commands are auto completed on Khan Academy.
In order to Fill a Shape use the following line of code before the shape command:
fill( this auto completes);
In order to Color a Line use the following command before the line command.
Stroke( this auto completes);
The numbers in the () tells the computer how red the color is, how green the color is, and how blue the color is.
Example of Background command:
background(0, 255, 242);
Example of Fill a Shape command:
fill(255, 242, 0); -- notice how this is before the shape command (ellipse).
ellipse(202, 208, 300, 300);
Example of Color a Line command:
stroke(191, 0, 255); -- Notice how this is above the object you would like to color.
strokeWeight(37); -- this command changes the thickness of a line
line(80, 115, 270, 75);
Hope this helped! Like this if it did!!(662 votes)
- Shouldn't the basic colors be red, yellow, and blue? I thought the basic colors can't be mixed from other colors. Green can be mixed from yellow and blue, is
it different in computers?(105 votes)
- There are two methods of creating color.
1) Subtractive Color
When subtractive colors are mixed, you get darker colors. If you start from cyan (blue), magenta (red), and yellow and can keep mixing to get different colors. If you have ever painted with watercolors, you have likely seen how the more you mix colors, the darker the resulting colors are. This is an example of subtractive colors.
2) Additive Color
When additive colors are mixed, you get lighter colors. This is because the colors emit light, and when the colors red, green, and blue mix you will end up with white.
Because computer monitors are emitting light and not reflecting them (like watercolor paint), additive colors are used when programming graphics. However, if you are working with graphic art that will be printed, subtractive colors are used.(298 votes)
- Why do you put the fill command before the shape command? Wouldn't you just be filling in nothing?(32 votes)
- You specify the fill and stroke colors, then you draw the affected shapes. Why? Because that's how the folks at MIT designed it.(77 votes)
- Can you make any color you want?(73 votes)
- Different color displays (RGB, CMYK, etc.) display different ranges of colors. Compared to the amount of a colors a computer can display, RGB has a pretty small range.(6 votes)
- If I use Sublime for practice all the thing I am learning here, in which format I need to save the document ? it is JS the extension for java? Thanks!!(28 votes)
- Does anyone know why three main colors are red, green, and blue instead of the three primary colors(red, yellow, and blue)?(15 votes)
- Red, green, and blue are used because they are called "additive colors." This means that when they are added together, they create white light. When they are subtracted from each other, they create black light. White light and black light can only be created by these colors.(52 votes)
- Can you mix 2 colors(23 votes)
- Yup! :) Try looking at these two documentation links. https://www.khanacademy.org/computer-programming/blendcolorc1-c2-mode/4530750216994816(18 votes)
- how does one make the program constantly change colors(17 votes)
- I found that if you use this as a fill in SOME cases it will appear as a rainbow changing effect
MY PROJECT AND HOW IT WORKED
- can we make a man with these shapes(7 votes)
- Yes, you can make anything if you work hard enough.(6 votes)
- How do you use the backround comand?(3 votes)
- look in the documentation for the background:
backgroundtakes 3 commands:
Red, Green, and Blue which will each be set to a value between 0 and 255
There also is an optional 4th command
ato set a transparency.
You can use the pop-up color picking when choosing a background.(12 votes)