Skip to content Skip to sidebar Skip to footer

Creating 10.000 Connected Hexagon Page?

I am trying to create 10.000 hexagon connected each other like bee combs.I want to create all of this as a element that after I can import some thing to inside them.But for connec

Solution 1:

Creating a rectangular grid is fairly obvious - just skew a rectangular grid ( either skew it all and get a parallelogram, then use modulo to wrap it, or skew alternate rows/columns to create a rectangular grid ).

Creating a hexagon filled with hexagons is fairly easy too

  • in the n th rank, there are 6 bars of n hexes
  • the centres of adjacent hexes are displaced twice the distance of the midpoint of one of the faces to the centre

So if you have the x & y co-ordinates of your hexes in two arrays, polyX and polyY, you get a nested loop:

    drawHex ( g, cx, cy, 0 );

    for ( int rank = 1; rank < count; ++rank ) {

        for ( int bar = 0; bar < 6; ++bar ) {
            // x and y are twice midpoint of the previous face * the rank away 
            // from centre
            int x = cx + ( polyX [ ( bar + 4 ) % 6 ] + polyX [ ( bar + 5 ) % 6 ] ) * rank;
            int y = cy + ( polyY [ ( bar + 4 ) % 6 ] + polyY [ ( bar + 5 ) % 6 ] ) * rank;

            // move by twice the distance of the midpoint of the next face each time 
            int dx = polyX [ bar ] + polyX [ ( bar + 1 ) % 6 ];
            int dy = polyY [ bar ] + polyY [ ( bar + 1 ) % 6 ];

            for ( int hex = 0; hex < rank; ++hex ) {
                drawHex ( g, x, y, rank );
                x += dx;
                y += dy;
            }
        }
    }

Full example:

import javax.swing.*;
import java.awt.*;

public class Hexagons
{
    public static void main ( String...args ) throws Exception
    {
        SwingUtilities.invokeAndWait ( new Runnable () {
            @Override
            public void run () {
                new Hexagons().run();
            }
        } );
    }

    Hexagons ()
    {
        final JFrame frame = new JFrame();

        frame.setDefaultCloseOperation ( JFrame.EXIT_ON_CLOSE );

        final JPanel panel = new JPanel () {
            @Override
            public void paintComponent ( Graphics g ) {
                Graphics2D g2D = ( Graphics2D ) g;

                g2D.setRenderingHint ( RenderingHints.KEY_ANTIALIASING,
                RenderingHints.VALUE_ANTIALIAS_ON );

                drawHexes ( g2D, getWidth() / 2, getHeight() / 2 );
            }
        };

        count = 5;

        frame.add ( panel );
        frame.setSize ( 400, 400 );
        frame.setVisible ( true );

    }

    void run () { }

    int count;


    void drawHexes ( Graphics2D g, int cx, int cy )
    {
        int count = Math.min ( 20, Math.min ( cx, cy ) / 34 );

        drawHex ( g, cx, cy, 0 );

        for ( int rank = 1; rank < count; ++rank ) {

            for ( int bar = 0; bar < 6; ++bar ) {
                int x = ( polyX [ ( bar + 4 ) % 6 ] + polyX [ ( bar + 5 ) % 6 ] ) * rank;
                int y = ( polyY [ ( bar + 4 ) % 6 ] + polyY [ ( bar + 5 ) % 6 ] ) * rank;

                int dx = polyX [ bar ] + polyX [ ( bar + 1 ) % 6 ];
                int dy = polyY [ bar ] + polyY [ ( bar + 1 ) % 6 ];

                for ( int hex = 0; hex < rank; ++hex ) {
                    drawHex ( g, cx + x, cy + y, rank );
                    x += dx;
                    y += dy;
                }
            }
        }
    }

    static int polyX[] = { 20, 10, -10, -20, -10,  10 };
    static int polyY[] = {  0, 17,  17,   0, -17, -17 }; 
    static Color fill[] = new Color[20];
    static Color line[] = new Color[20];
    static BasicStroke stroke = new BasicStroke ( 1.5f );

    // make it pretty
    static {
        for ( int rank = 0; rank < 20; ++rank ) {
            double theta0 = rank * 2 * Math.PI / 20;
            double theta1 = theta0 + Math.PI * 2.0/3.0;
            double theta2 = theta1 + Math.PI * 2.0/3.0;

            fill [ rank ] = new Color ( 
                ( int ) ( 128 + 64 * Math.sin ( theta0 ) ),
                ( int ) ( 128 + 64 * Math.sin ( theta1 ) ),
                ( int ) ( 128 + 64 * Math.sin ( theta2 ) ) );
            line [ rank ] = new Color ( 
                ( int ) ( 64+ 32 * Math.sin ( theta0 ) ),
                ( int ) ( 64 + 32 * Math.sin ( theta1 ) ),
                ( int ) ( 64+ 32 * Math.sin ( theta2 ) ) );
        }
    }

    void drawHex ( Graphics2D g, int cx, int cy, int rank ) {
        g.translate ( cx, cy );
        g.setPaint ( fill [ rank ] );
        g.fillPolygon ( polyX, polyY, 6 );
        g.setColor ( line [ rank ] );
        g.setStroke ( stroke );
        g.drawPolygon ( polyX, polyY, 6 );
        g.translate ( -cx, -cy );
    }
}

Solution 2:

You may get an inspiration from Sergey Malenkov's Hexagonal Tile Map applet.


Post a Comment for "Creating 10.000 Connected Hexagon Page?"