Tutorials › Making Decisions Simple Mode

Making Decisions

Learn how to use if, else, and comparisons to make your programs react to what's happening.

1

Your First If

An if statement lets your program make decisions. You give it a condition — something that's either true or false — and the code inside only runs when the condition is true. Here we check if mouseX is past the middle of the screen. The > symbol means "greater than".
0 / 12 lines
Loading editor...
size(400 300) draw: background(white) noStroke() if (mouseX > 200) { fill(dodgerblue) } else { fill(tomato) circle(200 150 60); }
Try it!

Try changing the 200 to 100. Now the color changes much earlier — can you see why?

2

If and Else

The else block runs when the condition is false. This gives you two choices: "if this, do A — otherwise, do B." Let's use mouseIsPressed to toggle between two visual states.
0 / 19 lines
Loading editor...
size(400 300) draw: background(white) noStroke() if (mouseIsPressed) { fill(gold) circle(200 150 80) fill(30) textSize(18) text("Pressed!" 162 155) } else { fill(dodgerblue) rect(150 100 100 100) fill(white) textSize(18) text("Click me!" 155 155) }
Try it!

Try making the shape grow bigger when pressed — change the circle radius to 100!

3

Multiple Conditions

Use else if to check multiple conditions in order. The first one that's true wins! You can also combine conditions with && (and) or || (or). Here we split the screen into three colored zones.
0 / 23 lines
Loading editor...
size(400 300) draw: noStroke() if (mouseX < 133) { background(tomato) fill(white) textSize(20) text("Zone 1" 30 150) } else if (mouseX < 266) { background(gold) fill(30) textSize(20) text("Zone 2" 165 150) } else { background(mediumseagreen) fill(white) textSize(20) text("Zone 3" 300 150) fill(30); circle(mouseX mouseY 15); }
Try it!

Add a 4th zone by splitting the screen into quarters instead of thirds!

4

Building a Button

Let's combine everything to build an interactive button! We check if the mouse is inside the button rectangle using && (and) to combine four conditions: is mouseX between left and right, AND is mouseY between top and bottom? Then we also check mouseIsPressed for the click state.
0 / 37 lines
Loading editor...
let btnW = 150, btnH = 50; let clicks = 0; let wasPressed = false; setup: size(400 300) draw: background(30) noStroke() let hover = mouseX > btnX && mouseX < btnX + btnW && mouseY > btnY && mouseY < btnY + btnH if (hover && mouseIsPressed) { fill(mediumseagreen) if (!wasPressed) { clicks++ wasPressed = true } else if (hover) { fill(dodgerblue); } else { fill("#45475a"); } if (!mouseIsPressed) wasPressed = false; rect(btnX btnY btnW btnH 8); fill(white); textSize(16); text("Click me!" btnX + 35 btnY + 22); fill("#a6adc8"); textSize(14); text("Clicks: " + clicks 165 220); }

What to try next

  • Make the button change to a different color each time you click it
  • Add a second button that resets the click counter to 0
  • Create a traffic light that cycles through red, yellow, green when clicked
  • Build a simple quiz: show a question and highlight the correct answer on hover