「Arduinoの基礎 - ST7735」の版間の差分

📢 Webサイト閉鎖と移転のお知らせ

このWebサイトは2026年9月に閉鎖いたします。

移転先はhttps://mochiu.net/index.php?title=Arduinoの基礎 - ST7735です。

新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）

新しい編集 →

ビジュアルウィキテキスト

@@ 195行目: / 195行目: @@
     tft.setTextColor(color);
     tft.print(text);
+ }
+ </syntaxhighlight>
+<br><br>
+== アニメーションの描画 ==
+ST7735を使用してアニメーションを描画することができる。<br>
+また、複数のアニメーションの組み合わせる、あるいは、パラメータの調整を行うことにより、より複雑な動きを実現することも可能である。<br>
+<br>
+ただし、メモリ使用量に注意する必要がある。<br>
+また、更新頻度が高すぎると描画が追いつかない可能性があるため、可能な限り必要な部分のみを更新する。<br>
+<br>
+<u>delay関数は使用せずに、millis関数 (ノンブロッキング処理) を使用してタイミング制御をする必要がある。</u><br>
+<br>
+==== 例 : バウンドするボール ====
+ <syntaxhighlight lang="c++">
+ // アニメーションの状態変数
+ int ballX = 64;        // ボールのX座標
+ int ballY = 64;        // ボールのY座標
+ int ballSize = 10;     // ボールの大きさ
+ int ballSpeedX = 2;    // X方向の速度
+ int ballSpeedY = 2;    // Y方向の速度
+ void setup()
+ {
+   tft.initR(INITR_BLACKTAB);
+   tft.fillScreen(ST77XX_BLACK);
+ }
+ void loop()
+ {
+   // 前のフレームのボールを消す
+   tft.fillCircle(ballX, ballY, ballSize, ST77XX_BLACK);
+   // ボールの位置を更新
+   ballX += ballSpeedX;
+   ballY += ballSpeedY;
+   // 画面端での跳ね返り
+   if (ballX >= tft.width() - ballSize || ballX <= ballSize) {
+     ballSpeedX = -ballSpeedX;
+   }
+   if (ballY >= tft.height() - ballSize || ballY <= ballSize) {
+     ballSpeedY = -ballSpeedY;
+   }
+   // 新しい位置にボールを描画
+   tft.fillCircle(ballX, ballY, ballSize, ST77XX_RED);
+   delay(30);  // アニメーションの速度調整
+ }
+ </syntaxhighlight>
+<br>
+==== 例 : 回転する線 ====
+ <syntaxhighlight lang="c++">
+ float angle = 0;
+ int centerX = tft.width() / 2;
+ int centerY = tft.height() / 2;
+ int radius = 30;
+ void loop()
+ {
+   // 前のフレームをクリア
+   tft.fillScreen(ST77XX_BLACK);
+   // 新しい線を描画
+   int endX = centerX + cos(angle) * radius;
+   int endY = centerY + sin(angle) * radius;
+   tft.drawLine(centerX, centerY, endX, endY, ST77XX_WHITE);
+   angle += 0.1;  // 回転角度を更新
+   delay(30);
+ }
+ </syntaxhighlight>
+<br>
+==== 例 : プログレスバー ====
+ <syntaxhighlight lang="c++">
+ void animateProgressBar()
+ {
+   int barWidth = tft.width() - 20;  // バーの幅
+   int barHeight = 10;               // バーの高さ
+   int startX = 10;                  // 開始X座標
+   int startY = tft.height() / 2;    // 開始Y座標
+   for (int progress = 0; progress <= barWidth; progress++) {
+     // バーの背景
+     tft.drawRect(startX, startY, barWidth, barHeight, ST77XX_WHITE);
+     // プログレス部分
+     tft.fillRect(startX, startY, progress, barHeight, ST77XX_BLUE);
+     delay(20);
+   }
+ }
+ </syntaxhighlight>
+<br>
+==== アニメーションを滑らかにする手順 ====
+===== ダブルバッファリング =====
+ <syntaxhighlight lang="c++">
+ // 前のフレームを消去してから新しいフレームを描画
+ void clearPreviousFrame()
+ {
+   // 特定の領域だけを消去
+   tft.fillRect(x, y, width, height, ST77XX_BLACK);
+ }
+ </syntaxhighlight>
+<br>
+===== フレームレート制御 =====
+ <syntaxhighlight lang="c++">
+ unsigned long previousMillis = 0;
+ const long frameInterval     = 33;  // 約30[FPS]
+ void loop()
+ {
+   unsigned long currentMillis = millis();
+   if (currentMillis - previousMillis >= frameInterval) {
+     previousMillis = currentMillis;
+     // アニメーションの更新処理
+     updateAnimation();
+   }
   }
   </syntaxhighlight>