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

Written by uechoco 2月 29
この記事を読む時間: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()関数がしっかりとした処理をしているのかもしれません。

[p5]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);
}
}[/p5]

processing_gradationEllipse.jpg

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

Written by uechoco 2月 28
この記事を読む時間:21くらい

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

  1. [ソフト]仮想ハードディスク(vdi/vmdk/vhd等)を変換する「NHC」
  2. [VirtualBox]Fedora 7(Guest)にGuest Additionsをインストールする
  3. [Linux]ApacheがPermission deniedを吐いてくる
  4. strip_tags()関数なら正規表現を書かなくてもHTMLタグを除去できる
  5. [VirtualBox]共有フォルダ機能 by Windows(Host)/Fedora 7(Guest)
  6. [HTML]FORMのactionのURIにパラメータを付加したままGET送信はできないのかな
  7. [ソフト]VMware設定ファイル(vmx)を簡単に作れる「VMX-Editorβ」
  8. [tool]Pleiades All-in-one Eclipse
  9. [Let’s note W7]購入検討中だけど冷却ファンが気になった人のための記事
  10. [ソフトウェア]VirtualBox 1.5.4がリリース、USB2.0やPulseAudioに対応

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

■関連リンク

[雑記]2007年12月の人気エントリランキング
[雑記]2007年の人気エントリランキング
2007年11月の人気エントリランキング
2007年10月の人気エントリランキング
2007年9月の検索キーワードランキング
2007年8月の検索キーワードランキング

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

Written by uechoco 2月 28
この記事を読む時間:42くらい

プログラミングベースの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)からの距離をリアルタイムに求めて表示しています。

[p5code]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);
}[/p5code]

processing_functionDistmag.jpg

[雑記]うえちょこ@ぼろぐの値段(2008/02/27時点)

Written by uechoco 2月 27
この記事を読む時間:44くらい

404 Blog Not Found:見つからないblogの価値、100万ドル以上!?
http://blog.livedoor.jp/dankogai/archives/51009535.html

?


My blog is worth $9,597.18.
How much is your blog worth?

 うちのブログの価値は2008/02/27時点では$9,597.18、Google先生に聞いたら103.328811 万円らしい。これってブログの記事貯めてけば値段も上がるのかな?仕組みは良くわからないけど、価値がないわけじゃないからほっとした。

[Flex3]Adobe AIRとFlex 3が正式リリース

Written by uechoco 2月 27
この記事を読む時間:46くらい

Adobe、「AIR」「Flex 3」正式リリース – ITmedia News
http://www.itmedia.co.jp/news/articles/0802/25/news070.html

 ついに正式リリースされました。Flex 3は現時点では英語版のみの提供ですが、順次言語を増やすそうです。

 そしてFlex 4の開発も始まっているようです。

Flex 4 – Flex Coder
http://d.hatena.ne.jp/sato-shi/20080225/p5

 ここのブログはFlexとかでAdobeと仲の良い会社の社長さんが書いているので、信憑性は高いはず。