Main content
Hour of Code
Course: Hour of Code > Unit 1
Lesson 1: Drawing with 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
© 2023 Khan AcademyTerms of usePrivacy PolicyCookie Notice
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:
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(24 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.
background(
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!!(689 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?(111 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.(308 votes)
Why do you put the fill command before the shape command? Wouldn't you just be filling in nothing?(33 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.(81 votes)
Can you make any color you want?(74 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.(7 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!!(29 votes)- Java and Javascript are two entirely different things. The syntax between the two are not even lose to each other. Java would be closer to C# and JavaScript is kind of its own specialty but if i'm wrong please tell me.(19 votes)
- Does anyone know why three main colors are red, green, and blue instead of the three primary colors(red, yellow, and blue)?(16 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.(54 votes)
- Can you mix 2 colors(24 votes)
Yup! :) Try looking at these two documentation links. https://www.khanacademy.org/computer-programming/blendcolorc1-c2-mode/4530750216994816(20 votes)
how does one make the program constantly change colors(18 votes)
I found that if you use this as a fill in SOME cases it will appear as a rainbow changing effect
THE CODE
fill(random(255),random(255),random(255));
MY PROJECT AND HOW IT WORKED
https://www.khanacademy.org/computer-programming/confetti-party-spin-off-of-project-make-it-rain/6453509001003008(6 votes)
can we make a man with these shapes(8 votes)
Yes, you can make anything if you work hard enough.(7 votes)
How do you use the backround comand?(3 votes)
look in the documentation for the background:
https://www.khanacademy.org/computer-programming/backgroundr-g-b/839653892backgroundtakes 3 commands:
Red, Green, and Blue which will each be set to a value between 0 and 255
There also is an optional 4th commandato set a transparency.
You can use the pop-up color picking when choosing a background.(14 votes)