Processing 基礎 ( 六 ) 彩色

         光與顏色會影響人的情緒，人類對光很敏感但是卻是色盲，比如當紅光與藍同時出現時人的眼睛就會判斷為紫色，這也就讓玩 "色"  的人有非常大的空間，只要使用三個顏色就可欺騙人類眼睛製造出全彩的效果。
     Processing 採用的是加色法，用最簡單的灰階來表示當數值是"0"的時後是黑色，隨著數值不斷的增加到最大255時就是全白。

          電腦處理彩色是由紅綠藍三個顏色依不同比例混合成其他色彩，每個顏色用八位元轉換處理，所以三個顏色值都是0~255。

 採用三顏色就可欺騙眼睛做出全彩的視覺，紅綠藍代號分別是RGB。

圖片來源:https://processing.org/tutorials/color/

 紅色(R)的數值條狀圖。

綠色(G)的數值條狀圖。

藍色(B)的數值條狀圖。

       

       Processing 還有透明度的功能數值一樣是0~255 ，0是完全透明255是不透明，下圖彩色數值都是255只改變透明度。

       

      0~255這是電腦2進位值轉成10進位的值，對於不是學程式設計的人不是很容易理解，Processing提供了一個函數colorMode()可自定數值的表示方式，例如。

     colorMode(RGB,100);

    執行這函數後RGB 的數值會改成 0~100，也可以改成自己慣用的數值比例，Processing最後都會轉換回0~255。

     RGB的顏色處理方式雖然很方便，但是因為人類感覺顏色的方式並不是線性的，藝術家們又提出了一個彩色表示方法 HSB (hue, saturation, and brightness)色相飽和度亮度，把顏色描述在圓柱坐標系內的點，這個圓柱的中心軸取值為自底部的黑色到頂部的白色而在它們中間的是灰色，繞這個軸的角度對應於「色相」，到這個軸的距離對應於「飽和度」，而沿著這個軸的高度對應「亮度」。

圖片來源:https://processing.org/tutorials/color/

    HSB 在Processing 的預設一樣是 0~255,也可以自行改數值的表示方法0~100或你想要的數值比例。

    對一般平凡夫子來說，顏色是怎麼混合出來的很難懂，Processing在工具內提供了色彩選擇器，使用方法是先選色相再選飽和度亮度，右邊就會出現對應數值，只不過很奇怪HSB表示法是360,100,100,(degrees,%,%)，按底下複製得到的值是網頁設計常用的16進位表示法#D176B3。

參考資料

   https://processing.org/tutorials/color/

 https://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4

Processing 基礎 ( 五 ) 座標和素材

      Processing 雖然簡單視覺化，但是基本觀念還是要有。用統一的形容詞畫出來才會一樣，比方說我畫一條線，要求全班同學要跟我畫的一模一樣，最簡單方法是用方格紙告訴同學從1,2劃到5,6。

    這在面對面時很好溝通，要求不在場的同學也劃出一樣的就要規定統一的形容詞。規定剛剛劃線動作形容詞 " 線(1,2,5,6) "，再次要同學劃另一條線時只要告訴同學 " 線(1,7,8,0) "同學應該很快就劃出來了。

坐標系

     坐標系是規定方格紙上哪邊要當原點(0,0)，當一個點在方格上時如何標註，最常用的繪圖的坐標原點是在左下方，往右x 數字變大往上y數字變大，標註時前面數字為x後面數字為y。例如 : (4,6)

     在數學上因為有負數，坐標原點(0,0)會放在中間，往右x為正數增加往左x為負數減少，往上y正數增加往下y負數減少。例如 : (-3,2),(4,-1)

      發明電視時影像是由左上角開始，電視數位化後就把原點(0,0)放在左上角，Processing 也是以這為標準，在這坐標系往右x增加往下y增加。 例如: (6,3)

繪圖

   點

     一個圖面最簡單的是一個點，要用Processing 劃一個點可以用 point(x,y) ，Processing 就會在x,y的交叉點劃一個點。 例如 point(4,3)

 線

     在一個平面上的兩個點用最短距離聯起來就是直線，Processing 只要指定兩點就可劃出一條線 line(x1,y1,x2,y2)。例如 line (1,1,5,6)

三角形

    三角形式構成幾何圖形最簡單的形狀，任何平面都可以拆成三角形組合，要劃三角型只要把平面上的三點用直線連接起來，Processing 只要指定三點就會劃出三角形 triangle(x1, y1, x2, y2, x3, y3) 。 例如 : triangle(2,1,6,2,3,5)

方型

    方型是4個角每個角都是90度的平面圖型，如果角度不是90度的4角平面叫4角形，Processing 劃方形就不是指定4個點，預設是指定一點再指定寬高rect(x,y,width,height) 。例如 : rect(2,3,4,3)

       方型除了預設的劃法外還可指定半徑是劃法，rectMode(CENTER);rect(x,y,width,height)。例如 : rectMode(CENTER);rect(4,6,2,4)

     方形還有指定兩點劃法， rectMode(CORNERS);rect(x,y,x2,y2)。例如 : rectMode(CORNERS);rect(1,1,5,3)

橢圓

     橢圓是在一個平面劃一個圓形封閉的空間，x軸,y軸等長是"圓"，x軸,y軸不等長是"橢圓"，Processing預設是指定中心點再指定兩軸長度， ellipse(x, y, width,height) 。例如 :ellipse(5, 5, 4,6)

     橢圓也可用角落劃法 ellipseMode(CORNER);ellipse(x,y,width,height) 例如 :  rectMode(CORNER);ellipse(2,2,3,3,width,height) 

      橢圓也可用兩點劃法，  ellipseMode(CORNERS);ellipse(x1,y1,x2,y2)。 例如 : ellipseMode(CORNERS);ellipse(2,1,5,6) 

參考資料 : https://processing.org/tutorials/drawing/

Processing 基礎 (四) 指針式時鐘

     這範例 Processing 會抓取電腦即時時鐘(RTC)顯示在畫面上。

   範例是取自Processing網站更改。

//**************範例******************

int cx, cy;                                      //設定變數
float secondsRadius;
float minutesRadius;
float hoursRadius;
float clockDiameter;

void setup() {
  size(640, 480);    //設定畫面大小
  stroke(255);        //背景黑色

  int radius = min(width, height) / 2;    //半徑取水平或垂直最小  x 0.5
  secondsRadius = radius *0.70;           // 秒針長度半徑 x 0.7
  minutesRadius = radius * 0.60;          //分針長度半徑  x 0.6
  hoursRadius = radius * 0.50;             // 十針長度半徑 x 0.5
  clockDiameter = radius * 1.6;            // 外框半徑 x 1.6

  cx = width / 2;              // x 座標 = 銀幕寬度的 1/2
  cy = height / 2;             // y 座標 = 銀幕高度的 1/2
}

void draw() {             // 開始畫圖
  background(0);        //畫面背景 "黑色"
   //畫外框
  fill(0);              //不填滿
  stroke(128);    //外框顏色 = 灰階128
  ellipse(cx, cy, clockDiameter, clockDiameter);   //畫圓

  // 畫秒針,分針,時針的位置
  // 圓的起點是在右手水平位置,要調整到12點鐘位置要扣掉90度
  float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;        //取的秒針位置
  float m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI;     //取得分針位置
  float h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;    //取得時針位置
  // 畫指針
  stroke(#24FF4A);     //顏色 #24FF4A
  strokeWeight(1);       //線條寬度=1
  line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);   //畫秒針
  stroke(#7DFA12);    //顏色#7DFA12
  strokeWeight(2);      //線條寬度 = 2
  line(cx, cy, cx + cos(m) * minutesRadius, cy + sin(m) * minutesRadius);  //劃分針
  stroke(#DEFA12);    //顏色 #DEFA12
  strokeWeight(5);       //線條寬度 = 5
  line(cx, cy, cx + cos(h) * hoursRadius, cy + sin(h) * hoursRadius);  //畫時針  

  // 畫分秒點,在時鐘的一圈畫上60個點
  strokeWeight(5);            // 線條寬度 = 5
  stroke(#E212FA);          //顏色 #E212FA
  beginShape(POINTS);   //畫點
  for (int a = 0; a < 360; a+=6) {      //總點數 = 360/6每6度畫一點
    float angle = radians(a);            
    float x = cx + cos(angle) * secondsRadius;   //計算出頂點 x
    float y = cy + sin(angle) * secondsRadius;    //計算出頂點 y
    vertex(x, y);       //頂點位置
  }
  endShape();      //結束繪圖
}

按 "播放"後

函數

min()

      min()是取最小值，min(a,b) b>a 回傳b，比較組數可以2個或3個也可以是一個陣列，比較值可以是整數或浮點數。

語法

min(a,b)
min(a,b,c)
min(list)       //比較數字陣列

回傳值 :  (比較式中的最小值)

map()

  map()是從一個範圍映射到另一個範圍。start1, stop1 映射到 start2, stop2。

語法

map(value, start1, stop1, start2, stop2)

sin()

       sin()是計算的角度的正弦值。sin()輸入值為弧度(值從0到2π）。回傳值為浮點數(float)範圍-1到1。

語法

sin(angle)

回傳值 : 浮點數(-1~1)

cos()

      cos()是計算的角度的餘弦值。cos()輸入值為弧度(值從0到2π）。回傳值為浮點數(float)範圍-1到1。

語法

cos(angle)

回傳值 : 浮點數(-1~1)

參考資料 : https://processing.org/

Processing 基礎 (三) 陣列&燈光

Processing 基礎 (三)  陣列&燈光

          Processing 是視覺繪圖軟體,陣列&燈光是視覺化少不了的，陣列能產生一的連續的表面，燈光可強調立體感。是用 Processing3.11 範例修改。

範例 一 陣列

float[][] distances;  //設定變數
float maxDistance;
int spacer;

void setup() {
  size(640, 640);
  maxDistance = dist(width/2, height/2, width, height);
  distances = new float[width][height];
  for (int y = 0; y < height; y++) {
    for (int x = 0; x < width; x++) {
      float distance = dist(width/2, height/2, x, y);
      distances[x][y] = distance/maxDistance * 255;
    }
  }
  spacer = 10;      
  strokeWeight(7);      //筆畫大小=7
  noLoop();            //只執行一次
}

void draw() {
  background(0);
  for (int y = 0; y < height; y += spacer) {
    for (int x = 0; x < width; x += spacer) {
      stroke(distances[x][y],x,y);       //設定畫筆顏色
      point(x + spacer/2, y + spacer/2); //畫點
    }
  }
}

範例二 燈光

void setup() {          //設定環境
  size(640, 480, P3D);  //畫面大小 604 X 480 啟用3D
  noStroke();          //物體無邊框
  fill(#EA217F);       //填入顏色 #EA217F
}

void draw() {    //開始畫圖
  noStroke();    //無邊框
  background(0);   //背景黑色
  float dirY = (mouseY / float(height) - 0.5) * 2;    //設定變數dirY
  float dirX = (mouseX / float(width) - 0.5) * 2;     //設定變數dirX
  directionalLight(204, 204, 204, -dirX, -dirY, -1);  //設定燈光來源
  translate(width/2 - 100, height/2, 0);      //把座標0,0 設在螢幕寬/2 -100 螢幕高/2
  sphere(80);                 //畫一個半徑80的空心球
  translate(200, 0, 0);       //把坐標0,0右移200
  sphere(80);               //把坐標0,0右移200
}

sphere()

sphere() 空心的圓球，這圓球是很多三角形組合成的。

語法 :

sphere(半徑)

directionalLight()

      directionalLight()平行光源,directionalLight(v1, v2, v3, nx, ny, nz)須設定平行光源的顏色與來源，v1, v2,v3 可以是RGB或HSB,nx,ny燈源方向，例如 y = -1 表示燈源從底部往上照。

語法 :

directionalLight(v1, v2, v3, nx, ny, nz)

point()

      point()繪製一個點，第一個參數是該點的水平值，第二值是該點的垂直值，可選的第三值是深度值。

語法 :

point(x, y)
point(x, y, z)


參考資料 : https://processing.org/
         

Processing 基礎 二 正多邊圖形&星星

    你的世界是甚麼形狀?你喜愛的又是甚麼形狀?三角形?五角?八角?這個範例做了一個polygon()的函數，用polygon()函數能做出任何的正多邊形。

     Processing 是做動畫用的，很多設定概念都來自於動畫，這範例看起來是三個多邊形在轉動，事實上是電腦不斷的算出每個多邊形的頂點然後畫線填滿。

   第二段是畫星星，star()這個函數能畫出任何光芒數的星星。

   用 Processing 網站所提供的範例更改。


畫多邊形

void setup() {
  size(640, 480);  //畫面大小640 X 480
  frameRate(60);   //畫面更新速率 60/秒

}

void draw() {
  background(102);     //背景設為 灰階 102
  pushMatrix();    
  fill(255,0,0);     //填滿紅色
  translate(width*0.2, height*0.5); //坐標0,0切換到畫面寬度*0.2高度*0.5的位置
  rotate(frameCount / 100.0);   //旋轉
  polygon(0,0,100, 3);        // 3角形

  popMatrix();
  pushMatrix();
  fill(0,255,0);   //填滿紅色
  translate(width*0.5, height*0.5);
  rotate(frameCount / 50.0);
  polygon(0, 0, 80, 20);  // 20角形
  popMatrix();

  pushMatrix();
  fill(0,0,255);  //填滿藍色
  translate(width*0.8, height*0.5);
  rotate(frameCount / -100.0);
  polygon(0, 0, 70, 7);   //7角形
  popMatrix();

}
void polygon(float x, float y, float radius, int npoints) {      //多邊形函數
  float angle = TWO_PI / npoints;
  beginShape();
  for (float a = 0; a < TWO_PI; a += angle) {
    float sx = x + cos(a) * radius;
    float sy = y + sin(a) * radius;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

按"撥放"後有三個物體在旋轉

畫星星

void setup() {

  size(640,480);

}

void draw() {

  background(102);

  

  pushMatrix();

  fill(#FCB71F);  

  translate(width*0.2, height*0.5);

  rotate(frameCount / 200.0);

  star(0, 0, 5, 70, 3); 

  popMatrix();

  

  pushMatrix();

  translate(width*0.5, height*0.5);

  fill(#EA9763);   

  rotate(frameCount / 400.0);

  star(0, 0, 60, 100, 12); 

  fill(#F06711);  

  ellipse(0, 0, 100,100); 

  popMatrix();

  

  pushMatrix();

  fill(#B1B1DE);  

  translate(width*0.8, height*0.5);

  rotate(frameCount / -100.0);

  star(0, 0,30, 70, 5); 

  popMatrix();

}

void star(float x, float y, float radius1, float radius2, int npoints) {  //星狀函數

  float angle = TWO_PI / npoints;

  float halfAngle = angle/2.0;

  beginShape();

  for (float a = 0; a < TWO_PI; a += angle) {

    float sx = x + cos(a) * radius2;

    float sy = y + sin(a) * radius2;

    vertex(sx, sy);

    sx = x + cos(a+halfAngle) * radius1;

    sy = y + sin(a+halfAngle) * radius1;

    vertex(sx, sy);

  }

  endShape(CLOSE);

}

按 "播放"後

Processing 函數

rotate()

     rotate()物體繞著原點旋轉，物體旋轉會是整物體的矩陣都一起轉動，配合pushMatrix()translate(x, y)popMatrix()一起使用。

語法 :

rotate(角度)

pushMatrix()
popMatrix()

pushMatrix();popMatrix()是一組的, pushMatrix()後 translate()開始變換坐標0,0的相對位置popMatrix()後會把坐標恢復為系統預設坐標。

語法 :

pushMatrix()

.

.

popMatrix()

translate()

       translate();是重新定義坐標原點,translate(50,50)會把坐標0,0重新定位在原本50,50的地方，在下一次translate(50,50)坐標0,0會在畫面100,100的位置，一般都跟pushMatrix();popMatrix()配合使用。

語法 :

translate(x, y)
translate(x, y, z)

frameRate()

    frameRate()指定畫面更新速率，frameRate(30)就是每秒30幅，這跟電腦的運算能力也有關係，電腦能力不足時會無法達到指定的更新速率。

語法 :

 frameRate(速率)

beginShape()

      beginShape()會沿著指定的端點畫直線或是點到endShape()結束，未指定參數時beginShape()會沿著指定的端點一直畫直線，beginShape(POINTS) 只會畫點，beginShape(LINES)會在兩點間劃出一條線，第2點不會與第3點連接，beginShape(TRIANGLES)每三點畫出一個獨立三角形....。

語法 :

beginShape()
beginShape(類型)

類型
POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP

endShape()

        endShape()是結束畫形狀的函數，endShape()最後一點不會連接到第一點。endShape(CLOSE)會把最後一個頂點連接到第一個頂點。

語法 :

endShape()
endShape(CLOSE)

參考資料 :       https://processing.org/
                     

Processing 基礎 一 畫幾何圖形

Processing 基礎 一 畫幾何圖形

      Processing 重點在於用程式畫圖，再用一連串的圖做成動畫，在畫圖前有幾個觀念要先了解。

坐標系統

         Processing 的坐標左上角是x0,y0 ，往右邊x會增加往下y增加，Processing 的平面座標負數物體會超出畫面， 3D 坐標 z 需是負數。

色彩空間

    Processing 預設採用 RGB 色彩空間 ，RGB採用加法混色法，因為它是描述各種「光」通過何種比例來產生顏色。光線從暗黑開始不斷疊加 產生顏色。RGB描述的是紅綠藍三色光的數值。Processing 灰階 一樣是用加法 0為黑色255 為白色。

圖片來源 : 維基百科

 實際操作

   開啟Processing 輸入以下程式碼。


size(640, 480);          //視窗大小
background(180,0,168);   //背景顏色 紅 180 綠 0 藍 168
stroke(0);              // 物體框 灰階 0

fill(125,128);          // 填滿顏色 灰階 125 透明度 128
triangle(18,18, 18, 360, 81, 360); //畫三角形

fill(102,128,0,128);    // 填滿顏色 紅 102 綠 128 藍 0 透明度 128
rect(81, 81, 63, 63);   //畫方形

fill(204);    //填滿顏色 灰階 204
quad(189, 18, 216, 18, 216, 360, 144, 360); //畫四角形

fill(255);   // 填滿顏色 灰階 255
ellipse(300, 200, 72, 72);  // 畫圓形

fill(255);  // 填滿顏色 灰階 255
arc(480, 280, 280, 280, PI, TWO_PI); // 畫弧形

按  "撥放 " Processing IDE 會依照輸入的程式畫出圖形。

 可以改變程式內的數字試看看有甚麼不同的結果。

Processing 函數

size()

    size()定義畫面尺寸，必須在程式第一行或是setup()後的第一行，例如size(640,480)是定義畫面的寬度是640點高度是480點，size()只能定義一次程式運作中無法改變,未定義size()預設為100x100，size()也可指定渲染器種類。

語法 :

size(寬度,高度)

size(寬度,高度,渲染器)

background()

       background() 是設定背景顏色，Processing預設背景為淺灰色，如填入一個值(0~255中間)會是灰階，填入兩個數值(128,20)第二個數字是代表不透明度，Processing預設顏色是RGB模式可以填入16進制的顏色表示法如(#FF00FF)，也可以填入三個數字(255,0,255)會是紫色。第4個數字是代表不透明度(255,0,0,128)紅色不透明度。彩色模式如果改為HSB模式這三個值代表(色相,亮度,飽和)。背景也可使用圖片,圖片大小要與畫面大小一致。

語法 :

background( 紅綠藍 ) 

background( 紅綠藍, 不透明度 ) 

background( 灰階 ) 

background( 灰階,不透明度 )        

background( 色相 , 亮度 , 飽和度 )  //HSB模式

background( 色相, 亮度,飽和度, 不透明度 )    //HSB模式

background( 圖片 )

stroke()

         stroke() 是設定邊框顏色，如填入一個值(0~255中間)會是灰階，填入兩個數值(128,20)第二個數字是代表不透明度，Processing預設顏色是RGB模式可以填入16進制的顏色表示法如(#FF00FF)，也可以填入三個數字(255,0,255)會是紫色。第4個數字是代表不透明度(255,0,0,128)紅色不透明度。彩色模式如果改為HSB模式這三個值代表(色相,亮度,飽和)。

也可直接使用無邊框模式 noStroke（）

語法:

stroke( 紅綠藍 ) 

stroke( 紅綠藍, 不透明度 ) 

stroke( 灰階 ) 

stroke( 灰階,不透明度 )        

stroke( 色相 , 亮度 , 飽和度 )  //HSB模式

stroke( 色相, 亮度,飽和度, 不透明度 )    //HSB模式

fill()

      fill() 是設定填滿顏色，如填入一個值(0~255中間)會是灰階，填入兩個數值(128,20)第二個數字是代表不透明度，Processing預設顏色是RGB模式可以填入16進制的顏色表示法如(#FF00FF)，也可以填入三個數字(255,0,255)會是紫色。第4個數字是代表不透明度(255,0,0,128)紅色不透明度。彩色模式如果改為HSB模式這三個值代表(色相,亮度,飽和)。

也可直接使用無邊框模式 noFill（）

語法 :

fill( 紅綠藍 ) 

fill( 紅綠藍, 不透明度 ) 

fill( 灰階 ) 

fill( 灰階,不透明度 )        

fill( 色相 , 亮度 , 飽和度 )  //HSB模式

fill( 色相, 亮度,飽和度, 不透明度 )    //HSB模式

triangle()

     triangle() 是畫一個三角形，指定三點就會畫出一個封閉型的三角形，須指定每一點的x,y坐標。

語法 : 

triangle(X1，Y1，X2，Y2，X3，Y3）

rect()

     rect() 是畫一個4方型有八的參數可下。rect(250,250,50,40)在坐標x250,y250地方畫一個寬度50高度40的方形。rect(250,250,50,40,10)在坐標x250,y250地方畫一個寬度50高度40，圓角半徑10的方形。rect(250,250,50,40,10,5,7,4)在坐標x250,y250地方畫一個寬度50高度40，左上圓角半徑10，右上圓角半徑5，右下圓角半徑7，左下圓角半徑4的方形。

語法 :

rect(x, y, 寬度 , 高度)
rect(x, y, 寬度 , 高度 , R角)
rect(x, y, 寬度 , 高度 , 左上R角,右上R角,右下R角,左下R角)

ellipse()

       ellipse() 畫一個橢圓，ellipse(100,100,30,30) 在 x100,y100的地方畫一個高度30寬度30的圓。寬度跟高度一樣就是圓，寬度跟高度不一樣就叫橢圓。

語法 :

 ellipse(x, y, 寬度 , 高度)

arc()

    arc()是畫一個弧形，arc(480, 280, 280, 280, PI, TWO_PI)在x480,y280畫一個高度280寬度280起始點為PI終止點為TWO_PI的弧形。模式可決定弧形是否封閉，預設為開放。

語法 : 

arc(x, y, 寬度,高度,起始點,終止點)

arc(x, y, 寬度,高度,起始點,終止點,模式)

參考資料 :

https://processing.org/

https://zh.wikipedia.org/

Processing 入門

Processing 入門

         Processing 是由 MIT 媒體實驗室的 Casey Reas 和 Benjamin Fry 發明的一種開源可視化程式語言。Processing 是為數位媒體與娛樂互動設計而創建，其目的是通過視覺化的方式輔助程式教學，並在此基礎之上表達數位創意。

Processing 安裝

    Processing 是免費的軟體可在這裡下載。

https://processing.org/download/

 會詢問是否要捐款贊助，選好後會跳至下載畫面。

 

      選擇符合自己電腦的版本下載。下載完成後解壓縮，Processing是免安裝軟體不用安裝手續就可執行，我的習慣是把整個目錄直接放在桌面上。

點兩下 processing.exe 就會開啟 Processing。

    看起來很像 Arduino ? 沒錯 Arduino 是用 Processing 改寫的，目前版本3.1.1只有簡體中文沒繁體中文。Processing 是以速寫本方式的直譯程式，有兩個重要的段落void setup() 與 void draw()。
 

void setup()  

{     // 在這括號內的會執行一次

.....

}

void draw() 

{     //在這括號內的會重複執行

.....

}

    

聽起來好像很簡單就照著範例先執行一次。

void setup() {    

  size(480, 320);    //設定視窗大小

}

void draw() {                 //開始畫畫

  if (mousePressed)     //如果滑鼠按鈕被按下

 {  

    fill(0,255,0);            //將顏色設定為綠色

  } 

else                           //滑鼠按鈕沒被按下

{

    fill(255,0,0);            //將顏色設定為紅色

  }

  ellipse(mouseX, mouseY, 40, 40);  //劃橢圓座標使用滑鼠位置,直徑 40X40

} 

 把上面這段複製到 Processing IDE，會所有的中文全部變成框框也辦法打中文字。

 須到  Processing IDE 文件 > 偏好設定 。將 編輯器和控制台字體改為 "細明體" 。勾選 "啟用複雜字體輸入" 。編輯器字體大小改為"18"。改好後按 "確認"。

 按確認後回到 Processing IDE 中文註解就顯示正常。

 按"撥放"按鈕 。

 Processing 會跳出另一個視窗，滑鼠在視窗上面移動會畫出滑鼠軌跡紅點，按著滑鼠按鍵移動會顯示綠色圓點。

參考資料 : 

 https://processing.org/

 https://zh.m.wikibooks.org/wiki/Processing%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97