Syntax Guide

This is hidden content that appears when clicked!

• Understand mouse events in py5
• Create interactive graphics
• Use variables to track state

Remember that mouseX and mouseY give you the current mouse position. You can use these anywhere in your code!

The Code:

def setup():
    size(400, 400)
    background(255)

def draw():
    # Don't clear the background - create a painting effect!
    fill(random(255), random(255), random(255))
    circle(mouseX, mouseY, 20)

How it works:

1. No background() in draw() - This means previous circles stay on screen
2. random(255) - Generates random colors for each circle
3. mouseX, mouseY - Makes circles appear at cursor position

Try moving your mouse slowly for a snake-like effect!

Create a program that prints “Click!” to the console each time you click.

def mousePressed():
    print("Click!")

def setup():
    size(400, 400)

def draw():
    background(200)

def mousePressed():
    print("Click!")

Now make it count how many times you’ve clicked and display the number on screen.

click_count = 0  # Define outside functions

def mousePressed():
    global click_count
    click_count += 1

click_count = 0

def setup():
    size(400, 400)
    textSize(32)

def draw():
    background(200)
    text(f"Clicks: {click_count}", 150, 200)

def mousePressed():
    global click_count
    click_count += 1

Draw a circle target. Only count clicks when the user clicks inside the circle!

click_count = 0
target_x = 200
target_y = 200
target_size = 50

def setup():
    size(400, 400)
    textSize(32)

def draw():
    background(200)

    # Draw target
    fill(255, 0, 0)
    circle(target_x, target_y, target_size)

    # Draw score
    fill(0)
    text(f"Score: {click_count}", 150, 50)

def mousePressed():
    global click_count
    # Check if click is inside circle
    distance = dist(mouseX, mouseY, target_x, target_y)
    if distance < target_size/2:
        click_count += 1

Answer: mouseX represents the current horizontal (x) position of the mouse cursor within the sketch window, measured in pixels from the left edge.

Answer: The draw() function runs continuously in a loop, approximately 60 times per second (60 FPS) by default, after setup() completes.

Answer: Use the mousePressed() function. This function is called once each time the mouse button is pressed down.

def mousePressed():
    # Your code here runs once per click
    print("Clicked!")

Complete Code:

bg_color = 0

def setup():
    size(400, 400)

def draw():
    background(bg_color)

def mousePressed():
    global bg_color
    bg_color = random(255)

1. Always leave a blank line after <summary> tags when using markdown inside
2. Use clear, action-oriented labels like “Click for hint” or “Show solution”

3. Use emoji sparingly but consistently:

   • 💡 for hints
   • ✅ for solutions
   • 🎯 for objectives
   • 📝 for exercises
   • ⚠️ for warnings
   • 🎮 for challenges
4. Structure hints progressively - from vague to specific
5. Include “Try it yourself first!” messages before solutions

## Exercise: [Name]

**Goal:** [What students will create]

### Instructions

[Step-by-step what to do]

<details markdown="1">
<summary>💡 Hints</summary>

<details markdown="1">
<summary>Hint 1</summary>
[Gentle nudge]
</details>

<details markdown="1">
<summary>Hint 2</summary>
[More specific help]
</details>

</details>

<details markdown="1">
<summary>✅ Solution</summary>

```python
# Complete solution code
```

How it works: [Explanation]

[Extension activity for fast finishers]