解決したいこと
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文が怪しいと考えていますが、どうも上手く行きません。
よろしくお願いいたします。