如何用代碼碼出一個櫻桃小丸子?
聽說代碼是萬能的,然後我就想到了我最愛的小丸子~
可不可以用代碼碼出一個小丸子呢?不是可以碼出一個大白嗎?我愛大白,更愛小丸子…我要的小丸子呢,她可以是這樣:
嘿喲喲,呼洽呼洽~這樣:啦啦啦~唱著歌兒,上學去啦~以及這樣biu!哇咔咔~唉~~真的好喜歡小丸子呢!求程序猿哥哥和程序媛姐姐作答。以上,來自一個小丸子迷,嘻嘻嘻。
謝邀~那我就正兒八經回答下吧╮(╯▽╰)╭
「如何用代碼碼出一個櫻桃小丸子?」 可以從幾個角度進行理解:
1.櫻桃小丸子用代碼字元的形式表現出來
2.繪製櫻桃小丸子到屏幕上
下面分別說一下這兩種都是如何去處理的。
---------------第一種----------------
簡單的圖形其實可以手工去碼字處理,而遇到櫻桃小丸子這類比較複雜的圖像,由於工作量及顯示效果問題,一般還是要靠演算法來將圖像信息轉成字元形式,前面幾個哥們兒已經回答的不錯了。
演算法的基本思路是先取得原圖像素的灰度信息(可以參考:Grayscale 這裡提到的演算法),然後將不同的灰度範圍對應不同的字元,通常這些字元在視覺上的明暗是有差異的,從而實現圖片轉字元的功能。
核心代碼如下:
static NSString * characterMap = @"#@8%Oo";,". ";
for(int y = 0; y &< height; y++) {
for(int x = 0; x &< width; x++) {
uint8_t *rgbaPixel = (uint8_t *) pixels[y * width + x];
uint32_t gray = 0.3 * rgbaPixel[RED] + 0.59 * rgbaPixel[GREEN] + 0.11 * rgbaPixel[BLUE];
NSUInteger position = lroundf((CGFloat)gray * 11.0f/255.0f);
[ASCIIString appendFormat:@"%c", [characterMap characterAtIndex:position]];
}
[ASCIIString appendString:@"
"];
}
最後的效果如下(比較慘烈):
還可以用類似十字繡的方式去處理,將原圖分成大小相同的格子,然後分別計算每個格子的平均色值,最後用一個字元替代之,並染色處理,這樣就可以是字元十字綉形式的小丸子啦,
//畫格子的代碼
var getPixelsGrid =function()
{
//圖片的原始數據
var sourceData = getSourceData();
var res = [];
for (var i = 0; i &< sourceData.length; i += 4) {
var y = Math.floor(i / (getCanvasWidth() * 4));
var x = (i - (y * getCanvasWidth() * 4)) / 4;
if (typeof res[x] === "undefined") {
res[x] = [];
}
res[x][y] = {
r: sourceData[i+0],
g: sourceData[i+1],
b: sourceData[i+2],
a: sourceData[i+3]
}
}
return res;
};
效果如下:
有個在線工具,你可以去玩一下:
ASCII-art converter
兩種結合一下,效果也不錯(用的其他圖片)
---------------第二種----------------
拖了幾天,繼續來寫第二種理解的了,繪製櫻桃小丸子到屏幕上。
先說說屏幕的顯示原理吧,如果我們把屏幕放大可以看到屏幕上其實有很多小點組成,如下:
屏幕上所有的圖像都是由這幾種顏色調和而成,於是呢,紅色、綠色、藍色又成稱為光的三原色,也就是RGB,RGB各有256級亮度,所以可有的色彩組合就有256×256×256=16777216種顏色。
喵蛋,好像扯太遠了..拉回來
好,然後呢,有個神器叫GPU,圖片載入以後,GPU和CPU相互配合(這個展開講會暈...),將圖片信息解壓,計算顏色混合等各種麻煩的事情,然後將圖片信息渲染到界面上..大概過程就是這樣。
OK...以上,其實程序員不需要特別深入了解,我們的在寫程序的時候只需要告訴,我要從哪裡載入圖片就好。
iOS來說一句話就好了..[UIImage imageNamed:@"櫻桃小丸子.jpg"];
後面的.jpg是什麼呢,是圖片的格式,換句話說圖片以何種格式存儲的,常見的點陣圖存儲格式有png、jpg、GIF等,那麼什麼是點陣圖呢,就是它圖片信息是以像素陣列的形式記錄的,放大後會由於像素信息不全,模糊掉..
除了點陣圖之外就是矢量圖形,矢量圖是通過數學計算記錄一系列曲線信息及顏色、輪廓大小等形式記錄下來的圖片數據,一般矢量圖要比點陣圖大,但是好處就是,由於是數學記錄的,所以放大後不會失真。
於是我把小丸子的圖片轉成了svg格式的矢量圖,裡面的記錄格式成什麼樣子呢:
裡面的path就是一條條曲線路徑及其系列屬性,然後...我用繪製代碼的形式將其繪製出來...
大概就醬紫的代碼 重複重複重複(也是蠻拼的體力活),當然像這種複雜圖形,人工寫會累死,一般都是藉助輔助工具,比如我用的"PaintCode",畫出來大概這樣:
然後這個小丸子總共寫了多少行代碼呢?答:17000多行...多來幾個10萬行代碼經驗就有了(不過無意義)....
# -*- coding:utf-8 -*-
class Image2Binary(object):
def __init__(self):
pass
def read_file(self, infile, mode="rb"):
data = None
with open(infile, mode) as f:
data = f.read()
return data
def write_file(self, data, outfile, mode="wb"):
with open(outfile, mode) as f:
f.write(data)
def image2binary(self, data):
return "".join(["{0:08b}".format(ord(i)) for i in data]) if data else None
def binary2image(self, data):
return "".join([chr(int(data[i:i + 8], 2)) for i in range(0, len(data), 8)]) if data else None
if __name__ == "__main__":
infile = "test.jpg"
outfile = "test_out.jpg"
image = Image2Binary()
image_data = image.read_file(infile)
binary_data = image.image2binary(image_data)
rollback_data = image.binary2image(binary_data)
image.write_file(rollback_data, outfile)
# -*- coding:utf8 -*-
###############################################################
# note:
# 1. 實現把 image 圖片,轉化成ASCII 碼的圖片效果.
# 2. 依賴的 Python 包: PIL
# 3. 64位的Python,無法安裝PIL,需安裝pillow替代PIL(導包語句不變)
###############################################################
from PIL import Image
class Image2Ascii(object):
def __init__(self, filename):
self.def_chars = " ...",;:clodxkO0KXNWMMM"
self.def_height = 50
self.image = Image.open(filename)
def adjust_size(self, image, height):
if image:
width = int((height * image.size[0]) / image.size[1] * 2.3)
return (width, height)
return None
def image2ascii(self):
result = ""
new_size = self.adjust_size(self.image, self.def_height)
self.image = self.image.resize(new_size)
self.image= self.image.convert("L")
pixs = self.image.load()
for y in range(new_size[1]):
for x in range(new_size[0]):
result = "%s%s" % (result, self.def_chars[(pixs[x,y]/10)-1])
result = "%s
" % result
print "ACSII IMAGE:
", result
if __name__ == "__main__":
image = Image2Ascii("test.jpg")
image.image2ascii()
原圖:畫出來的 ASCII 碼圖:題圖小丸子:演算法不是原創,稍作修改,發來娛樂一下.
吃胖版的小丸子。。。。的頭。。。。
附上代碼吧。代碼複製了保存在記事本中。然後記事本後綴改成html。chorme運行正常。不知道其他的怎麼樣。不會寫瀏覽器兼容。。_(:з」∠)_&
&
&
&
&
&
&
&
&
&&