回答編集履歴

見直しキャンペーン中

2023/07/29 08:39

投稿

TN8001

スコア9357

test CHANGED Viewed

@@ -1,301 +1,151 @@
 > 112行目にalarm();を呼び出した場合特定のフレーム数でのみON/OFFが実行される
 > 112行目にalarmを呼び出した場合、アラームオシレーターはosc.amp(0.05, 0.05);だけが反映される
 「//ここにアラーム関数入れる」この行のことですよね？
 ここに入るのはボタンを押した一瞬だけです（高速でON・OFFを繰り返さないように`state`を作ったんですよね？）
 その瞬間が`frameCount % 10 == 0`なら音が鳴りますし（「ピー」）、そうでないなら鳴りません。
 当然「ピピピ」にもならないです。
 `alarm()`を入れるなら、`if (obj.sw)`のほうじゃないですか？
-```Processing
+```js
 // 左ボタンを生成する関数
 function button(x, y, size, obj) {
   push();
   if (mouseIsPressed && dist(x, y, mouseX, mouseY) < size / 2) {
     if (!obj.state) {
       obj.state = true;
       obj.sw = !obj.sw;
     }
   } else {
     obj.state = false;
   }
   if (obj.sw) {
     fill("red");
     alarm();
   } else {
     fill("blue");
     osc.amp(0, 0.05);
   }
   strokeWeight(2.5);
   ellipse(x, y, size, size);
   pop();
   return obj.sw;
 }
 ```
 ---
 以下勝手に改良^^;
 この場合は`mouseIsPressed`より、`mousePressed()`のほうが扱いやすいと思います（押したときに1回だけ呼ばれるので）
 [reference | mousePressed()](https://p5js.org/reference/#/p5/mousePressed)
 `Oscillator`が動き続けている？のも何となく気持ち悪いです（明示的に`start`・`stop`したほうが意図が分かりやすくないですか）
 `button_2()`は明らかに重複コードですよね（どうまとめるかですが、`b1`・`b2`を拡張しました。クラスにしてもいいかもしれません）
-```Processing
+```js
 // コンストラクタで指定できます new p5.Oscillator([freq], [type])
 const osc = new p5.Oscillator(1000, 'square');
 // mousePressed()でstateがいらなくなった buttonを共通化するためx, y, sizeを追加
 const b1 = { x:80, y:80, size:50, sw:false };
 const b2 = { x:520, y:80, size:50, sw:false };
 function setup() {
   createCanvas(600, 600);
   frameRate(60);
 }
 function draw() {
   background(50);
+  push();
+  translate(width / 2, height / 2);
+  noFill();
+  stroke(255);
+  strokeWeight(5);
+  circle(0, 0, 445);
   push();
-  translate(width / 2, height / 2);
-  noFill();
-  stroke(255);
-  strokeWeight(5);
-  circle(0, 0, 445);
-  push();
   for (let i = 0; i < 12; i++) {
     rotate(TWO_PI / 12);
     noStroke();
     fill(255);
     circle(0, -185, 32);
   }
   pop();
   const h = (hour() + minute() / 60) / 12 * TWO_PI;
   const m = (minute() + second() / 60) / 60 * TWO_PI;
   const s = second() / 60 * TWO_PI;
   drawHands(100, h, 5); // strokeWeightはdrawHands内に
   drawHands(125, m, 3);
   drawHands(150, s, 1);
   digitalTime(0, -50); // 引数を渡すならちゃんと使ったほうがｗ
   pop();
   toggleButton(b1);
   toggleButton(b2);
   if (b1.sw) {
     alarm();
   }
 }
 function drawHands(len, angle, weight) {
   const x = len * sin(angle);
   const y = len * -cos(angle);
   stroke(255);
   strokeWeight(weight);
   line(0, 0, x, y);
 }
 function digitalTime(x, y) {
   noStroke();
   fill(225);
   textSize(28);
   textAlign(CENTER);
   // nfは1を01にします nf(値, [整数部の桁数], [少数部の桁数])
   text(nf(hour(), 2) + ':' + nf(minute(), 2) + ':' + nf(second(), 2), x, y);
 }
 function toggleButton(obj) {
   fill(obj.sw ? 'red' : 'blue'); // 条件演算子（3項演算子）でスッキリします
   strokeWeight(2.5);
   circle(obj.x, obj.y, obj.size);
   textSize(24);
   fill(225);
   text(obj.sw ? 'ON' : 'OFF', obj.x - 20, obj.y - 35);
 }
 function alarm() {
   if (frameCount % 10 == 0) {
     osc.amp(0.05, 0.05);
   } else if (frameCount % 10 == 5) {
     osc.amp(0, 0.05);
   }
 }
 function mousePressed() { // マウスを押したとき...
   if (dist(b1.x, b1.y, mouseX, mouseY) < b1.size / 2) {
     b1.sw = !b1.sw;
     if (b1.sw) {
       osc.start();
     } else {
       osc.stop();
     }
   }
   if (dist(b2.x, b2.y, mouseX, mouseY) < b2.size / 2) {
     b2.sw = !b2.sw;
   }
 }
 ```