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

您可以通过比较该点与圆心之间的距离并将其与圆半径相比较来检测某个点（在您的情况下为mouseX, mouseY）是否在圆中。如果距离小于半径，则该点位于圆内。

您可以通过Google搜索“检测点是否在圆内”获得大量结果。无耻的自我促进：this tutorials介绍了碰撞检测，包括点-圆碰撞检测。

Answer 2

我先检查mouseClicked（https://p5js.org/reference/#/p5/mouseClicked），然后再检查mouseX，mouseY，以查看是否单击了一个圆。

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

2 个答案: