Comment rendre une ellipse (mobile) cliquable? Traitement

Question

J'ai donc commencé à apprendre le traitement depuis une semaine et j'essaye d'obtenir une ellipse mobile. J'ai suivi l'API de traitement, mais je ne peux pas le comprendre. J'ai enlevé tout le code relatif à l'ellipse cliquable parce que c'était un gâchis.

Dans la section où je déclare tous mes vars vous pouvez me voir en utilisant:

int breedte = 600; 
int hoogte = 600; 

Ceux-ci sont supposés être:

int breedte = width; 
int hoogte = height; 

Mais pour une raison quelconque la largeur et la hauteur don ne produisent pas la largeur et la hauteur déclarées en:

size(600,600) 

donc ce que je demande est:

1. Comment puis-je faire le (mouvement) ellipse cliquable? Pourquoi je ne peux pas utiliser la largeur et la hauteur sur «int hoogte» et «int breedte»? Pourquoi?

Merci à l'avance.

Fichier principal:

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(); 
} 

Events fichier:

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 
} 

fichier Fonctions:

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

À l'avenir, s'il vous plaît essayer de poster un MCVE au lieu d'un tas d'extraits déconnectés ou l'ensemble de votre projet. Aussi s'il vous plaît seulement poser une question par poste. Pour rendre votre cercle cliquable, vous devrez écrire du code qui vérifie si le cercle est cliqué. C'est en fait deux vérifications distinctes. Vous devez d'abord détecter quand la souris est pressée. Une façon de le faire est en définissant une fonction mousePressed():

void mousePressed(){ 
    // mouse is pressed 
} 

Ensuite, vous devez vérifier si la souris est actuellement à l'intérieur du cercle.Vous pouvez utiliser la fonction dist() pour cela: si la distance entre la souris et le centre du cercle est inférieure au rayon du cercle, alors la souris est à l'intérieur du cercle. Cela pourrait ressembler à ceci:

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

auto-promotion Shameless: J'ai écrit un tutoriel sur la détection de collision dans le traitement, y compris collision point cercle, disponible here.

Quant à savoir pourquoi vous ne pouvez pas utiliser width et height en haut de votre croquis, c'est parce que le code en haut de votre croquis est exécuté avant le déclenchement de la fonction setup() et les variables width et height ne sont pas réglés avant après avoir appelé size() à partir de la fonction setup(). Donc, vous devez déplacer ce code à après vous appelez size().

Si vous avez des questions de suivi, veuillez poster un MCVE mis à jour dans un nouveau message de question, et nous allons partir de là. Bonne chance.

Answer 2

traitement ne provid pas e une api pour la détection de coup, donc vous devez mettre en œuvre par vous-même, ce qui, je pense, est un excellent exercice d'apprentissage. Vous pouvez explorer les mathématiques d'une ellipse here. Mais l'approche générale consiste à utiliser une fonction comme celle ci-dessous pour vérifier que le point sur lequel vous avez cliqué se trouvait bien dans l'ellipse que vous avez fournie.

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 
}