66351


# 解決したいこと

createCanvas内に作成したボタンをそれぞれ作成・設定を書き、draw関数内でredbuttonのみ輪郭なしの赤の円のみを適用させたいが、全てボタンでellipseが適用される又は、コードを修正しても全てlineが適用されてしまい、思うように動作しない。

# 仮説と検証作業の結果

一度別々に動作を確認する為、ホイールをクリックして赤円が描ける、他のボタンも問題なく機能するかを確認しました。  
draw関数内で

[code]

    if (mouseIsPressed) {
        if (mouseButton === CENTER) {
          ellipse(mouseX, mouseY, 10 ,10);
          fill('red');
          noStroke()
        } else {
          line(mouseX, mouseY, pmouseX, pmouseY);
        }
      }
    
[/code]

# 結果

問題なく動作は確認できた。ただ、本来やりたかったことではない。

[code]

    let redButton;
    
    function setup() {
      createCanvas(710, 400);
      background(102);
      //線の色は最初は黒
      stroke('black');
      strokeWeight(5);
    
    
      //クリアボタン
      const clearButton = setButton('CLEAR', {
        x: 20,
        y: 370
      });
    
      clearButton.mousePressed(() => {
        strokeWeight(10);
        stroke(102);
      });
    
      //レッドボタン
      redButton = setButton('RED', {
        x: 110,
        y: 370
      });
    
      redButton.mousePressed(() => {
        fill('red');
        noStroke()
      });
    
      const greenButton = setButton('YELLOW', {
        x: 200,
        y: 370
      });
    
      greenButton.mousePressed(() => {
        stroke('yellow');
        strokeWeight(5);
      });
    }
    function draw() {
      if (mouseIsPressed) {
        if (redButton) {
          ellipse(mouseX, mouseY, 10 ,10);
        } else {
          line(mouseX, mouseY, pmouseX, pmouseY);
        }
      }
    }
    function setButton(label, pos) {
      const button = createButton(label);
      button.size(80, 30);
      button.position(pos.x, pos.y);
      return button;
    }
    
[/code]

自分が書いたdraw関数内のif文が怪しいと考えていますが、どうも上手く行きません。  
よろしくお願いいたします。


CC BY-SA 4.0
2020-05-05T14:41:42.113
66332
2020-05-06T11:45:54.857
39989
question
javascript processing
p5.jsでボタンを作成し、ボタン毎に機能させたい


p5.jsは初めてです。  
<https://editor.p5js.org/> にプログラムを貼り付ければ動くのですね。  
絵を描けるのが面白い。  
プログラミングの教育用ですかね。

redButtonではなく別の変数button_pressedを作って条件分岐させればいいのではないですかね。  
console.log(redButton)とやるとボタンオブジェクトのようなものが表示されました。  
redButtonは条件分岐に使えないと思います。

**管理者の方へ**  
<https://stackoverflow.com/tags/p5.js>
はp5.jsのタグがあるのに日本のstackoverflowはタグがないようです。  
追加したほうがいいと思います。

[code]

    let redButton;
    let button_pressed;
    
    function setup() {
      createCanvas(710, 400);
      background(102);
      //線の色は最初は黒
      stroke('black');
      strokeWeight(5);
    
    
      //クリアボタン
      const clearButton = setButton('CLEAR', {
        x: 20,
        y: 370
      });
    
      clearButton.mousePressed(() => {
        strokeWeight(10);
        stroke(102);
        button_pressed = "clear";
      });
    
      //レッドボタン
      redButton = setButton('RED', {
        x: 110,
        y: 370
      });
    
      redButton.mousePressed(() => {
        fill('red');
        noStroke();
        button_pressed = "red";
      });
    
      const greenButton = setButton('YELLOW', {
        x: 200,
        y: 370
      });
    
      greenButton.mousePressed(() => {
        stroke('yellow');
        strokeWeight(5);
        button_pressed = "yellow";
      });
    }
    function draw() {
      if (mouseIsPressed) {
        if (button_pressed === "red") {
          ellipse(mouseX, mouseY, 10 ,10);
        } else {
          line(mouseX, mouseY, pmouseX, pmouseY);
        }
      }
    }
    function setButton(label, pos) {
      const button = createButton(label);
      button.size(80, 30);
      button.position(pos.x, pos.y);
      return button;
    }
    
[/code]


CC BY-SA 4.0
2020-05-06T11:45:54.857
66351
2020-05-06T11:45:54.857
35180
66332
answer