Help needed, bounce, clickable area

Processing Coding Questions
2

All right, let’s start with your first question:
You should assign a speed variable for each axis, in order to control the horizontal and vertical movements independently:
float speedX, speedY;
and assign them random values as well… (inside setup):

  speedX = random(5, 10);
  speedY = random(5, 10);

Then, in order to force the target to always remain within the boundaries of the canvas, you have to update the position of the circle, in the exact frame in which it touches the side of the canvas, before reversing the direction of its movement. So you prevent your program from incurring into some glitch.

  if (start) {
    circleX = circleX + speedX;
    circleY = circleY + speedY;
  } else {
    circleX = width/2;
    circleY = height/2;
  }
  if (circleX - circleSize/2 <= 0) {
    circleX = circleSize/2;
    speedX = speedX * -1.010;
  }
  if (circleX + circleSize/2 >= width) {
    circleX = width - circleSize/2;
    speedX = speedX * -1.010;
  }
  if (circleY - circleSize/2 <= 0) {
    circleY = circleSize/2;
    speedY = speedY * -1.010;
  }
  if (circleY + circleSize/2 >= height) {
    circleY = height - circleSize/2;
    speedY = speedY * -1.010;
  }

There’s an outstanding explanation written by @quark that you can find here.

Now, for your second question, we have to make some major changes.
You should always store the distance between the mouse and the center of the circle in a variable. For this you can use the dist() method. See dist().

float d = dist(mouseX, mouseY, circleX, circleY);

Then, in order to assign a score to each ring of the target, you can make use of the map() function, and thus avoid annoying calculations. With this method you can re-map any number from one range to another. See map().
You want to do this only if the mouse is inside the target:

  if (d <= circleSize/2) score += (int)map(d, circleSize/2, 0, minScore, maxScore+1);

Put everything together, your code would look like this: (with some minor corrections here and there)

int 
  circleSize, 
  rectX, rectY, rectSize, 
  scoreX, scoreY, score, mis, bonus, 
  red, white, green;

int[] bonusArray = new int[4];

float circleX, circleY;
float speedX, speedY;

boolean start;

void setup() {
  size(500, 500); 
  smooth(8);
  background(5);
  circleX = width/2;
  circleY = height/2;
  circleSize = 40;
  rectX = width/2;
  rectY = height;
  rectSize = 80;
  red = color(255, 0, 0);
  white = color(255);
  green = color(0, 255, 0);
  start = false;
  scoreX = width/50;
  scoreY = height/20;
  score = 0;
  mis = 0;
  bonus = 0;

  speedX = random(5, 10);
  speedY = random(5, 10);
  
  bonusArray[0] = 0;
  bonusArray[1] = 1;
  bonusArray[2] = 2;
  bonusArray[3] = 3;
}

void draw() {
  clear();
  noStroke();
  scoreText();
  buttonText();
  bullseye();
}

void scoreText() {
  textSize(18);
  text("Score: " + score, scoreX, scoreY);
  text("Aantal mis: " + mis, scoreX*11, scoreY);
  text("Bonus: " + bonusArray[bonus], scoreX*26, scoreY);
}

void bullseye() {
  for (int circles = circleSize; circles > 0; circles -= 20) {
    fill(red);
    ellipse(circleX, circleY, circles, circles);
    fill(white);
    ellipse(circleX, circleY, circles-10, circles-10);
  }
  if (start) {
    circleX = circleX + speedX;
    circleY = circleY + speedY;
  } else {
    circleX = width/2;
    circleY = height/2;
  }
  if (circleX - circleSize/2 <= 0) {
    circleX = circleSize/2;
    speedX = speedX * -1.010;
  }
  if (circleX + circleSize/2 >= width) {
    circleX = width - circleSize/2;
    speedX = speedX * -1.010;
  }
  if (circleY - circleSize/2 <= 0) {
    circleY = circleSize/2;
    speedY = speedY * -1.010;
  }
  if (circleY + circleSize/2 >= height) {
    circleY = height - circleSize/2;
    speedY = speedY * -1.010;
  }
}

void buttonText() {
  noStroke();
  fill(green);
  rect(rectX-rectSize/2, rectY-rectSize/2, rectSize, rectSize/2);
  fill(red);
  textSize(24);

  if (start) {
    text("Stop", rectX-rectSize/3, rectY-rectSize+rectSize/6*5);
  } else {
    text("Start", rectX-rectSize/3, rectY-rectSize+rectSize/6*5);
  }
}

void mousePressed() {
  int minScore = 1;
  int maxScore = 4;
  float d = dist(mouseX, mouseY, circleX, circleY);

  if (d <= circleSize/2) { 
    score += (int)map(d, circleSize/2, 0, minScore, maxScore+1);
    bonus++;
  } else {
    mis += 1;
    bonus = 0;
  }
  if (bonus > 3) bonus = 3;
  //score = score + bonusArray[bonus];

  if (mouseX > rectX-rectSize/2 && mouseX < rectX-rectSize/2 + rectSize &&
    mouseY > rectY-rectSize/2 && mouseY < rectY-rectSize/2 + rectSize/2) {
    score = 0;
    bonus = 0;
    mis = 0;
    start = !start;
  }
}

I commented the line //score = score + bonusArray[bonus]; because I do not know if this is what you intend to do with the bonusArray.

3 Likes