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
Code beyond the hour
Whoa, nice, if you’re reading this, then you’ve done everything in our Hour of Code tutorial!
Like we said in the beginning, we can’t cover much in an hour, but hopefully we’ve given you an idea of how fun and powerful you can be with code.
If you want to keep going, we have a ton more you can learn. Just head over to our Intro to JS course.
You’ve already learned drawing and coloring, so you can just start with the variables tutorial.
If you want to keep experimenting with drawing and coloring, you can also create a new program.
From all of us, welcome to our coding community!
Want to join the conversation?
- How many pixels on a coordinate plane when coding? Like X=_ and Y=_ px(52 votes)
- The default Khan Academy canvases are 400 ⨯ 400 pixels.(100 votes)
- Can you insert 3D images in JavaScript such as spheres, cubes etc. ?(24 votes)
- thanks this is useful(7 votes)
- How do I make a project? Where do I go?(15 votes)
- Just actually answering your question. Courtesy of Malichi Knight:
Here is a PJS canvas: https://www.khanacademy.org/computer-programming/new/pjs
here is a html canvas: https://www.khanacademy.org/computer-programming/new/webpage
and here is a new sql canvas: https://www.khanacademy.org/computer-programming/new/sql(25 votes)
- I'm haveing trouble with lines(13 votes)
- The parameters in the line() function represent:
x1 the x-coordinate of the first point (x represents the position on the x, or horizontal, axis)
y1 the y-coordinate of the first point (y represents the position on the y, or vertical, axis)
x2 the x-coordinate of the second point
y2 the y-coordinate of the second point
To set the color of the line, use stroke(), not fill(), a common mistake. The thickness of the line is set by the strokeWeight() function.
Hope this helped!(8 votes)
- coding seems pretty complex,
especially the animation part.
At, why the eye dropped even they only change the size? 2:35(13 votes)- coloring is easy the shape part is complex(8 votes)
- How do you properly work a triangle because I was really confused on how to use it?(9 votes)
- The line of code is
triangle(x1,y1,x2,y2,x3,y3)
.
Let's break it down.x1
is the X coordinate of the first point of the triangle.y1
is the Y coordinate of the first point of the triangle. Similarly,x2
is the X coordinate of the second point of the triangle, etc.
Then the function will connect point 1 to point 2, point 2 to point 3, and point 3 to point 1, creating a triangle.(10 votes)
- how do you create a game?(5 votes)
- Khan Academy has an advanced course that teaches techniques for creating Games and Visualizations. Before you attempt that course, you should complete the Intro course, which starts here: https://www.khanacademy.org/computing/computer-programming/programming/intro-to-programming/v/programming-intro
NOTE: Some of the material is repeated from the Hour of Code, but there is additional material in the Intro course.(9 votes)
- this is hard. And how do other people make amazing coding games, and stuff?(2 votes)
- Practice. If you say it's hard and give up, you will never be able to make games. If you say it's hard, then work harder, you'll be able to make games as well :)(14 votes)
- In actual javascript(I believe this is javascript), it is so difficult to convert the output into an image or drawing. What changes has khan academy made to convert the code directly into a drawing ? And also does khan academy have any lesson which teaches beginners to convert a non formatted java script program into a drawing or image?
Thanks for your support(3 votes)- This is actual JavaScript - just a library of it called processing.JS, which provides several pre-defined functions. As for the output - it all depends on the code editor. Some provide a live output, others don't.(4 votes)
- How do I make a star out of coding?(4 votes)