Javaでお絵書きしてみる


Java では Java2D という API (Application Program Interafce、 特定の機能をプログラムの中から利用する方法)が用意されています。 Java2Dはグラフィックスを扱うためのAPIで、Java2D を使うとJavaで 記述したプログラムから簡単にグラフィックスを操作することができます。


グラフィックス

ウィンドウと座標系


コンピュータの画面上に、『ドット』または『ピクセル』と 呼ばれる点が縦横方向にずらっと並んでいます。 このドットがいろいろな色に発光することで、画面上に 絵や文字が表示されるわけです。 画面の座標系は、左上を原点にして、水平右方向にx軸、垂直下方向に y軸を設定するのが一般的です。

ウィンドウは特定のアプリケーションで使うために用意した、 画面上の矩形(くけい←「四角形」という意味です)領域です。 やはり、左上を原点にして、水平右方向にx軸、垂直下方向に y軸を設定した座標系で表現します。

ドットの色は、3原色(赤、緑、青)の組合せで表現できます。 各原色は(8bitで表される0〜255の整数値で)256段階の明るさを 表現できるとすると、色はその組合せで

    256 × 256 × 256 = 16777216 (通り)
    (28 × 28 × 28 = 224)
を表現できる(区別できる)ことになります。

「明るさ」を数値で表現して、0を「最も暗い状態」、255を「最も明るい状態」 とすると、たとえば

	(R,G,B)=(255,0,0) は赤、
	(R,G,B)=(128,0,0) は暗い赤、
	(R,G,B)=(0,255,0) は緑、
	(R,G,B)=(255,255,0) は黄色
を表します。代表的な色の名前とRGB値をいくつか次の表に挙げておきます。

RGB名称
25500 赤 (red)
02550 緑 (green)
00255 青 (blue)
255255255 白 (white)
000 黒 (black)
RGB名称
2552550 黄色 (yellow)
0255255 シアン (cyan)
2550255 マゼンタ (magenta)
190190190 gray (灰色)
255192203 ピンク
RGB名称
1654242 茶色 (brown)
1281280 暗い黄色 (dark yellow)
2551650 オレンジ (orange)
16032240 パープル (purple)
15420550 黄緑 (yellow green)

ToyGraphicsクラス

今回の授業では ToyGraphics というクラスを使って、Java 言語で書いたプログラムからグラフィックを扱ってみます。

ToyGraphicsクラスを使ってみるには

  1. Mac環境にloginして、自分のホームの下に1semiというフォルダを作成して下さい。
  2. ToyGraphics.java を ダウンロードして、先程作成した「1semiというフォルダ」 の中に保存して下さい。

    ToyGraphics クラスを使っているプログラムをコンパイルすると、 同時に同じフォルダ内にある ToyGraphics.java もコンパイルされます。

  3. ToyGraphicsクラスを利用するプログラムを書きましょう。
  4. Sample01.java
    import java.util.*;
    import java.awt.*;
    import java.awt.geom.*;
    public class Sample01 {
        public static void main(String[] args) {
    	ToyGraphics tg = new ToyGraphics();
    	
    	tg.g2d.setColor(new Color(255,0,0));
    	tg.g2d.fill(new Rectangle(10,10,100,50));
    
    	tg.g2d.setColor(new Color(128,128,128));
    	tg.g2d.draw(new Rectangle(210,10,100,50));
    
    	tg.g2d.setColor(new Color(0,255,0));
    	tg.g2d.fill(new Arc2D.Double(120,210,100,50,0,270,Arc2D.CHORD));
    
    	tg.g2d.setColor(new Color(55,128,255));
    	tg.g2d.draw(new Line2D.Double(50,410,600,300));
    
    	int[] xp = { 480, 350, 580, 300, 530 };
    	int[] yp = { 200, 300, 250, 250, 300 };
    	tg.g2d.setColor(new Color(255,255,0));
    	tg.g2d.fill(new Polygon(xp,yp,xp.length));
    
    	tg.repaint();
        }
    }
    

    ToyGraphics.java を利用するプログラムは次のように記述します。

    1. main()メソッドの先頭で、一度だけ
          ToyGraphics tg = new ToyGraphics();
      
      と記述します。 詳しい話は今回は省略しますが、 これで「ToyGraphicsクラスのインスタンスを作る」ことになります これで、幅640ドット、高さ480ドットの黒いウィンドウが表示されるようになります。
    2. tg.g2d がGraphics2Dのインスタンスなので、これを用いて描画します。
    3. 色を設定するには tg.g2d.setColor()を使います。
    4.     tg.serColor(new Color(int red,int green,int blue));
      
      この場合、 0≦red≦255, 0≦green≦255, 0≦blue≦255 であることに注意して下さい。
    5. 図形を描くには tg.g2d.draw(Shapeの子クラス)を使います。
    6. 図形を塗るには tg.g2d.fill(Shapeの子クラス)を使います。
    7. 最後にtg.repaint()を呼び出すと表示が更新されます。
  5. プログラムをコンパイルして実行します。
  6. Sample01.javaの実行例
    % javac Sample01.java    ← 青文字の部分をタイプします。%はシェルのプロンプトのつもりです。
    % java Sample01  
    

  7. プログラムが実行を終了した後は、ウィンドウの最終状態が 表示されたままになります。 ウィンドウの上のタイトルバーの左の赤丸 上でマウスの左ボタンをクリックすると、ウィンドウを閉じてプログラムが終了します。

もう一つの例

繰返し(loop)を使って、複数の図形を配置した例です。

Sample02.java
import java.util.*;
import java.awt.*;
import java.awt.geom.*;
public class Sample02 {
    public static void main(String[] args) {
	ToyGraphics tg = new ToyGraphics();
        for (int y=0; y<480; y++) {
	    int i = y % 3;
            if (i == 0) tg.g2d.setColor(new Color(255,0,0));
            else if (i == 1) tg.g2d.setColor(new Color(0,255,0));
            else tg.g2d.setColor(new Color(0,0,255));
	    tg.g2d.draw(new Line2D.Double(0,y,639,479-y));
	}

	for (int x=0; x<600; x+=80) {
	    tg.g2d.setColor(new Color(255,255,0));
	    tg.g2d.fill(new Arc2D.Double(x,100,50,50,0,360,Arc2D.CHORD));
	}

	tg.repaint();
    }
}
Sample02.javaの実行例
% javac Sample02.java  
% java Sample02  


アニメーション

黄色い円が左上から右下に移動するアニメーションです。

Sample03.java
import java.util.*;
import java.awt.*;
import java.awt.geom.*;
public class Sample03 {
    public static void main(String[] args) {
	ToyGraphics tg = new ToyGraphics();
        for (int i=0; i<100; i++) {
	    tg.g2d.setColor(new Color(0,0,0));
	    tg.g2d.fill(new Rectangle(0,0,640,480));
	    
	    int x = i*5, y = i*3;
	    tg.g2d.setColor(new Color(255,255,0));
	    tg.g2d.fill(new Arc2D.Double(x,y,20,20,0,360,Arc2D.CHORD));

	    tg.repaint();

	    try {
		Thread.sleep(10);
	    } catch (Exception e) {
		e.printStackTrace();
	    }
	}
    }
}
Sample03.javaの実行例
% javac Sample03.java  
% java Sample03  
  

課題1

オリジナリティ溢れる美しい画像を出力するJavaのプログラムを作成して下さい。 単に幾何学的な模様だけでなく、動物、乗物、建物など、意味のある構成要素を 登場させることを条件にします。 ファイル名は GReport01.java としましょう。

正しく動作するプログラムのみを提出すること。

作成したプログラムが正しく動作することを確認したら、 「宿題提出Web:1年ゼミ:課題1」 http://nw.tsuda.ac.jp/class/1semi/local/handin/up.php?id=kadai1 から提出して下さい。 提出ページの 「提出ファイル」に自分が作成した GReport01.java を指定し、 「コメント欄」には何の絵であるかの説明を記入して下さい。

提出した後は、正しく提出されていることを http://nw.tsuda.ac.jp/class/1semi/local/handin/list.php?id=kadai1 で必ず確認しておいて下さい。

〆切は10月27日(火)10:30です。


nitta@tsuda.ac.jp