課題 (04:キャンバス)

作業について

今回の課題は以下のパッケージに作成してください。

パッケージの名前
j1.lesson04

作成するクラスの名前は問題ごとに指示があります。下記を参照してください

課題の提出方法については下記を参照してください。

また、別のコンピューター上に移動する際には、下記を参考にプログラムを持ち帰ってください。

新しい内容

描画色の変更

これまでは黒色だけで線や文字列などをキャンバスに描いてきましたが、下記のように「Canvas.setColor」という命令を使うとその色を変えることができます。

package j1.lesson04;

import gpjava.Canvas;

public class ChangeColorS2 {

    public static void main(String[] args) {
        new ChangeColorS2().start();
    }

    void start() {
        Canvas.show();

        Canvas.setColor(255, 0, 0);
        Canvas.drawString(50, 60, "1つ目は赤色の強さです(255, 0, 0)");

        Canvas.setColor(0, 255, 0);
        Canvas.drawString(50, 90, "2つ目は緑色の強さです(0, 255, 0)");

        Canvas.setColor(0, 0, 255);
        Canvas.drawString(50, 120, "3つ目は青色の強さです(0, 0, 255)");

        Canvas.setColor(0, 0, 0);
        Canvas.fillRect(50, 130, 300, 25);
        Canvas.setColor(255, 255, 255);
        Canvas.drawString(55, 150, "すべて0で黒、255で白です");

        Canvas.setColor(200, 200, 200);
        Canvas.fillRect(50, 160, 300, 25);
        Canvas.setColor(0, 0, 0);
        Canvas.drawString(55, 180, "半端に指定すると灰色になります");
    }
}

このプログラムを実行すると、次のように描画されるはずです。

図: 描画色の変更

「Canvas.setColor」という命令は、引数に3つの整数をとります。

Canvas.setColor([赤色成分の強さ], [緑色成分の強さ], [青色成分の強さ]);

それぞれの色成分の強さは0(最も弱い)から255(最も強い)までの範囲で指定します。このように、赤、緑、青という「光の3原色」を混ぜて色を表すものを「RGBカラーモデル」と呼び、RGBはRed, Green, Blueの先頭の文字をとったものです。

なお、「Canvas.setColor」を処理すると、以降で別の色が指定されるまで全ての描画がその色で行われるようになります。

課題の中で色の変更を行う場合には、色成分を紹介するようにします。いまのところは「赤色成分、緑色成分、青色成分の順(RGB)に並んでいる」ということだけ覚えておいてください。

問題

1. クリックした位置に次々と円を描画するプログラム

作成するクラスの名前
CanvasEditorS2

キャンバス上のクリックした位置を中心に、半径10の円を描画するプログラムを作成してください。

たとえば、中央付近をクリックすると次のようになります。

図: クリックした位置に次々と円を描画するプログラム(1回)

この操作は5回連続して行えるようにしてください。さらに右下のあたりをクリックした場合、次のようになります。

図: クリックした位置に次々と円を描画するプログラム(2回)

これをあと3回繰り返して、全体で5個の円を描画できるようにしてください。

図: クリックした位置に次々と円を描画するプログラム(5回)

2. 複数の三角形を描画する

作成するクラスの名前
TrianglesS2

次のようにキャンバスに描画するプログラムを書いてください。

図: 複数の三角形を描画する

上図に出現するそれぞれの三角形は、幅10, 高さ10の直角二等辺三角形です。なお、キャンバスに三角形を描画する機能は用意していません。1ピクセルずつずらしながら10本の線を引くと塗りつぶした三角形を描画できます。

ヒント

1つの三角形を描画するだけで10本の線を引くので、図のように6つも三角形を描画するには60本も線を引くことになります。「指定の座標に三角形を描画する」というメソッドを宣言して6回起動するのが楽です。

3. 複数の色つき三角形を描画する

作成するクラスの名前
ColorTrianglesS2

次のようにキャンバスに描画するプログラムを書いてください。

図: 複数の色つき三角形を描画する

上図に出現するそれぞれの三角形は、幅10, 高さ10の直角二等辺三角形で、色は左から順に次のようになっています。

  1. 黒色 (0, 0, 0)
  2. 赤色 (255, 0, 0)
  3. 緑色 (0, 255, 0)
  4. 青色 (0, 0, 255)
  5. 水色 (0, 255, 255)
  6. 紫色 (255, 0, 255)
  7. 黄色 (255, 255, 0)

ヒント:

今回は三角形だけで35個あります。「横に並んだ色違いの三角形を指定の座標に描画する」というメソッドがあると楽です。または縦に考えて「縦に並んだ指定した色の三角形を指定の座標に描画する」というメソッドでもいいかもしれません。