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: Use the docs!
You just learned how to use a bunch of functions:
ellipse
, rect
, line
, background
, fill
, stroke
, strokeWeight
, and noStroke
. How can you possibly remember how to use all of them? Don't worry, you don't have to!
Whenever you're programming, you'll have documentation, or docs, for that programming environment that tell you how to use all the functions. On Khan Academy, you can always find the documentation under whatever program you're working on:
The documentation shows you what parameters each function takes, and it also links to a whole page for each function with much more information and an example. If you're scratching your head about anything, make sure you check the docs first.
If you can't figure it out from the docs, don't fret—there's a whole community of Khan Academy coders who can help you, too. Just click "Request help" on your project, clearly describe what you're trying to achieve, and wait to see what they say.
Up next: Pick a project!
Want to join the conversation?
- Where is the doc on the website??(9 votes)
- Any user-authored program has a "Documentation" tab that contains the docs.(27 votes)
- Do we have to do all of the projects or only one?(5 votes)
- None of us are forcing you to do them, but it's they are good practice for learning :)(12 votes)
- How can you tell the difference for which language is which?(5 votes)
- it will start with a tag and that is the type of code(2 votes)
- Does the docs have everything or are there so many codes that the docs is limited?(5 votes)
- The documentation is a bit limited. It does not contain all existing functions, including some from ProcessingJS.
There is also a small lack of precision and examples for many functions, but unfortunately the site doesn't provide the flexibility to suggest corrections.
A wonderful function I discovered recently is not listed here at all:createGraphics()
( https://processing.org/reference/createGraphics_.html ). That site is the best reference I found for Processing but there are minor differences from JS which are easily corrected. Many functions allow more parameters than mentioned here. Some are unfortunately blocked for different reasons.(7 votes)
- I want to use HSV color space
(Hue, Saturation, Value)
but HOW?(5 votes)- i don't know Genuis Ramses im stuck too!(3 votes)
- how to enlarge point with code plz help(5 votes)
- You can change the size using a different stroke weight. For example:
strokeWeight(3);
point(200, 200);
Hope this helps!(3 votes)
- i am in need of info can u draw cones or ovals here(4 votes)
- i still dont get it
how do you getthe doc?(2 votes)- You can find the Documentation tab below each program.(7 votes)
- what can we do to move a picture without number scrubbing(3 votes)
- In order to create an animation, you need:
1) A global variable
2) To use that global variable to define the position or size of your drawing
3) A function assigned to thedraw
variable that changes the value of the global variable
If you don't yet know what these things are, you need to go through the lessons in this course to learn more about them.(5 votes)
- How do you change the backround on the code?(3 votes)
- You type background(); and then in the parentheses select the color you want, but make sure you put the background command before everything else so that it is behind everything.
I hope this helps!(5 votes)