[Processing]グラデーションの円や四角形を描くには

カテゴリ: processing / author: uechoco / 2008年02月29日 00:00:00
この記事を読む時間:419くらい

CGとかだとやっぱりグラデーションとか描きたいですが、残念ながら現時点ではProcessingにグラデーション命令はないようです。Processingでグラデーションを描くには色を少しずつずらしながら描画するというのが現時点では有力です。

グラデーションのサンプルとしては

LinearGradient \ Learning \ Processing 1.0 (BETA)

http://processing.org/learning/basics/lineargradient.html

RadialGradient \ Learning \ Processing 1.0 (BETA)

http://processing.org/learning/basics/radialgradient.html

WaveGradient \ Learning \ Processing 1.0 (BETA)

http://processing.org/learning/basics/wavegradient.html

が有名です。processingのIDEにもサンプルとして同梱されています(File > Examples > Basics > Color)。ただし、どのサンプルもピクセル単位で色を計算しているので、サイズを大きくするとドット落ちが発生したりする可能性があります。

GradialGradient(円のグラデーション)に関して言えば、ドット単位で描画しなくても、色を変えながら円を重ねて描いていくことで同じことが短いソースコードで実現できます。ソースコード内にはdrawGradationEllipse1()とdrawGradationEllipse2()の2種類のグラデーションの描画方法がありますが、drawGradationEllipse2のほうが綺麗にでる気がします。中間色を求めるlerpColor()関数がしっかりとした処理をしているのかもしれません。

Processing:
  1. color c1, c2;
  2.  
  3.  
  4.   size(200, 200);
  5.   colorMode(HSB, 100);
  6.   background(100);
  7.   smooth();
  8.   noStroke();
  9.   noLoop();
  10.  
  11.   c1 = color(80, 100, 100); // 中心の色
  12.   c2 = color(80, 90, 60); // 外周の色
  13. }
  14.  
  15.   //drawGradationEllipse1();
  16.   drawGradationEllipse2();
  17. }
  18.  
  19. void drawGradationEllipse1() {
  20.   float dH = hue(c1) - hue(c2);
  21.   float dS = saturation(c1) - saturation(c2);
  22.   float dB = brightness(c1) - brightness(c2);
  23.   for (int i = width; i> 0; --i) {
  24.     fill(
  25.     hue(c2) + i * dH / width,
  26.     saturation(c2) + i * dS / width,
  27.     brightness(c2) + i * dB / width
  28.       );
  29.     ellipse(width / 2, height / 2, i, i);
  30.   }
  31. }
  32.  
  33. void drawGradationEllipse2() {
  34.   for (int i = width; i> 0; --i) {
  35.     fill(lerpColor(c1, c2, (float)i / width));
  36.     ellipse(width / 2, height / 2, i, i);
  37.   }
  38. }

processing_gradationEllipse.jpg


コメントはまだありません »

コメントはまだありません。

この投稿へのコメントの RSS フィード。 TrackBack URI

コメントする

Copyright © 2012 うえちょこ@ぼろぐ. WP Theme created by Web Top.