Drawing with code

This course is a part of Hour of Code, a 6-course Topic series from Khan Academy.

Learn how to make drawings in code, using the JavaScript language and ProcessingJS library.

This course contains 16 segments:

Welcome to our Hour of Code™!

The 'Hour of Code' is a nationwide initiative by Computer Science Education Week and Code.org to introduce millions of students to one hour of computer science and computer programming.

Learning coding on Khan Academy

Making drawings with code

We'll explain how to draw circles with code (JavaScript and ProcessingJS), and then you'll get to try it yourself in a challenge.

Quick tip: number scrubbing

Challenge: Simple snowman

Drawing more shapes with code

Learn how to draw rectangles and lines with code (JavaScript and ProcessingJS).

Challenge: Waving snowman

Coloring with code

Learn how to color and add outlines to your drawings in with code (JavaScript and ProcessingJS).

Quick tip: color picking

Challenge: Sunny snowy day

Quick tip: Use the docs!

Pick a drawing project!

Project: Super snowman

Congratulations on learning how to draw and color shapes by calling different functions! Now you're going to take the snowman you've been working and add more: give the snowman a face, color it crazy colors, make the snowman look like you, make the snowman look like a hybrid animal, give the snowman clothing, make a snowman - whatever sounds the most fun to you. 

You can copy/paste the code from your challenges into this project, or start with this basic starter code.

If you have paper handy (especially grid paper), try drawing out your ideas first. Then check the documentation below to remember how to use the functions you learned or even to use new functions that you didn't learn yet. If you get stuck, "Request Help" under your program or ask your classmates for ideas.

Tip: use arc() for smiles (example), triangle() for carrot noses (example), and try bezier() for fancy scarves (example).

Project: Wild animal

Congratulations on learning how to draw and color shapes by calling different commands! Now you're going to put that knowledge to work, by creating a wild looking animal. You can try to draw one of your favorite animals, or if you really want to go wild, invent a new animal that only exists in your head.

If you have paper handy (especially grid paper), try drawing out your ideas first. Then check the documentation below to remember how to use the functions you learned or even to use new functions that you didn't learn yet.  If you get stuck, "Request Help" under your program or ask your classmates for ideas.

Tips: use triangle() for noses/beaks (example), arc() for a smile (example), rect() for feet (example).

Once you're done, share your drawing with your friends and family by clicking "Share" and sending them the link. Now, go wild!

Project: Self portrait

Congratulations on learning how to draw and color shapes by calling different functions! Now you can practice those skills by turning the program below into a portrait of you. Change the skin, hair, nose, eyes, accessories - whatever you think is distinctive about yourself. You could even add a body and scene.

If you have paper handy (especially grid paper), try drawing out your ideas first. Then check the documentation below the program to remember how to use the functions you learned or even to use new functions that you didn't learn yet. If you get stuck, "Request Help" under your program or ask your classmates for ideas.

Tips: combine shapes to make hair (example), use arc() for eyebrows (example) or for smiles (example), try curveVertex() for a nose (example).

Code beyond the hour