はやくもJavaOne 2007が終わってから1週間が経ちました。今回はいろいろと手元で試して楽しい技術が発表されました。そのうちでも特に目を引くのがJavaFXです。こんな楽しそうなものを試さない手は無いということで、早速試してみました。NetBeans用のプラグインを使っても良いと思いますが、今のところOpenJFXのダウンロードをするとついてくるJavaFXPadを使うのが、すぐに画面で確認しながらプログラムできるので便利かと思います (ソースのエディタも入力補完も出来てよくできています)。
早速ですが、Sunの広告とかプレゼンでよく見かける「Sun Curve（サン・カーブ）」(Sに見立てたカーブ)を書いてみる事にしました。Sun Curveは、画像ファイルとしては手に入りますが、どういう風な関数で書けば良いかはどこにも載っていません。仕方なく、目測でいろいろ試したところ、高さに対して 1/10の距離でベジェ曲線を使って左右に膨らませるとそれっぽいということがわかりました。
では早速、JavaFX Scriptで書いて行きましょう。こんな感じになりました。

次がソースコードです。ややソースは長めになっていますが、影の部分を作りたかったので同じような記述が二つ並んでいますがご容赦ください。
最初の方にある width = [30..300] dur 1000は見慣れない記述ですが、30から300の間で1000ミリ秒で動かす。という記述方法です。これによってアニメーションが簡単に書けるという寸法です(なお、自動的にイーズイン／イーズアウトがかかるようです)。

import javafx.ui.*;
import javafx.ui.canvas.*;

Canvas {
    var width = [30..300] dur 1000
    var height = 300
    var shadowGap = bind height / 20
    var shadowOpacityValue = 0.2
    var opacityValue = 1
    var rotationValue = 0
    var color = Color {
        red: 83, green: 130, blue: 161
    }

    content:
    [
    Path {
        d:
        [MoveTo {x: bind width, y: 0},
        CurveTo {x1: bind width, y1: 0,
            x2: bind width - height / 10, y2: bind height / 4,
            x3: bind width, y3: bind height / 2},
        CurveTo {x1: bind width, y1: bind height / 2,
            x2: bind width + height / 10, y2: bind height * 3 / 4,
            x3: bind width, y3: bind height},
        LineTo {x: bind width + shadowGap, y: bind height},
        CurveTo {x1: bind width + shadowGap, y1: bind height,
            x2: bind width + height / 10 + shadowGap, y2: bind  height *
3 / 4,
            x3: bind width + shadowGap, y3: bind height / 2},
        CurveTo {x1: bind width + shadowGap, y1: bind height / 2,
            x2: bind width + shadowGap - height / 10, y2: bind  height / 4,
            x3: bind width + shadowGap, y3: 0},
        LineTo {x: bind width, y: 0}
        ]
        fill: bind color
        opacity: bind shadowOpacityValue
        transform: Rotate {
            angle: bind rotationValue
            cx: bind width / 2
            cy: bind height / 2
        }
    },

    Path {
        d:
        [MoveTo {x: 0, y: 0},
        LineTo {x: bind width, y: 0},
        CurveTo {x1: bind width, y1: 0,
            x2: bind width - height / 10, y2: bind height / 4,
            x3: bind width, y3: bind height / 2},
        CurveTo {x1: bind width, y1: bind height / 2,
            x2: bind width + height / 10, y2: bind height * 3 / 4,
            x3: bind width, y3: bind height},
        LineTo {x: 0, y: bind height},
        LineTo {x: 0, y: 0}]
        fill: bind color
        opacity: bind opacityValue
        transform: Rotate {
            angle: bind rotationValue
            cx: bind width / 2
            cy: bind height / 2
        }
    }
    ]
}

このぐらいまで絵が描けるようになってくると結構楽しくなってきますね。