2010年4月3日 星期六

EYES_Processing_Tutorial (PROCESSING入門教學)

EYES_Processing_Tutorial
(PROCESSING入門教學)
到此網站 下載免費軟體
完成後解壓縮
點擊 資料夾裡面的
"大P" 圖案執行檔即可執行
(不需install)



















中間空白部分可做程式撰寫
上方向右箭號即是當你程式碼撰寫完後 執行的地方
下方黑處 則是執行時告訴你是否有誤的地方
並且會在程式碼中將有錯誤部分呈現橘色

本程式相當簡單
只有幾個簡單的程式指令
以下一一說明

首先要知道PROCESSING程式語法架構








基本結構如上, 記得要用小括號將參數包起來 且結尾一定要有分號
(分號是大家容易忘記的部分)

size(200,200);
將此程式碼輸入至程式撰寫的空白處
按上方執行之icon
則會跳出













與一般繪圖軟體不太一樣
    X方向越往右越大
但Y方向越往下越大

再來就會使用到的程式先行解釋

首先會先做基本設定:

size(400,400);// 視窗尺寸大小
background(255,255,255);//背景顏色(R,G,B)設定為RGB只有一個數字則為灰階0(黑)~255(白)
smooth();//所畫圖圓滑不會產生鋸齒狀

再來是畫圖的部分
筆寬跟填色常用之工具:

noFill();//之後所畫的圖不填滿
fill(255);//之後顏色填滿(R,G,B),顏色部分與背景顏色設定同
stroke(0);//外框顏色(R,G,B)
strokeWeight(10);//外框寬度(數字)

一旦設定將會影響到後面所有的圖
所以如果你要畫不同的圖 
需要不同的顏色筆寬
則需在畫圖的程式碼前
將這些設定重打一遍

畫圖部分只使用
ellipse(200,200,250,250);//畫圓(圓心X,圓心Y, 寬, 長)
rect(300,360,20,20);//畫方(方的左上角X,方的左上角Y, 寬, 長)
 
最後
越後面寫的程式碼
越會是在上面的LAYER而蓋掉之前畫的
所以有時候沒看到圖
可能是因為程式順序問題
 
關於程式碼部分
可至官網找指令
都有範例跟圖說
http://processing.org/reference/
 
 
以下是此眼球的程式碼:
 
size(400,400);// 視窗尺寸大小
background(255,255,255);//背景顏色(R,G,B)
smooth();//畫圖圓滑


noFill();//之後所畫的圖不填滿
stroke(0);//外框顏色(R,G,B)
strokeWeight(10);//外框寬度(n)
ellipse(200,200,250,250);//畫圓(圓心X,圓心Y, 寬, 長)


fill(255);//之後顏色填滿(R,G,B)
stroke(255);
ellipse(200,200,230,230);


fill(0);
stroke(0);
ellipse(200,200,120,120);


fill(255);
stroke(255);
ellipse(228,228,20,20);
ellipse(248,208,10,10);


strokeWeight(1);
fill(255,0,0);
rect(300,360,20,20);//畫方(方的左上角X,方的左上角Y, 寬, 長)


fill(0,255,0);
rect(330,360,20,20);


fill(0,0,255);
rect(360,360,20,20);

2 則留言:

  1. 不知道能不能請板主增加一篇 如何把excel的資料讀入procssing做成info graphic的教學示範
    感激不盡

    回覆刪除
  2. 你好.
    我也寫 processing 程式, 但在將程式上傳到Android Device時發生下列問題:

    Error from inside the Android tools. check the console.


    請問你有辦法解決這個問題嗎?

    回覆刪除