Javaでお絵書きしてみる

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

Java 日本語マニュアル (jdk 6u10) http://nw.tsuda.ac.jp/doc/jdk-6u10-docs/ja/api/index.html
Graphics2Dクラスの説明 http://nw.tsuda.ac.jp/doc/jdk-6u10-docs/ja/api/java/awt/Graphics2D.html

void	setColor(Color c)	このグラフィックスコンテキストの現在の色を、指定された色に設定します。このグラフィックスコンテキストを使うこれ以降のグラフィック関連操作は、ここで指定された色を使用します。
void	draw(Shape s)	現在の Graphics2D コンテキストの設定を使うことにより、Shape の輪郭をストロークで描画します。
void	fill(Shape s)	Graphics2D コンテキストの設定を使うことにより、Shape の内部を塗りつぶします。

Shapeクラスの説明 http://nw.tsuda.ac.jp/doc/jdk-6u10-docs/ja/api/java/awt/Shape.html

Shapeの種類
Arc2D, Arc2D.Double, Arc2D.Float, Area, BasicTextUI.BasicCaret, CubicCurve2D, CubicCurve2D.Double, CubicCurve2D.Float, DefaultCaret, Ellipse2D, Ellipse2D.Double, Ellipse2D.Float, GeneralPath, Line2D, Line2D.Double, Line2D.Float, Path2D, Path2D.Double, Path2D.Float, Polygon, QuadCurve2D, QuadCurve2D.Double, QuadCurve2D.Float, Rectangle, Rectangle2D, Rectangle2D.Double, Rectangle2D.Float, RectangularShape, RoundRectangle2D, RoundRectangle2D.Double, RoundRectangle2D.Float

グラフィックス

ウィンドウと座標系

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

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

色

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

    256 × 256 × 256 ＝ 16777216 (通り)
    (2⁸ × 2⁸ × 2⁸ ＝ 2²⁴)

を表現できる(区別できる)ことになります。

「明るさ」を数値で表現して、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値をいくつか次の表に挙げておきます。

R	G	B	名称
255	0	0	赤 (red)
0	255	0	緑 (green)
0	0	255	青 (blue)
255	255	255	白 (white)
0	0	0	黒 (black)

R	G	B	名称
255	255	0	黄色 (yellow)
0	255	255	シアン (cyan)
255	0	255	マゼンタ (magenta)
190	190	190	gray (灰色)
255	192	203	ピンク

R	G	B	名称
165	42	42	茶色 (brown)
128	128	0	暗い黄色 (dark yellow)
255	165	0	オレンジ (orange)
160	32	240	パープル (purple)
154	205	50	黄緑 (yellow green)

ToyGraphicsクラス

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

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

Mac環境にloginして、自分のホームの下に1semiというフォルダを作成して下さい。
ToyGraphics.java をダウンロードして、先程作成した「1semiというフォルダ」の中に保存して下さい。
ToyGraphics クラスを使っているプログラムをコンパイルすると、同時に同じフォルダ内にある ToyGraphics.java もコンパイルされます。
ToyGraphicsクラスを利用するプログラムを書きましょう。

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 を利用するプログラムは次のように記述します。

main()メソッドの先頭で、一度だけ
```
    ToyGraphics tg = new ToyGraphics();
```
と記述します。詳しい話は今回は省略しますが、これで「ToyGraphicsクラスのインスタンスを作る」ことになりますこれで、幅640ドット、高さ480ドットの黒いウィンドウが表示されるようになります。
tg.g2d がGraphics2Dのインスタンスなので、これを用いて描画します。
色を設定するには tg.g2d.setColor()を使います。

    tg.serColor(new Color(int red,int green,int blue));

red

green

blue

図形を描くには tg.g2d.draw(Shapeの子クラス)を使います。
図形を塗るには tg.g2d.fill(Shapeの子クラス)を使います。
最後にtg.repaint()を呼び出すと表示が更新されます。

プログラムをコンパイルして実行します。

Sample01.javaの実行例

% javac Sample01.java
% java Sample01

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

もう一つの例

繰返し(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();
    }
}

アニメーション

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

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();
	    }
	}
    }
}

課題

オリジナリティ溢れる美しい画像を出力する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 で必ず確認しておいて下さい。

〆切は7月27日13:00です。

nitta@tsuda.ac.jp