Tutorials › Making Decisions JS 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 / 16 lines
Loading editor...
size(400, 300); } function 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 / 22 lines
Loading editor...
size(400, 300); } function 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 / 27 lines
Loading editor...
size(400, 300); } function 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 / 40 lines
Loading editor...
let btnW = 150, btnH = 50; let clicks = 0; let wasPressed = false; function setup() { size(400, 300); } function 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
← Make It MoveGame Physics →