javascript - 你如何在 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。

另一件事是它根据位状态绘制一个红色/绿色的圆圈。

现在您已经了解了基本概念，我想添加功能让用户按下一个圆圈来改变它的状态(从 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

您可以通过比较点与圆心之间的距离，并将其与圈子。如果距离小于半径，则该点在圆内。

您可以在谷歌上搜索“检测点是否在圆圈内”以获得大量结果。无耻的 self 推销:this tutorials解释碰撞检测，包括点圆碰撞检测。