唔,我畫圖有個問題是手不穩
但我想了一下,這世界上除了我畫圖手不穩外,電腦畫圖的手也是不穩的
因此若用電腦式的畫圖法來畫圖
也許,只是也許,有機會克服自己的多媒體素材能力的問題
就像是PaintsChainer、Girl Friend Factory那樣
雖然那兩者應該是有用到機器學習,或者直接說是TensorFlow相關的東西
(機器學習有很多個框架,TensorFlow是Google主推的,日本似乎較多人採用此框架)
(也就是蠻耗伺服器計算、儲存非常大量的圖片資源的,那我就不用過於專注這方面)
這邊只簡介下電腦畫圖
在傳統點陣圖(bitmap)狀況下
都是用RGB的方式來畫
也就是
Red(紅色) 範圍 0~255
Green(綠色) 範圍 0~255
Blue(藍色) 範圍 0~255
不過若是HTML5所支援的Canvas(畫布,帆布)的話
因為支援的圖檔類型有多個PNG
因此支援RGBA的方式來畫
A就是Alpha,這邊指的是透明度
255時是完全不透明,相當於在RGB底下的狀況
而
傳統程式讀寫檔案那些還蠻麻煩的
不過HTML5的Javascript API大幅降低了多媒體檔的處理難度
那直接貼程式碼吧
Github
https://github.com/y541258/HTML5/blob/master/pixel_art/bitmap.htmlhttps://github.com/y541258/HTML5/blob/master/pixel_art/bitmap_remember.htmlhttps://github.com/y541258/HTML5/blob/master/pixel_art/bitmap_remember_run_length.html*****************bitmap.html*****************
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<body>
<canvas id="myCanvas" width="640" height="640"></canvas>
<div id="div_display"></div>
<script>
//參考網頁http://www.w3school.com.cn/tags/canvas_getimagedata.asp
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img= new Image();
img.src="魂魄妖夢.png";
ctx.drawImage(img,0,0,img.width,img.height);
var imgData=ctx.getImageData(0,0,img.width,img.height);
for (var i=0;i<imgData.data.length;i++)
{
if(imgData.data[i]>128)
{
imgData.data[i]=255;
}
else
{
imgData.data[i]=0;
}
}
ctx.putImageData(imgData,300,0);
for (var i=0;i<imgData.data.length;i+=4)
{
if(imgData.data[i]>128 && imgData.data[i+1]>128 && imgData.data[i+2]>128)
{
imgData.data[i]=255;
imgData.data[i+1]=255;
imgData.data[i+2]=255;
}
else
{
imgData.data[i]=0;
imgData.data[i+1]=0;
imgData.data[i+2]=0;
}
}
ctx.putImageData(imgData,0,300);
var imgData=ctx.getImageData(0,0,img.width,1);
for (var i=0;i<imgData_one_line.data.length;i+=4)
{
document.getElementById("div_display").innerHTML += imgData.data[i] + " " + imgData.data[i+1] + " " + imgData.data[i+2] +" " + imgData.data[i+3];
document.getElementById("div_display").innerHTML += " ";
if(i%16==0)
document.getElementById("div_display").innerHTML += "<br>";
}
</script>
</body>
</html>
上述該網頁效果
(這次偷懶沒用圖檔onload事件,因此可能需要重新整理才看得到網頁效果)
圖檔名就換成自己同個目錄底下的吧
![]()
****************(背誦的另一個網頁檔bitmap_remember.html)*************
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<body>
<canvas id="myCanvas" width="640" height="640"></canvas>
<div id="div_display"></div>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img= new Image();
img.src="魂魄妖夢_黑白版.png";
ctx.drawImage(img,0,0,img.width,img.height);
var imgData=ctx.getImageData(0,0,img.width,1);
//要背第二行的話是
//var imgData=ctx.getImageData(0,1,img.width,1);
for (var i=0;i<imgData.data.length;i+=4)
{
document.getElementById("div_display").innerHTML += imgData.data[i] + " " + imgData.data[i+1] + " " + imgData.data[i+2] +" " + imgData.data[i+3];
document.getElementById("div_display").innerHTML += " ";
if(i%16==0)
document.getElementById("div_display").innerHTML += "<br>";
}
</script>
</body>
</html>
該網頁的效果大概是這樣
![]()
不過...
目前這樣還是很不好記憶、背誦
雖然這樣是就可以記憶、背誦了
在黑白版的圖檔中
可以利用runlength的概念來處理
也就是說程式應該還可以再調整
runlength的意思就是
DDDDIINNNEEER
可以記成 D4 I2 N3 E3 R1這樣
是種非失真壓縮(無損壓縮)的常見手法
那壓縮也有助於記憶嘛
像英文的字首字根、中文的形聲字(有邊讀邊)概念那樣
有沒有覺得這程式出現的資料好像有些少?
因為這是只讀取一行的狀況下是這樣
若讀取227行(以目前的圖檔來說就是全部讀取)的話...
配上顯示網頁會有些卡住的感覺
此外也很難一次背那麼多行嘛
要背第幾行主要在這裡改
var imgData=ctx.getImageData(0,0,img.width,1);
第二行的話是
var imgData=ctx.getImageData(0,1,img.width,1);
那大概就這樣
希望可以藉此克服美術障礙與達到多媒體素材複用的目的
run length等我改天狀況比較好時再處理
(昨天戒咖啡,昨天晚上六點痛到今天下午四點好一些,雖然現在也還在痛)
雖然應該處理起來也不難才對
因此往後幾天可以期待一下
---
4/2更新,run_length(僅適用於黑白版圖片)
程式執行效果圖
因為偷懶沒做圖片onload事件偵測,一如既往滴若點開網頁檔沒反應,要再次按F5
若還是沒反應,請確認圖檔(圖檔名要完全相符)與網頁檔在同個路徑底下
不然就要從程式碼去改圖檔路徑或從圖檔名稱、圖檔路徑去修正![]()
***bitmap_remember_run_length.html***
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<body>
<canvas id="myCanvas" width="640" height="640"></canvas>
<div id="div_display"></div>
<script>
//參考網頁http://www.w3school.com.cn/tags/canvas_getimagedata.asp
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img= new Image();
img.src="魂魄妖夢_黑白版.png";
ctx.drawImage(img,0,0,img.width,img.height);
var imgData=ctx.getImageData(0,0,img.width,img.height);
//要背第二行的話是
//var imgData=ctx.getImageData(0,1,img.width,1);
var runlength_type = null;
var runlength_num = 1;
var line_count=0;
for (var i=0;i<imgData.data.length;i+=4)
{
line_count++;
if(imgData.data[i]==0)
{
if(!runlength_type)
{
runlength_type = "黑";
document.getElementById("div_display").innerHTML += "黑";
}
else if(runlength_type == "黑")
{
runlength_num++;
}
else if(runlength_type == "白")
{
document.getElementById("div_display").innerHTML += runlength_num+"黑";
runlength_num=1;
}
runlength_type = "黑";
}
if(imgData.data[i]==255)
{
if(!runlength_type)
{
runlength_type = "白";
document.getElementById("div_display").innerHTML += "白";
}
else if(runlength_type == "白")
{
runlength_num++;
}
else if(runlength_type == "黑")
{
document.getElementById("div_display").innerHTML += runlength_num+"白";
runlength_num=1;
}
runlength_type = "白";
}
if(line_count == 242)
{
line_count=0;
runlength_type = null;
document.getElementById("div_display").innerHTML += runlength_num+"<br>";
runlength_num = 1;
}
}
</script>
</body>
</html>
嗯,這個圖檔太大了不太好記(242*227)
不過...
我還是試試看能否僅憑著文字來腦海生成相關圖像看看!!
看能否藉此練出對一幅圖的感覺
(這幅圖因為當初裁減的關係,所以尾巴多了道空白行,因此每列總是以白結尾的)
其實可以從程式碼,把242改成241藉此解決啦!!
(在目前的程式用這方法解決會有問題,但為何會有那問題與如何修正尚待思考中)最後一列,第227列也有同樣問題在,也可從程式img.height-1來解決
不過我還是選擇採取用人腦忽略的方式!!
創作內容
4/1,記圖之網頁程式,期望能藉此克服個人美術障礙(更新run length,部分內容有誤尚待修正)
單機版網頁遊戲系列相關 (20)
