HK5

雖然寒假開始了
不過還是作業沒忙完
在上裡拜其中考期間
學校有舉辦一場ACA Photoshop的認證考試的課程
於是就報了名參加
今天剛上課就講了一堆
跟這學期的老師跟我們說的
解析度畫素跟像素
聽起來好熟悉教的跟老師上課的東西差不多~~
其中在教我們的到使用Photoshop
看到跟這一次的作業一樣的東西就是做圖片時
有看到旁邊有調色盤
看了就想起來這門課所教的東西
並且使用到的功能
都能依照亮度、色彩度跟對比值做排列
看到這些功能就想到BCB的作業還沒弄出來~~
雖然一直試著去弄
還是沒試成
不過今天在photoshop裡面聽了之後對調色盤有更深的認識了!

HW5

昨天晚上研究了老師的範例程式好一陣子，今天早上又再看了一遍，問題還是沒解決，大致上看過去好像主要的程式都寫出來了，似乎只要拉幾個元件，宣告幾個變數就可以完成，但是並不是我想像中的這樣。"imPalette->Canvas->Brush->Color=clWhite"這行我就無法理解，而且Palette似乎之前用過，但竟然忘記該怎麼用了，而第一個for迴圈應該是先將調色盤的RGB設為沒有顏色，但到了"GIFHeader"和"cVersion"我就用以前用陣列的方式宣告成BYTE，但是卻出現錯誤，而且這錯誤我看不懂，"bM=GIFHeader[0].bMCrPixel>>7"這行我也無法理解，尤其是">>7"的意思，而下面也有幾行是這樣，除了這些問題以外其他都還可以理解，寒假一定要和同學討論，並且完全學會這個作業。
不過我也在WIKI學到一些GIF檔的資訊還不錯，原來GIF檔只能用在256色以下，不過在圖表上卻比JPG表現還要好，GIF檔當然還是有他獨特的優點。

HW5

第五份作業，從BMP圖檔進化(?)到GIF圖檔嚕~~

依照理解，GIF跟BMP格式特別不同在於，他多增加嚕一個調色盤

不管是靜態的還是多楨GIF都是全域調色盤或是單張調色盤裡取顏色

而我們這次的作業就是要把這調色盤給取出來

從想法來說，只是要把圖片檔裡的調色盤挖出來用雙迴圈排成16*16方陣

老師也給出範例程式，應該是不難的

老師的範例程式，直接在上面看，也"大概"了解幾行代表的意思與作用

不過實際上拉到自己的程式裡，卻又不知如何怎都跑不起來

錯誤代碼十幾行，又沒功力看懂，還真是印證嚕一句話:

不怕拿嚕別人程式，只怕拿嚕不會用....

看來說是理解嚕，"大概"的理解也是不算在內的

寫程式還真不能用"大概"兩個字混過去.....

HW5

我先去維基看了有關GIF的介紹，GIF是採用非破壞性的壓縮技術，只要檔案色彩不超過256顏色的話，檔案壓縮後都還是能完美輸出，不過主要不適用於真彩圖片。GIF有五個主要部分以固定順序出現，所有部分均由一個或多個區塊（block）組成。每個塊由第一個位元組中的標識碼或特徵碼標識。這些部分的順序為：頭塊、邏輯螢幕描述塊、可選的「全域」色彩表塊（調色盤）、各影像資料塊（或專用的塊）以及尾塊（結束碼）。
之前的作業都是希望我們把檔案的資料讀出，甚至是在上面畫線，變成灰階影像，這次是要在圖案上顯示出它的調色盤排列，我先去看了老師的程式碼，大概知道主要是先設定RGB，然後再去設立調色盤，可是我看不太懂這一行
float fLuminance[256];


imPalette->Canvas->Brush->Color = clWhite;
imPalette->Canvas->FillRect(Rect(0,0,323,323));
這邊的第二行我也是不太了解為什麼要設那四個值，
其實程式碼有些能在書裡面找到資料，只是有些還是沒辦法完全理解，弄了半天，我看同學們都說老師的程式碼還需要修改蠻多的地方，可是我弄了好久，還是不知道要怎樣做才能呈現出來，BCB雖然介面看起來很好上手，可是真正要去熟悉每個指令，還是要費好一番功夫，有些按鍵雖然知道要放上去，但是卻不知道要在裡面打怎樣的程式碼。

HW5

這次的作業是將老師的金龜子.gif圖的調色盤讀取出來再進行顏色排列。老師上課有講過，GIF檔的特色就是將一張圖片所需要用到的顏色直接編成一個調色盤。你用256色的就會有256個顏色，128的就是128，24bits的就是有24bits那麼多的顏色。調色盤決定後，圖片所有的顏色都會從調色盤取出。這樣的優點是可以縮減檔案大小，因為這樣就不用去記憶每個畫素點的顏色值了。但缺點是在顏色的顯示上會失真，不適用顏色太多的圖片。

看~就是那張圖!!(遙指)

基本上只要你不是色盲應該都可以很清楚的看到這張圖主要是由深綠色所組成的。他的其他部位則是有點帶點土黃色暗褐色的感覺。還有陰影部分就是黑灰白三色去配合出來的。
所以由程式解析他的調色盤就是以下這結果↘

最後再由明暗度排列會變成這樣

排列過後，較深較暗的顏色都在左上方。依序排列最右下方的就是最亮的白色了。

HW5

這作業我實在是花了好多時間在研究上，

因為我首先先套用老師給的範例程式碼，
可是我發現因為每個人撰寫程式的習慣不同，
在用變數和定義名稱上我研究並改動了好多次，
來符合我想要的結果，
結果改出來的結果是......

之後我嘗試在從中找出為何叫不出圖和調色盤的原因，

可是卻一直找不出真正的原因，
之後只好全部把範例的程式碼刪除並且重新按自己的意思去寫，

終於還是寫出了我想要的結果。

說實在的，我還是不明白原本的程式到底出錯在哪!

以下是我的完成:

之後只要在程式裡加上Sort就行了，

這部份是我覺得這個作業裡最簡單的部份了!!

HW5

其實這個作業很早就在做了，只是一直都有一些bug在，所以才拖到這個時候

Program Name:SourceGIF V2
Version：   0.01 alpha
               0.02 alpha
               0.01 beta

功能：
0.01 alpha 讀取GIF的基本Header
0.02 aplha 嘗試讀取調色盤
0.01 beta  結合0.01與0.02的重製版，並加入排序功能

按下Sort就能進行排序

這個作業期時花了我不少時間
好不容易上個BMP搞懂了，這次換一個新的，又加上關於GIF的中文資料很少，只能翻閱英文資料。雖然說我的英文普普，但要再重新去了解與翻閱新的資料與名詞花了我不少時間。

之前第一次上GIF時，老師帶我們一起看wiki的資料，有了實做BMP讀檔的經驗，看完資料後馬上開始動手做

做到一半時突然有個問題
Header資料中的GCT是什麼東西?
那堂課就問老師這個問題
其實這東西是表示三個項目(M CR Pixel)
M表示接下來的GIF調色盤是否為獨立還是分開的(動畫時會出現)
CR表示調色盤的色彩解析度為多少?
Pixel則表示色彩的寬度為何?

那要如何取出? 只有一個Byte在儲存啊?
在老師的範例中
有一段程式碼有出現>>或是<<
這個代表向左或是又"平移"多少
以GCT這個來說，如果是全彩的話
這個位置通常會儲存F7
換算成二進位就變成 "11110111"

首先是M的部分
>>7代表的是向右移7格位置就變成00000001也就是1

CR的部分
<<1代表向左移動1個位置
>>5再向右移動5個位置
變成是00000111

最後是Pixel的部分
<<5向左移動5個位置
>>5向右移動5個位置
一樣變成是00000111

換句話說
這一個Byte裡面他表示了三個資訊

所以我們要用>>或是<<的方式取出它的值
有人可能會問說為什麼要這麼麻煩呢?
別忘了GIF是個用來壓縮全彩影像的的格式
如果說把這三個值分別儲存
變成會占用3個Byte
這樣就失去壓縮的意義了
既然1個Byte就可以會什麼不存得更小一點呢?

HW5

　　這是我目前花最久的作業了，之前的作業都是有關於BMP圖檔的讀取，這次的作業換成了讀取GIF的圖檔，照慣例先從wiki中吸收有關於GIF圖檔的資訊，GIF主要分為兩個版本，即GIF 87a和GIF 89a，這不像其它死板板的圖片，是可以支援動畫的形式。
　　接著利用老師的範例程式，先補上老師範例程式該有的標籤，每個對應顯示出來的是GIF的檔頭資料，這是在wiki上查到的檔頭資料：

接著還要定義結構來存放檔頭的資料，例如這樣

typedef struct {
char cVersion[6];
　Byte bScreenWidth[2];

還有一些<<和>>的，例如這個 bM = GIFHeader[0].bMCrPixel >> 7; 搞不太懂耶，希望老師能解釋囉。
最後是使用 crSortedPalette[k].bRed+crSortedPalette[k].bGreen+crSortedPalette[k].bBlue)/3
來比較大小。
順利做出來後，發現出來的結果跟老師放在網頁的圖片不一樣，後來詢問過同學後，將我原本的RGB順序改成 現在的BGR就會有跟老師一樣的結果了。

imPalette->Canvas->Brush->Color =(TColor)RGB(crPalette[k].bBlue,crPalette[k].bGreen,crPalette[k].bRed);

這是之前的結果：大功告成～～之後就是我的完成品：


我的排序是從亮到暗
不過我發現有一個點顯示不太一樣，有一個特別的點，是紅色的，你們有發現嗎？
　　不知道為什麼會這樣耶。

開其它圖片來玩玩～～

HW5

關於第五個作業有關於gif檔之前老師有叫我們到維基百科了解一下，是一種典陣圖圖形檔案格式，以8位色(即256種顏色)重現珍色彩的影像。採用LZW壓縮演算法進行編碼，在一定的程度上保證影像質量的同時將體積變得很孝，可插入多張照片，做成動畫，但由於採用8位元壓縮，最多只能處理256種顏色，故不宜應用真彩圖片。這次作業也是可以用PSPAD來檢視金龜子的圖片




要上面這隻金龜子的顏色做出調色盤的色階出來。

這是老師的範例色階，在打入(crPalett[k].bRed+crPalette[k].bGreen+crPalette[k].bBlue)/3的值再用氣泡排序法就可以完成排序。感覺這次作業跟上一次有不一樣的變化。還有不懂的就可以上維基百科搜尋一下，雖然中文有些翻譯不是很棒。

HW5

這是第5次的作業了，這次的作業是開啟一張GIF圖片後，在讀出檔案中的調色盤資料，接著把調色盤裡的色塊做排序！這次也是有開啟PsPad查看了一下GIF裡的檔案格式，查出他的標頭檔資料等內容，看法大致上跟看BMP檔沒什麼太大差別，多了很多RGB資料。GIF圖片檔案老師之前有用一節課的時間，和我們討論維基百科上的解說，中英比對看，對於GIF圖片格式也有更多的了解，GIF圖片最多只能有256色，支持每像素8位元，適合做網頁的動畫等等。在調色盤排序的方面則是將下面這段RGB(crPalette[k].bRed + crPalette[k].bGreen + crPalette[k].bBlue)/3所讀出的值，用Bubble Sort的排序方式將其色塊比較大小由暗到亮依序排好，排好之後也就完成！

HW5

其實打這次程式真的很累，不過其實也是自作自受，因為當初這堂課我把他翹掉窩在圖書館讀工數，結果沒上課的心理作祟作業也懶得去做，只稍微試了老師ＰＯ的第一版範例程式弄了半小時就放棄了，後來也沒時間管ＨＷ５，終於今天忙完期末考和專題報告花了一整個晚上寫ＨＷ５，還發現原來老師的範例程式老早就改版了，好寫很多！
不過我拿到改版的程式碼把一些元件拉完之後還是發現一堆錯誤，剛開始卡最久的大概是crPalette[i].bRed=0 ，我一直搞不懂bRed是怎麼去定義的，先去參考了之前灰階的調色盤發現沒幫助，決定先找找看Blog上其他同學有沒有碰到類似問題，其實大部分同學的hw5我都有稍微看過，發現大家還滿神的...原來只要稍微改一下元件的名稱然後用sort就行了？
不過終於發現有實際做的同學有跟我一樣的問題，參考了簡呈恩的方法後終於知道還要自己去一些定義結構才能使用老師的程式碼。
先把Label拉一拉和定義一些未定義的變數後，終於讓大部分的程式碼都可以跑，我才慢慢看每段程式碼，發現讀標頭檔那段有些我實在看不懂，類似　bCR=bCR >> 5; bCR=bCR+1; 這種 >>是什麼意思呢??
後來卡最久的其實是排序，因為看到老師有定義　float fLuminance[256]; 這變數來放色彩亮度，我直覺用這個來當做色彩亮度比較然後排序就可以了，沒想到怎麼排都不對，後來想到要排256次於是很開心設了迴圈馬上跑跑看，結果還是一樣...
不過很扯的是，我用了老師另外定義的crSortedPelette(拿來複製原本crPelette的RGB)　　
然後用(crSortedPelette[k].bRed+crSortedPelette[k].bGreen+crSortedPelette[k].bBlue)/3)來比較大小，這個我覺得不夠聰明的方法竟然就正確排序了？ 老師設fLuminance還特地幫我們算出色彩亮度不就要方便拿來比較亮度嗎?
結果發現是我自己比較亮度之後只swap了crSortedPalette忘記交換fLuminance(在打完上面後突然想到 哈哈...)，試過之後就成功能使用fLuminance這方法了，好吧，所以老師幫我們寫的一個好用的fLuminance來比較亮度！！　哈哈～～
在全部寫完之後載入金龜的圖才發現顏色不對?? 後來才發現原來是RGB位置放錯，一定是老師故意改錯要讓我們改　哈！

接下來就是展現成品的時候了!!

(1)讀取金龜圖

(2)讀取小畫家轉成GIF的圖檔

上面這兩張明明是不同的圖檔但是為什麼色盤都一樣?? 難道是小畫家轉成GIF都用一樣的色盤嗎? 這是我自己的猜測~~

(3)讀取用專業轉圖軟體轉換的GIF檔

一切正常~完美!!　終於在凌晨三點做完HW5了~~ 開心阿!! 可以安心睡覺了!!!

HW5

利用老師提供的程式碼
要讀取GIF調色盤
先從typedef下手,把要用到的變數都加到標頭檔
GIF的版本,長寬還有色塊等

第一次我寫這程式的時候
執行結果跟老師給的執行結果不一樣...

整個顏色都不一樣阿!!!!!!
然後就EMAIL問老師
老師說:


"你可以把讀到的色彩顯示出來,


再用 PSPad editor 看是不是讀正確了"
 
 
...
我大概是聽不太懂老師的意思
已經顯示出顏色了阿!!!
 
後來上課再問老師
原來是要把讀到的顏色的"值"顯示出來
比如說(255,255,255)是白色那樣
我就在程式底下加了一小段東西
看一下最前面幾個顏色
再比對一下正確的數值
果然!!是讀取到錯誤的數字
 
我沒有注意到GIF的色塊是"R->G->B->"這樣一直下去的
不像BMP那時候的4BYTE
會讀錯是因為我偷懶
直接把BMP的color struct給GIF用...
好吧 只好再生一個GIF專屬的調色盤
 
然後就成功了!!!
 
 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


後來我也想要在程式上直接秀出整張GIF圖檔
看到部落格裡有人也想這麼做
可是他有提到要用到什麼元件之類的
就暫時不研究了!
 

HW5

這次的作業呢是把GIF影像讀取印出並且把GIF的調色盤畫出，
雖然這次的作業一樣是跟影像的讀取有關，不過前面四次都是BMP檔，
而這次是讀取GIF檔，並且與BMP檔不太一樣的是GIF檔有調色盤，
所有會用到的顏色都會在調色盤上。

GIF最大的優點就是檔案不大，極適合在網頁上應用，
要是圖檔太大開啟一個網頁上的圖可是要等一段時間的，當然誰都不喜歡等。
不過其缺點是影像品質不太好，原因之一就是該圖最多也只有256色，
因此這並不適合在拍照上應用。

寫程式的部分我參考了老師的程式碼，不過也因為這是老師寫的，
有些地方看的不是很懂，比如像是個個變數所代表的意義等等，
而老師的程式中也用了不少的變數呢。

在畫調色盤的程式部分，程式架構就是用兩個迴圈去做，
就像之前讀取BMP檔，搭配fread與fseek使用，把讀到的像素點給一一印出；
讀取GIF調色盤也類似，把讀到的顏色畫出來，並把他畫成一個一個的方塊，
方塊與方塊間還可以留點空白好辨識；
再來調色盤畫好後還可以去按照顏色的明亮度或RGB值等等去做由小到大或由大到小的排序。

我覺得這次作業跟前面幾次比起來會比較困難些，因為還不熟悉GIF檔的格式，
雖然老師講得還滿清楚的，不過可惜的是老師講解與討論上只有一到二的禮拜，
花的時間也有點少，有點可惜，也讓我有點來不及吸收，
不過在聽老師的講解中其實我覺得GIF檔並不會比BMP來的多複雜，
只要再多花點時間去研究我有把握我能學得很好。

HW5

這次作業重要來說就是要讀出調色盤，然後讀出 GIF 檔案中的調色盤資料
針對調色盤色彩之亮度做排序
聽起來很簡單只要把GIF黨讀進去然後在一亮度的大小作排序就大功告成了
可是中間還是有很多不懂的地方
我看了老師的範例才明白也很多地方是自己不懂得
然後問問同學
才明白了很多其中的程式碼

HW5

好快已經到了第5次作業了，HW5跟之前的作業很不一樣，一開始做出一些簡單功能，讀取圖片資訊和音訊檔資訊，這次我們要讀取一張圖案檔，上面有使用了哪些顏色，並依照明亮來依序排列 。

這是老師範例的金龜子

這是讀取圖片後讀出來的調色盤

讀取出圖片的顏色後接下來我們要讓它一照明暗來排序那要怎麼排序呢?
(crPalette[k].bRed + crPalette[k].bGreen + crPalette[k].bBlue)/3
把這程式碼打上去後會讀取出顏色的值

首先我們要把讀出來的值來比較她們的明暗，只是做大小比較而已。

這是明暗比較後的調色盤

之前的作業有交我們要怎麼讀出圖片的RGB值，這次的作業有點算是進階，我們要使用GIF裡面的色盤取出，在比較。

HW05

這個作業對我來說挺由難度的
不知道是時間久遠還是上課沒注意聽
我對這作業的印象只停留在顏色排序...
第一步先開啟GIF檔
上網搜尋資料後
了解到GIF各資料的存取位置
後再搭配PSPAD來看
所幸老師這作業有留範例程式
不然還真不知從何寫起
起出一開始就先RUN看看
結果出現一堆錯誤
原來注意看才發現老師不少地方有更名過
花了點時間在修改程式上面
之後將
(crPalette[k].bRed + crPalette[k].bGreen + crPalette[k].bBlue)/3的值
用sort來排列就完成了
寫程式測試的過程中意外發現
暗變淺跟淺變暗的差異只有在大小於的判讀上
起初還以為這兩個排列的程式碼差異會很大

HW5

依照慣例開啟圖片，這次圖片為金龜子.GIF

開啟PSPAD檢視 金龜子.GIF



0: 47 49 46

       38 39 61     GIF89a      Header
                             Logical Screen Descriptor
6:     03 00        3            - canvas width in pixels
8:     05 00        5            - canvas height in pixels
A:     F7                        - GCT follows (256 colors at 3 x 8 bits/primary)
B:     00           0            - background color #0
C:     00                        - default pixel aspect ratio
                R    G    B  Global Color Table
D:     00 00 00    0    0    0   - color #0 black
10:    80 00 00  128    0    0   - color #1 dark red ("maroon")
:                                        :
85:    00 00 00    0    0    0   - color #40 black


fseek(GIF_file, 13, SEEK_SET);

開始讀取顏色 繪製到陣列
for(int x=0;x<16;x++){ y="0;y<16;y++){">Canvas->Pixels[x+move_x][y+move_y]= RGB(bitSize[0],bitSize[1],bitSize[2]);
     }
   }

sort 由暗到明

color1 = RGB(GIF_R[i]*0.299,GIF_G[i]*0.587,GIF_B[i]*0.114);
color2 = RGB(GIF_R[i+1]*0.299,GIF_G[i+1]*0.587,GIF_B[i+1]*0.114);

將這兩個顏色比對，用泡沫排序法慢慢排列再次繪出，就結束了!

HW5

這次的作業也算是讀檔，

只是這次變成讀GIF，GIF的檔頭跟BMP比起來算是簡單很多，

GIF識別、大小尺寸、調色盤，

然後最後面塞個3B當做檔尾結束。

首先點選右上角的讀取GIF調色盤，

讀完之後會如上圖所示，

這還是未排序的。

點擊由亮到暗之後就會如上圖所示，

從最亮的開始排，

至於亮度是怎麼判斷的，

就是使用轉灰階的方式，

三種顏色各乘上特定數字加起來的結果去排序。

另一個按鈕由暗到亮，

做法一樣，只是改個順序而已。

這次作業其實不好寫，

一開始就算會讀圖也不知道怎麼畫出來，

看了老師的範例程式才知道要自己去弄一個間隔讓他隔開，

才不會擠在一起，也才變成跟老師圖上一模一樣的格式。

HW5

這一周的作業是要用程式讀GIF圖檔並顯示出調色盤資料,並且要依照亮度排序調色盤


而要完成這個作業要第一個解決的問題當然是瞭解BMP檔頭跟GIF檔頭有何不同,在上課的時候就已經看過了維基百科,大致上瞭解了其中的不同,但是這次老師有放上可以參考的程式檔,於是便先用用看老師的程式檔,但是老師的程式檔不能直接使用,要修改一下,大概就是修改一些物件的名稱,所以這次的作業難度,便沒有這麼高了

hw5

第五個作業是，是要讀一張gif檔，把它所顯示的顏色用調色盤再用排序把顏色排好然後顯示出來。一開始參考老師的程式碼在從網路上找一些資料，但是在做結合的時候遇到了一點困難，困難的是要把兩個不一樣的程式做結合很忙凡，跟同學一起討論後有找出一些錯誤，但還是有許多錯誤，不過還是從這次作業學到一點東西，這一次的要用的排序法之前都有交過，所以這裡是還好，問題是調色盤有一點問題所以就沒下文了。
老師說過程式要一行一行打，一行一行理解，但是找資料的功力也是很重要的，有些人找半天都找不到，有些人半小時內就找到了，我記得我花了兩小時找資料。再來那本bcb也很有用，跟同學討論調色盤的元件要怎麼用，所以雖然做不出來，但是卻也有很多的收穫!!!