JavaScript Drawing and Animation: Free Course

About this course

Learn programming by creating drawings and animation in this free JavaScript course from Khan Academy. All forty-two source recordings cover the building blocks of code alongside visual examples: variables, expressions, conditions, loops, functions, arrays, objects and interaction. The demonstrations use the ProcessingJS learning environment. Following a visual change on screen can help a beginner connect a line of code with its effect and develop a systematic way to investigate unexpected results.

Course at a glance

What you’ll learn

• Use drawing commands, text and color to create a small visual program.
• Control behavior with variables, expressions, conditions and logical operators.
• Use loops, functions and parameters to organize repeated work.
• Explore arrays, objects, methods and interaction in the demonstrated environment.
• Read, trace and debug a program before extending it.

Skills you’ll gain

• JavaScript
• ProcessingJS
• Animation
• Programming logic
• Functions and objects
• Debugging

Course Overview

The recorded curriculum introduces programming through visual output, then develops the control and data structures needed to make a program more interesting. Individual recordings explain functions, loop behavior, arrays and object-related concepts, while drawing and interaction demonstrations show how those ideas affect the result. The complete source list also retains documentation, readability and peer-learning recordings. ProcessingJS functions are part of this teaching environment, so practice should use the compatible functions demonstrated in the videos. The general JavaScript reasoning can support later programming study beyond the drawing exercises.

How to study the course

• Videos 1–10: this part of the source list includes “Incrementing shortcuts” through “Modifying Arrays”. State the intended input, operation and result. Keep a brief working note, revisit an unclear explanation and test one example before moving to another part of the material.
• Videos 11–21: this part of the source list includes “Making drawings with code” through “If/Else – Part 2”. Reproduce a demonstration before modifying it. Keep a brief working note, revisit an unclear explanation and test one example before moving to another part of the material.
• Videos 22–31: this part of the source list includes “Intro to Objects” through “If Statements”. Trace behavior and investigate unexpected output. Keep a brief working note, revisit an unclear explanation and test one example before moving to another part of the material.
• Videos 32–42: this part of the source list includes “Terrific Text: Part One” through “Coloring with code”. Check the example with a changed condition. Keep a brief working note, revisit an unclear explanation and test one example before moving to another part of the material.

Who is this for?

This course suits learners studying the specific programming or computing topic. It also provides a recorded reference for revisiting a topic after an earlier lesson or study attempt. Choose examples appropriate to your background and allow time to work through the method instead of judging understanding only by how familiar the terminology sounds.

Before you start

Use a suitable practice environment for the language or tool shown in the recordings. Earlier programming knowledge is useful for topic courses that build on variables, functions or data structures. The recordings use the ProcessingJS drawing environment; practice should follow that environment’s demonstrated functions.

Put the lessons into practice

Create a small animated scene in a compatible ProcessingJS learning environment. Use variables for a position or size, a function for a repeated drawing operation and a condition that changes behavior. Add a loop or collection only after you can explain the simpler version. Test one normal interaction and one boundary condition, such as an object reaching an edge. Trace an unexpected result, correct the cause and describe what changed. Keep the program small enough that every important line has a purpose you can explain.

This optional study activity is provided by WikiFree for independent practice. Keep your working notes and use the relevant classroom recording to check a step, definition or interpretation. It is not an instructor-marked assignment.

Certificate / Assessment

Watching the public videos and using WikiFree completion tracking does not award a certificate, academic credit, an examination voucher or instructor assessment. Use your practice output to review what you can explain and repeat independently. The recorded lessons provide study material; completion tracking records your progress through that material.

Frequently asked questions

Provider: Khan Academy. Videos play from the Khan Academy channel on YouTube.