0

解決したいこと

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

仮説と検証作業の結果

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

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

結果

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

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;
}

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

1 件の回答 1

1

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

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

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

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;
}

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。