javascript (p5.js) アラーム機能の作成

Question

前提・実現したいこと

アラーム機能を実装したいのですが
左ボタンをON状態でアラームON
左ボタンOFF状態でアラームOFF
にしたいのですが、ボタンと連動して音が正しく鳴らない(ON/OFFが実行されない)状態

不慣れな物で分かりにくい説明になってるかもしれませんがご教示頂けると幸いです

既に試した事・確認した事

function draw()内でalarm();を呼び出した場合は動作する(ON/OFFに関わらずアラーム自体が鳴るかを確認)

112行目にalarm();を呼び出した場合特定のフレーム数でのみON/OFFが実行される

112行目にalarmを呼び出した場合、アラームオシレーターはosc.amp(0.05, 0.05);だけが反映される(本来「ピピピ」と細切れな音になるはずが「ピー」という連続音になってしまう)

###該当のソースコード

/* 



*/

let osc; // 生成するオシレータを入れる

let b1 = {sw: false, state: false};   // 左のボタンの状態（連想配列）
let b2 = {sw_2: false, state_2: false};   // 右のボタンの状態（連想配列）

function setup() {
  createCanvas(600, 600);
  frameRate(60);
  
  osc = new p5.Oscillator(); // 発信機機能を生成
  osc.setType('square');     // 矩形波を設定（他の音：triangle,saw,sin）
  osc.freq(1000);            // 周波数 1kHz
  osc.amp(0);                // アンプの音量 音量0
  osc.start();               // 発信機スタート
}



//アナログ時計
function draw() {
  background(50);
  push();
  translate(width / 2, height / 2);
  let h = (hour() + minute() / 60) / 12 * TWO_PI;
  let m = (minute() + second() / 60) / 60 * TWO_PI;
  let s = second() / 60 * TWO_PI;
  
  //外枠
  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();
  
  //時針
  strokeWeight(5); draw_hands(100, h);

  //分針
  strokeWeight(3); draw_hands(125, m);
  
  //秒針
  strokeWeight(1); draw_hands(150, s);
  
  //デジタル時計
  digital_Time(0,0);
  pop();
  
//左ボタン
  let msg;
  let sw = button(80, 80, 50, b1)   // 指定した場所に指定した大きさのボタンを生成
  if (sw) msg = "ON";
  else    msg = "OFF";
  textSize(24);
  fill(225);
  text(msg, 60, 45);
  
//右ボタン
  let msg_2;
  let sw_2 = button_2(520, 80, 50, b2);
  if (sw_2) msg_2 = "ON";
  else    msg_2 = "OFF";
  textSize(24);
  fill(225);
  text(msg_2, 500, 45); 
  
//アラーム
  alarm();
}



function draw_hands(len, angle) {
 
  let x = len * sin(angle);
  let y = len * -cos(angle);
  stroke(255);
  line(0, 0, x, y);
}

//デジタル時計
function digital_Time(x,y) {
  noStroke();
  fill(225);
  textSize(28);
  textAlign(CENTER);
  //translateにより座標(0,0)がcanvasの中心にある
  text(hour() + ':' + minute() + ':' + second(),0,-50);
}

// 左ボタンを生成する関数
function button(x, y, size, obj) {  // objは状態を記憶する連想配列 sw, state
  push();
  if (mouseIsPressed && dist(x, y, mouseX, mouseY) < size / 2) {
    if (!obj.state) {      // いままでボタンが押されていなかったならば
      obj.state = true;    // ボタンを押されている状態obj.stateをtrueに変更する
      obj.sw = !obj.sw;    // スイッチobj.swを切り換える
     **//ここにアラーム関数入れる**
    }
  }else{
      obj.state = false;     // ボタンが押されてないので、obj.stateをリセットする
  }
  if (obj.sw) fill("red"); // obj.swの内容がtrueならば赤 （ON, true）
  else        fill("blue");// obj.swの内容がfalseならば青（OFF, false）
  strokeWeight(2.5);
  ellipse(x, y, size, size);
  pop();
  return obj.sw;           // ボタンの状態を返す
}



// 右ボタンを生成する関数
function button_2(x, y, size, obj) {  // objは状態を記憶する連想配列 sw, state
  push();
  if (mouseIsPressed && dist(x, y, mouseX, mouseY) < size / 2) {
    if (!obj.state) {      // いままでボタンが押されていなかったならば
      obj.state = true;    // ボタンを押されている状態obj.stateをtrueに変更する
      obj.sw_2 = !obj.sw_2;    // スイッチobj.swを切り換える
    }
  }else{
    obj.state = false;     // ボタンが押されてないので、obj.stateをリセットする
  }
  if (obj.sw_2) fill("red"); // obj.swの内容がtrueならば赤 （ON, true）
  else        fill("blue");// obj.swの内容がfalseならば青（OFF, false）
  strokeWeight(2.5);
  ellipse(x, y, size, size);
  pop();
  return obj.sw_2;           // ボタンの状態を返す
}



// アラーム
function alarm(){
  if (frameCount % 10 == 0)       osc.amp(0.05, 0.05);  // 0.05秒かけて音量を1.0にする
  else if (frameCount % 10 == 5)  osc.amp(0, 0.05);    // 0.05秒かけて音量を0にする
}

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

Answer 1

112行目にalarm();を呼び出した場合特定のフレーム数でのみON/OFFが実行される
112行目にalarmを呼び出した場合、アラームオシレーターはosc.amp(0.05, 0.05);だけが反映される

「//ここにアラーム関数入れる」この行のことですよね？

ここに入るのはボタンを押した一瞬だけです（高速でON・OFFを繰り返さないようにstateを作ったんですよね？）
その瞬間がframeCount % 10 == 0なら音が鳴りますし（「ピー」）、そうでないなら鳴りません。
当然「ピピピ」にもならないです。

alarm()を入れるなら、if (obj.sw)のほうじゃないですか？

// 左ボタンを生成する関数
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()

Oscillatorが動き続けている？のも何となく気持ち悪いです（明示的にstart・stopしたほうが意図が分かりやすくないですか）

button_2()は明らかに重複コードですよね（どうまとめるかですが、b1・b2を拡張しました。クラスにしてもいいかもしれません）

// コンストラクタで指定できます 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();
  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;
  }
}