程式語言？

讓你快速理解程式的功用！

- Arvin Liu

來點互動吧！

你可以在上面
匿名發問！

我還會在上面開匿名投票，大家上去玩玩看吧！

來點互動吧！

讓你匿名問問題！
(不是問題也可以)

大家都喜歡投票

接下來了解一下
「程式語言」吧！

「語言」?

「言語」とはどういう意味ですか?

「語言」的目的？

當然就是傳達意思啦。

  • 我們平常講話的「語言」，又叫做自然語言
  • 但你聽得懂其他國家的語言嗎？
  • 你也許知道牠說什麼，但你應該不知道牠在說什麼。

(Natural Langauge)

  • 約定俗成的溝通方式
  • 每個地區語言都不同
  • 就算相同，同樣的字句意思可能也不太一樣。
    • 例如：「我喜歡上一個人」，你覺得有幾種意思呢？
       
  • 你知不知道有哪種語言不具備以上的「缺點」呢？
    • 數學的表達是看起來就很精準。

自然語言

🅰️

當然你也有可能看不懂

程式語言

  • 描述必須精準，一個句子，不會有兩種解讀或行為。
  • 盡量讓各國人種都有辦法學習。
    • 大多用英文單字寫。
    • 但會用的單字很少，
      不需要害怕(?)
  • 目的：讓電腦一看就知道
    你要讓它做甚麼事情。

💻

statement

undefined behavior

  • 這可能就是一個不太友善的
    程式語言，兩種意義上。

那「程式」的目的是什麼呢？

「程式」?

所謂的「程式」跟「Python」究竟是什麼?

程式 = 自動化

想做一件事情，但這很繁瑣 😞

  • 想辦法自動化。
    • Minecraft - 用紅石製作刷怪塔等等
    • 缺氧 - 打造一個(接近)資源正循環的遊戲
    • Shapez - 製造類遊戲
    • Palworld - 叫奴隸帕魯們做事

不只是遊戲內的自動化！

  • 遊戲腳本
    • 還是不鼓勵
      大家開外掛/腳本啦...
  • 爬蟲 / 搶票程式

程式：解放你雙手的工具！

不過，要怎麼自動化呢？

想想看，要怎麼
精準的教別人做某件事情？

Q: 請問要如何把大象放進冰箱？​​

  1. 把冰箱打開
  2. 把大象放進冰箱
  3. 把冰箱關起來

其實(可能)大概就是這樣

寫程式的步驟

了解問題或者需求。

1

2

你會怎麼解決這個問題？
把你的解法公式化！

3

用笨蛋也聽得懂的方式，寫下這個解法的步驟

(指電腦)

你是工程師了！

4

讓我們看看
實際問題吧！

找硬幣問題

一個「也許」你一直以來都會的問題...

找硬幣問題

在台灣當店員的你，怎麼找客人錢會最好？

找硬幣問題

「最好」是什麼意思？

  • 我們姑且先當找的鈔票+硬幣數量最少。

如果你想要找 261 元，你會怎麼做？

  • 對你朋友找 261 個 1元硬幣
  • 兩張 100 鈔票 + 一個 50 元硬幣 +
    一個 10 元硬幣 + 一個 1 元硬幣

在台灣當店員的你，怎麼找客人錢會最好？

找硬幣問題

可是，你今天想要「自動化」，

你能想出一套流程適配所有找零的可能嗎？

在台灣當店員的你，怎麼找客人錢會最好？

你的回答可能是...

從最大的幣值 1000元 開始看：

  • 如果還沒找完的錢     ≥ 1000 元，

    那麼要找               張 1000 紙鈔。
     
  • 找完後，從第二大的幣值 500元 開始看。
  • ...
  • 到 1元 一定可以找完所有錢。

從最大的面額往下找。

  • 讓我們來更精準的講步驟吧！
x
\lfloor \frac{x}{1000} \rfloor

用程式語言來描寫的話...

從最大的幣值 1000元 開始看：

  • 如果還沒找完的錢     ≥ 1000 元，

    那麼要找               張 1000 紙鈔。
x
\lfloor \frac{x}{1000} \rfloor
if 還要找的錢 >= 1000:
  輸出: 要找 [x / 1000] 張 1000 元紙鈔
  還要找的錢 扣掉 (找 1000 元紙鈔的數量 * 1000)

如果寫成程式，大概就是這樣：

應該不難吧？ (真正的語法等你真的上課再說囉 😌)

然後往下繼續寫 500, 100, 50, 10, 5, 1 元的 Case

想辦法擴展問題吧！

如果現在不限定國家，並且有以下限制：

  1. 面額最小為 1 元。
  2. 所有面額皆為正整數。

那麼你覺得剛剛的解 (從最大開始看)，是正確的嗎？

其實這可能是錯的，舉例來說：

  • 如果有個神奇國家，發行的貨幣有 1, 4, 5 元。
    • ​那麼找 8 元的時候，這個算法會失靈。​​​

想知道要怎麼建構出適合所有國家的算法嗎？

歡迎報名課程，你就會了。關鍵字：動態規劃

了解問題或者需求。

你是工程師了！

寫程式的步驟

1

2

你會怎麼解決這個問題？
把你的解法公式化！

3

用笨蛋也聽得懂的方式，寫下這個解法的步驟

(指電腦)

4

演算法

「世界」運作的方法

什麼是演算法？

看 Youtube 應該難免都會聽到「演算法」，

但這個字到底是什麼意思？

(Algorithm)

演算法 = 解決問題的方法步驟

找零程式就是種演算法！

學了演算法可以幹嘛？

  1. 了解「世界」的運作 - 分析 & 解決能力 ⬆️⬆️

下棋的攻防思考

Youtube的推薦系統

學了演算法可以幹嘛？

  1. 了解「世界」的運作 - 分析 & 解決能力 ⬆️⬆️
  2. 每個行業都會碰到

用電腦分析商業行為
(量化分析)

社會分析 - 判斷網軍
(文本解析)

學了演算法可以幹嘛？

  1. 了解「世界」的運作 - 分析 & 解決能力 ⬆️⬆️
  2. 每個行業都會碰到
  3. 對你的大學申請也許有幫助

大學程式先修檢定
(可以降低你大考門檻用的)

各種比賽增加你的經歷
(TOI 前11名可以直接保送)

學了演算法可以幹嘛？

  1. 了解「世界」的運作 - 分析 & 解決能力 ⬆️⬆️
  2. 每個行業都會碰到
  3. 對你的大學申請也許有幫助
  4. 網頁、AI、區塊鍊、機器人...不想瞭解一下嗎？

還有
其他用處嗎？

描繪世界

模擬世界，模擬宇宙

模擬

電腦除了解決問題以外，也可以做到「模擬」。

物理的雙擺系統

(double pendulum)

遊戲的模擬世界

(圖的遊戲為 Fortnite)

動畫的原理

在繼續之前，要先知道逐格動畫。

看起來像是個動畫

  • 角色: 空洞騎士的米拉 (Myla)

其實只是很多張圖片輪著撥放而已

溫知識：人的眼睛會自動補成連貫的，在心理學稱作

貝塔運動（Beta Movement）

模擬掉落 - 複習一下物理吧！

怎麼描述一個速度呢？

速度v = \frac{兩點的距離 \Delta x}{經過的時間 \Delta t}
\Delta x

如果給定速度，那麼下個時間點，會移動 v

模擬掉落 - 複習一下物理吧！

怎麼描述一個速度呢？

如果給定速度，那麼下個時間點，會移動 v

結果

用程式描述就會是：

對每一個畫面做:
  球的y座標 遞增 10

跑起來怎麼樣呢？

如果是掉落，應該會越來越快吧？

模擬掉落 - 複習一下物理吧！

怎麼描述一個速度呢？

如果給定速度，那麼下個時間點，會移動 v

結果

用程式描述就會是：

對每一個畫面做:
  速度 遞增 0.5
  球的y座標 遞增 速度

跑起來怎麼樣呢？

如果是掉落，應該會越來越快吧？

  • 每個畫面，速度再遞增

是否感覺跟
物理結合了呢？

遊戲設計

遊戲是怎麼做的？

實作老人遊戲 - Doodle Jump

可能的流程

讓 Doodler 掉落！

1

2

用鍵盤操控 Doodler

3

讓 Doodler 跳平台

還剩哪些？

4

讓 Doodler 掉落！

結果

Doodler

怎麼讓 Doodler 掉落？

  • 套上模擬掉落的程式碼就可以了！
對每一個畫面做:
  Doodler的y速度 遞增 0.5
  Doodler移動 (0, Doodler的y速度)

Step 1.

可能的流程

讓 Doodler 掉落！

1

2

用鍵盤操控 Doodler

3

讓 Doodler 跳平台

還剩哪些？

4

如果想要用左右鍵控制呢？

結果

對每一個畫面做:
  if 左鍵正在被按:
    Doodler 移動 (4, 0)
  if 右鍵正在被按:
    Doodler 移動 (-4, 0)

程式大概是這樣寫：

這樣看起來就有遊戲的雛型了吧？

Step 2.

用鍵盤操控 Doodler

可能的流程

讓 Doodler 掉落！

1

2

用鍵盤操控 Doodler

3

讓 Doodler 跳平台

還剩哪些？

4

通常物體都會有 Hitbox ，表示這個物體的碰撞判定。

動作遊戲的 Hitbox

(遊戲 : celeste)

(遊戲 : 東方Project的某個遊戲)

彈幕遊戲的 Hitbox

Step 3.

讓 Doodler 跳平台

通常物體都會有 Hitbox ，表示這個物體的碰撞判定。

Step 3.

讓 Doodler 跳平台

Doodler 在什麼條件下會往上跳呢？

  • Doodler 與平台撞到了？
    • 頭撞到也要跳嗎？
  • Hitbox 要取哪比較好？
    • 取到腳就好

看一下 Gameplay

頭撞到

Hitbox
取腳就好

通常物體都會有 Hitbox ，表示這個物體的碰撞判定。

Step 3.

讓 Doodler 跳平台

Doodler 在什麼條件下會往上跳呢？

  • Doodler 的腳(Hitbox) 與平台撞到了？
    • 可能還不夠...
  • 要往下的時候才能再
    往上跳。

看一下 Gameplay

這樣會直接飛走

Step 3.

讓 Doodler 跳平台

結果

通常物體都會有 Hitbox ，表示這個物體的碰撞判定。

Doodler 在什麼條件下會往上跳呢？

  • Doodler 的腳(Hitbox) 與平台撞到了？
    • 且 Doodler 再往下的時候​
if (Doodler的腳) 撞到 (平台) 
     並且 (Doodler的速度 往下):
    Doodler的y的速度 = 向上 13

來看看最後成果吧！

程式大概是這樣寫：

Step 3.

讓 Doodler 跳平台

結果

對每一個畫面做:
  if 左鍵正在被按:
    Doodler 移動 (4, 0)
  if 右鍵正在被按:
    Doodler 移動 (-4, 0)
  
  Doodler的y速度 遞增 0.5
  Doodler移動 (0, Doodler的y速度)
  
  if (Doodler的腳) 撞到 (平台) 
      並且 (Doodler的速度 往下):
    Doodler的y的速度 = 向上 13

有感覺到邏輯串連起來的 fu 嗎？

所有程式的流程

可能的流程

讓 Doodler 掉落！

1

2

用鍵盤操控 Doodler

3

讓 Doodler 跳平台

還剩哪些？

4

還剩哪些？

Step 4.

我們只是簡單介紹一下寫遊戲的流程 (Pygame)，如果你想要完善他可能還需要...

  • 遊戲介面 (UI)
  • 遊戲音樂 (BGM) & 音效 (SE)
  • 儲存系統
  • 結束判斷 & 結束畫面
  • 隨機生成平台，但也不能太隨機 (?)
  • 等等各式各樣有趣的機制

剩下的就等你
學習再說吧！

總結

終於要到這裡了嗎?

你今天學到了什麼？

1

什麼是程式語言？

3

用程式模擬
物體運動

2

什麼是演算法？

4

簡單動作遊戲製作

大總結

學程式可以幹嘛？

  • 了解現在資訊世界的發展
  • 訓練你的數學邏輯以及解決問題的能力(？)
  • 可以動手寫網頁，手機App，軟體等等
     

更重要的是...

  • 對大學申請有幫助
  • 培養一個未來都會有用的技能
  • 反正學一下不虧(？)

你希望未來學到什麼？

說說你的
看法吧！

Thank You!

Questions?

反彈機制

Step 3.

什麼時候要讓 Doodler 跳呢？

  • 當 Doodler 的 Hitbox 跟平台的 Hitbox
    ​碰撞的時候
    • 必且 Doodler 要正在往下跳

對於每個幀數做以下判斷：

if doodler_rect.colliderect(platform_rect) \
	and v > 0:
  v = -13

就可以做到反彈了！

定義物件

Step 1.

通常物體都會有 Hitbox ，表示這個物體的碰撞判定。

doodler_rect = pygame.Rect(W//2-30, 500, 29, 8)

一開始創建 Hitbox：

(       x,         y,     w,    h)

每一幀的時候畫出這個矩形：

pygame.draw.rect(screen, (255, 0, 0), doodler_rect)

( R,     G,  B)

執行起來的樣子

再貼上圖片的結果

反彈機制

Step 3.

我們先定義一些平台吧！

結果

什麼時候要讓 Doodler 跳呢？

  • 當 Doodler 的 Hitbox 跟平台的 Hitbox
    ​碰撞的時候？
    • 如果有一排垂直的平台會怎麼樣？
  • 還需要什麼條件呢？

Legacy

你不該在這裡，你應該在車底

好像有點太籠統了...

Q: 怎麼寫打怪腳本？

  1. 偵測角色 & 怪物位置
  2. 如果怪物在前面，攻擊他
  3. 如果不在，規劃路線去找怪物
  4. 回到第一步

偷介紹語法： 變數 和 「=」

首先，程式中的「變數」是什麼？
其實就是一個「有名字箱子」，裡面可以裝著「數值」

x

5

一個寫著 x 的箱子，裡面裝著 5。

x = 5

用程式來寫的話：

6

x

6

箱子可以重複利用，讓寫著 x 的箱子裡面變成 6

x = 6

用程式來寫的話：再寫一行

偷介紹語法： 變數 和 「=」

x

5

6

x

6

箱子可以重複利用，讓寫著 x 的箱子裡面變成 6

x = 6

用程式來寫的話：再寫一行

以梗圖來說， x = x + 1做了幾步：

  1. 把名為 x 的箱子裡的數值拿出來備用。
    ( x = x + 1 )
  2. 把這個數字加上 1。
    ( x = x + 1 )
  3. 把運算完的數值放回 x 的箱子內。
    ( x = x + 1)

所以，其實數學的 = 跟程式的 = 是不一樣的。

用 Python 來描寫的話...

從最大的幣值 1000元 開始看：

  • 如果還沒找完的錢     ≥ 1000 元，

    那麼要找               張 1000 紙鈔。
x
\lfloor \frac{x}{1000} \rfloor
if x >= 1000:
  cnt1000 = x // 1000
  print(f"找 {cnt1000} 張 1000 元紙鈔")
  x = x - cnt1000 * 1000 # 更新剩下的找錢

這樣，你看懂了嗎？

什麼是演算法？

看 Youtube 應該難免都會聽到「演算法」，

但這個字到底是什麼意思？

(Algorithm)

演算法（英語：algorithm），在電腦科學之中，指一個被定義好的、電腦可施行其指示的有限步驟。

演算法可以使用條件語句通過各種途徑轉移代碼執行（稱為自動決策），並推導出有效的推論（稱為自動推理），最終實現自動化。 - 維基百科

演算法 = 用程式解決問題。

找零程式其實就是演算法！

逐格動畫

你的逐格動畫中間畫面要夠多，不然會很怪。

：想看到我跑到山上再跑回來嗎？想不想再看一次？

Python 是?

語言

C++, Python, Java, ... 都幾?

物理引擎 - UE & Unity

  • 米哈游系列
  • 空洞騎士 Hollow Knight
  • 最近炎上的 ShadowVerse
  • 邦邦 Bang Dream!
  • 赤燭 - 返校、九日等等
  • Valorant, R6, Fortnite, PUBG
  • 幻塔，鳴潮
  • 霍格華茲的傳承
名詞 符號 意義 公式
位置 x 就...位置，或用座標表示
速度 v 位置的變化 / 變化的時間
加速度 a 速度的變化 / 變化的時間 -
x_{(t + \Delta t)} = x_{t} + v_{(t + \Delta t)} \times \Delta t
v_{(t + \Delta t)} = v_{t} + a_{(t + \Delta t)} \times \Delta t

如果設定為

t = x_0 = v_0 = 0, a 恆定為 5

你想知道第 x 秒的狀態...

t = 1
v_{(0 + 1)} = v_{0} + a_{0} \times 1 = 5

免責聲明：物理來說，       要足夠小以上式子才成立。
這是為了方便計算才這樣寫。

\Delta t
x_{(0 + 1)} = x_{0} + v_{1} \times 1 = 5
v_{(1 + 1)} = v_{1} + a_{1} \times 1 = 10
x_{(1 + 1)} = x_{1} + v_{2} \times 1 = 15
t= 2

模擬掉落 - 複習一下物理吧！

名詞 符號 意義 公式
位置 x 就...位置，或用座標表示
速度 v 位置的變化 / 變化的時間
加速度 a 速度的變化 / 變化的時間 -
x_{(t + \Delta t)} = x_{t} + v_{(t + \Delta t)} \times \Delta t
v_{(t + \Delta t)} = v_{t} + a_{(t + \Delta t)} \times \Delta t

動畫的      ，其實就是 1/fps (frames per second 影格速率) 

\Delta t

模擬掉落 - 物理 → 程式 

v = v + a
x = x + v

寫成程式的話...

你沒看錯，就這樣而已！來跑跑看程式吧！

模擬掉落 - Pygame 結果

大概的結果

在 (\frac{螢幕寬度}{2}, y) 處畫半徑為 r 的黃球

設定一些必要參數

YELLOW = (240, 200, 0)
WIDTH, HEIGHT = 400, 600

g    = 0.5
y, v = 50, 0
r    = 20
v = v + g
y = y + v

pygame.draw.circle(screen, 
        YELLOW, (WIDTH // 2, y), r)

每一個影格 (幀) 要做什麼？

Programming Intro

By Arvin Liu

Made with Slides.com

Programming Intro

Intro programming in 45 mins

  • 949

More from Arvin Liu

  • Training Course - Knowledge Distillation
    Arvin Liu
    1556
  • Paper review: Revisiting Knowledge Distillation: An Inheritance and Exploration Framework (CVPR'21)
    Arvin Liu
    1191