mapleboard on the table

我是楓葉板社群部落格板主Jonas~歡迎大家多發文、多回應,有任何問題歡迎寫信給我Jonas。                                               目前部落格網站有2個更動:1.草稿位置更改為博主首頁之內2.增加Emoji按鈕(按鈕的最左上角)。請大家留意並多加利用~    

MP130_prototype_board

大家一定很好奇怎麼用Blender,從無到有的3D圖是如何製作出來的,以楓葉板為例,取其一零件『六角銅柱與矽膠腳墊』來重點介紹製作流程。

 

1.建模︰add mesh 裡面的各種形狀的物件組合成你要製作的造型,運用Object Mode與Edit Mode來編輯『點、線、面』。

blog0131-03-modeing

 

2.Render渲染算圖之引擎模式選定(cycles Render-blender內建)
cycles


在3D軟體中是非常關鍵的一點,必須在你處理材質、光線前決定好,而blender目前有3種選項, 而我選用較新的技術cycles,雖然算圖時間偏中等速度,但是圖片的顏色與細緻度算是最好的。 不同的選擇,會影響呈現效果,一開始要先做好決定,否則到頭來你配好的光線與色彩,會因為選錯引擎而需要大幅調整每一個設定之數值。

不同引擎分析比較參考
http://www.blenderget.com/render-engine-comparison-cycles-vs-giants/

 

3.打光

環境顏色、亮度與Ambient Occlusion
world

 

燈光Lamp / Hemi
light

 

4.材質 Material

金屬質感模擬
m-glossy-02

m-glossy-01

矽利康 silicon質感模擬
m-slicon-02

m-slicon-01

材質模擬是蠻複雜處理效果,有一點像圖層混合的概念,以Node為主軸,由右到左連接處理,會因著環境或是打光影響效果,必須一邊Render一邊調整數質來慢慢微調出你要的效果,或者是可上網找設計好的材質數據參考,要有心裡準備因為每個設計者設定不同,只要有些許差異render出來就會有出入。

 

5.轉成圖片檔( .png)

render

 

6.影像處理

ps

可以運用GIMP或是PHOTOSHOP...等影像處理軟體,調整光線色調、亮度、對比度與銳利化,更貼近你所要呈現的效果,加強細節或是局部微調都非常方便。

 

以上Blender小教學完成,而楓葉板週邊零件『六角銅柱與矽膠腳墊』的成品正如火如荼地製造中,即將問市,敬請期待!

 

 




近來台灣地震頻繁,在此分享地震始發生時,我們應做什麼:

 

災害發生時,勿驚慌,冷靜判斷當下該如何行動。

眼:觀察周遭是否有易掉落或噴濺的物品,躲避之。

耳:聽是否有「碰、碰」的聲響,通常是建築物內部因地震被扭曲的情形,此時要小心可能發生大樓扭曲崩塌情形。

 

防災的幾點注意事項:

1.保護頭部、找堅固掩護:通常會躲在堅固的桌子下,如果附近沒有桌子可以找建築的主柱來依靠掩護。

2.避開掉落物、易碎物:凡是會滑動的東西都要小心。

 

根據統計,阪神大地震中,因為建物倒塌、物品撞擊、壓迫而死亡的人數有83%。
因此,我們的所在位置的建築是否牢固以及所在處是否會有物品傾斜撞擊成了存活與否的因素。

 

幾個場所的注意事項:

1.居家:電冰箱、微波爐以及電鍋等大型家電都可能滑出。

2.辦公室:如辦公室有玻璃,可能因地震噴濺碎玻璃致死,應盡速遠離。而大型辦公椅、複印機或相關儀器若沒有可固定的腳,需提防滑動壓到人的情形。

3.戶外:商家招牌、盆栽等都可能會砸到人。此外磚頭也可能會飛落,尤其是地震又遇到有雨的時候是特別危險的。

日本還有一篇文章指出,大地震時,冰箱是「飛」起來的。因此該文章也建議要把大型家具、電器物品在平時固定起來,將有效提昇地震存活率。

 

由於日本地震頻繁,因此他們出了一本「東京防災」,裡面很詳盡的講解關於地震預防、地震應對與震後行動,很推薦大家下載下來看看(是圖文檔,不會枯燥)。

《東京防災》(簡體、繁體中文版下載)

http://www.metro.tokyo.jp/CHINESE/GUIDE/BOSAI/index.htm

 

此外,目前開發中的楓葉板,未來有可能會做關於熱感應、空拍的機器,將來對於救災勢必能發揮一定的效益。

但我們還是希望未雨綢繆、在災前就做好一切的防範措施,才是最穩妥的。

 

資料來源:

內政部消防署

http://www.nfa.gov.tw/cht/index.php?code=list&ids=275

《東京防災》

http://www.metro.tokyo.jp/CHINESE/GUIDE/BOSAI/index.htm

日本地震灾害死者死因分析与思考

http://sjdz.iemzzs.com/oa/darticle.aspx?type=view&id=20120314

大地震時、天井落下の窒息死はわずか17%、死因の70%を占める意外な原因とは?

http://ie-mania.net/security/1167/

 




自造年代- 復古微電腦新世代

gava  2018-02-05   留言:0

Photo by Federica Galli on Unsplash

Photo by Federica Galli on Unsplash

這個時代,每個人都至少有一隻智慧手機,智能家電無所不在。
自動無人駕駛車,機器人,智慧手臂...等也正蓄勢待發,我們已走在第四次工業革命的路上!

回顧我們曾走過的歷史:第一次工業革命源自十八世紀,鐵路和蒸汽機的發明,讓農業社會轉型進入機械生產時代。第二次工業革命發生於十九末到二十世紀初,生產線及電力系統普及,半導體技術開始規模化,間接地帶來第三次工業革命。大型電腦、個人電腦、網路的發展,自由、開源軟體...等也應運而生。

隨著開放原始碼的風潮及網路社群的催化,原本只能在工廠“生產”的知識變成網路上自造者的“寶典”。自造風氣(Maker)開始帶來另一種生活方式,如:自種食用蔬果、家具DIY、親自下廚..等,即使科技可以很進步,人類還是熱愛親自動手做的感動。

這股動手做的天性,讓人類可以實現自己的想像力。我們一邊使用大眾化的產品,一邊自造改良其特性來適應各個不同的個案,成為一種推動社會轉動的微改革。

2005年,Arduino單晶片微電腦控制板出現(義大利),設計電子互動裝置逐漸變得熱門,各項研究計畫及實現也開始出現。

http://intergalacticrobot.blogspot.tw/2014/05/respirar.html

Photo by Artur Coelho  License: CC

2012年,Raspberry Pi 樹莓派單晶片電腦出現(英國)。面積只有一張信用卡大小,體積大概是一個火柴盒大小,可以執行像《雷神之鎚III競技場》的遊戲和進行1080p影片的播放。儘管一開始是針對教育所設計的產品,卻推演出許多想不到的強大功能。小至微感測控制器,遊戲,小機器人等等,大至網站伺服器,串連組成超級電腦,物聯網等等。

https://commons.wikimedia.org/wiki/File:Raspberry_Pi_Zero_1.3.jpg

Photo by Horst-Josef  CC BY-SA 4.0

 

繼樹莓派後,台灣也出現了MapleBoard楓葉板。楓葉板配了四核心應用處理器/1GB 主記憶體/8GB內嵌式記憶體,硬體上整個大升級!並豐富了IO輸入輸出界面,看來是想讓微電腦晶片有更多的實驗和應用~

未來會是怎麼樣的呢?拭目以待吧!
 

https://www.mapleboard.org/

Photo from Mapleboard




博文管理上線

blogtest  2018-01-31   留言:2

博文管理畫面截圖

在自己的關於博主頁面,
除了編輯個人資料與封面管理之外,
沒有現實朋友的測試小弟發現,
新增了博文管理的選項囉!

以後儲存成草稿的文章也會在這裡列出來,
真令人開心 heart




如何製作高清gif on Debian

mark  2018-01-30   留言:4
為什麼我的gif出來只有256色,我感覺我自己好糟crying

感謝這位同學的發問我又有一篇可以發揮了

這次源頭其實只是要抓畫面擷圖成為gif

但產生出來的結果都是畫面不太好的狀況

一開始單純以為是畫面擷取程式有解析度選項可以調整

但找了一些資料後才發覺原來問題是gif只允許256色!!

 

why gif is 256 colors ?

原來會有這種檔案格式是因為要減少圖擋在網路上傳輸的時間,所以將原始色彩轉為8位元色彩,但由於這種檔案格式可以插入多個影格(frame),所以現在gif常被用來當動畫圖或是最近常見的meme Giphy meme fail

在找資料才發現原來有人為了處理我們這種近乎不合理的要求
完成了這樣的一個超好用工具 peek + gif.ski

 

what is peek ?

peek 算是我目前用過很好用的桌面錄影軟體 (官網:phw/peek github)

因為他可以靈活的選擇目前要擷取的範圍還有可以很方便啟動以及關閉

圖片來源 phw/peek github

詳細設定可以到 preference 作更精細或更高品質的調整

peek preference

畫面擷取自peek preference 畫面

好了問題來了

這東西可以直接apt install 嗎 ?

可以 但對debian來說不行 crying

所以這邊就順便附上在debian上安裝peek的簡易說明

1. 準備相關library安裝

sudo apt install cmake valac libgtk-3-dev libkeybinder-3.0-dev libxml2-utils gettext txt2man

這邊建議可以在最後補上ffmpeg 因為我在最後一步deb安裝時就因為缺少此library造成安裝中斷

2. 下載程式碼 [line 1] 並產生安裝檔(.deb) [line 2-4]

git clone https://github.com/phw/peek.git
mkdir peek/build
cd peek/build
cmake -DCMAKE_INSTALL_PREFIX=/usr -DGSETTINGS_COMPILE=OFF ..
make package

3.安裝 (其中1.2.2數值可能會變請依實際狀況修改)

sudo dpkg -i peek-1.2.2-Linux.deb 
Selecting previously unselected package peek.
(Reading database ... 196873 files and directories currently installed.)
Preparing to unpack peek-1.2.2-Linux.deb ...
Unpacking peek (1.2.2) ...
dpkg: dependency problems prevent configuration of peek:
 peek depends on ffmpeg; however:
  Package ffmpeg is not installed.

dpkg: error processing package peek (--install):
 dependency problems - leaving unconfigured
Processing triggers for gnome-menus (3.13.3-9) ...
Processing triggers for desktop-file-utils (0.23-1) ...
Processing triggers for mime-support (3.60) ...
Processing triggers for libglib2.0-0:amd64 (2.50.3-2) ...
Processing triggers for hicolor-icon-theme (0.15-1) ...
Processing triggers for man-db (2.7.6.1-2) ...
Errors were encountered while processing:
 peek

如果剛剛沒有安裝ffmpeg 就會出現這個畫面請繼續到3.1

如果剛剛有安裝完那就恭喜你你完成了

到桌面找一下就會找到peek 點開就可以使用了 :)

3.1 補安裝完ffmpeg的訊息 ?

Reading package lists... Done
Building dependency tree       
Reading state information... Done
You might want to run 'apt --fix-broken install' to correct these.
The following packages have unmet dependencies:
 ffmpeg : Depends: libavdevice57 (>= 7:3.2.10) but it is not going to be installed
          Depends: libsdl2-2.0-0 (>= 2.0.4) but it is not going to be installed
E: Unmet dependencies. Try 'apt --fix-broken install' with no packages (or specify a solution).

基本上就是打 sudo apt --fix-broken install 就可以繼續完成剛剛未完成的安裝,恭喜你完成安裝了

而在仔細看官網列出的常見QA 有看到一個有意思的問題 : How can I improve the quality of recorded gif files ?

作者說你可以再安裝一個工具gifski 如此就可以完成更高畫質的gif

 

what is gif.ski

這個真的很厲害 就是這個軟體打破了gif 品質不高的宿命

來看看gif.ski究竟可以將gif玩到怎樣的程度

是不是超厲害的

這次安裝就比較簡單了因為作者都幫你包裝好

只要在下載解壓縮後根據你的作業系統選擇對應的安裝檔

以linux / debian 來說就是

sudo dpkg -i gifski_0.7.3_amd64.deb

那接下來就來看看gif如何從256色回到全彩的世界

 

效果比較

測試影片出處 (這是blender 每次推出新版都會有的小短片)

https://www.youtube.com/watch?v=mN0zPOpADL4

這部是 Agent 327: Operation Barbershop 由 Blender Animation Studio 上傳分享

gif測試輸出大小 480*320 pixel

1. byzanz (fps: 60 ? )

byzanz-record --delay=3 --duration=5 --x=300 --y=200 --width=480 --height=320 byzanz.gif

使用起來不太方便因為你要自己算x y的位置,這邊就是因為沒有算好才會有畫面上方的粗黑邊

byzanz captured gif

2. peek (fps: 10)

這邊就可以看到不會有上面的奇怪的顏色

peek captured gif with fps=10

3. peek + gif.ski enabled with max quality (fps: 10)

peek captured gif quality enhanced by gifski  with fps=10

 

是時候跟256 colors gif 說掰掰 laugh

 




Draft Ability

blogtest  2018-01-29   留言:5

We have added a new feature: Draft!

BUT!

There is no page for members to see their own drafts...

I plan to make a posts management page tomorrow.

please be patient to wait, thanks.




好忙好忙

在滿是工程師的辦公室裡,分秒深陷程式碼中因而耳濡目染學會如何coding

這般美好的事情,當然是謀~~摳~~零~~

常常聊天到一半,只差沒懷疑自己是不是中間恍神了,怎麼現在聊的內容我完全聽不懂啊~

「哈囉~說人話好嗎?」

更別提他們間的聊天,扣掉中間穿插的幾個字詞勉強擦邊聽懂外,剩下的......啊哈哈,大概是因為我們是不同物種吧!

記得之前好像看過寵物翻譯機,主要針對犬類,將其吠聲與行為轉化成人類可理解語言

希望我也能獲得一台「工程師翻譯機」,最好可以自動充電,因為每天上班我都會需要它的!

(可不可以工程師們上班之餘看到我的許願,然後該做硬體的做硬體、該做軟體的做軟體,操作介面我不強求,簡單簡單就好)

 

 

但是(哼哼哼,難得這麼得意的說著這兩個字)

不得不誇獎一下自己,我從完全看不懂程式語言到拿著sudo亂揮(認真只是亂揮)

現在的我已經不是之前的我了哼哼,我可以自己下載APP來玩了~~~

雖然成就之小,但是進步就是進步(翹鼻子)

先曬下最初的小遊戲:
cmatrix

CMatrix

因為CMatrix已被Debian接納,所以安裝很簡單,只需要拿出sudo揮個兩下就能夠玩了

 

$sudo apt install cmatrix

但當我開心的展示成果時,老闆默默的問說:「你電腦中毒?」

更壞的是同事們,他們以一種「她腦子早就中毒」的表情回望老闆

 

 

國父革命11次才成功,已非吳下阿蒙的我怎能輕言放棄

最近找到了款工程師級的裝忙程式

svenstaro發表於Github的A nonsense activity generator

不管是安裝、執行還是下載,看起來就是厲害,是不!

(再次感謝svenstaro供圖,弱弱如我下個目標設為做出gif好了)

 

 

好玩的東西是值得浪費青春的,讓我們一步步看怎麼下載吧!

  1. releases page 依作業系統選擇下載檔
  2. 先到存放的資料夾,我剛下載所以直接到下載資料夾
    $ cd Download/ 
  3. 活化他~~~
    $ chmod +x genact-linux
  4. 別客氣,開始玩弄他!!!
    $ genact-linux

如果還是覺得好難,生命想浪費在有意義的事情上,但又想假冒一回厲害的工程師

網頁版愛你kiss

 

 

如果你是個有興趣又有能力的人,恭喜你!

A nonsense activity generator可以自行修改變數,想要它飛天或鑽地都行(啊是要一個裝忙程式做什麼啦......)

要是你也跟我一樣是個「程式在跑,除了帥還是帥」的人,沒事的

內行看門道,外行看熱鬧,就讓不會程式的我們一起好忙好忙~~~




heart drawn by d3.js author Nadieh Bremer

首頁圖 (image source
有辦法在網頁上畫一個愛心嗎?他有一名朋友最近有點難過
這次會有這篇文章要感謝OO同學因為她提了一個有趣的問題
 
我就來問問了我們偉大的Google大神
於是乎就找到了這個有趣的的文章
其實畫圖這件事並不難
重點是畫出愛心的方程式要怎寫
這對一個非數學系的人是一個不小的挑戰
所幸我們有Google (歡呼~)
 
這次文章程式碼主要是從Nadieh Bremer 網站的教學擷取出來
看完才發現原來這位作者Nadieh Bremer是一位data visualization 的專家
有興趣的可以點這個連結看更多這位作者的作品 https://www.visualcinnamon.com/portfolio
 
nadieh bremer works snapshot
 
Data visualization 一直是我很有興趣的一塊
但礙於我美工天份不足所以一直以來都只能是欣賞
而不太能實做 ><
結果直到看了這一篇
我才知道有一段時間我一直再做的其實就是data visualization
而我一直景仰的是inforgraphics
 
這兩者差異在那呢?
原文  Matthew Pritchard : Data visualization vs. infographics
 
Data visualization
  1. 描繪原始數據
  2. 傳達資訊
  3. 提供客觀性

簡單說data visualization 就是可以取得數值,圖表產生。基本上在這一步完成讀者就可以根據這些資訊來完成結論,但因為只有圖表, 所以還是會仰賴輔助文字說明,才能了解我們現在所看到的圖表究竟代表什麼意義。

Inforgraphics
  1. 故事視覺化
  2. 提出觀點
  3. 提供主觀性
光是只有上面的圖表可能無法吸引非專業人士的目光, 有時我們也會希望這組數據可以引起更多人注意, 所以吸引目光這件事情就主要是透過infographics來達成。因為有故事的關係還有版面配置, 會讓讀者就像在看童話故事書一般深入其中,並迫不及待想看完這故事,迎來最後英雄擊敗大魔王勝利的完美大結局
 
所以根據本質差異兩種方式有不同使用的場合
 
Data visualization
  1. 新聞
  2. 白皮書&電子書
  3. 年度報告

有興趣可以點以下連結了解 :http://killerinfographics.com/blog/storytelling-through-data-visualization.html

Inforgraphics
  1. 部落格文章
  2. 案例分析
  3. 市場行銷文案

有興趣可以點以下連結了解 :http://killerinfographics.com/blog/4-ways-to-stretch-your-infographic-content.html

而關於d3.js 以及data visualization的淵源我也不是很清楚
但這篇文章還介紹的滿詳細,就放在這邊供有興趣的人參考
 
Bonus : processing.js
這也是一個可以畫圖的js
但這個似乎比較偏向藝術類
有興趣可以點以下網站點每個作品進去看看
每次重新整理都會是不同的結果
 
 
p5p generative art gallery snapshot