Okay, so I wanted to mess around with making hexagonal grids. I’d seen some cool stuff online and thought, “Why not give it a shot?” I’m calling it “superhexa” because, well, it sounds cool, and it’s all about hexagons.
Getting Started
First, I needed a basic setup. I decided to use JavaScript with the * library because it’s super easy for drawing stuff on a canvas. No fancy frameworks or anything, just plain old HTML, CSS, and JavaScript.
I created an file with the basic structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SuperHexa</title>
<script src="*/npm/p5@1.4.0/lib/*"></script>
<script src="*"></script>
</head>
<body>
<main>
</main>
</body>
</html>
Pretty standard stuff. The important part is that I’m loading the * library and my own script, .
Drawing a Single Hexagon
Next, I started working on . The first thing I did was create a setup() function to create the canvas:
function setup() {
createCanvas(600, 400);
Then, I needed a function to draw a single hexagon. I found a neat formula online for calculating the points of a hexagon, given a center point and a radius. I won’t go into the math details, but I ended up with this function:
function hexagon(x, y, radius) {
beginShape();
for (let a = 0; a < TWO_PI; a += TWO_PI / 6) {
let sx = x + cos(a) radius;
let sy = y + sin(a) radius;
vertex(sx, sy);
endShape(CLOSE);
Now, in the draw() function, I use this new create hexagon function.
function draw() {
background(220);
hexagon(width / 2, height / 2, 50);
I cleared the background and drew a hexagon in the center of the canvas with a radius of 50. And there it was, my first hexagon!
Creating a Grid
Drawing one hexagon is cool, but I wanted a whole grid. I figured out that I needed to offset each row of hexagons. After some trial and error, I came up with a nested loop to draw the grid:
function draw() {
background(220);
let size = 30;
let w = size 2;
let h = size sqrt(3);
for (let j = 0; j h < height; j++) {
for (let i = 0; i w < width; i++) {
let x = i w + (j % 2) size;
let y = j h;
hexagon(x, y, size);
I calculated the width and height of each hexagon based on the size. Then, for each row (j), I offset the x-coordinate of every other hexagon (j % 2) by half the width of a hexagon.
Adding Some Color
A plain grid is boring, so I added some color. I wanted each hexagon to have a random fill color. I modified the hexagon() function to take a color parameter:
function hexagon(x, y, radius, color) {
fill(color);
stroke(0);
beginShape();
for (let a = 0; a < TWO_PI; a += TWO_PI / 6) {
let sx = x + cos(a) radius;
let sy = y + sin(a) radius;
vertex(sx, sy);
endShape(CLOSE);
Then, inside the nested loop, I generated a random color for each hexagon:
for (let j = 0; j h < height; j++) {
for (let i = 0; i w < width; i++) {
let x = i w + (j % 2) size;
let y = j h;
let c = color(random(255), random(255), random(255));
hexagon(x, y, size,c);
Now I had a colorful hexagonal grid! It looked pretty neat.
Making it Interactive
Finally, I wanted to make it interactive. I decided to change the color of a hexagon when the mouse is over it. I added a mouseX and mouseY check inside the loop:
let size = 30;
let w = size 2;
let h = size sqrt(3);
for (let j = 0; j h < height; j++) {
for (let i = 0; i w < width; i++) {
let x = i w + (j % 2) size;
let y = j h;
// Check if the mouse is inside the hexagon
let distance = dist(mouseX, mouseY, x, y);
if (distance < size )
let c = color(255,0,0); //red color
hexagon(x, y, size, c);
else{
let c = color(random(255), random(255), random(255));
hexagon(x, y, size,c);
If I moved the mouse over one of the hexagons, it would change to red.
Final Thoughts
And that’s it! I created a simple, interactive hexagonal grid. It was a fun little project, and I learned a lot along the way. There’s definitely more I could do with this, like adding animations or different interaction modes, but I’m happy with how it turned out.