Win a copy of Secure Financial Transactions with Ansible, Terraform, and OpenSCAP this week in the Cloud/Virtualization forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Jeanne Boyarsky
  • Bear Bibeault
Sheriffs:
  • Rob Spoor
  • Henry Wong
  • Liutauras Vilda
Saloon Keepers:
  • Tim Moores
  • Carey Brown
  • Stephan van Hulst
  • Tim Holloway
  • Piet Souris
Bartenders:
  • Frits Walraven
  • Himai Minh
  • Jj Roberts

Drawing a bullseye given the number of circles

 
Ranch Hand
Posts: 65
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hello once again friends.

Right now I am currently trying to figure out where the flaw is in my current approach to drawing a simple scaleable bullseye given a set of arguments and parameters.


The code is below and I've also attached what is being generated right now.





Any suggestions on what should be changed?
Bullseye-output.jpg
[Thumbnail for Bullseye-output.jpg]
 
Marshal
Posts: 72478
315
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Andrew Bauer wrote:. . . attached what is being generated right now. . . .

Was it a lot of circles gradually going this direction ↘ and gradually larger? You are working out the circles' centres from the ↖ corner but you should work out the circles' ↖ corners from their centre.

No. my guess was wrong. Make the fourth argument to the drawOval() method the height, but that will only solve part of your problem. At least the circles will be round then. Remember the height and width for a circle should be the same.
Make the centre the same for each circle and subtract half the width from each of its coordinates.

Moving to our GUIs forum.
 
Sheriff
Posts: 16132
268
Mac Android IntelliJ IDE Eclipse IDE Spring Debian Java Ubuntu Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
This is where using more semantic names is helpful.

The drawOval() method has these parameters:
x, y - the x and y coordinates of the top left corner of the square in which the circle is inscribed
width - width of that square; this would be the same as the diameter of the circle
height - height of that square; this would also be the same as the diameter of the circle

If I were to use circle semantics, I would fix the center and translate the x and y values instead so that I'd have this

You should be able to figure out what <something> is.
 
Rancher
Posts: 3232
30
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Any suggestions on what should be changed?


In addition to the other suggestions:

1. Don't use getGraphics(). Any painting done will only be temporary and will be lost when Swing decides the components needs to be repainted.
2. Custom painting is done by overriding the paintComponent(…) method of a JPanel (or JComponent).
3. Then you add the panel to the frame.

Read the section from the Swing tutorial on Custom Painting for more information and working examples to get you started.
 
Saloon Keeper
Posts: 4358
163
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
To ease the drawing of all these circles, make a method:

That way you can have:

It would also be nice to draw these circles in a BufferedImage.
Note that the circles are drawn from largest to smallest, so that if you later use the fill method instead of the draw, then you get a nicely colorfull BullsEye.
 
Andrew Bauer
Ranch Hand
Posts: 65
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Okay, I feel like I'm so close...


However the circles are sloppy now and I'm still unsure how to place the circles in their proper position.


Bullseye-output.jpg
Output of the current code.
Output of the current code.
 
Junilu Lacar
Sheriff
Posts: 16132
268
Mac Android IntelliJ IDE Eclipse IDE Spring Debian Java Ubuntu Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Your code still moves your center since lines 25 and 26 calculate new values of centerX and centerY. The figure you're trying to draw is concentric, which literally means "having the same center" so why would you change the center every time?

Also, you really should consider Piet's advice to draw from the outermost circle moving in instead of from the innermost circle moving out. If you have a requirement later on to give the circles a different color, then moving outside in is the only way you'll be able to do that. The algorithm only changes very slightly for this.

Hints:
1. The radius of a circle is half its diameter. I suggest you create a variable for this value and find how you can use it in the solution.

2. Use a diagram similar to what you find here: https://chortle.ccsu.edu/java5/notes/chap36/ch36_5.html and try to place all of the variables/values you have on the diagram so you can visualize what they mean. Then check your calculations against the diagram to see if everything aligns. Right now they don't align with a properly drawn and labeled diagram.

3. These are literally the only statements you need in the for-loop, nothing more. You just need to figure out what <something> is and decide what your increment value will be. (Actually, if you do #1 above then you'll have exactly 1 other statement)
 
Andrew Bauer
Ranch Hand
Posts: 65
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Junilu Lacar wrote:Also, you really should consider Piet's advice to draw from the outermost circle moving in instead of from the innermost circle moving out. If you have a requirement later on to give the circles a different color, then moving outside in is the only way you'll be able to do that. The algorithm only changes very slightly for this.




That's generally the idea I've been trying to follow the entire time.
 
Junilu Lacar
Sheriff
Posts: 16132
268
Mac Android IntelliJ IDE Eclipse IDE Spring Debian Java Ubuntu Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Andrew Bauer wrote:That's generally the idea I've been trying to follow the entire time.


If so, then none of the values you're calculating and passing to the drawOval() method are correct. The fact that you're now seeing proper circles is just a happy coincidence. You need to understand exactly how the idea of "diameter" map to width/height and how the center coordinates are related to the X and Y values that drawOval takes as arguments. Again, use a diagram like the one I gave a link to and label it with the values you're using.
 
Junilu Lacar
Sheriff
Posts: 16132
268
Mac Android IntelliJ IDE Eclipse IDE Spring Debian Java Ubuntu Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Here's another thing to consider as you rethink the values your passing to drawOval(): In general, when you think of an "oval" you think about a deformed circle, one whose width is different from its height. A circle is a special kind of oval, one that isn't "deformed" but has the same width and height whichever way you turn it. So is there really a difference between width and height when you're trying to draw a circle? It's kind of the same thing with a rectangle and square, right? A square is simply a special kind of rectangle whose width and height are the same. That's why we say a square has sides that are so and so long. Similarly, a circle has a (what?) that is so and so long.

Now, compare your call to drawOval() and the values you're passing as the width and height values. Now look at what is passed in the code I suggested. The values you're passing seem to be saying "The circle's width is different from its height."
 
Campbell Ritchie
Marshal
Posts: 72478
315
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Andrew Bauer wrote:Okay, I feel like I'm so close...
. . .

(This post) That is what I thought you were going to show when I first guessed what you had in your first post.
 
Rob Camick
Rancher
Posts: 3232
30
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

drawing a simple scaleable bullseye given a set of arguments and parameters.



When it comes time to draw each circle of the bullseye:

1. you want to keep the center point fixed.
2. you need to adjust the x/y location and diameter of each circle you draw.

So the first thing you need to do is define the meaning of your parameters so you can achieve this goal.

What do the x/y values mean to you? There are two possible meanings:

1. The x/y values specify the "center point" of each circle. This makes the most sense, but will require extra editing as described below.
2. The x/y values specify the "top/left" point of the largest circle to be drawn. Not the best approach, since the x/y value only applies to a single circle. So I don't recommend this approach

Lets take a look at your method call:



1. If (50, 50) is the center point, then you have a problem. The center point of a 200 diameter circle would be (100, 100) so you would have to start drawing at (-50, -50) which means part of the circle would not be visible. If you use this approach you need some error checking to make sure the center point is reasonable based on the diameter of the circle.
2. if (50, 50) is the top/left point, then you don't know what the center point is. If you use this approach you first need to calculate the "center point" before you start to draw all the circles.

Even though I don't recommend approach 2, the parameters imply approach 2, so to calculate the center point you would need to do something like:

So now you can start to do your looping code:

 
We can walk to school together. And we can both read this tiny ad:
SKIP - a book about connecting industrious people with elderly land owners
https://coderanch.com/t/skip-book
reply
    Bookmark Topic Watch Topic
  • New Topic