金曜日 7 27, 2007

JavaFXのチャットルーム

ちょっと探してみたらなかったので、lingr.comにJavaFXのチャットルームを作ってみました。
<script type="text/javascript" src="http://www.lingr.com/room/4XLFPelhQwP/badge/render" charset="utf-8"></script>
まあ、ここに人をたくさん集めよう!というよりは、個人的なつぶやきルームになってもそれはそれでいいかなと思ってます。

Mash up Caravan in 札幌の資料

遅くなってしまいましたが、今週水曜日に行われましたMash up Caravan in 札幌で使用しました資料を公開しておきます。 実は今回のプレゼンテーションもJavaFX Scriptを使って作りましたので、Java Web Start形式での公開となります。毎度のことながらオレオレ証明書で署名してありますので信頼できない方は実行しないでください。
実行するのが面倒な方向けに、以下は実行結果のスクリーンショットです。
Mash up Caravan in 札幌, page1
Mash up Caravan in 札幌, page2
Mash up Caravan in 札幌, page3
Mash up Caravan in 札幌, page4
Mash up Caravan in 札幌, page5
Mash up Caravan in 札幌, page6
Mash up Caravan in 札幌, page7
Mash up Caravan in 札幌, page8
Mash up Caravan in 札幌, page9
Mash up Caravan in 札幌, page10
Mash up Caravan in 札幌, page11

水曜日 7 04, 2007

先月の会津大学 Solarisインストールフェスタ, その2 Javaセミナー

続いてインストールフェスタでのJavaセミナーの内容です。タイトルとセッション概要についてはなんとか出来上がっていたのですが、プレゼン資料は当日の3:30amまでホテルで細々と作っていました。今回は、大学での開催ということもあっていつもより年齢層が低いだろうと思い、だいぶ苦労しながら作りました。
一つ目の工夫した点は配布物です。今回はちょっと昔の学級新聞みたいなやつを思い出してプレゼン資料まるまま印刷ではなく、タイトルにあわせてレシピ風の資料にしてみました。
会津大学 Solaris Install festa, Javaセミナー配布資料
あと、プレゼン資料も書き下ろしで、Javaナイトセミナーの使い回しでなんとプレゼン自体もJavaFXで書いてあります。
20070629_aizu
プレゼンタイトルは予告通りこんな感じですが、本番との違いは雲が動くかどうかです。実は行きの新幹線の中で雲が動くように実装を書き換えてみました。2〜3割のひとが気づいてくれたらいいな〜、と思っていましたが割と気づいてもらいやすかったようです。
今回もJavaFXなので、Java Web Start形式で公開しておきます。 ソースコードを参照したい場合には、それぞれお好きな文字コードのjarファイルを展開してください。

先月の会津大学 Solarisインストールフェスタ, その1 写真で振り返る

先月末に会津大学で行われましたSolarisインストールフェスタのレポートです。今回はOpenSolarisエバンジェリストグループだけではなく、Javaエバンジェリストグループからも参加ということで、予告しておりました通り「気になる真夏の Java トレンド 3 つのレシピ」というタイトルでJavaセミナーも金曜、土曜と2回にわたって実施させていただきました。
R0016379
初めて東北新幹線に乗りました。
R0016381
会津のマスコット「あかべえ」
R0016408
インストールフェスタ1日目は残念ながら雨でした。
R0016412
学内には往年の名機が展示されています。
R0016417
学内のあちこちには案内が表示されています。
R0016427
こちらがJavaセミナーとSolaris Install festaが行われていた会場です。
R0016443
こちらは学食。活気がありますね。
R0016450
カレーを食べました。
R0016505
学内施設を案内していただいたのですが、Sunのマシンがずらり!壮観です。
R0016556
こちらはサーバルーム。
R0016565
芝生が広々としかれており、ライトアップもきれいでした。
R0016610
二日目(6/30土)はうってかわっての晴天です。
R0016631
こちらはJavaセミナー終了後の粗品争奪戦です。クリスタルDuke大人気。
R0016650
こちらはSolaris Install festaの様子。岡崎も後ろの方でSolaris Express Developer EditionをParallels on MacBook Proにインストールしてみましたが問題なくインストールできました。
R0016710
こちらは駅近くのパソコンショップ。こちらにもインストールフェスタの案内が掲げられていました。

先月のJavaナイトセミナー JavaFXで遊ぼう

最近やや仕事がオーバーフロー気味で、ブログが更新できていませんでしたが、忘れてしまわないうちに先月行われましたJavaナイトセミナー (Vol.6) 〜 JavaFXで遊ぼう -- お題、挑戦受けて立ちます!! 〜のレポートをしておきます。
R0016337
今回は無謀にもその場でお題をいただいて、その場でプログラムを作るという企画で、すでに櫻庭さんのブログでもその様子が紹介されていますが、残念ながらその場でお題をクリアすることができませんでした・・。すいません。
さて、プレゼン資料は当然(?)ながらJavaFXで書いております。ソースが欲しい!というもいらっしゃるようなので、Java Web Startで実行できるプレゼンと、ソースコード一式を公開しておきます。
Java Night Seminar, JavaFXで遊ぼう
(画面イメージ)
実行していただくには下記のうちどれかを実行していただければよいのですが、櫻庭さんも指摘されていますが、残念なことに文字エンコード指定がうまくできないので複数バージョン用意しました。手元ではWindowsではShift_JIS版、MacではShift_JIS/EUC/UTF-8版が動作したことを確認しています。なお、例によって今回のアプリケーションはすべてオレオレ証明書で署名しておりますので、信用できない方は実行しないでください。なお、ソースが欲しいという方は jarを展開してゲットしてください。 あと、ナイトセミナーを行ったときと比べていくつか変更点があります。
  • JavaFXランタイムのバージョンを 2007/6/1版から、2007/6/18版にアップ (およびこれにともなう修正。Colorとか、背景のRepaintとか)
  • フォントを ARIALからSANSSERIFに変更 (手元の環境ではなぜかARIALでも日本語が表示されるが、その他の環境では文字化けしてしまうので)
  • 画面のサイズを800x600から、900x600に変更 (フォントの変更に伴いはみ出てしまったため・・)
  • ライセンスを表示 (Creative Commons Attribution-Noncommercial 3.0)
櫻庭さんはフォント関連で苦労されていたようでしたので、岡崎はこの点にはあまりこだわらず割り切って作りましたのでこの辺ではあまり苦労しませんでした。フォントの大きさは画面の高さに対して何%という感じで指定しているので、画面のサイズが変わったり、OSやフォントが微妙に変わった場合でもそれほど大きな影響を受けません。
プレゼン資料以外にも、デモで使用したアプリケーションもJava Web Startを作りましたのでご紹介しておきます。なお、これ以降のソースは特にASCII以外の文字が含まれていませんので文字コードは共通になります。

StarWarp

Star Warp
上図のように星が中心部から飛び出してくる感じのアニメーションです。 こちらのプログラムの制作時間はおおよそ15分でした。このサンプルはちょうど制作時に制作風景をムービーでキャプチャしていたのでご興味があればご覧ください(気の短い方には30秒版がおすすめ)。なお、それぞれ音は入っていません。 次がソースコードです。なお、ムービーで紹介しているものからは若干修正が入っていると思います。
/\*\*
 \* Java Night Seminar, Vol 6. - JavaFX -
 \* $Id: StarWarp.fx,v 1.1 2007/06/25 12:25:56 takayuki Exp takayuki $
 \*
 \* by Takayuki Okazaki, Sun Microsystems K.K.
 \*    http://blogs.sun.com/okazaki
 \*
 \* This work is licensed under a 
 \* Creative Commons Attribution-Noncommercial 3.0 License
 \* http://creativecommons.org/licenses/by-nc/3.0/
 \*/

package nightseminar;

import javafx.ui.\*;
import javafx.ui.canvas.\*;
import javafx.ui.filter.\*;

import java.lang.Math;
import java.lang.System;

public class StarWarp extends CompositeNode {
  private attribute elapsed : Number;
  private attribute r : Number\*;
  private attribute dx : Number\*;
  private attribute dy : Number\*;

  public attribute running : Boolean;
  public attribute count : Number;
  public attribute width : Number;
  public attribute height : Number;
  public attribute color : Color;
}

attribute StarWarp.elapsed = bind if running
  then [0..100] dur 1000 linear
  while running
  continue if true
  else 0;

attribute StarWarp.r = bind foreach (i in [0..count]) Math.random();
attribute StarWarp.dx = bind foreach (i in [0..count])
  Math.cos(Math.toRadians(Math.random() \* 360));
attribute StarWarp.dy = bind foreach (i in [0..count])
  Math.sin(Math.toRadians(Math.random() \* 360));

operation StarWarp.composeNode() {
  return Group {
    content: [
      Rect { width: bind width, height: bind height, fill: white },
      foreach (i in [0..count])
        Star {
          var z = bind (elapsed / 100 + r[i]) % 1
          cx : bind width / 2 + z \* dx[i] \* r[i] \* width / 2
          cy : bind height / 2 + z \* dy[i] \* r[i] \* height / 2
          rin : bind 30 \* r[i] \* z
          rout : bind 70 \* r[i] \* z
          points : 5
          startAngle : bind z \* 360
          stroke : green
          fill : lightgreen
          opacity : z
        }
      ]
    };
}

Frame {
  centerOnScreen: true
  onClose: operation() { System.exit(0); } 
  title: "Star Warp"
  width: 380
  height: 380
  visible : true
  content : Canvas {
    content: StarWarp {
      count : 10
      running : true
      width : 380
      height : 380
    }
  }
}

FlyingDuke

一頃一世を風靡したスクリーンセーバーからアイデアを拝借して、Flying Dukeです。
Flying Duke
こちらも制作時間はプログラミングがおおよそ15分、画像の収集が15分という感じでした。 ソースコードです。Dukeの画像はそれぞれアニメーションgifを選択してあり、アニメーションgifを ImageViewクラスで animated: trueとしてやれば勝手にアニメーションされるのでちょっとしたアニメーションを入れたいということであればこれが簡単かもしれません。
/\*\*
 \* Java Night Seminar, Vol 6. - JavaFX -
 \* $Id: FlyingDuke.fx,v 1.1 2007/06/25 13:06:01 takayuki Exp takayuki $
 \*
 \* by Takayuki Okazaki, Sun Microsystems K.K.
 \*    http://blogs.sun.com/okazaki
 \*
 \* This work is licensed under a 
 \* Creative Commons Attribution-Noncommercial 3.0 License
 \* http://creativecommons.org/licenses/by-nc/3.0/
 \*/

package nightseminar;

import javafx.ui.\*;
import javafx.ui.canvas.\*;
import javafx.ui.filter.\*;

import java.lang.System;
import java.lang.Math;

public class FlyingDuke extends CompositeNode {
  private attribute elapsed : Number;
  private attribute dx : Number\*;
  private attribute dy : Number\*;
  private attribute dimg : String\*;

  public attribute running : Boolean;
  public attribute imageUrls : String\*;
  public attribute count : Number;
  public attribute width : Number;
  public attribute height : Number;
  public attribute duration : Number;
}

attribute FlyingDuke.elapsed = bind if running
  then [0..100] dur duration linear
  while running
  continue if true
  else 0;

attribute FlyingDuke.dx = bind foreach (i in [0..count]) Math.random() \* width;
attribute FlyingDuke.dy = bind foreach (i in [0..count]) Math.random() \* height;
attribute FlyingDuke.dimg = bind foreach ( i in [0..count])
  imageUrls[Math.random() \* (1 + sizeof imageUrls)];

operation FlyingDuke.composeNode() {
  return Group {
    content: [
      Rect { width: bind width, height: bind height, fill: white },
      foreach (i in [0..count])
        ImageView {
          var x = bind (dx[i] + width \* (100 - elapsed) / 100 + width) % width
          var y = bind (height + dy[i] - height \* (100 - elapsed) / 100) % height
          animated : true
          transform: bind [translate(x, y)]

          image : Image { url: bind dimg[i] }
        }
      ]
    };
}

Frame {
  var width = 600
  var height = 380
  centerOnScreen: true
  onClose: operation() { System.exit(0); }
  title: "Flying Duke"
  width: bind width
  height: bind height
  visible: true
  content: Canvas {
   content: [
    FlyingDuke {
     count: 10
     duration: 6000
     running: true
     width: bind width
     height: bind height
     imageUrls : ["{__DIR__}/images/duke_construction.gif",
	"{__DIR__}/images/duke_coupe.gif",
	"{__DIR__}/images/duke_jsp1.gif",
	"{__DIR__}/images/duke_plugin_anim.gif",
	"{__DIR__}/images/duke_running.gif"]
    }]
  }
}

カジメの海を行く

イメージとしては葉っぱがたくさんある山か、林、あるいは竹林を駆け抜ける感じのデモにしようと思っていたのですが残念なことにそんな画像が手元になく、またこのためにわざわざ撮影に行くのもちょっとなあ・・・。ということで、手元にあった海藻の画像で、海の中を駆け抜ける感じにしようと思いました。
Kajime
できばえは結果的に微妙でなんだかよくわからない感じになってしまいました・・・。こちらは画像の編集に手間取り制作時間は1時間程度かかっています。 ソースコードです。
/\*\*
 \* Java Night Seminar, Vol 6. - JavaFX -
 \* $Id: FlyingPlant.fx,v 1.2 2007/06/25 11:04:20 takayuki Exp takayuki $
 \*
 \* by Takayuki Okazaki, Sun Microsystems K.K.
 \*    http://blogs.sun.com/okazaki
 \*
 \* This work is licensed under a 
 \* Creative Commons Attribution-Noncommercial 3.0 License
 \* http://creativecommons.org/licenses/by-nc/3.0/
 \*/

package nightseminar;

import javafx.ui.canvas.\*;
import javafx.ui.filter.\*;
import javafx.ui.\*;

import java.lang.Math;
import java.lang.System;

class FlyingPlant extends CompositeNode {
    private attribute elapsed : Number;
    public attribute running : Boolean;
    public attribute imageUrls : String+;
}

attribute FlyingPlant.elapsed = bind if running
then [1..360] dur 20000 linear
while running
continue if true
else 0;

operation FlyingPlant.composeNode() {
    return Group {
        var count = sizeof imageUrls
        
        content: Clip {
            transform: 
            [translate(-60, -60)]
            shape: Rect { x: 60, y: 60, width: 400, height: 200 }
            content:
            [
            Rect {
                x: 60
                y: 60
                width: 400
                height: 200
                fill:  LinearGradient {
                    x1: 0, y1: 0, x2: 0, y2: 1.0
                    stops: [
                    Stop {
                        offset: 0.0
                        //color: Color {red: 7, green: 174, blue: 210}
                        color: rgb:Color(7, 174, 210) 
                        
                    },
                    Stop {
                        offset: 1.0
                        //color: Color {red: 0, green: 108, blue: 119}
                        color: rgb:Color(0, 108, 119) 
                    }                
                    ]
                }
            },
            Group {
                content: foreach (img in imageUrls)
                ImageView {
                    var i = indexof img
                    var deg = 360 \* i / sizeof imageUrls
                    var d = bind (deg + elapsed) % 360
                    var ad = bind (d \* 3 / 2) % 360
                    var alpha = bind if d < 180 then Math.sin(Math.toRadians(ad)) else 0
                    var cx = 20
                    var cy = 0
                    var r = bind 10 \* Math.toRadians(d) + 30
                    var dx = Math.cos(Math.toRadians(deg))
                    var dy = Math.sin(Math.toRadians(deg))
                    var px = bind cx + r \* dx
                    var py = bind cy + r \* dy
                    
                    image: Image { url: img }
                    
                    transform: bind [translate(px, py)]
                    opacity: bind alpha
                    visible: bind if d < 180 then true else false
                    accelerate: true
                    antialias: false
                }
            }
            ]
        }
    };
}

Frame {
    centerOnScreen: true
    onClose: operation() {System.exit(0);}
    title: "kajime"
    width: 400
    height: 200
    visible: true
    content: Canvas {
        content: FlyingPlant {
            running: true
            imageUrls : ["{__DIR__}/images/kajime1.png"
		    ,"{__DIR__}/images/kajime2.png"
		    ,"{__DIR__}/images/kajime3.png"
		    ,"{__DIR__}/images/kajime1.png"
		    ,"{__DIR__}/images/kajime2.png"
		    ,"{__DIR__}/images/kajime3.png"]
        }
    }
}

水曜日 6 20, 2007

JavaFXで遊ぼう -- お題、挑戦受けて立ちます!!

来週水曜日(6月27日)に恒例のJavaナイトセミナーVol 6.が行われます。今回はタイトルの通りJavaFXです。参加されたい場合には参加申し込みの方法に従って申し込みをしてください。
JavaFXはこんな感じのカッコイイアプリケーションが作れるスクリプト言語です。
JavaFX - Studio Moto

土曜日 5 19, 2007

はじめてのJavaFX Script

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

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

okazaki

Search

Archives
« 4月 2014
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
今日