課題集
【レベル１】図形描画
1️⃣１．日本の国旗を描いてください
- 真ん中の丸は正確には真っ赤じゃないそうですが真っ赤でも良いです。
ヒント
1️⃣２．ヨーロッパの国の国旗を一つ描いてください
- イギリスとかフランスとかドイツとか。
- おすすめはフィンランド！
ヒント
1️⃣３．星形を描いてください
- いわゆる「星形」を描いてください。頂点の数は５個以上にしてください。
- （応用）星形ができたら、自分の好きな図形を描いてみてください。ロボットの顔とかもいいでしょう。rectやellipseと一緒に描いてみると面白いでしょう。色や線の太さも工夫してみてください。
ヒント
「複雑な図形を描こう」を参考にしてください。
【レベル２】アニメーション
2️⃣４．マウスについてくる長方形を作ってください
ヒント
「図形を動かそう」を参考にしてください。「マウスポインターについてくる円」を変更しましょう。
2️⃣５．マウスの上下で大きさが変わる三色信号を作ってください
ヒント
「図形を動かそう」を参考にしてください。 マウスを上下すると3つの円の大きさが変わります。
2️⃣６．マウスについてくる三角形を作ってください
ヒント
三角形は triangle() という命令を使います。
失敗例
円や四角形を真似してmouseX、mouseYを同じように使うと、
void setup(){ size(600,400);}
void draw(){ background(0); triangle(mouseX,mouseY,100,50,100,100);}こうなります。
三角形の3つの頂点のうちひとつしか動いてないですね。
成功例
2️⃣７．３つ以上の図形がマウスの動きにつれて動くようにしてください
かっこいい色の取り合わせにしてください！
【レベル３】変数、if文
3️⃣８．明るい色の円だけがランダムで出るようにしてください
noStroke() を使うときれいに見えますよ！
ヒント
「乱数を使おう」を参考にしてください。 また、色の明るさは、0〜255の数字で表されます。小さいほど暗く、大きなほど明るくなります。
3️⃣９．自動で大きくなる円を作ってください
ヒント
「変数を使おう」を参考にしてください。
3️⃣１０．ランダムな場所に描かれる三角形を作ってください
ヒント
「変数を使おう」を参考にしてください。
変数は2個、random()は2回使います。
3️⃣１１．キャラクターを往復させてください
- 好きな画像を画面の左右に往復させてください。
ヒント
「端で跳ね返るボール」と「画像を表示しよう」を参考にしてください。
完成サンプル
🆒１２．壁でつぶれるキャラクター
※チャレンジ問題です！腕自慢は挑戦してみよう！
- 好きなキャラクターの画像が左右に往復します。 - キャラクターは、壁にぶつかるときにつぶれるようにしてください。
ヒント
画像を表示するimage関数の使い方を工夫すると、画像の横幅を変えて、「画像をつぶす」ことができます。
image(画像の変数, x座標の位置, y座標の位置, 画像の横幅, 画像の高さ);
たとえば、横幅100px、縦200pxの画像があったとき、これを image(karate, 0, 0, 50,200); とすると、横幅が半分につぶれます。
完成サンプル
サンプルコード
//※注：ここで掲載したプログラムが唯一の解答でもありませんし、最善とも限りません。// 各自で工夫してみてください。
//------------------------------------------------------------// Processing：課題集// 12.チャレンジ課題：壁でつぶれるキャラクター//------------------------------------------------------------
//（解説）// このプログラムでは、三角関数等は使っていません（三角関数を使えば数行程度のプログラムで// 実現できますが難解なので、ここでは割愛します）。// その代わり、キャラクターの動く経路を細かく場合分けして、それぞれの場合でどう処理するか// （動く方向やつぶれ処理など）を決めています。// 経路の各場合は具体的には、// ①そのままの大きさで右に動いている場合// ②右端でつぶれていく場合// ③右端で伸びていく場合// ④そのままの大きさで左に動いている場合// ⑤左端でつぶれていく場合// ⑥左端で伸びていく場合// があります。// 各場合から次の場合に移行するときに、パラメータ（x_speedやhaba_speed）を調整して動作を// 決めています。
// ＜詳細な動き＞ ※実際に絵を描いてみると分かりやすいでしょう。// 画面は横600としています。// 画像の幅（haba）は100としています。従って、画像の右辺が右端に達する位置とは600-100で// x=500になります。// 画像がつぶれていって半分（haba=50）になると、今度は伸び始めます。//// ここでは、画像（キャラクタ）が「左に動いている」「右に動いている」「停止」は、// パラメータx_speedをそれぞれ-5、5、0とすることで実現しています。// また、「つぶれていく」「伸びていく」「そのまま」も、// パラメータhaba_speedをそれぞれ-5、5、0とすることで実現しています。//// 右に動いているときで、x=500の位置になると、画像はつぶれ始めます。（①→②）// つぶれ終わる(haba=50,x=550)と、今度は画像は逆に伸び始めます。（②→③）// 同時に、画像の動きも反転して左への動きに変わります。（③）// その後、伸び終わり(haba=100,X=500)、左へ動き続けます。（③→④）//// 左に動いているときで、ｘ＝0の位置になると、画像はつぶれ始めます。（④→⑤）// 同時に、画像の動きは停止（x=0、つまりx_speed=0）します。（⑤）// つぶれ終わる(haba=50)と、今度は画像は逆に伸びていきます。この時も画像の動きは停止（x=0）のままです。（⑤→⑥）// 伸び終わる(haba=100)と、画像は右へ動き始めます。（⑥→①）////// ＜動きのまとめ＞// 場合 xの範囲 xの変化 ｘ_speed habaの変化 haba_speed// ------------------------------------------+----------+---------+--------+-------------+-----------// ①そのままの大きさで右に動いている場合 0～500 x += 5 5 haba は 100 0// ②右端でつぶれていく場合 500～550 x += 5 5 haba += -5 -5// ③右端で伸びていく場合 500～550 x += -5 -5 haba += 5 5// ④そのままの大きさで左に動いている場合 0～500 x += -5 -5 haba は 100 0// ⑤左端でつぶれていく場合 0 x は 0 0 haba += -5 -5// ⑥左端で伸びていく場合 0 x は 0 0 haba += 5 5////---------------------------------------------------------------------------------------------------------
float x = 0;float x_speed = 5;float haba_speed = 0;float haba = 100;PImage tento;
void setup() { size(600, 400); tento = loadImage("img.png");}
void draw() { background(0);
//---右端処理--- //右に動いていて(x_speed >0)、画像の右辺が右端に達した (x > 500)ら、つぶれはじめる。右への動きは継続。（②） if ((x_speed >0) && (x > 500)) { haba_speed = -5; } //右に動いていて(x_speed >0)、つぶれ終わった((haba_speed < 0) && (haba < 50))ら、伸び始めて、同時に左に動き始める（③） if ((x_speed >0) && (haba_speed < 0) && (haba < 50)) { x_speed = -5; haba_speed = 5; } //左に動いていて(x_speed <0)、伸びおわりになった((haba_speed > 0) && (haba > 100))ら、伸びるのをやめる（④） if ((x_speed <0) && (haba_speed > 0) && (haba > 100)) { haba_speed = 0; }
//---左端処理--- //左に動いていて(x_speed < 0)、左端に達した(x < 0)ら、移動停止して、同時につぶれはじめる（⑤） if ((x_speed < 0) && (x < 0)) { x_speed = 0; haba_speed = -5; } //左端に停止中(x_speed == 0)、つぶれ終わった((haba_speed < 0) && (haba < 50))ら、伸び始める（⑥） if ((x_speed == 0) && (haba_speed < 0) && (haba < 50)) { haba_speed = 5; } //左端に停止中(x_speed == 0)、伸び終わった( (haba_speed > 0) && (haba > 100))ら、右へ動き始める（①） if ((x_speed == 0) && (haba_speed > 0) && (haba > 100)) { x_speed = 5; haba_speed = 0; }
//描画 x += x_speed; haba += haba_speed; image(tento, x, 100, haba, 100);}※画像ファイルは各自で用意し、img.pngという名前にしてプログラムと同じフォルダに置いて下さい
【レベル４】キー入力操作
4️⃣１３．色見本を完成させてください
- 下のコードをもとにして、キーを押すと円の色が変わる色見本を作ってください。
- このコードでは、rキーで赤の色だけが変わります。
void setup(){ size(600,400);}
int r = 0;void draw(){ background(0); fill(255,0,0); text(r,100,100); stroke(255,255,255); fill(r,0,0); ellipse(300,200,200,200);}
void keyPressed(){ if(key == 'r'){ r = r + 10; }}修正点
- rのキーで赤の光が強くなり、gのキーで緑の光が強くなり、bのキーで青の光が強くなるようにする。
- 光の強さが255を超えると0に戻るようにする。
- 赤の光の強さ、緑の光の強さ、青の光の強さを文字で表示する。
ヒント
text(文字, X座標, Y座標) で文字を表示できます。 text（テキスト） は英語で文字という意味です。
textSize(フォントのサイズ) で表示文字の大きさを変えることができます。大きく表示してみましょう。
完成版
4️⃣１４．ミサイル発射台を作ってください
- 右矢印(RIGHT)、左矢印(LEFT)で左右に動きます。
- 上矢印(UP)でミサイルを発射します。
ヒント
「キーボードで図形を動かそう」を参考にしてください。
ミサイルの座標をあらわす変数も必要なので追加しましょう。
ミサイルを発射するとき、ミサイルが発射台に来るようにします。
完成サンプル
4️⃣１５．ボールキャッチゲームを作ってください
- 左右矢印キーでバーが動きます。
- ボールは画面上部の左右ランダムな位置から落ちてきます
- バーでボールをキャッチすると点が入ります。
ヒント
「端で跳ね返るボール」や「キーボードで図形を動かそう」、「当たり判定をしよう」を参考にしてください。
点数の表示の仕方は課題「色見本を完成させてください」を見るとわかります。
完成サンプル
【レベル５】for文、while文
5️⃣１６．円を横に並べよう
- 円を横に３つ並べてください。
- ただし、while文かfor文を使ってください。
ヒント
「繰り返し」を参考にしてください。
完成イメージ
5️⃣１７．円を重ねよう
- 円を10個重ねて表示して下さい。
- それぞれの円はfill()とrandom()を使っていろんな色にしてください。
- while文かfor文を使ってください。
完成イメージ
5️⃣１８．自分の好きなチェック柄を作ろう
- 色を2色以上使って、自分の好きなチェック柄を作ってください。
- 「バーバリー」のチェック柄みたいなかっこいいのを目指そう！
- for文を使ってください。
ヒント
「繰り返しで模様を作ろう」を参考にしてください。
5️⃣１９．チェッカーフラッグを描いてください
- F1などのカーレースで使われるチェッカーフラッグを描いてください。
- 色は白黒でなくてもかまいません。
ヒント
「図形を敷き詰めよう」を参考にしてください。
【レベル６】配列、関数
6️⃣２０．雨を降らせてください
- 配列で雨を作ります。
- 雨が下まで行ったら、また上から降らせてください。
- 上に戻す時も位置をランダムにすると自然になってなお良いです。
ヒント
「配列を使おう１（一次元配列）」を参照してください。「５．ボール落下」 「６．星スクロール」の例題が参考になります。
6️⃣２１．雪を降らせてください
- 雨と違って、降りてくるスピードをランダムにします。
- 左右にも少し動くようにするとそれらしくなります。
6️⃣２２．複数のボールキャッチゲームを作ってください
※この課題は、これより前の課題「１５．ボールキャッチゲームを作ってください」の発展版ですので、やっていない人はまずそれをやってからこの課題に取り組んでみてください。
- ボールは3つ以上作ってください。
- ボールの色はすべて変えてください。
- ボールをキャッチすると点数が入ります。
- （応用） バーは上下にも動くようにしてみてください。いろいろ改造してみてください。
ヒント
課題集「ボールキャッチゲーム」を参考にしてください。
【レベル７】オブジェクト指向
7️⃣２３．複数のボールキャッチゲームをオブジェクト指向で作ってください
「配列、関数」のところで作成した複数のボールキャッチゲームを、オブジェクト指向でつくてみましょう。
7️⃣２４．迷路でプレイヤーを動かそう
ポイント
1. 迷路のマップを作ろう
迷路のマップは二次元配列で管理しよう。ここでは 壁を１ として、 プレイヤーが歩ける場所を０ として書いています。
int[][] map = { {1, 1, 1, 1, 1, 1, 1, 1, 1}, {1, 0, 0, 0, 0, 0, 0, 0, 1}, {1, 0, 0, 0, 0, 0, 0, 0, 1}, {1, 0, 0, 0, 0, 0, 0, 0, 1}, {1, 1, 1, 1, 1, 1, 1, 1, 1}};そしたら思った通りの迷路になっているか、表示して確認してみよう。
ここでは歩ける場所を白で、壁を赤で表示しています。
for (int i = 0; i < 9; i++){ // 2次元配列の横の長さ分繰り返す for (int j = 0; j < 5; j++){ // 2次元配列の縦の長さ分繰り返す if (map[j][i] == 0){ fill(255, 255, 255); } else if (map[j][i] == 1){ fill(255, 0, 0); } rect(i * 50, j * 50, 50, 50); //１マス50の大きさ }}表示すると赤の壁に囲まれたマップができました！スート地点とゴールを決めて、迷路を作ってみよう！
2. プレイヤーをクラスを使って表示してみよう
クラスを作るときのヒント
- プロパティ（クラスの持っている変数）= そのものが持っている要素
- メソッド（クラスの中の関数）＝ そのものができること
例：車のクラスを例に考えてみよう
車が持っている要素（プロパティ）
- 現在位置
- 高さ
- 横幅
- 速さ
車ができること（メソッド）
- 前進
- 後退
これをコードで表すと….
class Car{ // プロパティ int x; // x軸の現在位置 int y; // y軸の現在位置 int height; // 高さ int width; // 横幅 int speed; // 速さ
// メソッド void forward(){ // 前進 }
void back(){ // 後退 }
void display(){ // 表示するためのメソッド rect(x, y, width, height); }}実際にクラスを使ってプレイヤーを追加してみよう
プレイヤーが持つ要素とできることを考えて、クラスで書いてみて、画面に表示できるようにしよう。
ヒント
class Player{ int □; int □;
Player(int x1, int y1){ // コンストラクタを使って初期値を設定しよう。 □ = x1; □ = y1; }
void display(){ // プレイヤーを表示するためのメソッド fill(0, 0, 255); rect(□*50, □*50, 50, 50); }}※コンストラクタを忘れたらオブジェクト指向2から復習しよう
下の画像の例では、青色がプレイヤーで、緑がゴールだよ！
プレイヤーが自由に動けるようにしよう
矢印キーを押して上下左右に動けるようにしてみよう。動かすメソッドをプレイヤークラスに追加するのがポイント！
ヒント
class Player{ int □; int □;
Player(int x1, int y1){ // コンストラクターを使って初期値を設定しよう。 □ = x1; □ = y1; }
void move(int inputKey) { //プレイヤーを上下左右に動かすメソッド if (inputKey == 0) { // 上方向 □ -= 1; } if (inputKey == 1) { // 下方向 } if (inputKey == 2) { // 左方向 } if (inputKey == 3) { // 右方向 } }
void display(){ // プレイヤーを表示するためのメソッド fill(0, 0, 255); rect(□*50, □*50, 50, 50); }}
void keyPressed() { if (keyCode == UP) { // プレイヤークラスのmove()を呼び出そう。 // 上方向 } if (keyCode == DOWN) { // 下方向 } if (keyCode == LEFT) { // 左方向 } if (keyCode == RIGHT) { // 右方向 }}壁がある場所に移動できないようにしよう
今の状態だと壁のある場所にも移動できてしまいます。
move()メソッドの条件文に 「壁ではない場合」 という条件を付け足しましょう。
ヒント
class Player{ int □; int □;
Player(int x1, int y1) { // コンストラクターを使って初期値を設定しよう。 □ = x1; □ = y1; }
void move(int inputKey) { //プレイヤーを上下左右に動かすメソッド if (inputKey == 0 && !isWall(□, □)) { // 上方向に壁がない場合に上方向に動く // 上方向 □ -= 1; } if (inputKey == 1 && □□□) { // 下方向 } if (inputKey == 2 && □□□) { // 左方向 } if (inputKey == 3 && □□□) { // 右方向 } }
// 壁かどうかを判定するメソッド // Trueを返す場合その位置は壁である、Falseであれば壁ではない boolean isWall(int dx, int dy){ if ( □□□ ) // dx, dyの位置が壁である場合trueを返す return true;
return false; // そうでない場合はfalseを返す }
void display(){ // プレイヤーを表示するためのメソッド fill(0, 0, 255); rect(□*50, □*50, 50, 50); }}3. やってみよう
- 自分なりの迷路を作ってみましょう
- ゴールに到達したときに、クリア画面を表示させてみよう
7️⃣２５．簡単なシューティングゲームをクラスを使って作ってみよう
- プレイヤーを追加して上下左右移動できるようにしてみよう
- プレイヤーが球を発射できるようにしてみよう
- ランダムに降ってくる敵を追加してみよう
- 球が敵に当たったときの当たり判定を追加しよう
- 敵を倒した分のスコアが表示されるようにしてみよう
