Processingの課題がわかりません。

Question

Processing3.5.4です。
 簡便な玉当てゲームを作成
 基本的な動作
 実行すると、ウィンドウ内に動くボール（円）とバーがある
 ボールがウィンドウの下側へ出たら（消えれば）、ウィンドウ内の
再スタート用の位置から、再び動き始める
 バーがウィンドウの下の壁に沿うようにあり、マウスの操作で左右
に動くようにする
 マウスの動作による限界は、そのまま許容（バーの左端の位置など）
 ボールがバーの上部に当たれば、ボールを上へ跳ね返す
 得点は開始時において0点とする
 ボールがバーに当たれば ＋1点
 ボールがウィンドウの下へ出れば（バーで打ち返せず消えれば）－1点
 停止ボタンで終了
これを次のような条件で作らなければいけません。
（１） ウィンドウサイズは横480ピクセル、縦480ピクセルとする。
（２） 動く円（ボールとも記述）の動作における開始位置について、x座標100ピクセル、
y座標240ピクセルとする。※ボールの色は任意に変更して可
（３） 速度に関する変数の値について、横方向2、縦方向3とする。
（４） 左右の壁に当たった場合、横方向の向きを変え、上の壁に当たった場合、縦方
向の向きを変えるとする。
(5)マウスで操作可能な横棒（以下バーと記述する）をlineメソッドを用いて、下の壁に
描画する。バーの左の端のx座標の位置をマウスのx座標の位置とする。またバーの
横幅は100ピクセルとする。strokeCapメソッドの利用については任意とする。
（６） 前面・背面の関係において、ボールはバーより前面とする。また得点の表示は
ボールより前面とする。
（7） バーの太さは30ピクセルとする。今回の題材ではウィンドウの下側の境界線上に
線を描画しているので、実際に目に見えるのは、半分の15ピクセルであるとする。
（８） 上から下へ動くボールにバーの上部が当たると、縦方向の向きを変えて跳ね返る
ようにする。
（９） バーの横側（左右）にボールが衝突した場合については、簡単のため扱わない。
（10） マウスのクリックにより、何らかの変化をもたらす。
（1１） 得点を右上に表示させる。文字の大きさや位置は、任意に変更しても可。
この条件の（1）から(4)までは出来ました。

/*
*ball6_4
*簡単な玉当てゲームの準備
*/

float bx = 100, by = 240; //ball_x,ball_y,(ボールのとして利用する）円の中心のx座標とy座標の値
float diameter = 30;//
float vx = 2, vy = 3;
float restartX = 240, restartY = 15; //再スタートの際のボールの位置
 
/* adjustment_parameter ,調節用パラメータ、壁やバーへのめり込み防止に用いる値、
動作を確認しながら値を調節*/
float ap = 0.5;
int score = 0; //得点

void setup() {
  size(480,480);
  textSize(32);//表示させる得点の文字の大きさ
}
  
  void draw() {
    background(204);
    
    //再スタート処理
    if (bx < 0 || width < bx || by < 0 || height < by ) {
      bx = restartX;
      by = restartY;
    }
//　（ボールとして利用する）円
fill(0,255,0);
ellipse(bx,by,diameter,diameter);

//ボールが右の壁に当たると、横方向の向きを変える
if (bx + diameter / 2 > width){
  vx = -vx;
  bx = width - diameter / 2 - ap; //念のため壁の内側にボールの中心を戻しておく
}

//ボールが左の壁に当たると、横方向の向きを変える
if (bx - diameter / 2 < 0){
  vx = -vx;
  bx = diameter /  2 + ap; //念のため壁の内側にボールの中心を戻しておく
}

//ボールが上の壁に当たると、縦方向の向きを変える
if (by - diameter / 2 < 0){
  vy = -vy;
  by = diameter/ 2 + ap; //念のため壁の内側にボールの中心を戻しておく
}

// (ボールとして利用する）円の位置の変化
bx += vx;
by += vy;

//ボールの中心のy座標が下の壁を越えればスコア（得点）を1減らす
if (height < by) {
  score -= 1; // score = score -1;
}

//得点の表示
 fill(255,255,255);
 text("Score: "+score,300,60); // 横300ピクセル、縦60ピクセルの位置に得点を表示
  }

（５）から（1１）までが出来ません。
続きを教えてください。

Comments

[y_waiwai]

このままではコードが読みづらいので、質問を編集し、</>(コードの挿入)ボタンを押し、出てくる’’’の枠の中にコードを貼り付けてください

[hoshi-takanori]

課題は自分でやるべきだと思いますが、とりあえず (5) は、まずバーの位置を表す変数を用意して、mouseMoved メソッドでマウスが動いたらバーの位置を更新すれば良いのでは。

あと、コードを貼るときは markdown 機能を使ってください。
https://teratail.com/help/question-tips#questionTips35

Answer 1

teratailは宿題代行サイトではありません。
やってみたうえで、何がわからないのか・どううまくいかないのかを明確にしてください。

何かを作りたいのでコードを書いてほしい、学校の課題を解いてほしい等の質問は、具体的にプログラミングで困っている質問ではないと考え、推奨していません。

ヘルプ | 推奨していない質問

初めてのご利用の際は、こちらを一通りご確認ください。
ヘルプ | 質問するときのヒント

具体的に「ここの考え方がわからない」・「この関数（メソッド）の使い方がわからない」等がある場合は、質問を編集するなりコメントするなりしてください。お答えします^^

---

課題の答えを書いても仕方がないのでヒントだけ。
リンクはすべて公式サイト（英語）ですが、例もついているし自動翻訳で十分読めると思います。

(5)

line() / Reference / Processing.org
mouseX / Reference / Processing.org
strokeCap() / Reference / Processing.org

(6)

後に描く（コードで下にある）ほど、前面にあるように見えます。

(7)

strokeWeight() / Reference / Processing.org
lineを描いた後戻さないとellipseにも影響するので注意。

(8)
(9)

たぶんここがわからないということなんでしょうが、ほかの3辺（上左右）と基本は同じです。
それプラス「bxがバーの範囲内だったら」という条件も満たしている場合に限り反転させます。

もし by（+半径+15）がheight以上
かつ bxがmouseX以上
かつ bxがmouseX+100以下
ならば...

(10)

mouseClicked() / Reference / Processing.org

(11)

表示はできているので、(9)で＋１する処理。

---

Processing3.5.4です。

今最新はProcessing 4.0 beta 8になっています。
Download / Processing.org

ベータ版ですが、公式も３系よりはましとおっしゃっています。

The beta is the default download on the site because it's more usable than the 3.5.4 release.
ベータ版は、3.5.4リリースよりも使いやすいため、サイトのデフォルトのダウンロードです。

processing/processing4: Processing 4.x releases (currently in “beta”) that use Java 17

ちょうど今回コントリビュートしたので、よかったら使ってみてください^^
Release Processing 4.0 beta 8 · processing/processing4

Comments

[Processing]

ありがとうございます。今後わからない箇所を明確にしてから質問します。

[Processing]

if((by + 45 >= height) && (bx >= mouseX) && (bx <= mouseX + 100));(8)(9)のここまでをやったのですが、跳ね返すやり方が分からないです。

[TN8001]

//ボールが左の壁に当たると、横方向の向きを変える
if (bx - diameter / 2 < 0) {
vx = -vx;
bx = diameter / 2 + ap;
}
//ボールが右の壁に当たると、横方向の向きを変える
if (bx + diameter / 2 > width) {
vx = -vx;
bx = width - diameter / 2 - ap;
}

これが左右で組ですよね？（より対称に見えるように順番逆にしています）

では上下も同じようなことになりますよね？（上が左と似ていて、下は右と似ています）

//ボールが上の壁に当たると、縦方向の向きを変える
if (by - diameter / 2 < 0) {
vy = -vy;
by = diameter/ 2 + ap;
}
//ボールがバーに当たると、縦方向の向きを変える
if ((by + 45 >= height) && (bx >= mouseX) && (bx <= mouseX + 100)) {
vy = -vy;
by = height - 。。。
}

もちろんバーの厚み分、引く数字は変わってくるかと思います。

あと日本語で書くのが楽だったので「以上・以下」としましたが、「より大きい・未満」のほうがいいかもしれません（大差はないですが「なんでここだけ>=なの？」って突っ込まれるかも^^;

[Processing]

完璧に出来ました。ありがとうございます。

[TN8001]

> 完璧に出来ました。ありがとうございます。

こちら見てちょっとがっかりしました。
[Processing 3.5.4で矢印で横棒を動かすやり方](https://teratail.com/questions/hqbpozp4ldwa14)

(６)の前面背面が指示通りになっていない
(７)で注意した`strokeWeight`を戻していない
(８)バーでの反射が明らかにおかしい（急に飛ぶような挙動）