Color 1 : Color by Numbers (processing教學)

在跨過上一篇的障礙之後,我們可以很歡樂地進入p85,Color 1 : Color by Numbers
真的是整個人心都咖樂佛了起來! :)))


基本上在processing的色彩定義方式有三種,
RGB
HSB
HEX


RGB我想大家都很熟悉了,基本上它是processing內預設的色彩模式,
它以三個數值(0-255,0-255,0-255)來決定顏色,只要透過色票如pantone你就能很精準的鎖定顏色


而另外兩個色彩模式則比較冷門一點.


HSB一樣也是由三個數值來決定顏色,
(hue,saturation,brightness),也就是
(色相,飽和度,明度),而他們的間距為
(0-360,0-100,0-100)


HEX則多是用於設計網站時給的色號,
我們常看到諸如#4F0001,#00966E,#F200A9等等即是hex色碼
至於hex我覺得實在是太冷門,所以不會多做介紹,稍微自己看一下p93即可


因為RGB大家很熟了,而HEX不太會用到,所以我主要會介紹HSB,
讓我們以下面簡單的一張圖來說明,基本上是稍微改了一下p91的案例,
但做作者沒有重新設定HSB的range,下面會說明

size(200,200);
background(255);
smooth();
colorMode(HSB,360,100,100);
//首先當我們要使用HSB時,我們要把預設的RGB模式切為HSB
//所以要透過colorMode來告訴processing模式已切為HSB
//同時因為RGB的三個數間距為0-255,但HSB的三個數間距為0-360,0-100,0-100
//所以原本預設的是colorMode(RGB,255,255,255)我們要改寫成colorMode(HSB,360,100,100)
//如果你只單純打colorMode(HSB)也會切換為HSB模式,但顏色的range你要自己換算成0-255
//為避免不必要的麻煩,最好跟我一樣寫成colorMode(HSB,360,100,100)


for(int i = 0; i <= 200; i += 1){
  stroke(i*1.8,100,100); //因為我知道我的range為0-360,所以當i = 200時需等於360,所以360 / 200 = 1.8
  line(i,0,i,200);
}


//saveFrame("p091-1-##.jpg");


最後就可以看到我在200x200的畫格裡每隔1畫一條線,
總共畫200條線,會包含所有顏色,但飽和度與明度固定為100




額外補充
"色相(Hue)，是以紅色為0度(360度)；黃色為60度；綠色為120度；青色為180度；藍色為240度；品紅色為300度。"






所以如果我要畫左上點為全黑,到右下點時為全藍時,我知道我第一點為(240,0,0),
而最後一點為(240,100,100),因此寫法會如下

size(200,200);
background(255);
smooth();
colorMode(HSB,360,100,100);


for(int i = 0; i <= 200; i += 1){
  for(int k = 0; k <= 200; k += 1){
    stroke(240,i*0.5,k*0.5);
    point(k,i);
  }
}


//saveFrame("p092-##.jpg");






因為我們不可能記所有RGB的色碼,更枉論HSB跟HEX了,所以以下網址可以幫助你知道顏色的資料
點此可查RGB,HSB,HEX的色碼


到這p85-94就差不多囉,快100頁了,啾咪!   ^.<
那要怎麼畫出下面彩色鯉魚的鱗片呢?

size(200,200);
background(255);
smooth();
stroke(255,255,0);
colorMode(HSB,360,100,100);
for(int x = 0; x < 200; x += 10){
  for(int y = 0; y < 200; y += 10){
   
    float k = random(10,20);
   
    if((x+y) % 20 == 0){
    fill(240+(x+y),100,100);
    ellipse(x+5,y+5,k,k);
    }
   
    if((x+y) % 30 == 0){
    fill(120+(x+y),100,100);
    ellipse(x+5,y+5,k,k);
    }
   
    else{
    fill((x+y),100,100);
    ellipse(x+5,y+5,k,k);
    }
   
  }
}
//saveFrame("p091-2-##.jpg");






Try it. :)