2024年11月6日
用AI協助閱讀虎克的【微物圖誌】
昨天看到朋友的文章 關於細胞的發現，教科書寫錯啦！
文中提到「德國的法蘭克福國家歷史博物館以及普渡大學的彼得斯博士（Winfried S. Peters）重新把虎克的那本書《Micrographia》給看了一遍，發現...大家都誤會了！」
這讓我想起了十幾年前，我也曾經去讀過虎克的那本書，寫下這篇文章
虎克看軟木，還有許多你不知道的事
自己親身閱讀過虎克的書籍之後，確實被虎克的種種觀察與發現感動了，也能看到許多教科書上可能誤會的盲點。
當我回頭再去看那篇我寫的文章時，看到文章末了我寫道
「我很期待，哪天有人可以把Micrographia翻譯出中文版，那樣就可以有更多人被感動了，三百多前的書，沒版權問題了吧。(虎克這本Micrographia，我看了很久，其中一個原因就是太多單字都沒看過)」
這時我突然一驚，現在不就可以自己來做這件事嗎-用AI來協助翻譯出中文版，我使用古騰堡計劃的線上的電子檔文字，切出區塊之後，再使用openAI的API進行翻譯輸出。
這就是成果了，二十幾萬個中文字的內容。
微物圖誌中文版
然後，我又想起了另一個神級應用NotebookLM，這個部份我已經大量使用在書籍和文獻閱讀上，也可以用他來快速洞察這本書的內容。用NotebookLM來讀書的好處是，它的設計相對於GPT會比較保守，基本上是有所本的，相對不太會產生幻覺，所以適合用在閱讀的輔助上，可以幫助快速理解書籍或文章。
但是如果想要深切了解文章，還是要自己閱讀才好。
目前NotebookLM的來源有字數限制，所以我就將Micrographia的內容切分成兩部分上傳，以下就是利用它進行的分析。
這本書是他使用顯微鏡觀察微小物體的紀錄。文中包含了虎克對針尖、線、絲綢、沙粒、玻璃、鑽石、火焰、水、鹽和植物等物體的觀察，並提出了他對物體的構造、顏色和光的性質的見解。他認為所有物體都是由微小的粒子組成，並提出了一個宇宙存在一個由微小粒子組成的流體以太的理論。虎克的觀察和思考，對後來的科學發展影響深遠，並被譽為是近代科學的先驅之一。
1. 物質的微觀結構：
虎克利用顯微鏡觀察了各種物質，包括針尖、剃刀刃、沙子、金屬和礦物質。他強調了宏觀平滑的物體在微觀尺度下呈現出的複雜性和不規則性。例如，他描述了針尖並不是一個完美的點，而是一個具有各種形狀的表面。
"現在，儘管這個點通常被認為是最鋒利的（因此，當我們想要用最高級的方式表達一個點的鋒利程度時，我們會說：像針一樣鋒利），但顯微鏡可以為我們提供數以百計的例子，證明在自然界中發現的各種其他點要比它鋒利得多。" (摘自對針尖的觀察)
虎克對物質微觀結構的觀察為理解物質的宏觀性質奠定了基礎。
2. 光與色彩：
虎克研究了薄膜和棱鏡中的光線折射和反射，並發展了一套關於色彩產生的理論。他認為，不同顏色是由光波的不同“脈衝”或頻率引起的。
"第三，在某些液體中，我發現了某些物質，它們非常不透明，會產生非常鮮豔的紅色；但通過將其與某些液體混合，可以將其稀釋成任何程度的藍色；因此，根據我的觀察，將紅色轉化為藍色似乎並不難。" (摘自對幾種物質顏色的觀察)
他還觀察了干涉現象，例如肥皂泡和雲母中的牛頓環，並將這些現象與光的波動性聯繫起來。
3. 自然的規律性和模式：
虎克對自然界中存在的規律性和模式感到驚嘆。他觀察到，即使是最小的物體，例如沙粒和礦物晶體，也表現出驚人的幾何形狀和結構。
"我經常觀察到尿液中的沙子或礫石，它似乎是一種酒石質物質，由鹽分和土質物質以類似牙垢的形式結晶而成，有時會粘在尿壺的側面，但大部分會沉到底部，並以粗糙的普通沙子的形式存在；通過顯微鏡觀察，這些物質似乎是一群小的物體，部分透明，部分不透明，有些是白色，有些是黃色，有些是紅色，有些是更棕色和昏暗的顏色。" (摘自對尿液中沙子或礫石的觀察)
他認為，這些模式揭示了潛在的自然法則，這些法則決定了物質的形成和組織。
4. 科學探究的重要性：
整個《微物圖誌》中，虎克強調了仔細觀察、實驗和基於證據的推理的重要性。他鼓勵讀者不要盲目接受他的觀察結果，而是要自己進行實驗並得出自己的結論。
"至於我自己，如果我這些微不足道的勞動成果被認為可以佔據自然史這個大寶庫中的一席之地，我的目的就達到了；如果我未能完成我提出的那些更大更崇高的機械設計，請原諒我，因為例子如此罕見，我無法做出更多這樣的題外話。" (摘自結束語)
虎克的工作表現了科學革命的精神，強調了經驗主義和理性探究的力量。
5. 跨學科思考的價值：
虎克的觀察涵蓋了廣泛的學科，包括物理學、化學、生物學和地質學。他展示了這些領域之間的相互聯繫，以及跨學科思考對於理解自然世界的重要性。
2024年10月9日
arcade製作迷宮，感受試誤學習與頓悟
https://makecode.com/_i5VH6XEsMPyg
最近突然想來做個可以用在動物行為課程的線上迷宮，能夠學習與記憶的動物，在面臨迷宮挑戰時，可以越來越快完成，這個迷宮就是用來體驗這件事。
進入這個迷宮之後，主角會出現在最左邊一欄，而終點會在最右邊一欄，當你費盡心力到達終點後，畫面會顯示你的完成時間，然後就會把你傳送回原來的地點，你必須再度找到終點。
每次完成後，都可以看到你的歷次完成時間。如果你是記性還不錯的動物，你應該可以表現出越來越快完成的趨勢(吧?)
像這類型的活動，以往我是印成紙本發給學生用紙筆完成，但是計時或統計等等都有點麻煩，現在可以用線上完成，真是方便不少。
接下來是程式的部分，這個迷宮是用深度優先搜尋演算法（Depth-First-Search，DFS）來完成的。
首先建立一個填滿0的二維陣列，0代表牆，1代表可移動的空間。未來留下的牆一定在奇數行列的位置，所以接下來任選一個偶數行列的格子開始，選擇任意一個可以打通的方向，把牆打破，能打破代表牆的另一邊還沒有走過，而且不可以把最外圍四周的牆打破。
最後會走到一個格子是完全沒有可以打通的方向，此時就後退到有可以打通方向的格子。
用這個方式就可以建立一個完全歷遍的迷宮，但是這種DFS會產生一條很長一段沒有岔路的通道。所以在建立DFS迷宮之後，再隨機把幾面牆打掉。
最後得到一個處理過的二維陣列，再利用Arcade的內建功能，依據這個陣列建立畫面中的牆或是走道。
迷宮生成還有其他不同的演算法，我也試了用Prim演算法做最小生成樹的，生成一個不同形式的迷宮
https://makecode.com/_J0LMkxHb0Ma1
================
function initializeMaze(rows: number, cols: number): number[][] {
let maze: number[][] = [];
for (let i = 0; i < rows; i++) {
let row: number[] = [];
for (let j = 0; j < cols; j++) {
row.push(0); // Fill each cell with 0 (representing a wall)
}
maze.push(row);
}
return maze;
}
function createVisitedArray(rows: number, cols: number): number[][] {
let visited: number[][] = [];
for (let i = 0; i < rows; i++) {
let row: number[] = [];
for (let j = 0; j < cols; j++) {
row.push(0); // Fill each cell with 0 (representing unvisited)
}
visited.push(row);
}
return visited;
}
// 判斷當前格子是否有路可走
function ifHasRoute(x: number, y: number, maze: number[][], visited: number[][], nr: number, nc: number) {
let directions = [];
if (x - 2 > 0 && !visited[y][x - 2]) directions.push([-1, 0]);
if (x + 2 < nc && !visited[y][x + 2]) directions.push([ 1, 0]);
if (y - 2 > 0 && !visited[y - 2][x]) directions.push([ 0, -1]);
if (y + 2 < nr && !visited[y + 2][x]) directions.push([ 0, 1]);
if (directions.length > 0) {
// 隨機return一個可走的方向
return directions[Math.floor(Math.random() * directions.length)];
} else {
return [0, 0]; // 沒有可走的路
}
}
// DFS 生成迷宮的 function
function dfsMaze(maze: number[][], visited: number[][], nr:number, nc:number) {
let route: number[][] = [];
// 隨機選擇起始位置
let x = Math.floor(Math.random() * ((nc - 1) / 2)) * 2 + 1;
let y = Math.floor(Math.random() * ((nr - 1) / 2)) * 2 + 1;
route.push([x, y]);
visited[y][x] = 1;
maze[y][x] = 1; // 設置起始點為路徑
let way = ifHasRoute(x, y, maze, visited, nr, nc);
while (route.length > 0) {
//console.log("" + x + "_" +y)
if (way[0] === 0 && way[1] === 0) {
// 無路可走則回退
route.pop();
if (route.length > 0) {
x = route[route.length - 1][0];
y = route[route.length - 1][1];
way = ifHasRoute(x, y, maze, visited, nr, nc);
}
} else {
// 拆除牆並移動
maze[y + way[1]][x + way[0]] = 1; // 打開牆
x = x + 2 * way[0];
y = y + 2 * way[1];
maze[y][x] = 1; // 新的格子成為路徑
visited[y][x] = 1;
route.push([x, y]);
way = ifHasRoute(x, y, maze, visited, nr, nc); // 繼續新路徑
}
}
}
// 隨機打開牆，形成額外的路徑
function openRandomWall(maze: number[][], nr: number, nc: number) {
let x = Math.floor(Math.random() * ((nc - 1) / 2)) * 2 + 1;
let y = Math.floor(Math.random() * ((nr - 1) / 2)) * 2 + 1;
let possibleDirections = [];
if (x - 2 > 0 && maze[y][x - 1] === 0) possibleDirections.push([-1, 0]); // 左邊
if (x + 2 < nc && maze[y][x + 1] === 0) possibleDirections.push([1, 0]); // 右邊
if (y - 2 > 0 && maze[y - 1][x] === 0) possibleDirections.push([0, -1]); // 上邊
if (y + 2 < nr && maze[y + 1][x] === 0) possibleDirections.push([0, 1]); // 下邊
if (possibleDirections.length > 0) {
let direction = possibleDirections[Math.floor(Math.random() * possibleDirections.length)];
maze[y + direction[1]][x + direction[0]] = 1; // 打開牆
}
}
function generateMaze(nr: number, nc: number): number[][] {
let maze: number[][] = initializeMaze(nr, nc); // Initialize maze (0 means wall, 1 means path)
let visited: number[][] = createVisitedArray(nr, nc); // Record whether each cell has been visited
// Generate maze using DFS
dfsMaze(maze, visited, nr, nc);
// Open additional walls to create multiple paths
let additionalPaths = Math.floor((nr/10) * (nc/10)); // Open some additional walls
for (let i = 0; i < additionalPaths; i++) {
openRandomWall(maze, nr, nc);
}
return maze;
}
function renderMaze(maze: number[][]){
for (let y = 0; y < maze.length; y++) {
for (let x = 0; x < maze[y].length; x++) {
if(maze[y][x] === 0){
tiles.setTileAt(tiles.getTileLocation(x, y), sprites.dungeon.floorLight0)
tiles.setWallAt(tiles.getTileLocation(x, y), true)
}
else{
tiles.setTileAt(tiles.getTileLocation(x, y), assets.tile`transparency16`)
}
}
}
}
function print(array:number[][]){
for (let i = 0; i < array.length; i++) {
console.log(array[i])
}
console.log("---------------------------")
}
function main(){
game.showLongText("終點在最右一欄，請快速找到它。\n每次到達之後會被送回原點，再走一次\n試試看你能不能越走越快", DialogLayout.Bottom)
tiles.setCurrentTilemap(tilemap`map`)
const nr = 39;
const nc = 39;
let maze = generateMaze(nr, nc);
let timeArray:number[] = [];
renderMaze(maze);
// 設定主角
let mySprite = sprites.create(img`
b b b b b b b b
1 1 1 5 5 1 1 1
1 f 1 5 5 1 f 1
1 1 1 5 5 1 1 1
5 5 5 5 5 5 5 5
5 5 5 5 5 5 5 5
b b 5 5 5 5 b b
. b b b b b b .
`, SpriteKind.Player);
let spritePosY = Math.floor(Math.random() * ((nr - 1) / 2)) * 2 + 1;
tiles.placeOnTile(mySprite, tiles.getTileLocation(1, spritePosY));
scene.cameraFollowSprite(mySprite);
controller.moveSprite(mySprite, 200, 200);
let startTime = game.runtime();
let endTime;
let food = sprites.create(img`
2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2
2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2
`, SpriteKind.Food);
let foodPosY = Math.floor(Math.random() * ((nr - 1) / 2)) * 2 + 1;
tiles.placeOnTile(food, tiles.getTileLocation(nc - 2, foodPosY));
//主角到達終點
sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function(sprite: Sprite, otherSprite: Sprite) {
endTime = game.runtime();
timeArray.push(endTime - startTime);
tiles.placeOnTile(mySprite, tiles.getTileLocation(1, spritePosY));
let timeText = "";
for(let i = 0; i< timeArray.length; i++){
if (i == 0) { timeText = (1) + "-> " + (timeArray[0]/1000)}
else{
timeText += "\n" + (i +1) +"-> " + (timeArray[i]/1000);
}
}
//game.splash(timeText);
game.showLongText(timeText, DialogLayout.Bottom)
startTime = game.runtime();
})
}
main();
2024年9月25日
電腦以藍牙直接控制micro:bit的LED
延續上一篇，繼續用電腦藍牙直接控制micro:bit，這次直接用軟體來控制，就不自己寫程式。
先安裝 Bluetooth LE Explorer
https://apps.microsoft.com/detail/9n0ztkf1qd98?hl=zh-tw&gl=US
在micro:bit上，只開啟[藍牙LED服務]
開啟 Bluetooth LE Explorer，掃描周圍的BLE裝置，我的micro:bit就在電腦旁邊，所以前幾個就能找到
點下去就連線了，看到一堆代碼應該不知從何下手
這時候又需要看 micro:bit的 Profile了
Bluetooth Developer Studio Level 3 Profile Report
LED服務的UUID是 E95DD91D251D470AA062FA1922DFA9A8
這個SERVICE裡有三個CHARACTERISTICS
- E95D7B77251D470AA062FA1922DFA9A8 LED Matrix State
- E95D93EE251D470AA062FA1922DFA9A8 LED Text
- E95D0D2D251D470AA062FA1922DFA9A8 Scrolling Delay
在Bluetooth LE Explorer裡應該會在最底下看到這三個東西，先以第一個做例子，這就是讀取或寫入LED的狀態。
row 1 是第1個byte
row 2 是第2個byte
row 3 是第3個byte
row 4 是第4個byte
row 5 是第5個byte
0和1代表LED的關和開，以row 1為例
全關00000，用十六進位表示為00。
只開最右邊那個燈是00001，十六進位是01
只開最左邊那個燈是10000，十六進位是10
全開是11111，十六進位為1F
如果你了解上面的規則後，就把每一row的LED狀態寫入就能控制LED了
如果是二進位就是輸入 01010-11111-11111-01110-00100
換成十六進位就是0A-1F-1F-0E-04
接下來是控制LED Text，記得改成用UTF8。只要輸入文字就可以用藍牙控制micro:bit顯示文字了。
最後一個Scrolling Delay則是控制捲動文字的時間，預設120ms，因為是Little-Endian，所以十六進位是7800，如果要更改成100，就用HEX輸入6400，這個就是100的十六進位，如果要捲超快，1ms的話，就是輸入0100。
使用python 讓電腦直接與micro:bit藍牙連線傳送加速度資料
如果需要利用micro:bit傳輸資料，例如感測加速度數值，然後需要傳到電腦上。做法上都是用第一台感測資料後，用廣播的方式傳送資料，第二台micro:bit一邊接收廣播，然後用序列寫入的方式傳進電腦，然後電腦再用這些資料做處理，這種算是很簡單的作法。
只用一台micro:bit可不可以直接把資料傳進電腦呢？是可以的，就是用藍牙，只是喔，過程有點麻煩。
首先micro:bit的晶片上，廣播和藍牙不可以同時使用，用了藍牙就不能用廣播。先在擴展上找bluetooth，點選第一個擴展積木。
隨後會出現一個對話視窗，告訴你它會移除廣播radio積木
接下來的程式就只有在當啟動時，開啟[藍牙加速度計服務]
為了方便連接，再到右上角齒輪點一下
為了連接方便，可以設定連接方式為第一個[不須配對]或是第二個[自動配對]都可以
接下來是電腦程式的撰寫，我的目標是希望直接拿到micro:bit的加速度資料，然後傳到電腦上自動繪圖。
第一步先看micro:bit 藍牙的規範
https://lancaster-university.github.io/microbit-docs/resources/bluetooth/bluetooth_profile.html
https://lancaster-university.github.io/microbit-docs/resources/bluetooth/bluetooth_profile.html
其中有寫到micro:bit的加速度計資料的UUID 是 E95DCA4B251D470AA062FA1922DFA9A8
這支程式就是做這件事情，先掃描周遭的藍牙裝置，選擇之後就可以連線取得加速度資料。
第一支程式成功後。我記錄micro:bit的address，就可以跳過掃描的過程，直接連線取得加速度資料來繪圖。
用的是這支程式
試過這個專案後，再看到micro:bit還可以直接用藍牙傳送以下資料，我覺得日後自己要做一些裝置應該是蠻有發展性的，不然現在很多micro:bit的藍牙服務都還要用別人寫好的手機app才能串接。
2024年9月8日
anamorph鏡筒變形畫的幾何轉換原理，使用python實作
2013年時，我玩了一個叫做鏡筒玩玩變形畫anamorph的東西
以影像的放大來舉例
原始影像在x方向放大a倍，在y方向放大b倍，新影像可以表示為：
x' = ax
y' = by
就可以用原始影像算出新影像應該長什麼樣子，
舉例來說，原始影像在x方向和y方向都放大2倍，
那麼原始影像的(1,1)和(1,2)就會變成新影像的(2,2)和(2,4)兩個點的顏色，
但是新影像的(2,3)呢？原始影像並沒有(1,1.5)這個點啊，所以那個點就會沒有顏色。所以實作上就會用inverse mapping 來處理。
原本的方程式可以改寫成
x = x' /a
y = y' /b
再透過一些內插法(Interpolation)就可以計算新影像應該是什麼顏色。例如剛剛的問題，新影像的(2,3)的顏色就是原始影像的(1,1.5)的顏色。如果使用Near Neighbor Interpolation，就用原始影像的(1,2)來代表(1,1.5)，如果是用Bilinear Interpolation，就用原始影像的(1,1)和(1,2)的顏色算平均得到(1, 1.5)的顏色，然後在指定給新影像的(2,3)。
接下來再來思考這種鏡筒變形畫怎麼製作吧。
鏡筒變形畫
原始影像長這樣
也就是要先將原始影像的座標從笛卡爾座標變成極座標，然後在極座標上進行幾何轉換。
原始影像的紅點和藍點都在同一個x座標上，經過變換後，它們的極座標都會在同樣的θ 上，而它們的r由它們的y座標決定，y座標越小，則r越大，像是變換後的紅點會移動到最外圍。以藍點為例，原始的y座標是影像高度的4/7，變換後的r就是 r0 + r1(4/7)
原始影像的紅點和綠點在同一個y座標上，變換後它們的 r 都一樣，而θ則不相同，由原始影像的x座標決定。
用數學方程式表達這種變換如下：
根據這樣的原理所撰寫的程式在github
https://github.com/ChihHsiangChien/anamorph
其中的anamorph.py 就是產生變形畫的程式
定義參數：
f(x, y)：原始影像的像素值。r0：定義影像的初始半徑。r1：定義影像的變換範圍半徑。θ：角度座標，用來決定像素的旋轉。r：半徑座標，用來決定像素的距離。(x0, y0)：中心點的坐標。nx, ny：原始影像的寬度和高度。
變換步驟：
1. 極座標轉換：
r = √((x - x₀)² + (y - y₀)²)
θ = arctan2(y - y₀, x - x₀)
其中 (x₀, y₀) 是新影像的中心，x 和 y 是新影像的坐標點。
2. 新座標映射：
新的橫坐標 map_x 和縱坐標 map_y 是透過角度 θ 和半徑 r 映射回原始影像的座標：
map_x = nx - 1 - (nx - 1) · (θ + π) / 2π
map_y = ny - 1 - (ny - 1) · (r - r₀) / r₁
這些公式將極座標 r 和 θ 重新映射到原始影像的笛卡爾坐標 (map_x, map_y)，然後將原影像進行扭曲或展開。
3. 有效區域檢測：
使用mask來確保映射後的像素點在有效範圍內：
valid_mask = (map_x ≥ 0) ∧ (map_x < nx) ∧ (map_y ≥ 0) ∧ (map_y < ny)
4. 生成新影像：
將原影像的有效像素根據映射後的座標填充到新影像中，無效區域使用白色填充。
根據這樣的原理所撰寫的程式在github
https://github.com/ChihHsiangChien/anamorph
其中的anamorph.py 就是產生變形畫的程式
其中有兩個參數start_radian 和 spread_radian ，指定的數值是弧度，為np.pi的倍數
start_radian = np.pi時，弧形的起點從np.pi的方向開始畫，開展的弧度是0.5π = 90°
開展弧度設定成1.95π，接近2π也就是擴展成360°
start_radian則決定從哪個弧度開始畫圖，若為0則是長這樣，你可以跟前面幾張圖比較看看
以JS處理moodle選擇題轉檔
這兩天葉老師問我有關Moodle的GIFT題目格式的問題，如果要使用多選題，應該如何使用符號，後來我找了moodle官方的頁面答案給她
What two people are entombed in Grant's tomb? {
~%-50%No one
~%50%Grant
~%50%Grant's wife
~%-50%Grant's father
}已經有題庫的人，可以用一些批次方法直接處理這些題目轉檔的問題，例如python，但如果是對程式陌生的人，讓他使用python的話，可能太難。
不過現在這個時代，有很多方法可以處理，例如你可以用自然語言讓AI寫出一個轉檔程式啊，像是用Claude，它的Artifacts功能甚至還可以直接在頁面旁產出程式執行的畫面。
回到本文主題，如何讓沒有程式基礎的人可以順利轉檔，那就寫一個轉檔程式來使用吧。
把以下的文字貼在記事本上，副檔名存成html，例如convert.html，用瀏覽器打開就是一個轉檔程式了。
使用方式就是打開excel，把題目複製貼到轉檔程式上方的框框，按下按鈕就生成轉檔完的文字了。
這個程式只有處理單選和多選題目而已，程式是根據標準答案來分辨單選或多選，標準答案使用123來編碼，而不是ABC
===================
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轉換工具</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
textarea {
width: 80%;
height: 300px;
margin-bottom: 10px;
}
.button-container {
text-align: left; /* 将按钮靠左对齐 */
margin-bottom: 10px;
}
button {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>題目轉換工具</h1>
<textarea id="input" placeholder="貼上excel複製的文字"></textarea>
<div class="button-container">
<button onclick="convert()">轉換</button>
</div>
<textarea id="output" placeholder="輸出結果" readonly></textarea>
<script>
function convert() {
const inputText = document.getElementById('input').value.trim();
const outputElement = document.getElementById('output');
if (!inputText) {
outputElement.value = '請輸入數據。';
return;
}
const lines = inputText.split('\n').map(line => line.trim()).filter(line => line);
let result = '';
for (const line of lines) {
const [title, question, ...optionsAndAnswer] = line.split('\t');
const answerIndex = optionsAndAnswer.pop(); // 正確答案
const options = optionsAndAnswer;
const correctIndices = answerIndex.split('').map(Number);
const numOptions = options.length;
const numCorrect = correctIndices.length;
result += `::${title}::${question} {\n`;
if (numCorrect === 1) {
// 單選題
options.forEach((option, index) => {
if (correctIndices.includes(index + 1)) {
result += ` =${option}\n`;
} else {
result += ` ~${option}\n`;
}
});
} else {
// 多選題
const percentage = numCorrect > 0 ? Math.floor(100 / numCorrect) : 0; // 計算正確答案的百分比
options.forEach((option, index) => {
if (correctIndices.includes(index + 1)) {
result += ` ~%${percentage}%${option}\n`;
} else {
result += ` ~%-100%${option}\n`;
}
});
}
result += '}\n\n';
}
outputElement.value = result.trim();
}
</script>
</body>
</html>
2024年9月3日
用python進行影像處理看看平均臉長怎樣
幾年前玩影像處理的時候，用過python做過平均臉的專案
不過程式不是自己寫的，是從這個網站來的
https://learnopencv.com/average-face-opencv-c-python-tutorial/
製作平均臉的流程是先抓取68個臉部特徵，原作者用的是Dlib，但是在Dlib安裝實在太困難，我在linux編譯好一陣子才成功，而在windows上還沒試成功，所以後來我就改用OpenCV來做。
這68個特徵如下圖，在這個專案中，兩眼眼尾的兩點很重要，我們要將所有人的這兩點都對齊。
找到臉部的這些特徵點之後，因為下一步是要進行對齊，所以要把這些點連線成許多小三角，這樣才能進行仿射變形。而哪些點才能互相連接呢？這要用到Delaunay triangulation 的方法了。
圖片來源：wikipedia
這些三角形有一個特殊性質：任何一個三角形的其外接圓內不會有其他點。
用各實例來看看，我們用湯姆的臉來看看，這些藍點是偵測出的臉部特徵點
找出這些點的Delaunay triangulation
接下來就要對齊了，這篇文章的程式的做法是把大家的眼睛位置都放在新圖像的1/3高度，而橫坐標分別是新圖像寬度的0.3和0.7。
接下來就是用原圖的兩眼尾位置和新圖的眼尾位置，去計算出縮放、平移、旋轉的仿射矩陣長什麼樣子，然後就用這個矩陣把整張臉稍稍變形對齊到新的位置。
不好意思，湯姆的臉就稍稍變形過去了
最後就是把大家的臉放在一起做平均啦，以下就是五位影星的平均臉，帥！
這是找了九位女星的照片，經過對齊的樣子
我想製作這平均臉專題的目的其實不是看漂亮的明星啊，我想看的是如果我用不同政黨的立委照片，是不是會看到不同的平均臉呢？
所以第一步就是上立法院網站抓圖片，我先確定好目標，我要把不同政黨的男性和女性分開來將圖檔存在不同資料夾中。
所以就要寫一隻爬蟲，把立委的個人資料和照片都爬下來再整理
最後就是令人期待的結果了，除了中間的政黨以外，左右兩個政黨幾乎無法分辨，怎麼會這樣呢？其實這就是採樣的問題了，中間的人數少，所以容易看出個別差異，而兩邊的人數多，統計之後就會讓個別差異減少。
如果你對程式有興趣，我放在github了
2024年8月19日
使用python影像處理2024英仙座流星雨直播影片，獲取流星雨片段、星空疊圖與人造衛星軌跡
前幾天臺北天文館的YT頻道有一個直播影片是2024英仙座流星雨，讓民眾可以看著YT直播享受流星雨。直播長度六小時，真的有人可以跟完嗎？
https://www.youtube.com/live/2sjlviZZB94?si=bJSe23PGgeb-XZMt
本來影片直播是用福壽山農場的，但是天候不佳改用北海道的なよろ市立天文台的來源
https://www.youtube.com/live/yC_cQYkoBRA?si=wVoUfYFyHtp78vgO
我看到這個影片覺得很適合用影像處理的方式來獲取一些資訊
什麼時候有流星？
在幾年前我用自家擺設的定點攝影曾經作過偵測流星的程式，現在用同樣方式再來試試看。
由於直播影片太長，影片容量很大，所以就不採用下載後再分析的方法，改用串流方式，一邊串流，一邊分析。frame都轉灰階，再把當前的frame減去前一個frame之後，如果得到的結果中的最大值大於某個閾值時，那就是代表有亮亮的東西出現了，然後就把現在的frame存起來，之後再轉存成影片，或是進行疊圖。
本來是想把整段影片都處理，不過後來看到留言裡有人紀錄了流星出現的timestamp，我就使用那些timestamp的十秒內來抓流星。
以下就是2024英仙座流星雨的集錦影片
在看直播影片時，如果仔細看，應該會發現畫面上有許多小亮點緩慢規律的移動，而且在那影片裡切到任一個時間點，都可以看到那些小亮點，想想應該是人造衛星。
於是想來用影像處理的方式處理出人造衛星的軌跡。概念上就等同於重複曝光，方法就是取一段時間內的所有frame中的最大值。
由於臺北天文館的影片中會部份片段切換片源，所以我改採用weathernews的影片來影像處理
https://www.youtube.com/live/yC_cQYkoBRA?si=wVoUfYFyHtp78vgO
以下這個影片就是呈現在整段七小時的影片裡，每10秒鐘的重複曝光成為一個新frame製作出的影片。
注意幾個特點
- 那些呈現直線運動的線段，就是衛星留下的軌跡，軌跡越長代表速度越快。
- 任意暫停呈現的畫面所呈現的線條數量，代表的就是在那個時間點的那塊天空裡，至少就有幾顆人造衛星。
- 不規則移動的軌跡通常是昆蟲飛過鏡頭留下的，不是UFO
如果想在夜空觀察人造衛星，可以先找到北極星之後，然後在那附近尋找。從影片中應該可以發現這些人造衛星的軌跡，都在靠近北極星附近。這些衛星就是繞極軌道衛星（polar orbiting satellite）
我先疊個5分鐘影片來說明，在影片中緩慢移動的亮點，若是疊成圖，就可以看到其規律的軌跡，在下圖的近乎直線的線段就是人造衛星的軌跡。而少部份由左上到右下的短線段則是流星。而星軌則因為只有5分鐘疊圖，所以只有短短的位移。
最後把整段影片都疊起來觀察，下圖經過曲線調整。
- 呈現同心圓的線條是恆星的星軌
- 接近水平直線的線段，以及少數在畫面左邊接近垂直的線段是繞極軌道的人造衛星，它們都靠近同心圓的圓心。
- 小段的由右上到左下的線段則是流星
- 其餘不規則的線段都是蟲
從這張圖更可以看到那些人造衛星的繞極軌道是怎麼一回事，另外朝向北極星是不是再也拍不到沒有人造衛星的天空了？
2024年7月31日
生物組成層次的2048Game
一年前一位學生拿了這個遊戲，跟我說「老師你弄這個遊戲來給我玩啦」，因為當時我經常讓學生在課堂上使用我自製的許多教學遊戲，見此玩遊戲學生物連結。
我說「好，我試試看」，但其實後來再也沒有試過。
直到前一陣子，我看到許多不會寫程式的朋友在分享著他們的發現，原來他們可以用AI生成技術寫出自己想要的教學小程式，隔天我在營隊上課前等待的時間，就想那我也來試試看吧。於是就用claude和chatgpt交互使用，果然一下子就做出來了。
只是需求是不斷更迭的，所以並不是直接就達到100%的效果，後面還是要花一些時間修改，花了一段時間，總算處理好在iOS上有卷軸滾動的問題，可以公開發表了。
最後是這樣解決的，在body的css設定 overscroll-behavior: none;
而在遊戲的div上設定 overscroll-behavior: contain;
2024年6月4日
捉放法要標記多少才會準確？用js程式進行模擬
你有沒有好奇過進行捉放法的活動時，到底要標記多少才會準確啊？
為了解答這個疑惑，我就寫了一支程式來模擬看看吧。
https://chihhsiangchien.github.io/capture-recapture-inquiry/index.html
輸入參數有三項：族群實際數目、取樣次數、取樣大小，按下執行的按鈕之後，
程式自動會進行捉放法，假設族群實際數目有200隻，取樣5次，取樣大小50的設定，那麼就會先進行標記1隻的情況，一共做了5次捉放法，每次取樣都抓50隻來估計族群大小。然後再做標記2隻的情況、標記3隻的情況，一直到標記200隻的情況。
做出來的結果就如第一張圖，標記數量太少，越容易低估或高估。舉例來說明明族群有200隻，但是你標記1隻後，取樣50隻發現有1隻做標記，就會估算出族群數量為50隻。或是當標記20隻，但是你取樣50隻，只有1隻作記號，那麼就會估算成1000隻。從下圖可以見到大概在標記60隻以下經常會看到估算過高或過低的情形，你也許會認為那就只要標記實際族群的某個比例就可以算準了，但是那前提是你得先知道實際族群是多少。你都已經知道實際族群了，何需再用捉放法呢？
所以第一張圖頂多就是讓你知道標記要多一些，才會比較準。
接下來第二和第三張圖，是用平均數來估計族群大小，比方說取樣5次做平均。右邊那張圖的縱座標是對數顯示
第四和第五張圖則是用中位數來估計
訂閱：
文章 (Atom)