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

What are buttons?

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 Putt
Screenshot of 6 Reasons Not to Be a Fly program
Screenshot of 3D Roller Coaster program
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!

Want to join the conversation?