如何使（移動）橢圓點擊？處理

Question

因此，我從一週前開始學習處理，並試圖讓點擊移動的橢圓。我遵循處理API，但我無法弄清楚。我刪除了所有與可點擊的橢圓相關的代碼，因爲它是一團糟。

在部分，在那裏我宣佈我的所有增值經銷商可以我用看到：

int breedte = 600; 
int hoogte = 600; 

這些假設是：

int breedte = width; 
int hoogte = height; 

但由於某種原因，寬度和高度不要輸出的寬度和高度爲：

size(600,600) 

那麼，我要問的是：

1. 我怎樣才能讓（移動）橢圓點擊？

2. 爲什麼我不能在'int hoogte'和'int breedte'上使用寬度和高度？

感謝advace。

主文件：

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

在未來，請嘗試發佈一個MCVE，而不是一堆斷開的片段或整個項目。另請僅請每個帖子提問一個問題。

要讓您的圈子可點擊，您必須編寫代碼來檢查該圈子是否被點擊。這實際上是兩個單獨的檢查。首先，您必須檢測何時按下鼠標。要做到這一點的方法之一是通過定義mousePressed()功能：

void mousePressed(){ 
    // mouse is pressed 
} 

然後你必須檢查鼠標是否是目前圈內。您可以使用dist()函數：如果鼠標與圓心的距離小於圓的半徑，則鼠標位於圓內。這可能是這樣的：

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

無恥的自我推銷：我在處理寫了碰撞檢測的教程，包括點圈碰撞，可here。

至於爲什麼你不能在你的草圖的頂部使用width和height，那是因爲你的草圖的頂部代碼在setup()功能閃光之前執行，並且width和height變量未設置直到從setup()函數調用size()之後。所以你必須在之後將該代碼移動到之後，您可以撥打size()。

如果您有後續問題，請在新的問題文章中發佈更新的MCVE，我們將從此處繼續。祝你好運。

Answer 2

處理不provid這是一個用於命中檢測的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 
}