Grant Muller

Drawing a Hexagon in Processing / Java

As part of my little HarmonicTable project I spent a lot of time figuring out how to draw a proper hexagon. It seems I wasn’t alone in this endeavor, as I’ve received a few comments and e-mails about how exactly to do this. At the request of others I’ve moved the Hexagon class back into Processing, and written a dead simple PDE sketch to show you how to use it.

First, lets look at the constructor for the Hexagon class:

public Hexagon(Object p, int newStartX, int newStartY, int sideLength){
    if (p instanceof PGraphics)
        buffer = (PGraphics) p;
    if (p instanceof PApplet)
        parent = (PApplet) p;</p>
<pre><code>setStartX(newStartX);
setStartY(newStartY);
c = sideLength;
a = c/2;
b = parent.sin(parent.radians(60))*c;
</code></pre>
<p>}

The constructor takes 4 parameters:

  • Object p: This is where you want the object to be drawn, you should just pass in ‘this’ in PDE.
  • newStartX, newStartY: The starting coordinates of the hexagon. You may pass in 0 for both if you are going to translate the screen yourself.
  • sideLength: This tells us how big to draw the hexagon based on the length of one side
Based on these values we make some calculations for the rest of the sides. Here is a picture illustrating the sides we’re calculating so you can get a better idea of what they actually mean.

Now that we have an object with all of the side lengths calculated, its simply a matter of drawing this to the screen (or buffer), using the drawHex function:

public void drawHex(){
    //draw hex shape
    parent.beginShape();
        parent.vertex(0,b);
        parent.vertex(a,0);
        parent.vertex(a+c,0);
        parent.vertex(2<em>c,b);
        parent.vertex(a+c,2</em>b);
        parent.vertex(a,2*b);
        parent.vertex(0,b);
    parent.endShape();
}

This code just looks at the a,b, and c coordinates we’ve stored in the object, and creates a shape with the vertices at the correct points.

If you import the Hexagon class into processing, using it is easy. Here is what a simple sketch to draw a hexagon would look like:

Hexagon hexagon;</p>
<p>void setup(){
  hexagon = new Hexagon(this, 10, 10, 15);
}</p>
<p>void draw(){
  hexagon.drawTranslatedHex();
}

Easy! From there you can create an array of Hexagons if you like, with x and y coordinates that draw them wherever you like. If you want to make the translations yourself, and apply fill and stroke values, you’ll want to use the drawHex() function directly, and move about the screen wherever you like. If you’re unfamiliar with translations in processing you should check out this reference.

That’s pretty much it, here is the exported Processing sketch:

Hexagon PDE Sketch

8 comments

  1. Wow – I googled “draw a hexagon in processing” and this was the first hit on the list. And it’s exactly what I was looking for. Thanks, Grant!

    1. That sir, is what its all about. Hope I saved you a mountain of time. With any luck, you’ll do some amazing thing that saves all of us a heap of time as well. Take care.

  2. Thanks for the math lesson. Don’t tell my geometry teacher I forgot about all this! I used the concept for a handheld game I’m developing and I noticed you have one too many vertices. It appears that you duplicated the 5th and 6th entries (a + c, 2 * b). I also chose to use a constant instead of having the processor calculate Sin(60) every time: 0.86602540378443864676372317075294. Ok, that’s a little too much precision, but you get the idea. Thanks again for the post. It got me going in the right direction.

    1. Whoops! Thanks for noticing, luckily that only ended up in the post (my real code has the correct number of vertices). As far as using a constant instead, yeah, that’ll save you some time if you’re having to recalculate the lengths for animation, zooming in and out, what have you, my code only has to calculate that value once, so it wasn’t going to help me much. As usual, trade-off between performance and code readability. Might wanna put a comment in your code that says “this is the value of sin(60)” so if someone else looks at it their mind won’t be boggled trying to figure out what that incredibly huge value is.

      Glad it helped.

  3. Thank you for this!

    I’ve been trying to jog my memory on how to make a hexagon programmatically and this example in java did the trick!

  4. Hello there, I have just been searching around the internet about how to do a Hexfield Strategy Game in Java. That really helps me a lot :).

Leave a Reply

Your email address will not be published. Required fields are marked *