Hexagon
lastmod 2023-08-25created 2014-12-2313 edits
(For base 16, see Hexadecimal.)
In geometry, a hexagon is a shape with six sides.
Each angle of a regular hexagon measures 120°, so it can tessellate. The sum of the interior angles of a regular hexagon is 720°.
Sample design
Black-hexagon-border-emblems-set-white-background-styled-borders-91979160.png
How to draw a regular hexagon in code
Assume there is a circle. If you divide the circle exactly into six arcs, each interior angle is 60 degrees.
Hexagon-01.jpg
Assume the first point, at 12 o'clock, is (0, r). When plotting points clockwise, the coordinates of the second point are \((\frac{\sqrt{3}}{2}r, 0.5r)\).
Hexagon-02.jpg
The calculation is as follows:
- To make the Trigonometric functions calculation easier, move the position rotated by 60 degrees onto the xy plane, so you can use
직각(90º) - 60º = 30º. - On the x-axis, \(cos(30^{\circ}) = \frac{\sqrt{3}}{2}\), so \(\frac{x}{r} = \frac{\sqrt{3}}{2}\), \(x = \frac{\sqrt{3}}{2}r\)
- On the y-axis, \(sin(30^{\circ}) = \frac{1}{2}\), so \(\frac{y}{r} = \frac{1}{2}\), \(y = \frac{1}{2}r\)
Flipping along the X and Y axes gives all the vertices.
Godot
using Godot;
using System;
using System.Collections.Generic;
[Tool]
public class HexagonTile : Node2D
{
private static float COS30 = (float)Math.Sqrt(3f) / 2f;
private static float SIN30 = 0.5f;
private float _radius = 48f;
[Export]
public float radius {
get => _radius;
set
{
this._radius = value;
this.UpdatePoints();
this.Update();
}
}
private Vector2 _offset = new Vector2(0, 0);
[Export]
private Vector2 offset
{
get => _offset;
set
{
this._offset = value;
this.UpdatePoints();
this.Update();
}
}
private Color _lineColor = new Color(1f, 1f, 1f, 1f);
[Export]
private Color lineColor
{
get => _lineColor;
set
{
this._lineColor = value;
this.Update();
}
}
private Color _fillColor = new Color(0f, 0f, 0f, 0f);
[Export]
private Color fillColor
{
get => _fillColor;
set
{
this._fillColor = value;
this.Update();
}
}
private float _lineWidth = 1f;
[Export]
private float lineWidth
{
get => _lineWidth;
set
{
this._lineWidth = value;
this.UpdatePoints();
this.Update();
}
}
private bool _antialiased = true;
[Export]
private bool antialiased
{
get => _antialiased;
set
{
this._antialiased = value;
this.Update();
}
}
private List<Vector2> _points = new List<Vector2>();
static public List<Vector2> MakeHexagonPoints(Vector2 center, float radius)
{
var r = radius;
var x = COS30 * radius;
var y = SIN30 * radius;
var cx = center.x;
var cy = center.y;
var points = new List<Vector2>();
points.Clear();
points.Add(new Vector2(cx + x, cy));
points.Add(new Vector2(cx + x, cy + y));
points.Add(new Vector2(cx + 0, cy + r));
points.Add(new Vector2(cx - x, cy + y));
points.Add(new Vector2(cx - x, cy - y));
points.Add(new Vector2(cx + 0, cy - r));
points.Add(new Vector2(cx + x, cy - y));
points.Add(new Vector2(cx + x, cy));
return points;
}
public void UpdatePoints()
{
this._points = MakeHexagonPoints(this._offset, this._radius);
}
public override void _Draw()
{
if (this._points.Count == 0) {
this.UpdatePoints();
}
var fillColors = new Color[] { this._fillColor };
DrawPolygon(this._points.ToArray(), fillColors);
if (this._lineWidth > 0) {
DrawPolyline(
this._points.ToArray(),
this._lineColor,
this._lineWidth,
this._antialiased);
}
}
}
If the vertex joints of the DrawPolyline function look unnatural, see the "Line Connection issue" item on Godot:CanvasItem#draw_polyline.
pygame
def draw_ngon(Surface, color, n, radius, position):
pi2 = 2 * 3.14
for i in range(0, n):
pygame.draw.line(Surface, color, position, (cos(i / n * pi2) * radius + position[0], sin(i / n * pi2) * radius + position[1]))
return pygame.draw.lines(Surface,
color,
True,
[(cos(i / n * pi2) * radius + position[0], sin(i / n * pi2) * radius + position[1]) for i in range(0, n)])