如何在 p5.js 中制作圆形按钮？

Question

我正在制作一个 p5.js 项目。我在其中生成一个列表（包含 8 个元素）并将它们设置为 1/0。每个代表一个位（1,2,4,8,16,32,64,128），如果元素是 1，我添加位数组的索引。

例如i = 3、states[i] = 1、bit[i] = 8所以我给一个数字加8，因为那个位的当前状态是1。

还有一个就是它根据位状态画了一个圆red/green。

现在您已经了解了基本思想，我想添加用户按下圆圈以更改其状态（从 1 到 0 和从 0 到 1）的功能。我知道如何改变状态，但我如何测试用户是否真的按下了按钮（注意按钮是一个圆圈）？

到目前为止，这是我的代码：

var array = [0,1,0,1,1,1,1,1];
var values = [128,64,32,16,8,4,2,1];
function setup(){
  //console.log(array);
  createCanvas(600,600);
  textStyle(BOLDITALIC);
  textSize(50);
}
function draw(){
  clear();
  var a = calculate(array);
  background(51);
  fill(255);
  text(a,250,500);
  let crcl = 50;
  let d = 20;
  let r = d/2;
  for (let i = 0; i < 8; i++){

  }
  for (let i = 0; i < 8; i++){
    if (array[i] === 1){
      fill(0,255,0);
      circle(crcl, 50, d);
    } else {
      fill(255,0,0);
      circle(crcl, 50, d);
    }
    crcl += 50;
  }
}
function calculate(array){
  let a = 0;
  for (let i = 0; i < 8; i++){
    if (array[i] === 1){
      a += values[i];
    }
  }
  return a;
}

我完成的代码，给那些只想看代码的人！：

var array = [0,1,0,1,1,1,1,1];
var values = [128,64,32,16,8,4,2,1];
var positonsX = [50,100,150,200,250,300,350,400];
var crcl = 50;
var d = 20;
var r = d/2;
function setup(){
  //console.log(array);
  createCanvas(600,600);
  textStyle(BOLDITALIC);
  textSize(50);
}
function draw(){
  clear();
  let crcl = 50;
  d = 20;
  r = d/2;
  a = calculate(array);
  background(51);
  fill(255);
  text(a,250,500);
  for (let i = 0; i < 8; i++){
    if (array[i] === 1){
      fill(0,255,0);
      circle(crcl, 50, d);
    } else {
      fill(255,0,0);
      circle(crcl, 50, d);
    }
    crcl += 50;
  }
}
function calculate(array){
  let a = 0;
  for (let i = 0; i < 8; i++){
    if (array[i] === 1){
      a += values[i];
    }
  }
  return a;
}
function mouseClicked(){
  for (let i = 0; i < 8; i++){
    if (dist(mouseX,mouseY,positonsX[i],50) <= d){
      array[i] = 1 - array[i];
    }
  }
}

Answer 1

您可以检测一个点（在您的例子中，mouseX, mouseY）是否在一个圆内，方法是比较点与圆心之间的距离，并将其与圆的半径进行比较。如果距离小于半径，则点在圆内。

您可以 google "detect if point is inside circle" 获得大量结果。无耻的自我推销：this tutorials解释碰撞检测，包括点圆碰撞检测。

Answer 2

我会检查 mouseClicked (https://p5js.org/reference/#/p5/mouseClicked)，然后检查 mouseX、mouseY 以查看是否单击了圆圈。

Answer 3

我创建这个 class 是为了为我的一个项目添加圆形按钮。分享一个 link 到草图，可能会节省其他人一些时间：p5.js web editor sketch

检查鼠标指针是否在圆圈内：

获取圆心到鼠标指针的距离

const distance = dist(circleX, circleY, mouseX, mouseY)
如果距离小于圆的半径，则鼠标在圆内

const isInside = (distance < circleRadius)

如何在 p5.js 中制作圆形按钮？

How do you make a circle shaped button in p5.js?

javascript

p5.js