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: number scrubbing
In the last talk-through, you learned how to use the "number scrubber" to quickly try out different numbers. Since you can't see the way the cursor moves to change the number scrubber in the talk-through, here's a GIF that shows the motion:
(Since it's a GIF and not a video, it has no sound.)
You click on the number, then click and drag on the arrows that pop up above it. Number scrubbing is great because of how easy it makes experimentation. Try it out in the challenge!
Want to join the conversation?
Why are there so many confusing commands!?(1166 votes)
Because code isn't simple. You're learning a whole new language. I know there's a lot of information that can be confusing at first, but don't worry. You'll get the hang of it soon!
I found (when I went through this myself) that the best thing to do was to work at it and if I started getting boggled, to just drop what I was doing and wait until later. Don't set your expectations too high and expect to understand everything right away. Taking breaks will give you a fresh outlook on it when you come back.
This honestly isn't an easy subject, so the fact that you've even started is a big step on the road to success!(1600 votes)
Why do you put spaces in between the commands? I tried without them and it still worked.(321 votes)
Good question! Basically it is just for clarity. There are a lot of things you can do it coding that will work, but are super unclear. By using these "conventions" like adding spaces you make your code clearer and therefore easier for other to read and understand, and also for you to debug (find any errors in the code).(586 votes)
Why is it called number scrubbing?(123 votes)
Scrubbing is just another term for seeking. For instance, you also scrub an audio track if you're advancing or decreasing the timeline of the track.(169 votes)
Do modern text editors have this function of number scrubbing? bg=background
bg info: As this is API made by Khan academy: with such functions .
Can you provide me the code of this API? As this will allow me to make changes to my API accordingly.
Thank You for your huge support in my education.(119 votes)
No,not usually. Modern text editors keep on writing the numbers until the find the perfect shape. Usually knowing diameter works best.(79 votes)
i'm not new to code, so i kind of know how this works. but tell me why is this is the only coding program with a click and drag system to make changing values easier!(59 votes)- It's most likely because this is a site for people that are just learning, but you're already relatively advanced so doing this shouldn't be a problem.(15 votes)
where is the ellipse function defined? Is it built-in function or something?(35 votes)
You could say that. These functions are from the processing.JS library, a library of built-in functions made by programmers so you won't have to do all the work.(72 votes)
why can't you type circle at the start, why ellipse?(18 votes)
That's because an ellipse is more flexible.
Some ellipses are circles. But not all ellipses are circles.
A circle is an ellipse which has equal width and height.
If the width and height are different, it's still an ellipse, but not a circle.(50 votes)
- Hi!
I was just trying out the ellipse function in an online IDE and it didn't work because it wasn't defined i guess. It was on jsfiddle and js.do.
So the video was relying on a pre existing library?
and the libraries are just pre defined functions?
If so can i just upload these libraries to an IDE?
How do I do that?
Not nearly as confusing as hacker rank though so thanks!(19 votes)
This article might help.
https://www.khanacademy.org/computing/computer-programming/programming-games-visualizations/advanced-development-tools/a/using-processingjs-outside-khan-academy
This program might help you as well.
https://www.khanacademy.org/computer-programming/ka-javascript-in-htmlworking/5218701838778368
Copy paste the template's code into Notepad.
Then, find the place where it tells you to paste your code.
Paste your program there.
VERY IMPORTANT. Save the file. Give it any name, but make sure it ends with".html"(31 votes)
- how come the code isn't something like circle(111,111,111,111)(12 votes)
- A circle is a type of ellipse (which is a broader term).(35 votes)
is ellipse an oval or a circle?(10 votes)- The ellipse can be either an oval or a circle!
If you set the width and height operators as the same, then you will get a circle. Otherwise, you will get an oval!
E.G of circle:ellipse(100, 100, 50, 50);
E.G of oval:ellipse(100, 100, 50, 100);
Just to clarify, the ellipse formatting isellipse(x, y, w, h);
The x and y set where the ellipse is on the screen, such as200, 200will be centered! Default width and height of the screen is 400, and the ellipse, unlike therect();is automatically centered!
The width and height is the main key, however, between the oval and the circle.
Hope that helped :)(11 votes)