Editing Openai/692fcfd8-4b44-800f-a184-fa098175a6d5 (section)

=== Assistant: 可以，來做一個「運算思維示範版」👍 ===
可以，來做一個「運算思維示範版」👍
重點是：不只是畫 21 個點，而是 利用 landmark 做「計算 → 判斷 → 給回饋」。

我幫你加兩個示範任務：
# 任務 A：判斷食指是「伸直」還是「彎曲」 - 用 index finger 的三個關節（MCP=5, PIP=6, DIP=7） - 算出在 PIP（6）這個點的「夾角」 - 角度大 ≈ 伸直，小 ≈ 彎曲
# 任務 B：判斷「拇指尖 + 食指尖」是否靠很近（Pinch） - 用 Thumb tip (4)、Index tip (8) - 算兩點距離，小於門檻就當作「捏起來」

這兩個都非常適合教「運算思維」四步驟：
👉 1. 取得資料（21 個點）
👉 2. 選關鍵點
👉 3. 做計算（距離 / 角度）
👉 4. 設條件，給出文字回饋

==== 下面這支程式會： ====
* 顯示 21 個 landmark + 編號
* 在畫面左上角顯示： - 食指角度（度數）＋「伸直/彎曲/介於中間」 - 拇指尖～食指尖距離＋是否「Pinch」

<syntaxhighlight lang="python">from cvzone.HandTrackingModule import HandDetector
import cv2
import math

=== ===== 小工具：距離與角度 ===== ===

def dist2d(a, b):
    """計算 2D 距離（不使用 math.dist，支援 Python 3.7）"""
    return ((a[0] - b[0]) ''' 2 + (a[1] - b[1]) ''' 2) ** 0.5

def angle_between(p1, p2, p3):
    """
    計算夾角 ∠p1-p2-p3（以 p2 為頂點）
    回傳角度（degree）
    """
    # 向量 v1 = p1 - p2, v2 = p3 - p2
    v1 = (p1[0] - p2[0], p1[1] - p2[1])
    v2 = (p3[0] - p2[0], p3[1] - p2[1])

    # 內積 v1·v2
    dot = v1[0] '' v2[0] + v1[1] '' v2[1]
    # 長度 |v1|, |v2|
    len1 = math.sqrt(v1[0] ''' 2 + v1[1] ''' 2)
    len2 = math.sqrt(v2[0] ''' 2 + v2[1] ''' 2)

    if len1 == 0 or len2 == 0:
        return 0.0

    cosang = dot / (len1 * len2)
    # 避免浮點數誤差造成超出 [-1, 1]
    cosang = max(-1.0, min(1.0, cosang))
    ang = math.degrees(math.acos(cosang))
    return ang

=== ===== CVZone 初始化 ===== ===

cap = cv2.VideoCapture(0)  # 如有需要可改成 cv2.VideoCapture(0, cv2.CAP_DSHOW)
detector = HandDetector(detectionCon=0.7, maxHands=1)

while True:
    success, img = cap.read()
    if not success:
        break

    hands, img = detector.findHands(img)  # img 會自動畫骨架

    info_lines = []  # 要顯示在畫面左上的文字行

    if hands:
        hand = hands[0]
        lmList = hand["lmList"]   # 21 個 [x,y,z]
        handType = hand["type"]   # "Left" or "Right"

        # --- 把 21 點畫出來 + 編號（可當教學用）---
        for i, lm in enumerate(lmList):
            x, y, z = lm
            cv2.circle(img, (x, y), 5, (0, 0, 255), cv2.FILLED)
            cv2.putText(img, str(i), (x + 5, y - 5),
                        cv2.FONT_HERSHEY_PLAIN, 1, (255, 255, 0), 1)

        # ===== 任務 A：判斷食指彎曲程度 =====
        # 食指關節點：MCP=5, PIP=6, DIP=7
        p_mcp = lmList[5]
        p_pip = lmList[6]
        p_dip = lmList[7]

        ang_index = angle_between(p_mcp, p_pip, p_dip)

        # 簡單規則：
        # 角度 > 150 度 → 幾乎筆直
        # 角度 < 120 度 → 明顯彎曲
        # 介於中間 → 半彎
        if ang_index > 150:
            index_state = "伸直"
        elif ang_index < 120:
            index_state = "彎曲"
        else:
            index_state = "介於直/彎之間"

        info_lines.append("食指角度: {:.1f} 度 ({})".format(ang_index, index_state))

        # ===== 任務 B：判斷拇指尖 + 食指尖距離（Pinch or not） =====
        thumb_tip = lmList[4]  # 拇指尖
        index_tip = lmList[8]  # 食指尖

        d_thumb_index = dist2d(thumb_tip, index_tip)

        # 簡單門檻：距離 < 40 pixel 視為 Pinch
        # （實際可視鏡頭解析度調整）
        if d_thumb_index < 40:
            pinch_state = "Pinch (捏住)"
        else:
            pinch_state = "分開"

        info_lines.append("拇指尖-食指尖距離: {:.1f} ({})".format(d_thumb_index, pinch_state))

        # 也可印在 console 給老師 debug
        # print(info_lines[0])
        # print(info_lines[1])

    # ===== 把資訊畫到畫面左上角 =====
    y0 = 30
    for line in info_lines:
        cv2.putText(img, line, (10, y0),
                    cv2.FONT_HERSHEY_SIMPLEX, 0.6, (0, 255, 0), 2)
        y0 += 25

    cv2.imshow("Hand 21 Landmarks - 運算思維示範版", img)

    if cv2.waitKey(1) & 0xFF == ord("q"):
        break

cap.release()
cv2.destroyAllWindows()

</syntaxhighlight>

==== 可以直接拿這支程式跟學生拆解： ====

===== <syntaxhighlight lang="python">lmList = hand["lmList"] =====

</syntaxhighlight>
* 這裡得到的是： [(x0,y0,z0), (x1,y1,z1), ..., (x20,y20,z20)]
* 運算思維重點：先知道系統給你的原始資料長什麼樣子

===== - 食指角度 → 只用 5, 6, 7 三個點 =====
* Pinch → 只用 4, 8 兩個點

=> 從 21 點裡挑出「對解題有用的那幾點」

===== - 距離： dist = sqrt((x1-x2)^2 + (y1-y2)^2) =====
* 角度： 利用內積公式： cosθ = (v1·v2) / (|v1||v2|) → θ = arccos(...)

可以讓學生自己寫在學習單上，或用白板演算。

===== - 如果 角度 > 150 → 顯示「伸直」 =====
* 如果 距離 < 40 → 顯示「Pinch」

這邊很適合讓學生自己改數字，試看看效果：
* 把 150 改成 140，看「伸直」變多還是變少
* 把 40 改成 60，看「Pinch」變容易還是變困難

如果你願意，我也可以幫你：
* 把這段「運算思維示範」改寫成 學習單題目（引導學生填空）
* 或產出一份 PPT 架構（每一頁拆一個步驟：資料 → 抽象 → 演算法 → 條件判斷）

你想往「教案 / 學習單 / PPT」哪一邊走，我可以直接幫你接下一步。