Watch now!

In diesem Projekt zeige ich dir, wie du eine faszinierende Ball-Animation auf einem TFT-Display mithilfe eines Arduino und der Adafruit ILI9341-Bibliothek erstellen kannst. Der Ball hüpft innerhalb eines gezeichneten Rahmens und prallt von den Rändern ab. Zusätzlich werden Texte oben und unten auf dem Display angezeigt.

Benötigte Komponenten:

  • Arduino (z. B. Arduino Uno)
  • TFT-Display (z. B. ILI9341)
  • Jumper-Kabel

Pin-Verbindungen:

TFT-Display Pin Arduino Pin
CS (Chip Select) 5
DC (Data/Command) 2
RST (Reset) 4
MOSI (Data In) 11
MISO (Data Out) 12
SCK (Clock) 13
VCC 5V
GND GND

Code-Überblick:

Der bereitgestellte Code initialisiert das TFT-Display und erzeugt eine Ball-Animation, die den Bildschirm füllt. Der Ball wird zufällig innerhalb eines festgelegten Rahmens positioniert und wechselt seine Richtung, wenn er die Ränder des Rahmens berührt.

#include <Adafruit_GFX.h>
#include <Adafruit_ILI9341.h>
#include <SPI.h>

#define TFT_CS   5
#define TFT_DC   2
#define TFT_RST  4

Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC, TFT_RST);

// Variablen für die Ball-Animation
int ballX;             // X-Position des Balls
int ballY;             // Y-Position des Balls
int ballRadius = 10;   // Radius des Balls
int speedX = 3;        // Geschwindigkeit in X-Richtung
int speedY = 2;        // Geschwindigkeit in Y-Richtung
int frameWidth = 220;  // Breite des Rahmens
int frameHeight = 160; // Höhe des Rahmens
int frameX;            // X-Position des Rahmens
int frameY;            // Y-Position des Rahmens

// Textvariablen
const char* topText = "HD Robotics";
const char* bottomText = "www.hdrobotics.de";

void setup() {
  Serial.begin(115200);
  Serial.println("TFT Display Ball Animation");

  // Initialisiere das Display
  tft.begin();
  tft.setRotation(1);  // Querformat
  tft.fillScreen(ILI9341_BLACK);

  // Rahmenposition in der Mitte des Displays berechnen
  frameX = (tft.width() - frameWidth) / 2;
  frameY = (tft.height() - frameHeight) / 2;

  // Startposition des Balls zufällig innerhalb des Rahmens
  ballX = frameX + random(ballRadius, frameWidth - ballRadius);
  ballY = frameY + random(ballRadius, frameHeight - ballRadius);

  // Text oben "HD Robotics"
  tft.setCursor(10, 10);
  tft.setTextColor(ILI9341_WHITE);  
  tft.setTextSize(2);
  tft.println(topText);

  // Text unten "www.hdrobotics.de"
  tft.setCursor(10, tft.height() - 30);
  tft.setTextColor(ILI9341_WHITE);  
  tft.setTextSize(2);
  tft.println(bottomText);

  // Rahmen zeichnen
  tft.drawRect(frameX, frameY, frameWidth, frameHeight, ILI9341_WHITE);
}

void loop() {
  // Ball löschen
  tft.fillCircle(ballX, ballY, ballRadius, ILI9341_BLACK);

  // Ballposition aktualisieren
  ballX += speedX;
  ballY += speedY;

  // Kollisionserkennung mit den Rahmenrändern
  if (ballX <= frameX + ballRadius || ballX >= frameX + frameWidth - ballRadius) {
    speedX = -speedX;  // Richtung umkehren
  }
  if (ballY <= frameY + ballRadius || ballY >= frameY + frameHeight - ballRadius) {
    speedY = -speedY;  // Richtung umkehren
  }

  // Ball zeichnen
  tft.fillCircle(ballX, ballY, ballRadius, ILI9341_RED);

  // Kurze Pause, um die Animation flüssig zu halten
  delay(20);
}

 

Nächste Schritte:

Im nächsten Tutorial werde ich die Touch-Funktionalität hinzufügen und erklären, wie du interaktive Elemente in dein Projekt integrieren kannst. Bleib dran und viel Spaß beim Programmieren!