如何使（移动的）椭圆可点击？ 处理

Question

所以我从一个星期前开始学习处理，我正在尝试使移动的椭圆形可点击。 我遵循了处理API，但无法弄清楚。 我删除了所有与可点击椭圆有关的代码，因为这太糟了。

在声明所有变量的部分中，您可以使用以下命令查看我：

int breedte = 600;
int hoogte = 600;

这些应该是：

int breedte = width;
int hoogte = height;

但是由于某种原因，宽度和高度不会输出在以下位置声明的宽度和高度：

size(600,600) 

所以我要问的是：

1. 如何使（移动的）椭圆可点击？

2. 为什么我不能在“ int hoogte”和“ int pette”上使用宽度和高度？

非常感谢。

主文件：

int x = 0;
int leftSide = 0;
int rightSide = width;
int bottomSide = height;

int totalHits = 0;
int totalMiss = 0;

boolean start = false;

int circelSize = 100;
int circelRings = 24;
int circelSpeed = 1;
int circelPositionY = 0;

int breedte = 600;
int hoogte = 600;

String[] buttonText = {"Start","Stop"};
String buttonTextActive = buttonText[0];
int[] buttonColor = {0,90};
int buttonColorActive = buttonColor[0];
int buttonHighlight = 50;
int buttonSize = 80;  
int buttonY = breedte - (buttonSize /2);
int buttonX = hoogte / 2 - 40;

void setup() {
  size(600, 600);
  smooth();
  noStroke();
}

void draw() {
  if (start) {
    circelPositionY = circelPositionY + circelSpeed;
    drawCircel(circelPositionY);
    if (circelPositionY == (width + circelSize)) {
      circelPositionY = 0;
    }
  }
  drawButton();
}

事件文件：

void mousePressed() {
  // Start or Stop button
  if(mouseX > buttonX & mouseX < buttonX  + buttonSize & mouseY > buttonY & mouseY < buttonY + (buttonSize / 2)){
    if(start) {
      start = false;
      buttonColorActive = buttonColor[0];
      buttonTextActive = buttonText[0];
      println("Game stoped");
    } else {
      start = true;
      buttonColorActive = buttonColor[1];
      buttonTextActive = buttonText[1];
      println("Game started");
    }
  }
//HERE SHOULD GO THE CLICKABLE ELLPISE
}

功能文件：

void drawCircel(int circelPositionY) {
  background(204);
  for (int i = 0; i < circelRings; i = i+1) {
    int even = i % 2;
    if (even == 0) {
      fill(255,0,0);
      ellipse(-(circelSize / 2) + circelPositionY, height / 2 - (circelSize / 2), circelSize - (i * (circelSize / circelRings)), circelSize - (i * (circelSize / circelRings)));
    } else {
      fill(255);
      ellipse(-(circelSize / 2) + circelPositionY, height / 2 - (circelSize / 2), circelSize - (i * (circelSize / circelRings)), circelSize - (i * (circelSize / circelRings)));
    }
  }
}

void drawButton() {
  fill(buttonColorActive);
  rect(buttonX,buttonY, buttonSize, buttonSize / 2);
  fill(255);
  textAlign(CENTER, CENTER);
  text(buttonTextActive, buttonX + (buttonSize / 2),buttonY + (buttonSize / 4));
}

Answer 1

处理不提供用于检测点击的api，因此您需要自己实现此功能，我认为这是一个很好的学习练习。 您可以在这里探索椭圆的数学。

但是一般的方法是使用下面的函数来检查您单击的点确实在您提供的椭圆内。

boolean InsideEllipse(
    float x, float y, 
    float xc, float yc, 
    float width, float height
) { 

    // First half the width and height to get the ellipse parameters
    float a = width / 2;
    float b = height / 2;

    // Now calculate the deltas:
    float xd = x - xc;
    float yd = y - yd;

    // Now the equation of an ellipse is given by 
    //      x^2 / a ^ 2 + y^2 / b ^ 2 = 1
    // So if we are inside the ellipse, we would expect the left hand
    // side of this expression to be less than one
    boolean inside = xd * xd / (a * a) + yd * yd / (b * b) <= 1.0
    return inside
}

Answer 2

将来，请尝试发布MCVE，而不要发布一堆未连接的代码片段或整个项目。 另外，每个帖子只问一个问题。

为了使您的圈子可点击，您将必须编写代码来检查圈子是否被点击。 这实际上是两个单独的检查。 首先，您必须检测何时按下了鼠标。 一种方法是通过定义mousePressed()函数：

void mousePressed(){
  // mouse is pressed
}

然后，您必须检查鼠标当前是否在圆内。 您可以为此使用dist()函数：如果鼠标与圆心之间的距离小于圆的半径，则鼠标位于圆内。 可能看起来像这样：

void mousePressed(){
  if(dist(mouseX, mouseY, circleX, circleY) < circleRadius){
    // mouse is pressed inside the circle
  }
}

无耻的自我促进：我编写了有关处理中的碰撞检测的教程，包括点-圆碰撞，可在此处找到 。

至于为什么不能在草图顶部使用width和height的原因，这是因为草图顶部的代码是在setup()函数触发之前执行的，而width和height变量直到您之后才被设置从setup()函数调用size() 。 因此，您必须在调用size() 之后将该代码移至。

如果您有后续问题，请在新问题中发布更新的MCVE ，我们将在那里继续。 祝好运。