質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.23%

Processingでカーソルが図形に重なると色と音が変わるプログラムで、1つ目の図形と2つ目の図形の音を変えたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,188

tenjin

score 276

前提・実現したいこと

Processingでカーソルが図形に重なると色が変わるプログラムで、1つ目の図形と2つ目の図形の色を変えた上で、流れる音も変えようとしています。例えば、カーソルが図形に重なる、と図形1は赤色で「ド」の音が、図形2は青色で「レ」の音がなるようにしたいです。minimライブラリを使って音源ファイルを読み込んでいます。

発生している問題・エラーメッセージ

以下がそのコードですが、現状では全ての図形で「ド」がなってしまいます。

該当のソースコード

import ddf.minim.*;
import ddf.minim.signals.*;
import ddf.minim.analysis.*;
import ddf.minim.effects.*;

ArrayList<MyShape> shapes = new ArrayList<MyShape>();

void setup() {
  size(720, 720);
  background(125);
  frameRate(100);
 //1
  MyShape ichi;
  ichi = new MyRect(70, 140, 32, 200);
  ichi.selectedFill = #CE2828;
  shapes.add(ichi);

  //2
  MyShape ni;
  ni = new MyRect(170, 150, 100, 32);
  ni.selectedFill = #1318F0;
  shapes.add(ni);
  ni = new MyRect(238, 182, 32, 43);
  ni.selectedFill = #1318F0;
  shapes.add(ni);
  ni = new MyRect(170, 225, 100, 32);
  ni.selectedFill = #1318F0;
  shapes.add(ni);
  ni = new MyRect(170, 257, 32, 43);
  ni.selectedFill = #1318F0;
  shapes.add(ni);
  ni = new MyRect(170, 300, 100, 32);
  ni.selectedFill = #1318F0;
  shapes.add(ni);
}

void draw() {
  update(mouseX, mouseY); 
  rect (310, 310, 100, 100);
  line(360, 0, 360, 720);
  line(0, 360, 720, 360);
  noStroke();

  background(102);

  for (MyShape shape: shapes) {
    if (shape.contains(mouseX, mouseY)) {

      fill(shape.selectedFill);
      Minim minim=new Minim(this);
      AudioSample sample=minim.loadSample("do.wav");
      delay(1000);
      sample.trigger();
    } else {
      fill(204);
    }
    shape.draw();
  }
}

// 長方形を表すクラス
class MyRect extends MyShape {
  float x, y, w, h;

  MyRect(float x, float y, float w, float h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
  }

  void draw() {
    rect(x, y, w, h);
  }

  boolean contains(float mx, float my) {
    return mx >= x && mx <= (x + w) && my >= y && my <= (y + h);
  }
}

// 任意の図形を表す抽象クラス
abstract class MyShape {
    int selectedFill;
  // 画面上へこの図形を描画するメソッド
  abstract void draw();

  // 指定位置がこの図形に含まれるかどうか判定するメソッド
  abstract boolean contains(float x, float y);
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

図形ごとに選択時の色をMyShapeクラスの属性としたように、鳴らすべき音もMyShapeクラスの属性(フィールド)として追加すればよいと思います。現在のコードに従うなら音はサンプリングファイル名で決まりますのでMyShapeクラスの属性にString型の「サンプリングファイル名」を持たせればよいと思います。

この辺りのプログラミングをするにはProcessingからちょっと離れて、Javaのクラスの定義の仕方について少し勉強してみるとよいと思います。

abstract class MyShape {
  int selectedFill;
  String soundFile;
}

class MyRect extends MyShape {
  float x, y, w, h;

  MyRect(float x, float y, float w, float h) {...}
}


のように定義していると、MyRectのインスタンスを作成してselectedFillやsoundFileを設定するのに一々以下のように3行かかなくてはなりません。

ni = new MyRect(238, 182, 32, 43);
ni.selectedFill = #1318F0;
ni.soundFile = "do.wav";

しかし、Javaのクラスの勉強をちょっとだけすると、「コンストラクターを定義すればインスタンス生成時に必要な情報が一度に指定できて便利」ということに気づくと思います。その方法を用いるなら次のように書けます。

abstract class MyShape {
  int selectedFill;
  String soundFile;

  MyShape() { // 何も指定しない場合は選択色が黒で、音のファイルは無し(=null)とする
    this(#000000, null);
  }

  MyShape(int selectedFill, String soundFile) {
    this.selectedFill = selectedFill;
    this.soundFile = soundFile;
  }
}

class MyRect extends MyShape {
  float x, y, w, h;

  MyRect(float x, float y, float w, float h, int selectedFill, String soundFile) {
    super(selectedFill, soundFile);
    ...
  }
}

void setup() {
  ...
  ni = new MyRect(10, 20, 30, 30, #FF0000, "do.wav");
  ...
}

...
void draw() {
  ...
  for (MyShape shape: shapes) {
    if (shape.contains(mouseX, mouseY)) {
      fill(shape.selectedFill);
      if (shape.soundFile != null) {
        Minim minim=new Minim(this);
        AudioSample sample = minim.loadSample(shape.soundFile);
        delay(1000);
        sample.trigger();
      }
    } else {
      fill(204);
    }
    shape.draw();
  }
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/07/09 15:32

    お返事ありがとうございます。
    以下のbackground()ともう一つの色(102)は存在しないのですが、具体的にご指摘いただけると助かります。
    void draw() {
    update(mouseX, mouseY);
    rect (310, 310, 100, 100);
    line(360, 0, 360, 720);
    line(0, 360, 720, 360);
    noStroke();

    background(102);

    キャンセル

  • 2017/07/09 16:01

    > カーソルが触れる前にも図形の形がわかるように色を付けておきたいのですが、現状だと何も指定しない場合の選択色を変えても図形部分も背景色と同じ色で区別がつかない

    これは本質問のコードで再現することでしょうか?それとも本コードへ修正を入れたときの話でしょうか?

    キャンセル

  • 2017/07/09 16:54

    混乱させてしまい、申し訳ございません。改めて新しい質問させていただきます。今回の質問ではお答えいただき、ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.23%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • トップ
  • Javaに関する質問
  • Processingでカーソルが図形に重なると色と音が変わるプログラムで、1つ目の図形と2つ目の図形の音を変えたい