2011年11月22日火曜日

オブジェクト指向がわかっている人向けのProcessing(Java)の配列

前提


1.配列の宣言

Processing(Java)の配列は、実はオブジェクトだ。 だから、使うには、配列の変数を宣言して、newで配列のインスタンスを用意してそれに代入する必要がある。

たとえば、整数型で100個の要素を持った配列xを使いたければ、次のように書く。

int[] x; // 配列の変数xを宣言
x = new int[100]; // 整数型で100個の要素を持った配列のインスタンスを用意してxに代入

このように、配列の変数を宣言するには、「型[] 配列の名前」と書く。 また、インスタンスを用意して代入するには「配列の名前 = new 型[個数]」と書く。

これは、1行で書くこともできる。

int[] x = new int[100];

※Cで、同様の配列を用意するには「int x[100];」である。なお、Cの配列はオブジェクトではない。


2.配列の要素

配列の要素は0番目からはじまる。 よって、10個の要素を持った配列xを用意した場合、使えるのはx[0]〜x[9]である。


3.配列の要素の数

Processing(Java)の配列はオブジェクトなので、フィールドやメソッドを持つ。

よく使うフィールドに、配列の要素の数lengthがある。 たとえば、配列xの要素の数は、「x.length」で取得することができる。

これを使うと、整数型の要素10個持った配列xを用意して、0から9の値を代入するプログラムは、以下のように書ける。

int[] x;
x = new int[10];
for (int i = 0; i < x.length; i++) {
    x[i] = i;
}

※Cの配列はオブジェクトではないので、フィールドがない。Cの場合は、sizeof(x)/sizeof(x[0])のように、sizeof演算子を使って、「配列全体のサイズ/配列の要素1個分のサイズ」で求める。

※Cの文字列の場合、実際に入っている文字数と入れられる最大文字数は異なる。sizeof演算子で求められるのは最大文字数の方である。実際に入っている文字数はstrlen()関数で求める。また、関数を使わないで、文字列の終わりであるヌル文字「\0」が入っている位置を見つけてもいい。


4.配列の初期化

Processing(Java)の配列は、以下のように初期化することができる。

int[] x = { 31, 20, -9 };

この場合、newでインスタンスを用意するという手続きは、明確に書かない。

※Cの場合、初期化は「int x[] = { 31, 20, -9 };」でほとんど同じ。


5.配列の要素のコピー

Processing(Java)の配列は、オブジェクトであり、配列の要素のコピーを生成するメソッドclone()が用意されている。 以下のように配列yに、配列xのコピー生成して代入することができる

int[] y = x.clone();

ちなみに、事情はここで説明しないが、cloneした結果には、以下のようにキャストを行なった方が安全である。

int[] y = (int[])x.clone();

※この方法は、浅いコピーと言われているもので、ある種の場合、完全なコピーを生成してくれるわけではない。

※Cの場合、次のようにfor文などでくり返し代入する処理を書く必要がある。Processing(Java)でもこの方法は有効である。

for (i = 0; i<配列の要素数; i++) {
    y[i] = x[i];
}

Todo?

浅いコピーと深いコピー、オブジェクトを要素に持った配列、etc.

2011年11月19日土曜日

CSS3 3D Transformsの表示テスト

2013年7月31日追記: transform-styleの指定を適切なセレクタに移動。Firefox、Opera、IE用の記述も追加。

Safari、Chrome、Firefox、Opera、IE用のCSS3 3D Transforms Module 3の表示テスト。 2013年7月31日現在、ChromeとFirefoxではZバッファがおかしい、Operaは3次元回転しない、IEはチェックしていないがIE10では動くという情報もある。

ちなみに、Safariでも、Windowsだとグラフィックカードなどによっては3D表示に対応しない: 「CSS3の3D表示機能が、実はSafariでも使えないことがある件 」

コードは以下。

CSS

#wrapper {
 position: relative;
 width: 200px;
 height: 200px;
 padding: 50px;
 border: 1px solid black;
 transform-style: preserve-3d;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
}
#panel1, #panel2 {
 position: absolute;
 width: 200px;
 height: 200px;
 animation-iteration-count: infinite;
 animation-timing-function: linear;
 animation-duration: 8s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
 -webkit-animation-duration: 8s;
 -moz-animation-iteration-count: infinite;
 -moz-animation-timing-function: linear;
 -moz-animation-duration: 8s;
 -o-animation-iteration-count: infinite;
 -o-animation-timing-function: linear;
 -o-animation-duration: 8s;
 -ms-animation-iteration-count: infinite;
 -ms-animation-timing-function: linear;
 -ms-animation-duration: 8s;
}
#panel1 {
 background-color: red;
 animation-name: rotate1;
 -webkit-animation-name: rotate1;
 -moz-animation-name: rotate1;
 -o-animation-name: rotate1;
 -ms-animation-name: rotate1;
}
#panel2 {
 background-color: blue;
 animation-name: rotate2;
 -webkit-animation-name: rotate2;
 -moz-animation-name: rotate2;
 -o-animation-name: rotate2;
 -ms-animation-name: rotate2;
}
@keyframes rotate1 {
 0% { transform: perspective(100px) translateZ(-100px) rotateY(90deg) }
 50% { transform: perspective(100px) translateZ(-100px) rotateY(270deg) }
 100% { transform: perspective(100px) translateZ(-100px) rotateY(450deg) }
}
@keyframes rotate2 {
 0% { transform: perspective(100px) translateZ(-100px) rotateY(0deg) }
 50% { transform: perspective(100px) translateZ(-100px) rotateY(180deg) }
 100% { transform: perspective(100px) translateZ(-100px) rotateY(360deg) }
}
@-webkit-keyframes rotate1 {
 0% { -webkit-transform: perspective(100px) translateZ(-100px) rotateY(90deg) }
 50% { -webkit-transform: perspective(100px) translateZ(-100px) rotateY(270deg) }
 100% { -webkit-transform: perspective(100px) translateZ(-100px) rotateY(450deg) }
}
@-webkit-keyframes rotate2 {
 0% { -webkit-transform: perspective(100px) translateZ(-100px) rotateY(0deg) }
 50% { -webkit-transform: perspective(100px) translateZ(-100px) rotateY(180deg) }
 100% { -webkit-transform: perspective(100px) translateZ(-100px) rotateY(360deg) }
}
@-moz-keyframes rotate1 {
 0% { -moz-transform: perspective(100px) translateZ(-100px) rotateY(90deg) }
 50% { -moz-transform: perspective(100px) translateZ(-100px) rotateY(270deg) }
 100% { -moz-transform: perspective(100px) translateZ(-100px) rotateY(450deg) }
}
@-moz-keyframes rotate2 {
 0% { -moz-transform: perspective(100px) translateZ(-100px) rotateY(0deg) }
 50% { -moz-transform: perspective(100px) translateZ(-100px) rotateY(180deg) }
 100% { -moz-transform: perspective(100px) translateZ(-100px) rotateY(360deg) }
}
@-o-keyframes rotate1 {
 0% { -o-transform: perspective(100px) translateZ(-100px) rotateY(90deg) }
 50% { -o-transform: perspective(100px) translateZ(-100px) rotateY(270deg) }
 100% { -o-transform: perspective(100px) translateZ(-100px) rotateY(450deg) }
}
@-o-keyframes rotate2 {
 0% { -o-transform: perspective(100px) translateZ(-100px) rotateY(0deg) }
 50% { -o-transform: perspective(100px) translateZ(-100px) rotateY(180deg) }
 100% { -o-transform: perspective(100px) translateZ(-100px) rotateY(360deg) }
}
@-ms-keyframes rotate1 {
 0% { -ms-transform: perspective(100px) translateZ(-100px) rotateY(90deg) }
 50% { -ms-transform: perspective(100px) translateZ(-100px) rotateY(270deg) }
 100% { -ms-transform: perspective(100px) translateZ(-100px) rotateY(450deg) }
}
@-ms-keyframes rotate2 {
 0% { -ms-transform: perspective(100px) translateZ(-100px) rotateY(0deg) }
 50% { -ms-transform: perspective(100px) translateZ(-100px) rotateY(180deg) }
 100% { -ms-transform: perspective(100px) translateZ(-100px) rotateY(360deg) }
}

HTML

<div id="wrapper">
<div id="panel1">
</div>
<div id="panel2">
</div>
</div>

2011年11月16日水曜日

Fate/stay nightでわか(ったような気がす)るProcessing(Java)のオブジェクト指向:1

それなりに需要があるかもしれないので、まとめてみました。


前提

  1. Casey Reas, Ben Fry著、船田巧訳、『Processingをはじめよう』、オライリージャパン、2011年の「9章オブジェクト」以前の内容は理解している。
  2. Fate/stay nightを知っていて、ネタバレがあっても構わない

1.オブジェクト指向プログラミング

オブジェクト指向のプログラムは、「コンピュータの中にオブジェクトというものがあって、これがお互いにメッセージを送り合うことで動いている」といった感じで作ります。

なお、メッセージを送ることを、メッセージ・パッシング(message passing: メッセージ送信)といいます。

オブジェクトというのは、Fate/stay night(以下Fate)を例にすると、サーヴァント(使い魔)のようなものです。オブジェクトにメッセージを送ることは、サーヴァントに指示を出して使役することに対応します。

Fateと違うのは、いくらでもサーヴァントと契約できることです。いろいろなサーヴァントを召喚して、使役して、プログラムを組み立てます。


2.クラス

Processingは、実際にはJavaだったりします。Javaはクラス・ベースのオブジェクト指向言語で、オブジェクトを使うために、クラスを用意する必要があります。
クラスは、オブジェクトの設計図のようなものです。

このクラスは、Fateのクラスのようなものだと思ってください。実際にはあんまりちゃんと対応しないけど、取りあえず。

クラスには、そのクラスのサーヴァントが持つべきパラメータと、そのクラスのサーヴァントを使役するのに使う指示を用意します。
このパラメータのことをフィールド(field データを記入する欄)、指示をメソッド(method 処理方法)と言います。

たとえば、セイバー(剣の騎士)のクラスのサーヴァントには、真名と魔力というフィールドを持たせ、攻撃しろというメソッドを用意するとします。他にもいろいろあると思いますが、簡単のためにこの3つにしておきます。

これをクラス図というもので書くと以下のようになります。

セイバー
真名
魔力
攻撃しろ()

プログラム的には、フィールドは変数の宣言、メソッドは関数の定義みたいに書きます。
というわけで、具体的には、以下のようになります。

/* セイバーのクラスの定義 */
class Saber {
    /* フィールドの宣言 */
    String trueName; // 真名
    int magicalEnergy; // 魔力

    /* メソッドの定義 */
    void attack() {
        println("剣で攻撃しました。");
    }
}

3.オブジェクトの生成と使用

ここまでは、まだ、クラス(設計図)を用意しただけで、実際にオブジェクトを使うところまで行っていません。

これは、セイバーというクラスはあるけれど、具体的にサーヴァントが召喚されていないし、使役もされていないということです。

それでは、召喚して使役する方法を説明します。まず、とりあえず、仮の名前を用意します。
普通の変数の宣言と同じように、型(ここではクラス名)と変数名(仮の名前)を以下のように書きます。

Saber ahoge;

次に、プログラムの中でサーヴァントを召喚し、契約します。

ahoge = new Saber();

ここで、new クラス名()で、召喚を行ないます。
仮の名前に=で代入することで、名前で縛ることで、契約がなされます。

これは、プログラム的には、クラスの定義から、オブジェクトを生成したことになります。
このオブジェクトは、設計図であるクラスではなく、具体的な実体があるので、インスタンス(instance 具体的な実体)とも呼ばれます。

Fateの現界している個々のサーヴァントがインスタンスということです。ちなみに、new(召喚)しても、=(契約)しないと、現界できなくなって、消滅し(ガーベッジ・コレクションされ)てしまいます。

召喚して契約したら、使役できます。具体的には、以下のように、「仮の名前.メソッド名()」で、サーヴァントに指示を出して使役します。

ahoge.attack();

4.オブジェクトの初期化

変数を初期化するときには、「int i = 0;」のように、宣言と同時に代入していました。
しかし、一般にオブジェクトは、複数のパラメータを持っているので、同じように初期化することはできません。

では、たとえば、Saberの場合、召喚時に真名と魔力を初期化したいとします。
次のように書くことで、真名を「アルトリア・ペンドラゴン」、魔力を「40」と、初期化するという文法にするのはどうでしょうか?

ahoge = new Saber("アルトリア・ペンドラゴン", 40);

で、実際、Javaの場合、そういう文法になっています。

これはよく見ると、Saberという関数があって、その引数が真名と魔力になっているようなものです。
また、この関数は、Saberクラスのサーヴァント(オブジェクト)を返すので、戻り値の型はSaberです。

というわけで、この関数の宣言を以下のように書いてはどうでしょう。

/* セイバーのクラスの定義 */
class Saber {
    /* フィールドの宣言 */
    String trueName; // 真名
    int magicalEnergy; // 魔力

    /* コンストラクタの定義 */
    Saber(String name, int energy) {
        trueName = name;
        println("真名を" + name + "にしました。");
        magicalEnergy = energy;
        println("魔力を" + energy + "にしました。");
    }

    /* メソッドの定義 */
    void attack() {
        println("剣で攻撃しました。");
    }
}

戻り値の型はSaberなので、わざわざ書くと、2回Saberと書くことになるので、書かないという文法にしておきます。

このように、オブジェクトを初期化するのに使う関数のようなものを、オブジェクト指向言語ではコンストラクタ(constructor 生成するのに使用されるもの)と呼びます。

文法的には、クラス名と同じ名前の関数の定義です。ただし、戻り値の型は書きません。


5.まとめ

  • オブジェクト指向のプログラムでは、サーヴァント(オブジェクト)を召喚して、使役することで、処理を実行する
  • クラスは、Fateのクラスみたいなもの
  • クラスの定義には、そのクラスのサーヴァントが持っているパラメータを変数の宣言みたいに、使役するのに使う指示を関数の定義みたいに書く
  • サーヴァントは、召喚して(new クラス名())、契約して(仮の名前に=で代入)、使役できるようになる
  • 使役するには、「仮の名前.メソッド名()」
  • サーヴァントを召喚と同時に初期化するのに、コンストラクタというものを使う
  • コンストラクタの定義は、クラス名と同じ名前の関数。ただし、戻り値の型を書かない

では、最後にProcessingのプログラムの全体を書いておきます。

Saber ahoge; // 仮の名前を用意

void setup() {
    /* セイバーのサーヴァントを召喚して、契約します */
    ahoge = new Saber("アルトリア・ペンドラゴン", 40);

    /* セイバーを使役します(攻撃するように命じます) */
    ahoge.attack();
}

/* セイバーのクラスの定義 */
class Saber {
    /* フィールドの宣言 */
    String trueName; // 真名
    int magicalEnergy; // 魔力

    /* コンストラクタの定義 */
    Saber(String name, int energy) {
        trueName = name;
        println("真名を" + name + "にしました。");
        magicalEnergy = energy;
        println("魔力を" + energy + "にしました。");
    }

    /* メソッドの定義 */
    void attack() {
        println("剣で攻撃しました。");
    }
}

Todo?

カプセル化とアクセス制御、継承、多態性、抽象クラスとインターフェイス。
同じクラスのサーヴァントでも、インスタンスによって、いろいろな宝具とか、攻撃が使えるようにする設計。