Javaでお絵書きしてみる
Java では Java2D という API (Application Program Interafce、
特定の機能をプログラムの中から利用する方法)が用意されています。
Java2Dはグラフィックスを扱うためのAPIで、Java2D を使うとJavaで
記述したプログラムから簡単にグラフィックスを操作することができます。
- Java 日本語マニュアル (jdk 6u10)
https://nw.tsuda.ac.jp/doc/jdk-8u-docs-jp/api/index.html
- Graphics2Dクラスの説明
https://nw.tsuda.ac.jp/doc/jdk-8u-docs-jp/api/java/awt/Graphics2D.html
void | setColor(Color c) |
このグラフィックスコンテキストの現在の色を、指定された色に設定します。このグラフィックスコンテキストを使うこれ以降のグラフィック関連操作は、ここで指定された色を使用します。
|
void | draw(Shape s) |
現在の Graphics2D コンテキストの設定を使うことにより、Shape の輪郭をストロークで描画します。
|
void | fill(Shape s) |
Graphics2D コンテキストの設定を使うことにより、Shape の内部を塗りつぶします。
|
- Shapeクラスの説明
https://nw.tsuda.ac.jp/doc/jdk-8u-docs-jp/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
グラフィックス
ウィンドウと座標系
![](screen.gif)
コンピュータの画面上に、『ドット』または『ピクセル』と
呼ばれる点が縦横方向にずらっと並んでいます。
このドットがいろいろな色に発光することで、画面上に
絵や文字が表示されるわけです。
画面の座標系は、左上を原点にして、水平右方向に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値をいくつか次の表に挙げておきます。
色 | r | g | b | 名称 |
![](color/red.gif) |
255 | 0 | 0 |
赤 (red) |
![](color/green.gif) |
0 | 255 | 0 |
緑 (green) |
![](color/blue.gif) |
0 | 0 | 255 |
青 (blue) |
![](color/white.gif) |
255 | 255 | 255 |
白 (white) |
![](color/black.gif) |
0 | 0 | 0 |
黒 (black) |
|
色 | r | g | b | 名称 |
![](color/yellow.gif) |
255 | 255 | 0 |
黄色 (yellow) |
![](color/cyan.gif) |
0 | 255 | 255 |
シアン (cyan) |
![](color/magenta.gif) |
255 | 0 | 255 |
マゼンタ (magenta) |
![](color/gray.gif) |
190 | 190 | 190 |
gray (灰色) |
![](color/pink.gif) |
255 | 192 | 203 |
ピンク |
|
色 | r | g | b | 名称 |
![](color/brown.gif) |
165 | 42 | 42 |
茶色 (brown) |
![](color/darkyellow.gif) |
128 | 128 | 0 |
暗い黄色 (dark yellow) |
![](color/orange.gif) |
255 | 165 | 0 |
オレンジ (orange) |
![](color/purple.gif) |
160 | 32 | 240 |
パープル (purple) |
![](color/yellowgreen.gif) |
154 | 205 | 50 |
黄緑 (yellow green) |
|
ToyGraphics クラス
今回の授業では ToyGraphics というクラスを使って、Java
言語で書いたプログラムからグラフィックを扱ってみます。
ToyGraphicsクラスを使ってみるには
- mac環境にloginして、自分のホームの「書類」フォルダの下に1semiというフォルダを作成して下さい。
すなわち、絶対パスで
/home/ユーザ名/Documents/1semi/
というフォルダを作成してください。
これは
~/Documents/1semi/
というパスでも表現されます。
Finder を使うと簡単ですが、「ターミナル」上でmkdir
コマンドなどを使ってもかまいません。
- ToyGraphics.java を
ダウンロードして、先程作成した「1semiというフォルダ」
の中に保存して下さい。
- 「ターミナル」を起動して、「カレントフォルダ」を、上記の「1semi というフォルダ」に移動してください。
「ターミナル」起動時点のカレントディレクトリは /home/ユーザ名
である。
$ cd Documents
← その下の Documents に降りる。
$ cd 1semi
← その下の 1semi に降りる。
$ pwd
← カレントディレクトリを表示する。
/home/ユーザ名/Documents/1semi
-
ToyGraphics クラスを使っているプログラムをコンパイルすると、
同時に同じフォルダ内にある ToyGraphics.java もコンパイルされます。
- ここでは、package なしの Java プログラムを作成したいので、
プログラムを編集する エディタとして VS Code を使う場合は、
以下の手順を取ってみてください。
- トップメニューの File → New Text File で一旦、テキストファイルの編集を開始し、
- トップメニューの File → Save as → フォルダを選択して、ファイル名を クラス名.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クラスのインスタンスを作る」ことになります
これで、幅1280ドット、高さ720ドットの黒いウィンドウが表示されるようになります。
- tg.g2d がGraphics2Dのインスタンスなので、これを用いて描画します。
- 色を設定するには tg.g2d.setColor()を使います。
tg.serColor(new Color(int red,int green,int blue));
この場合、
0≦red≦255,
0≦green≦255,
0≦blue≦255 であることに注意して下さい。
- 図形を描くには tg.g2d.draw(Shapeの子クラス)を使います。
- 図形を塗るには tg.g2d.fill(Shapeの子クラス)を使います。
- 最後にtg.repaint()を呼び出すと表示が更新されます。
- プログラムをコンパイルして実行します。
「ターミナル」上でタイプする:Sample01.javaの実行例 |
% javac Sample01.java ← 青文字の部分をタイプします。%はシェルのプロンプトのつもりです。
% java Sample01
|
![](Sample01.png)
- プログラムが実行を終了した後は、ウィンドウの最終状態が
表示されたままになります。
- ウィンドウの上のタイトルバーの左の赤丸
上でマウスの左ボタンをクリックすると、ウィンドウを閉じてプログラムが終了します。
もう一つの例
繰返し(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
|
![](Sample02.png)
アニメーション
黄色い円が左上から右下に移動するアニメーションです。
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://ynitta.com/class/1semi/local/handin/up.php?id=kadai1
から提出して下さい。
提出ページの
「提出ファイル」に自分が作成した GReport01.java を指定し、
「コメント欄」には何の絵であるかの説明を記入して下さい。
提出した後は、正しく提出されていることを
http://ynitta.com/class/1semi/local/handin/list.php?id=kadai1
で必ず確認しておいて下さい。
〆切は次回の授業開始時刻です。