Help needed, bounce, clickable area

SolDrakibane · October 1, 2018, 10:38am

Alright i have two issues at hand with the code below.

Bounces
Bouncing the bullseye works with the code below in the horizontal X. When i change that to Y it also works.
How can i make X and Y work by making it bounce to the edges of the window? Cause when i do certain maths on them it sometimes works but always ends up flying out of the screen.
Clickable area
The bullseye requires the circles within to give different scores. For the center being the highest score and the score decreasing the further you miss the center. I can’t figure this out, i’ve tried to give the X,Y, Width and Height dimensions of those circles different scores. Which kind of works but it overrides the others or counts them up (so if i click the middle i get +10 instead of +4 cuz the others give +1, +2 + 3.

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

int[] bonusArray = new int[4];

float circleX, circleY, snelheid;

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;
  snelheid = random(5, 8);
  bonusArray[0] = 0;
  bonusArray[1] = 1;
  bonusArray[2] = 2;
  bonusArray[3] = 3;
}

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

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 + snelheid;
  } else if (!start) {
    circleX = width/2;
  }
  if (circleX > width || circleX < 0) {
    snelheid = snelheid * -1.010;
  }
}

void buttonText() {
  noStroke();
  fill(green);
  rect(rectX-rectSize/2, rectY-rectSize/2, rectSize, rectSize/2);
  fill(red);
  textSize(24);
  if (!start) {    
    text("Start", rectX-rectSize/3, rectY-rectSize+rectSize/6*5);
  } else if (start) {
    text("Stop", rectX-rectSize/3, rectY-rectSize+rectSize/6*5);
  } else if (!start) {
    text("Start", rectX-rectSize/3, rectY-rectSize+rectSize/6*5);
  }
}

void mousePressed() {
  if (mouseX > rectX-rectSize/2 && mouseX < rectX-rectSize/2 + rectSize &&
    mouseY > rectY-rectSize/2 && mouseY < rectY-rectSize/2 + rectSize/2) {
    start = ! start;
  } 
  if (mouseX > circleX-circleSize/2 && mouseX < circleX + circleSize/2 &&
    mouseY > circleY-circleSize/2 && mouseY < circleY + circleSize/2) {
    score += 1;
    bonus += 1;
    if (bonus > 3) {
      bonus = 3;
    }
    if (bonus == 1) score = score+=0;
    if (bonus == 2) score = score+=1;
    if (bonus >= 3) score = score+=2;
  } else 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;
  } else {
    mis += 1;
    bonus = 0;
  }
}

The code below is where i tried step 1 and 2 and failed.

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

int[] bonusArray = new int[4];

float circleX, circleY, snelheid;

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;
  snelheid = random(5, 10);
  bonusArray[0] = 0;
  bonusArray[1] = 1;
  bonusArray[2] = 2;
  bonusArray[3] = 3;
}

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

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 + snelheid;
    circleY = circleY + snelheid;
  } else if (!start) {
    circleX = width/2;
  }
  if (circleX > width || circleX < 0 ) {
    snelheid = snelheid * -1.010;
  }
  if (circleY > height || circleY < 0 ) {
    snelheid = snelheid * -1.010;
  }
}

void buttonText() {
  noStroke();
  fill(green);
  rect(rectX-rectSize/2, rectY-rectSize/2, rectSize, rectSize/2);
  fill(red);
  textSize(24);
  if (!start) {    
    text("Start", rectX-rectSize/3, rectY-rectSize+rectSize/6*5);
  } else if (start) {
    text("Stop", rectX-rectSize/3, rectY-rectSize+rectSize/6*5);
  } else if (!start) {
    text("Start", rectX-rectSize/3, rectY-rectSize+rectSize/6*5);
  }
}

void mousePressed() {
  if (mouseX > rectX-rectSize/2 && mouseX < rectX-rectSize/2 + rectSize &&
    mouseY > rectY-rectSize/2 && mouseY < rectY-rectSize/2 + rectSize/2) {
    start = ! start;
  } 
  if (mouseX > circleX-circleSize/2 && mouseX < circleX + circleSize/2 &&
    mouseY > circleY-circleSize/2 && mouseY < circleY + circleSize/2 ) {
    score += 1;
    bonus += 1;
    println(score, bonus);
  } 
  if (mouseX > circleX-circleSize/2 && mouseX < circleX + circleSize/3 &&
    mouseY > circleY-circleSize/2 && mouseY < circleY + circleSize/3 ) {
    score += 2;
    bonus += 1;
  } 
  if (mouseX > circleX-circleSize/2 && mouseX < circleX + circleSize/4 &&
    mouseY > circleY-circleSize/2 && mouseY < circleY + circleSize/4 ) {
    score += 3;
    bonus += 1;
  } 
  if (mouseX > circleX-circleSize/2 && mouseX < circleX + circleSize/6 &&
    mouseY > circleY-circleSize/2 && mouseY < circleY + circleSize/6 ) {
    score += 4;
    bonus += 1;
  } 
  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;
  } else {
    mis += 1;
    bonus = 0;
  }
  if (bonus > 3) {
    bonus = 3;
  }
  if (bonus == 1) score = score+=0;
  if (bonus == 2) score = score+=1;
  if (bonus >= 3) score = score+=2;
}

Ov3rM1nD · October 1, 2018, 3:26pm

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.

SolDrakibane · October 2, 2018, 10:10pm

Oh my god this is amazing! The way you explained it is great. I’m having trouble understanding map() at the moment but i’m probably going to get how it works eventually when i experiment with it. The best part is that i compared your code with the one i had and saw what you corrected. This allowed me to understand the if statement better. Great learning material! Thanks again for your time and effort @Ov3rM1nD .

jeremydouglass · October 3, 2018, 7:19pm

In addition to the reference, check out the examples to better understand map():

Ov3rM1nD · October 3, 2018, 11:36pm

You’re welcome buddy. I love to help. As @jeremydouglass said, check out some examples and do some trials with the map() function. This function is one of the best features in Processing.

Topic		Replies	Views
Bounce Ball Inside A Square Coding Questions	0	279	April 7, 2020
Can someone please help me with making the ball bounce off of the black square? I have been at this for days and have gotten nowhere Coding Questions	7	250	February 13, 2021
Question About Game Idea (Breakout / Arkanoid) Coding Questions	23	356	August 31, 2022
Can you help me fix problem in the code Coding Questions homework	4	434	March 2, 2022
Bouncing ball with paddle Coding Questions	1	1274	June 12, 2020

Help needed, bounce, clickable area

Related Topics