Drawing a honeycomb

[MikeB]

OK, perhaps this should be asked in the comp.lang.java.gui, but I've
had much help here in the past, so I'll start here.

I want to create a pane that, instead of a table of rows and columns,
have a honeycomb appearance, in other words an array of hexagonal
cells. I need to put information inside each cell, but I'm even stuck
at how to construct the borders of the cells. Ideally, the borders
should be sizable so that the user can adjus tthe size (and by
implication, the number of cells that will appear in the pane, or when
he resizes the pane.

Any hints or suggestions where I can start looking? thanks.

[Roedy Green]

Post by MikeB
I want to create a pane that, instead of a table of rows and columns,
have a honeycomb appearance, in other words an array of hexagonal
cells. I need to put information inside each cell, but I'm even stuck
at how to construct the borders of the cells. Ideally, the borders
should be sizable so that the user can adjus tthe size (and by
implication, the number of cells that will appear in the pane, or when
he resizes the pane.

You might have a start at http://mindprod.com/products.html#SCREWS

It draws a hexagonal screw head.


A hexagon is defined as a line connecting vertices of the 6 rotations
of the angle pi/3 radians = 60 degrees where it intersects the circle.
Basically you convert polar to Cartesian co-ordinates.

See http://mindprod.com/jgloss/coordinates.html
http://mindprod.com/jgloss/polar.html
http://mindprod.com/jgloss/radian.html

Tackle this in stages.

1. draw a hexagon on a Canvas of JPanel.
2. draw a row of 4 hexagons
3. draw two rows of 4 meshing hexagons.
4. draw a grid of n x m hexagons.
5. draw a grid of hexagons with text on them.
6. resize the panel making all the hexagons grow
7. resize the panel adding hexagons.
8. resize the panel allowing both kinds of growth. How will you
specify it? sliders? Simply dragging the panel bigger will not do.
9. don't draw cells that don't fit 100 in the panel.
10. sex it up with some edge effects and subtle colour variations.
Search the web for some honeycomb images to get some ideas.

[MikeB]

I want to create a pane that, instead of  a table of rows and columns,
have a honeycomb appearance, in other words an array of hexagonal
cells. I need to put information inside each cell, but I'm even stuck
at how to construct the borders of the cells. Ideally, the borders
should be sizable so that the user can adjus tthe size (and by
implication, the number of cells that will appear in the pane, or when
he resizes the pane.

You might have a start athttp://mindprod.com/products.html#SCREWS
It draws a hexagonal screw head.
A hexagon is defined as a line connecting vertices of the 6 rotations
of the angle pi/3 radians = 60 degrees where it intersects the circle.
Basically you convert polar to Cartesian co-ordinates.
Seehttp://mindprod.com/jgloss/coordinates.htmlhttp://mindprod.com/jgloss/polar.htmlhttp://mindprod.com/jgloss/radian.html
Tackle this in stages.
1. draw a hexagon on a Canvas of JPanel.
2. draw a row of 4 hexagons
3. draw two rows of 4 meshing hexagons.
4. draw a grid of n x m hexagons.
5. draw a grid of hexagons with text on them.
6. resize the panel making all the hexagons grow
7. resize the panel adding hexagons.
8. resize the panel allowing both kinds of growth. How will you
specify it? sliders?  Simply dragging the panel bigger will not do.
9. don't draw cells that don't fit 100 in the panel.
10. sex it up with some edge effects and subtle colour variations.
Search the web for some honeycomb images to get some ideas.
--
Roedy Green Canadian Mind Productshttp://mindprod.com
"At this point, 29 percent of fish and seafood species have collapsed - that is,
their catch has declined by 90 percent. It is a very clear trend, and it is accelerating.
If the long-term trend continues, all fish and seafood species are projected to collapse
within my lifetime -- by 2048."
~ Dr. Boris Worm of Dalhousie University

Roedy, Thanks a million. Just what I needed.

[John B. Matthews]

In article

Post by MikeB

I want to create a pane that, instead of  a table of rows and columns,
have a honeycomb appearance, in other words an array of hexagonal
cells. I need to put information inside each cell, but I'm even stuck
at how to construct the borders of the cells. Ideally, the borders
should be sizable so that the user can adjus tthe size (and by
implication, the number of cells that will appear in the pane, or when
he resizes the pane.

You might have a start athttp://mindprod.com/products.html#SCREWS
It draws a hexagonal screw head.
A hexagon is defined as a line connecting vertices of the 6 rotations
of the angle pi/3 radians = 60 degrees where it intersects the circle.
Basically you convert polar to Cartesian co-ordinates.
Seehttp://mindprod.com/jgloss/coordinates.htmlhttp://mindprod.com/jgloss/pol
ar.htmlhttp://mindprod.com/jgloss/radian.html
Tackle this in stages.
1. draw a hexagon on a Canvas of JPanel.
2. draw a row of 4 hexagons
3. draw two rows of 4 meshing hexagons.
4. draw a grid of n x m hexagons.
5. draw a grid of hexagons with text on them.
6. resize the panel making all the hexagons grow
7. resize the panel adding hexagons.
8. resize the panel allowing both kinds of growth. How will you
specify it? sliders?  Simply dragging the panel bigger will not do.
9. don't draw cells that don't fit 100 in the panel.
10. sex it up with some edge effects and subtle colour variations.
Search the web for some honeycomb images to get some ideas.

[...]

Post by MikeB
Roedy, Thanks a million. Just what I needed.

For step one, I recall that turtle graphics made it especially easy to
draw regular polygons, as there's a simple formula for the interior
angle:

<http://en.wikipedia.org/wiki/Regular_polygon#Angles>

I'd be surprised if there weren't a Java implementation.

[rossum]

Post by MikeB
OK, perhaps this should be asked in the comp.lang.java.gui, but I've
had much help here in the past, so I'll start here.
I want to create a pane that, instead of a table of rows and columns,
have a honeycomb appearance, in other words an array of hexagonal
cells. I need to put information inside each cell, but I'm even stuck
at how to construct the borders of the cells. Ideally, the borders
should be sizable so that the user can adjus tthe size (and by
implication, the number of cells that will appear in the pane, or when
he resizes the pane.
Any hints or suggestions where I can start looking? thanks.

You can approximate to a hex grid with a square grid offset by half a
square each row:

+-+-+-+-+-+-+
| 1 | 2 | |
| | | |
+-+-+-+-+-+-+-+-+
| 6 | X | 3 | |
| | | | |
+-+-+-+-+-+-+-+-+
| 5 | 4 | |
| | | |
+-+-+-+-+-+-+-+-+
| | | | |

Cell X has six neighbours. Use the underlying grid to help plot the
corners of your hexagons.

rossum

[MikeB]

Post by rossum

Post by MikeB
OK, perhaps this should be asked in the comp.lang.java.gui, but I've
had much help here in the past, so I'll start here.
I want to create a pane that, instead of  a table of rows and columns,
have a honeycomb appearance, in other words an array of hexagonal
cells. I need to put information inside each cell, but I'm even stuck
at how to construct the borders of the cells. Ideally, the borders
should be sizable so that the user can adjus tthe size (and by
implication, the number of cells that will appear in the pane, or when
he resizes the pane.
Any hints or suggestions where I can start looking? thanks.

You can approximate to a hex grid with a square grid offset by half a
   +-+-+-+-+-+-+
   | 1 | 2 |   |
   |   |   |   |
 +-+-+-+-+-+-+-+-+
 | 6 | X | 3 |   |
 |   |   |   |   |
 +-+-+-+-+-+-+-+-+
   | 5 | 4 |   |
   |   |   |   |
 +-+-+-+-+-+-+-+-+
 |   |   |   |   |
Cell X has six neighbours.  Use the underlying grid to help plot the
corners of your hexagons.
rossum

This is also a great suggestion. Thanks.

[Roedy Green]

Post by rossum
+-+-+-+-+-+-+
| 1 | 2 | |
| | | |
+-+-+-+-+-+-+-+-+
| 6 | X | 3 | |
| | | | |
+-+-+-+-+-+-+-+-+
| 5 | 4 | |
| | | |
+-+-+-+-+-+-+-+-+
| | | | |

Another way to think of it is to draw a line of alternating up down
equilateral triangles. On top of that draw another such line, to a
bottom of the top line buts a top of the bottom line. Repeat, piling
them up. That gives you "grid" on which you can draw your hexagons.

If you don't understand what I mean, draw some rows of hexagons, then
draw lines from the vertices to the centre of each hexagon.

Another way to tackle it is to draw some overlapping circles, one for
each hexagon. Draw out the pattern of centres as dots. Then plot the
6 vertices at equal distance from the center, 60 degrees from each
other.

You are going to need some basic trig no matter how you slice it.

[Roedy Green]

Post by MikeB
I want to create a pane that, instead of a table of rows and columns,
have a honeycomb appearance, in other words an array of hexagonal
cells. I

You can tile hexagons with the points at the top or the flat edges at
the top. One pattern is just a 90 degree rotation of the other.


http://www.springerlink.com/content/9v2290rlaxrbl9fw/

Honey bees have long been assumed to build their comb with the cells
in either of two preferred orientations with respect to gravity
("vertical" or "horizontal"). I show here that these typical cell
orientations in fact derive from substrate orientation and a simple
building rule, rather than the influence of gravity itself. When bees
were induced to build comb on substrates at four different
orientations with respect to gravity, they always made cells with one
vertex pointing directly toward the substrate. This produced
horizontal and vertical cells on vertical and horizontal substrates,
respectively, but yielded intermediate orientations on oblique
substrates. The apparent preference for vertical and horizontal cells
may simply reflect substrate orientation in the rectilinear hives from
which cell measurements have been taken.

[Roedy Green]

Post by MikeB
OK, perhaps this should be asked in the comp.lang.java.gui, but I've
had much help here in the past, so I'll start here.

If I have not overwhelmed you already with ways to tackle your
problem, here is one more.

You are drawing series of wiggly vertical lines. They go down, jog
left diagonally, go down again, then jog right diagonally, then go
down again. This way you would avoid redrawing lines.