Arduino #39 使用 u8g2 庫在 SSD1306 OLED 上動態繪製骰子 (Draw dynamic dice on SSD1306 OLED with u8g2 library)

 Hi, welcome to this week's Weekend project with Stonez56.

This week is Arduino Episode #39, "Drawing Dice Dynamically at 0.96" OLED with u8g2" This video is suitable for people who want to learn how to draw patterns on SD 1336 LED.

=== IMPORTANT NOTICE === Do you want to generate u8g2 UTF8 font for your own Arduino projects? Try this online web tool I created @ https://kidsgo.net/u8g2 Just 3 easy steps to get UTF8 Arduino codes for your projects! Try it today!! === NOTICE ===

In the previous episode, I showed audiences how to use the accelerometer to draw dynamic dice in APP inventor 2. People who are interested can click this link to watch. (App Inventor Episode 11: https: //   • App Inventor #11 Write your own App (...   ) The next video is planned to transfer the dice points from App Inventor 2 to the OLED on ESP32 for display in real time. In this way, we can learn how to communicate from mobile App to ESP32. Stay tuned! References: * u8g2 font reference: https://github.com/olikraus/u8g2/wiki... * u8g2 Github: https://github.com/olikraus/u8g2

* u8g2 UTF8 font generator: https://kidsgo.net/u8g2 If you don’t have enough time, you can also choose the part you want to watch from the timeline below! Video timeline: 00:00 start 00:40 Results presentation (Demo) 01:15 Coding briefing 02:13 Use random in code 04:23 Show dice at random location 08:53 drawDice function 14:59 Show total points 16:07 Select u8g2 fonts

==================== 中文版 =================================

Hi，歡迎來到本週的 Weekend project with Stonez56。本週是 Arduino 第 39 集，“在 0.96" OLED 上使用 u8g2 動態繪製骰子”。此影片適合希望學習如何在 SD 1336 LED 上繪製圖案的人。

描述： 嗨，歡迎來到本週的 Stonez56 週末項目。本週是 Arduino 第 39 集，“在 0.96" OLED 上使用 u8g2 動態繪製骰子”。此視頻適合希望學習如何在 SD 1336 LED 上繪製圖案的人。 在上一集中，我向觀眾展示了如何使用加速計在 APP inventor 2 中繪製動態骰子。感興趣的人可以點擊此鏈接觀看。 (App Inventor 第 11 集：https://www.youtube.com/watch?v=2d6Si6u8FVE) 下一個視頻計劃將骰子點數從 App Inventor 2 轉移到 ESP32 上的 OLED 以進行實時顯示。這樣，我們就可以學習如何從移動應用程序與 ESP32 通信。敬請期待！ 參考文獻：

• u8g2 字體參考：https://github.com/olikraus/u8g2/wiki/fntlist16
• u8g2 Github：https://github.com/olikraus/u8g2
• u8g2 UTF8 font generator: https://kidsgo.net/u8g2(這是我寫的 UI, 快速, 小型化, 非方便建立你的 UTF8字型檔)

如果您沒有足夠的時間，您還可以在以下時間軸中選擇您想觀看的部分！ 視頻時間軸： 00:00 開始 00:40 結果展示（演示） 01:15 編碼簡報 02:13 在代碼中使用隨機 04:23 在隨機位置顯示骰子 08:53 drawDice 函數 14:59 顯示總分 16:07 選擇 u8g2 字體>


====================== ESP32 Codes ===============================

#include <Arduino.h>
#include <U8g2lib.h>

U8G2_SSD1306_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, /* reset=*/U8X8_PIN_NONE);

void setup(void)
{
    Serial.begin(115200);
    u8g2.begin();
    randomSeed(analogRead(5)); // randomSeed() must be in setup()!
}


// OLED TEXT ROW number, vertical position
const byte ROW[5] = {0, 15, 31, 47, 63};

// 4 dice top-left {x, y} locations in tl[]
const int tl[4][2] = {{2, 20}, {34, 28}, {68, 20}, {100, 28}};
const int size = 28; // dice width and height
const int diceRoundedCorner = 5;
/**
 * drawDiceImage
 *  n = dice serial (1 ~ 4)
 *  pnt = dice points (1 ~ 6)
 */
void drawDiceImage(int n, int pnt)
{
    int tx = tl[n][0];       // top left x
    int ty = random(17, 35); // Makes the y showing at random height
    // int ty = tl[n][1]; //top left y, makes Y showing at fixed height
    int centerX = tx + (size / 2); // center of the dice X
    int centerY = ty + (size / 2); // center of th dice  Y
    const int largeDotSize = 4;    // drawing dot size for 1 only
    const int smallDotSize = 2;    // drawing dot size for rest

    u8g2.drawRFrame(tx, ty, size, size, diceRoundedCorner); // draw the dice border

    // draw the points based on the variable: pnt
    switch (pnt)                                            
    {
    case 1:
        u8g2.drawFilledEllipse(centerX, centerY, largeDotSize, largeDotSize, U8G2_DRAW_ALL);
        break;
    case 2:
        u8g2.drawFilledEllipse(centerX, centerY - (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX, centerY + (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        break;
    case 3:
        u8g2.drawFilledEllipse(centerX, centerY - (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX, centerY, smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX, centerY + (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        break;
    case 4:
        u8g2.drawFilledEllipse(centerX - (size / 4), centerY - (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX - (size / 4), centerY + (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX + (size / 4), centerY - (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX + (size / 4), centerY + (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        break;
    case 5:
        u8g2.drawFilledEllipse(centerX - (size / 4), centerY - (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX - (size / 4), centerY + (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX + (size / 4), centerY - (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX + (size / 4), centerY + (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX, centerY, smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        break;
    case 6:
        u8g2.drawFilledEllipse(centerX - (size / 4), centerY - (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX - (size / 4), centerY, smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX - (size / 4), centerY + (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX + (size / 4), centerY - (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX + (size / 4), centerY, smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX + (size / 4), centerY + (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        break;
    default:
        break;
    }
}

void loop(void)
{
    int dicePoint[4];
    int totalPoints = 0;
    u8g2.clearBuffer();

    //Generate 4 random dice points 
    for (int i = 0; i < 4; i++)
    {
        dicePoint[i] = random(1, 6);    // get random dice number to point
        drawDiceImage(i, dicePoint[i]); // draw dice i with the random dicePoint
        totalPoints += dicePoint[i];    // adding current points to totalPoints
    }

    //Print out the title + total points
    u8g2.setCursor(0, ROW[1]);
    u8g2.setFont(u8g2_font_lubBI14_te); // font list: https://github.com/olikraus/u8g2/wiki/fntlist16
    u8g2.print("POINTS:");
    u8g2.print(totalPoints);

    u8g2.sendBuffer();
    delay(1500);
}
  

==================================================================