If you're seeing this message, it means we're having trouble loading external resources for Khan Academy.

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

Buttons. Buttons, buttons, buttons! Besides being the shape of my nose, a button is an area that you click to make something happen. Look around this webpage, how many button-y things do you see? Look around wherever you're sitting, how many button-y things surround you?

There are buttons everywhere, and you'll often want some sort of button in the programs that you make here. Check out these example programs to see how they use buttons:

Screenshot of Mini PuttMini Putt Screenshot of 6 Reasons Not to Be a Fly program 6 Reasons Not to Be a Fly

Screenshot of 3D Roller Coaster program 3D Roller Coaster Screenshot of the Copy Slayers program The Copy Slayers

There are some programming environments that provide buttons and other user interface elements out of the box, like HTML provides for webpages, but ProcessingJS is not one of those. Instead, ProcessingJS gives us building blocks:

  • commands to draw shapes and text
  • ways to listen to events
  • ways to detect the mouse location of them.

We can put those building blocks together to make buttons, and in doing so, we'll learn more about programming. We'll start with the simplest button possible, then make our code more re-usable with functions, and finally organize it even more with object-oriented principles.

Onward, to the button-mobile!