If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Main content

Teaching guide: Intro to JS - Interactive Programs

This is a teaching guide for the Intro to JS lesson on 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

These are questions that you can ask students individually after they've done the lesson, or lead a group discussion around, if everyone's gotten to the same point.
  • 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

These can be fun to do as a class after everyone’s gotten through the lesson. They can also lead to discussion about which questions are the hardest. Play them on Quizizz.

Want to join the conversation?

  • male robot hal style avatar for user ★Lucius★
    var positions = [
    {x: 100, y: 70, label: "Hope"},
    {x: 100, y: 170, label: "Peace"},
    {x: 100, y: 270, label: "Love"}

    for (var i = 0; i < positions.length; i++) {
    var position = positions[i];
    fill(214, 32, 214);
    ellipse(position.x, position.y, 100, 100);
    fill(255, 255, 255);
    text(position.label, position.x-15, position.y);
    (2 votes)
    Default Khan Academy avatar avatar for user
  • leaf orange style avatar for user Larry Serflaten
    "Those variables must be used inside the draw function, so that the program sees their values changing over time and updates accordingly."

    mouseX and mouseY can be used ANYWHERE in the program to get the current location of the mouse. The draw function should ONLY be used when the program is doing animation. Normal input should be from the mouse and keyboard functions.
    (mouseMoved, mousePressed, mouseClicked... keyPressed, keyReleased ... etc)
    (1 vote)
    Default Khan Academy avatar avatar for user