寫給設計師的趣味編程指南入門教程

文章來源于未知，感謝作者情非得已給我們帶來經精彩的文章！

設計教程/前端設計/前端設計2016-08-03

提起「編程」二字，很多人腦中會覺得高端、燒腦、難學，WENZY– 希望通過這個系列指南，掃除大家對“編程”的刻板影響，一路玩轉編程。這不僅僅適合設計師閱讀，相信任何一個想了解編程的人都能通過它迅速入門。

設計師為什么學編程？

寫給設計師的趣味編程指南入門教程

設計師可以說是靈感泛濫的物種之一，腦袋里往往裝著各式天馬行空的想法。通過學習繪畫，我們就比常人多了一種洞察事物本質的能力。

這種能力讓我們對造型和色彩更加敏感，可以輕易地看見常人忽略的細節，可以捕捉日常生活中精彩的畫面瞬間。

可是，僅僅用畫筆和繪圖軟件來展示自己腦中的構想還是有些局限。你應該多掌握一門魔法般的技能，那就是編程。

它可以讓你從另一個維度認識世界，不再是感觀層面，而是回歸到圖像的源頭——數據。

你可以最直觀地了解圖像的生成原理，是什么構成了色彩？又是什么產生了造型？各種圖形處理的過程，數據發生了哪些變化？

在深入接觸的過程中，你還可以了解萬事萬物的運行原理，創造各種粒子系統，模擬各種自然現象。

在程序世界中，你就是造物主。想盡快體驗這種創造的快感？那趕緊往下看吧～～我已經迫不及待想向你展示程序之美了。

編程是什么？

編程到底是什么？它的最終目的，就是讓計算機解決某個問題。如果我們想讓計算機理解指令，就得掌握編程語言。

編程語言還不止一種，它有自身的一個演化過程——機器語言，匯編語言，再到高級語言。語言的發展，其實是由一批批懶人做出的貢獻。正如FORTRAN的設計者John Backus所言：我的大部分成果源自我的懶惰。因為我不喜歡寫程序，所以我設計出了能輕松編寫程序的系統。

在這樣一批懶人的推動下，語言就越變越“高級”，也越來越接近人話（自然語言）。未來肯定會存在這樣一個場景，你只需要向計算機描述一個問題，它便能瞬間理解你的意思，自動生成程序并迅速解決。

想象很美好，但在有生之年，估計還無法見證這個時刻。所以處于2015的我們，還是需要老老實實學一門編程語言。

在學習的同時，我們也需要向前輩們的偷懶精神致敬。盡量發揮計算機自身的優勢，讓它自動化地解決問題。

選擇哪種語言入門

寫給設計師的趣味編程指南入門教程

編程語言有上百種，在這里，我向你隆重推薦Processing。

它可能不是現階段最主流的，但卻是最適合入門的，特別是設計師。

優點如下：

它能讓你建立起創作者的思維。編程技術作為輔助手段，圖形創作是最終目的。可以讓你不要一味地鉆進技術的海洋。
語法簡練，短小精悍。可以用很少的代碼寫出很棒的效果，極易獲得反饋。
當你接觸編程概念的時候，過往抽象的邏輯，符號，知識點。都像重生一般，會以一種鮮活的視覺形式呈現出來，十分適合視覺系的設計師。
編寫繪圖，動畫，交互程序十分簡單，可以整合各種音頻視頻文件，輸出屬于自己的作品。
如果你是視覺控，是geek，那一定會對它愛不釋手。

PROCESSING可以做什么？

Processing誕生于鼎鼎大名的MIT MEDIA LAB。它最擅長創作圖像，無論是靜態或是動態，二維或是三維。既能做游戲，也能寫音樂。

當某一天，你嫌photoshop提供的功能還不夠強大，無法實現自己想要的效果，你完全可以自己寫一個筆刷，寫一個濾鏡，對圖片進行像素級別的操控。

下面的這些作品，就出自Processing之手。

Dave Whyte作品：

寫給設計師的趣味編程指南入門教程

體驗

在開始之前，我們先到Processing官網下載安裝包（ https://processing.org/download/）選擇 No Donation，再點擊download，即可免費下載。

寫給設計師的趣味編程指南入門教程

若想支持Processing Foundation，可以考慮適當地捐贈。正因為兩位創始人有開源的胸襟，才使我們能免費使用到這么棒的工具。

準備工作完畢。我們先動動手。把下面的代碼復制到程序中。

float angle, a;
 int circleW;

void setup(){
 size(700, 400);
 circleW = 3;     //控制圓形節點的大小
 }

void draw(){
 background(0);
 stroke(255);
 a = 45;    //控制樹形的分叉角度
 angle = radians(a);
 translate(width/2, height);
 line(0, 0, 0, -120);
 translate(0, -120);
 branch(130);
 }

void branch(float h){
 h *= 0.6;
 if (h > 2){
 pushMatrix();
 rotate(angle);
 line(0, 0, 0, -h);
 ellipse(0, -h, circleW, circleW);
 translate(0, -h);
 branch(h);
 popMatrix();
 pushMatrix();
 rotate(-angle);
 line(0, 0, 0, -h);
 ellipse(0, -h, circleW, circleW);
 translate(0, -h);
 branch(h);
 popMatrix();
 }
 }

接著點擊左上方的三角符號運行試試看。

（＊若中文注釋在程序中無法正常顯示，可以在preference-Editor and Console font中，選擇字體Andale Mono）

最終，它會生成這樣的圖案。

寫給設計師的趣味編程指南入門教程

這段程序用到了很著名的遞歸函數。現在看不懂沒有關系，我們可以試著改變上面的一些數值，比如將“ a = 45 ”中的“ 45 ”改成“ 90 ”試試。

圖像發生變化了！

寫給設計師的趣味編程指南入門教程

這還不是最酷炫的效果。試著將變量值替換成一個神奇的參數mouseX（末尾字母大寫），寫成“a = mouseX”。

當你左右移動，圖像就會產生動態的變化。

寫給設計師的趣味編程指南入門教程

有沒有感受到無法言喻的秩序之美？參數mouseX的作用是實時地獲取鼠標的X坐標。所以只要左右移動鼠標，即可實時地改變數據，從而改變圖形形狀。

在這個程序中，定義的屏幕寬度是700。所以mouseX的數值變化范圍就是0到700。鼠標移到最左為零，最右為700。

代碼”a = mouseX”中的a，被稱為變量。這個概念也可以先不去深究，這里的a是用來控制分叉的角度。如果我們覺得這個數值變化范圍太大了，可以給它除以一個數值。改成“a＝mouseX/10”試試看。此時a的數值范圍也就變成了0到70。與原來相比，在屏幕上移動同樣的距離，圖形的變化速度就變慢了10倍。

（＊與mouseX對應的概念，還有mouseY，它代表了鼠標的y坐標。可以替換看看有何不同～～）

最后再給一個例子供大家摸索。

float angle = 0;
 int num = 20;        //控制線條數量

void setup(){
 size(400, 400);   //控制屏幕寬，高
 colorMode(HSB);
 }

void draw(){
 int c=0;
 background(25);
 strokeWeight(3);   //控制線條粗細
 translate(200, 200);    //控制旋轉中心的坐標
 for(int i=0;i<num;i++){
 c += i*1;
 stroke(c, 255, 200);
 rotate(PI/30);
 line(mouseX-width/2, mouseY-height/2, 0, -60);
 angle += 0.0001;       //控制旋轉速度
 rotate(angle);
 }
 }

可以改變”// “號前的數字參數試試看。

運行效果：

寫給設計師的趣味編程指南入門教程