Teaching guide: Intro to JS - Coloring

What the student will learn

• How to use the background() command to change the color of the entire canvas.
• How to use the fill() command to change the color of shapes and stroke() to change their outline.
• How to use strokeWeight() and noStroke() to modify the stroke outline.
• A brief overview of the RGB (Red-Green-Blue) color scheme and using the color picker.
• The importance of looking up functions in the documentation to remember how to use them, especially when working on projects.

The student will be able to write code like:

Where students struggle

• Students often struggle with the order of the commands. They must always call the color-changing functions before they draw the shapes they want to be colored. Encourage them to think carefully about the order and try moving lines of code around (copy/paste) to see what happens.
• Students sometimes confuse when to use fill() vs. stroke(), especially for lines - lines have no fill, so they must be colored with stroke().

Additional materials: Discussion questions

• How often do you find yourself using the documentation? Do you scroll to it or open it in a new tab?
• Have you seen the RGB color scheme used anywhere else? Have you seen any other ways that computers describe colors? (HSB and HSV are examples)
• How do you mix colors when you’re painting? How is different from specifying a color when programming?

Additional materials: Trivia questions