如何使（移动的）椭圆可点击？加工

Question

所以我从一周前开始学习处理，我试图让一个移动的椭圆可点击。我跟着处理API，但我想不通。我删除了所有与可点击椭圆相关的代码，因为它一团糟。

在我声明所有变量的部分，您可以看到我使用：

int breedte = 600;
int hoogte = 600;

这些应该是：

int breedte = width;
int hoogte = height;

但由于某些原因，宽度和高度不输出声明的宽度和高度：

size(600,600)

所以我想问的是：

如何使（移动的）椭圆可点击？
为什么我不能在 'int hoogte' 和 'int breedte' 上使用宽度和高度？

提前致谢。

主文件：

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

Processing 不提供用于命中检测的 api，因此您需要自己实现它，我认为这是一个很好的学习练习。您可以探索椭圆的数学运算 here.

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

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

以后，请尝试 post 一个 MCVE 而不是一堆不连贯的片段或整个项目。另外请每个 post.

只问一个问题

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

void mousePressed(){
  // mouse is pressed
}

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

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

无耻的自我推销：我在Processing写了一篇关于碰撞检测的教程，包括点圆碰撞，可用here。

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

如果您有后续问题，请 post 在新问题 post 中更新 MCVE，我们将从那里开始。祝你好运。

如何使（移动的）椭圆可点击？加工

How to make an (moving) ellipse clickable? Processing

processing

ellipse

clickable