M5StickCplus2/docs/superpowers/plans/2026-05-09-bouncing-hello-world-ball.md

Bouncing "Hello World" Ball Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Modify src/main.cpp so that "Hello World" bounces around the screen inside a filled circle that changes colour on each wall hit.

Architecture: Single-file firmware sketch. The ball position/velocity/colour are tracked in a Ball struct. Each loop() iteration clears the screen, updates position, bounces off edges (changing colour), and draws a filled circle with centred white text.

Tech Stack: Arduino (PlatformIO), M5Unified, M5StickC Plus2 (ESP32), 135×240 TFT display.

---

Task 1: Rewrite src/main.cpp with ball + text rendering

Files:

• Modify: src/main.cpp (entire file)

• Step 1: Replace the file content

Replace src/main.cpp with the following:

#include <M5Unified.h>

struct Ball {
    float x, y;
    float vx, vy;
    uint16_t radius;
    uint16_t color;
};

uint16_t colors[] = {TFT_RED, TFT_GREEN, TFT_BLUE, TFT_YELLOW, TFT_MAGENTA, TFT_CYAN};
const int numColors = sizeof(colors) / sizeof(colors[0]);
int colorIndex = 0;

Ball ball;

void setup() {
    M5.begin();

    ball.radius = 35;
    ball.x = M5.Lcd.width() / 2.0f;
    ball.y = M5.Lcd.height() / 2.0f;
    ball.vx = 2.0f;
    ball.vy = 2.5f;
    ball.color = colors[0];
}

void loop() {
    M5.Lcd.fillScreen(TFT_BLACK);

    ball.x += ball.vx;
    ball.y += ball.vy;

    if (ball.x + ball.radius >= M5.Lcd.width() || ball.x - ball.radius <= 0) {
        ball.vx *= -1;
        colorIndex = (colorIndex + 1) % numColors;
        ball.color = colors[colorIndex];
        ball.x = (ball.x + ball.radius > M5.Lcd.width()) ? M5.Lcd.width() - ball.radius : ball.radius;
    }

    if (ball.y + ball.radius >= M5.Lcd.height() || ball.y - ball.radius <= 0) {
        ball.vy *= -1;
        colorIndex = (colorIndex + 1) % numColors;
        ball.color = colors[colorIndex];
        ball.y = (ball.y + ball.radius > M5.Lcd.height()) ? M5.Lcd.height() - ball.radius : ball.radius;
    }

    M5.Lcd.fillCircle((int)ball.x, (int)ball.y, ball.radius, ball.color);
    M5.Lcd.setTextColor(TFT_WHITE);
    M5.Lcd.setTextSize(1);
    int16_t textW = M5.Lcd.textWidth("Hello World");
    int16_t textH = 8;
    M5.Lcd.setCursor((int)ball.x - textW / 2, (int)ball.y - textH / 2);
    M5.Lcd.print("Hello World");

    delay(15);
}

• Step 2: Verify the file was written correctly

Run: cat src/main.cpp | head -5 Expected: file starts with #include <M5Unified.h>

Also check that #include <vector> is removed (no longer needed).

• Step 3: Commit

git add src/main.cpp
git commit -m "feat: bouncing Hello World ball that changes colour on edge hit"