02. 用數字表示圖像

1. 電腦螢幕被分割成許許多多的小格子,稱為像素(pixel)。在黑色的畫面下,每個像素不是黑色就是白色。

2. 底下的字母""已被放大來顯示像素。當電腦儲存圖片時,它要儲存的就是哪些像素是黑的,哪些像素是白的。

第一行由1個白色像素,3個黑色像素,再加1個白色像素所組成。因此,第一行被表示為1,3,1

第一個號碼必須是白色像素的數目。如果第一個像素是黑的,那該行會從0開始。


【練習1】

請在表格右方寫出以下字母的數字表示法

【練習2】

填色程式

http://bk.chjh.hc.edu.tw/html5/html5_colour_by_numbers/colour_by_numbers.html


1. 請依照以下指定的像素編碼,完成圖案。(提示:表格設定為5欄、6行)

挑戰作業 ( 18 x 13)

2. 請依照以下指定的像素編碼,完成圖案,接著完成以下操作。

(1) 在顯示該圖的畫面,按下鍵盤「PrtScr」(螢幕列印鍵)。

(2) 開啟連結http://mail.google.com/a/ntjh.ntct.edu.tw,使用自己的帳號密碼登入。

(3) 用瀏覽器的「新分頁」功能開啟「作業繳交連結」頁面,點選自己班級的連結。

(4) 按下左上角「新增」按鈕,選擇「google繪圖」。

(5) 在編輯畫面直接按組合鍵「Ctrl + V」,將截圖貼上。

(5) 點擊左上角「無標題繪圖」,將檔名改為「班級+座號」的5位數字組合(也就是你的帳號)。

(6) 點擊左上角「開啟google雲端硬碟」的圖案,完成繳交作業。


3. 【回家作業】

如果想製作彩色圖畫,可以使用一個數字代表一種顏色(例如0代表黑色,1代表紅色,2代表綠色等等。)不過,這樣就需要用到兩個數字來表示一系列像素了:第一個數字跟以前一樣代表長度;而第二個數字則用來標示顏色。試試看依照在老師所發下的空格紙上,按照規定的編碼方式完成一張彩色的圖案。


【延伸結論】

傳真機實際上就只是一台簡單的電腦,掃描黑白頁面成大約1000 x 2000像素,並使用數據機傳輸給另一台傳真機,最後將像素印在紙上。傳真的圖像常常有著部份空白(邊綠)或黑色像素(垂直的線)。

彩色圖片也會有許多重覆部份。為了節省儲存空間,開發人員會使用很多種壓縮技術。而在這活動中使用的方法稱為變動長度編碼法(RLE, run-length encoding, 又稱為游程編碼),是一種有效的壓縮圖片的方式。如果我們不壓縮圖片,那可能會花很多的時間來傳送它,而且也需要更多的儲存空間。這樣會讓傳真或將圖放在網路上變得成本太高而不可行。舉例來說,傳真圖片通常被壓縮至原大小的七分之一左右。也就是說,如果不壓縮,光傳輸就會多出七倍的時間。

相片或圖片常被壓縮至原大小的十分之一或甚至百分之一(使用像是JPEG、GIF或PNG等技術)。這樣一來就可以在磁碟中儲存更多圖片,而這也表示在網站瀏覽時可以花更少的時間。

【進階 - 像素謎題 Pixel Puzzle】

【scratch版圖片產生器】

https://scratch.mit.edu/projects/391610199/

by光明國中劉俊廷老師

說明:

(1) 按照「變動長度編碼(Run-length encoding, RLE)」的編碼規則,逐行將編碼數字輸入。(忽略逗點部份)

(2) 輸入完成時,鍵入英文字母「y」。

(3) 程式將按編碼內容繪出結果。

(4) 每次重新執行程式,可選擇保留上一回合的編碼記錄(按n)或刪除記錄重新開始(d)

(5) 注意,程式僅辨識個位數字編碼,超過10的數字會被視為兩段顏色喔。

範例輸入編碼:

131

41

14

0131

0131

14

輸出結果為英文小寫字母「a」

【scratch版圖片產生器 plus 三色版】

https://scratch.mit.edu/projects/393146687/

by光明國中劉俊廷老師

說明:

(1) 按照「變動長度編碼(Run-length encoding, RLE)」的編碼規則,逐行將編碼數字輸入。(忽略逗點部份)

(2) 輸入完成時,鍵入英文字母「y」。

(3) 程式將按編碼內容繪出結果。

(4) 每次重新執行程式,可選擇保留上一回合的編碼記錄(按n)或刪除記錄重新開始(d)

(5) 可繪製「白」、「黑」、「紅」三色像素,每段以兩個數字為一組,十位數代表長度、個位數代表顏色。


0為白色、1為黑色、2為紅色。

所以30即代表連續繪製3格白色像素

42則是連續繪製4格紅色像素,以此類推。


範例輸入編碼:

503150

3021322130

2011721120

1011921110

10113231321110

11321130113211

5110111051

11301130113011

10113031301110

1011901110

2011701120

3021302130

503150