Teaching guide: Intro to JS - Interactive Programs

What the student will learn

• How to use mouseX and mouseY to make a program that draws shapes according to the current mouse position, like a painting app.

The student will be able to write code like:

Where students struggle

• Students may try to use mouseX and mouseY outside of the draw function, and be disappointed their program doesn’t work. If they’re used outside the draw function, they’ll only hold the initial value of the mouse location. Those variables must be used inside the draw function, so that the program sees their values changing over time and updates accordingly.
• Students may have trouble grasping how to use mouseX and mouseY to change the color of their shapes. Remind them that RGB colors go from 0-255, and mouseX and mouseY will vary from 0-400. Encourage them to experiment with using the variables as different parameters to their functions, and seeing what happens as a result. Show them that they can also use the fourth parameter of fill() to change the opacity, for more cool effects.

Additional materials: Discussion questions

• If you have arts and crafts supplies around, do some drawing or painting, and ask students how they would make a program that mimics the in-person art creation.

Additional materials: Trivia questions