2008 2 月 : うえちょこ＠ぼろぐ

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

Written by uechoco 2 月 29

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()関数がしっかりとした処理をしているのかもしれません。

PLAIN TEXT

Processing:

color c1, c2;
 
 
void setup() {
  size(200, 200);
  colorMode(HSB, 100);
  background(100);
  smooth();
  noStroke();
  noLoop();
 
  c1 = color(80, 100, 100); // 中心の色
  c2 = color(80, 90, 60); // 外周の色
}
 
void draw() {
  //drawGradationEllipse1();
  drawGradationEllipse2();
}
 
void drawGradationEllipse1() {
  float dH = hue(c1) - hue(c2);
  float dS = saturation(c1) - saturation(c2);
  float dB = brightness(c1) - brightness(c2);
  for (int i = width; i> 0; --i) {
    fill(
    hue(c2) + i * dH / width,
    saturation(c2) + i * dS / width,
    brightness(c2) + i * dB / width
      );
    ellipse(width / 2, height / 2, i, i);
  }
}
 
void drawGradationEllipse2() {
  for (int i = width; i> 0; --i) {
    fill(lerpColor(c1, c2, (float)i / width));
    ellipse(width / 2, height / 2, i, i);
  }
}

[雑記]2008年01月の人気エントリランキング

Written by uechoco 2 月 28

Add Comment (0)

　2008年1月の人気エントリのランキングです。

　先月はphpのエントリが多かったのですが、今月はがらりと変わってVirutalBoxとそれに関連したLinux記事が大半を占めました。VirtualBoxは2月中旬に米Sun Microsystemsに買収されましたが、今後は人気がでるのでしょうかね。少なくとも、仮想化ソフトウェアの中でも注目株であることは間違いなさそうです。

[Processing]点と点の距離を求める関数dist(), mag()

Written by uechoco 2 月 28

Add Comment (0)

プログラミングベースのCGとかゲームとかを作るときに良く使う数式が、点と点、円と円、点と円、マウス座標と画面の中心、自機と敵機などの二点間の距離を求める数式です。数学的な求め方で言えば、二点間のx座標とy座標の差分をそれぞれ二乗したものを足し合わせて平方根を取ると、三平方の定理によって二点間の距離が求まるんですが、processingではそんなまどろっこしいことを覚える必要はありません。デザインを作るための言語ですので、デザインを作るのに関係のないことを必死に覚えなくて済むように設計されています。

dist()関数。「距離」という意味の「distance（ディスタンス）」という英語の略ですね。この関数がまどろっこしい数式を内包しているので、二点間の引数を与えてやれば距離が求まります。たとえば、

dist(10, 10, 110, 110);

と書くと、座標1(10, 10)と座標2(110, 110)の間の距離が返ってきます。この場合は141.42136が返ってきます。別の例だと、

dist(10, 10, mouseX, mouseY);

と書くと、座標1(10, 10)と現在のマウス座標の間の距離が返ってきます。特殊な場合として、

dist(0, 0, mouseX, mouseY);

などの片方の座標が(0, 0)の場合、省略記法として

mag(mouseX, mouseY);

というようにmag()関数を使うことができます。

というわけで、サンプルを作ってみました。マウスの座標にあわせて、原点(0, 0)からと円(cx, cy)からの距離をリアルタイムに求めて表示しています。

PLAIN TEXT

Processing:

int cx, cy; // 円の中心
 
PFont font;
 
 
void setup() {
  size(200, 200);
  colorMode(RGB, 100);
  background(100);
 
  cx = 120;
  cy = 60;
 
  font = loadFont("Tahoma-12.vlw");
  textFont(font, 12);
  textAlign(LEFT, TOP);
  println(dist(0, 0, 100, 100));
}
 
void draw() {
  // 背景を塗りつぶし
  noStroke();
  fill(100);
  rect(0, 0, width, height);
 
  // 円を描画
  stroke(40);
  fill(80);
  ellipse(120, 60, 30, 30);
 
  // 原点(0, 0)からの距離を求めて表示
  stroke(60, 0, 0);
  line(0, 0, mouseX, mouseY);
 
  fill(60, 0, 0);
  float fromZero = mag(mouseX, mouseY);
  // float fromZero = dist(0, 0, mouseX, mouseY); // 同じ
  text("from (0, 0): "+fromZero, 0, 5);
 
  // 円の中心からの距離を求めて表示
  stroke(0, 60, 0);
  line(cx, cy, mouseX, mouseY);
 
  fill(0, 60, 0);
  float fromCircle = dist(cx, cy, mouseX, mouseY);
  text("from ("+cx+", "+cy+"): "+fromCircle, 0, 30);
}