Update Hex generation to allow Triangles, Squares and Hexagons, the only 3 shapes that allow tiling

app.py

@@ -67,6 +67,7 @@ from utils.image_utils import (
 from utils.hex_grid import (
     generate_hexagon_grid,
     generate_hexagon_grid_interface,
+    map_sides
 )
 
 from utils.excluded_colors import (
@@ -1360,10 +1361,11 @@ with gr.Blocks(css_paths="style_20250314.css", title=title, theme='Surn/beeuty',
             end_x = gr.Number(label="End X", value=-20, minimum=-512, maximum= 512, precision=0)
             end_y = gr.Number(label="End Y", value=-20, minimum=-512, maximum= 512, precision=0)
         with gr.Row():
-            x_spacing = gr.Number(label="Adjust Horizontal spacing", value=-8, minimum=-200, maximum=200, precision=1)
+            x_spacing = gr.Number(label="Adjust Horizontal spacing", value=-10, minimum=-200, maximum=200, precision=1)
             y_spacing = gr.Number(label="Adjust Vertical spacing", value=3, minimum=-200, maximum=200, precision=1)
         with gr.Row():
             rotation = gr.Slider(-90, 180, 0.0, 0.1, label="Hexagon Rotation (degree)")
+            sides = gr.Dropdown(label="Grid Shapes", info="other choices do not form grids",choices=["triangle", "square", "hexagon"], value="hexagon")
             add_hex_text = gr.Dropdown(label="Add Text to Hexagons", choices=[None, "Column-Row Coordinates", "Column(Letter)-Row Coordinates", "Column-Row(Letter) Coordinates", "Sequential Numbers", "Playing Cards Sequential", "Playing Cards Alternate Red and Black", "Custom List"], value=None)
         with gr.Row():
             custom_text_list = gr.TextArea(label="Custom Text List", value=constants.cards_alternating, visible=False,)
@@ -1486,9 +1488,9 @@ with gr.Blocks(css_paths="style_20250314.css", title=title, theme='Surn/beeuty',
     delete_button.click(fn=delete_color, inputs=[selected_row, color_display], outputs=[color_display])
     exclude_color_button.click(fn=add_color, inputs=[color_picker, gr.State(excluded_color_list)], outputs=[color_display, gr.State(excluded_color_list)])
     hex_button.click(
-        fn=lambda hex_size, border_size, input_image, start_x, start_y, end_x, end_y, rotation, background_color, background_opacity, border_color, border_opacity, fill_hex, color_display, filter_color, x_spacing, y_spacing, add_hex_text, custom_text_list, custom_text_color_list: 
-            gr.Warning("Please upload an Input Image to get started.") if input_image is None else hex_create(hex_size, border_size, input_image, start_x, start_y, end_x, end_y, rotation, background_color, background_opacity, border_color, border_opacity, fill_hex, color_display, filter_color, x_spacing, y_spacing, add_hex_text, custom_text_list, custom_text_color_list),
-        inputs=[hex_size, border_size, input_image, start_x, start_y, end_x, end_y, rotation, background_color, background_opacity, border_color, border_opacity, fill_hex, color_display, filter_color, x_spacing, y_spacing, add_hex_text, custom_text_list, custom_text_color_list],
+        fn=lambda hex_size, border_size, input_image, start_x, start_y, end_x, end_y, rotation, sides, background_color, background_opacity, border_color, border_opacity, fill_hex, color_display, filter_color, x_spacing, y_spacing, add_hex_text, custom_text_list, custom_text_color_list: 
+            gr.Warning("Please upload an Input Image to get started.") if input_image is None else hex_create(hex_size, border_size, input_image, start_x, start_y, end_x, end_y, rotation, background_color, background_opacity, border_color, border_opacity, fill_hex, color_display, filter_color, x_spacing, y_spacing, add_hex_text, custom_text_list, custom_text_color_list, map_sides(sides)),
+        inputs=[hex_size, border_size, input_image, start_x, start_y, end_x, end_y, rotation, sides, background_color, background_opacity, border_color, border_opacity, fill_hex, color_display, filter_color, x_spacing, y_spacing, add_hex_text, custom_text_list, custom_text_color_list],
         outputs=[output_image, overlay_image],
         scroll_to_output=True
     )

utils/color_utils.py

@@ -5,6 +5,7 @@ import re
 import cairocffi as cairo
 import pangocffi
 import pangocairocffi
+import math
 
 
 def multiply_and_clamp(value, scale, min_value=0, max_value=255):
@@ -196,7 +197,7 @@ def draw_text_with_emojis(image, text, font_color, offset_x, offset_y, font_name
     # Set text color
     r, g, b, a = parse_hex_color(font_color)
     context.set_source_rgba(r , g , b , a )
-    # Move to the position (top-left corner adjusted to center the text)
+    # Move to the position (top-left corner adjusted to position the text)
     context.move_to(offset_x, offset_y)
     # Render the text
     pangocairocffi.show_layout(context, layout)
@@ -211,4 +212,75 @@ def draw_text_with_emojis(image, text, font_color, offset_x, offset_y, font_name
     "BGRA",  # Cairo stores data in BGRA order
     surface.get_stride(),
     ).convert("RGBA")
+    return modified_image
+
+def draw_rotated_text_with_emojis(image, text, font_color, offset_x, offset_y, font_name, font_size, angle=0):
+    """
+    Draws text with emojis directly onto the given PIL image at specified coordinates with the specified color and rotation.    
+    Parameters:
+        image (PIL.Image.Image): The RGBA image to draw on.
+        text (str): The text to draw, including emojis.
+        font_color (tuple): RGBA color tuple for the text (e.g., (255, 0, 0, 255)).
+        offset_x (int): The x-coordinate for the text center position.
+        offset_y (int): The y-coordinate for the text center position.
+        font_name (str): The name of the font family.
+        font_size (int): Size of the font.
+        angle (float): Rotation angle in degrees (default is 0, positive values rotate counter-clockwise).    
+    Returns:
+        PIL.Image.Image: The modified image with the text drawn.
+    """
+    if image.mode != 'RGBA':
+        raise ValueError("Image must be in RGBA mode.")    
+    # Convert PIL image to a mutable bytearray
+    img_data = bytearray(image.tobytes("raw", "BGRA"))
+    
+    # Create a Cairo ImageSurface that wraps the image's data
+    surface = cairo.ImageSurface.create_for_data(
+        img_data,
+        cairo.FORMAT_ARGB32,
+        image.width,
+        image.height,
+        image.width * 4
+    )
+    context = cairo.Context(surface)    
+    # Create Pango layout
+    layout = pangocairocffi.create_layout(context)
+    layout._set_text(text)    
+    # Set font description
+    desc = pangocffi.FontDescription()
+    desc._set_family(font_name)
+    desc._set_size(pangocffi.units_from_double(font_size))
+    layout._set_font_description(desc)    
+    # Get the ink and logical rectangles of the layout
+    #ink_rect, logical_rect = layout.get_extents()
+    # Extract width and height from the logical rectangle, convert from pango units to pixels
+    #width = logical_rect.width / 1024.0
+    #height = logical_rect.height /1024.0
+    # Set text color
+    r, g, b, a = parse_hex_color(font_color)
+    context.set_source_rgba(r, g, b, a)    
+    # Save the current context state
+    context.save()    
+    # Move to the position (top-left corner adjusted to position the text)
+    context.translate(offset_x, offset_y)
+    # Rotate by the specified angle (convert degrees to radians)
+    context.rotate(math.radians(angle))    
+    # Move to the position to center the text at (0, 0) in the transformed context
+    #context.move_to(-width / 2,-height / 2)
+    # Render the text
+    pangocairocffi.show_layout(context, layout)    
+    # Restore the original context state
+    context.restore()    
+    # Flush the surface to ensure all drawing operations are complete
+    surface.flush()    
+    # Convert the modified bytearray back to a PIL Image
+    modified_image = Image.frombuffer(
+        "RGBA",
+        (image.width, image.height),
+        bytes(img_data),
+        "raw",
+        "BGRA",
+        surface.get_stride(),
+    ).convert("RGBA")
+    
     return modified_image

utils/hex_grid.py

@@ -11,7 +11,7 @@ from utils.excluded_colors import (
     excluded_color_list,
 )
 from utils.image_utils import multiply_and_blend_images
-from utils.color_utils import update_color_opacity, parse_hex_color, draw_text_with_emojis, hex_to_rgb
+from utils.color_utils import update_color_opacity, parse_hex_color, draw_rotated_text_with_emojis, hex_to_rgb
 import random  # For random text options
 import utils.constants as constants  # Import constants
 import ast
@@ -33,6 +33,10 @@ def calculate_font_size(hex_size, padding=0.6, size_ceil=20, min_font_size=8):
         return None  # Hex is too small for text
     return min(font_size, size_ceil)
 
+def map_sides(selected_side):
+    mapping = {"triangle": 3, "square": 4, "hexagon": 6}
+    return mapping[selected_side]
+
 def generate_hexagon_grid(hex_size, border_size, input_image=None, image_width=0, image_height=0, start_x=0, start_y=0, end_x=0, end_y=0, rotation=0, background_color="#ede9ac44", border_color="#12165380", fill_hex=True, excluded_color_list=excluded_color_list, filter_color=False, x_spacing=0, y_spacing=0, sides=6):
     if input_image:
         image_width, image_height = input_image.size
@@ -67,13 +71,13 @@ def generate_hexagon_grid(hex_size, border_size, input_image=None, image_width=0
     draw = ImageDraw.Draw(image, mode="RGBA")
     hex_width = hex_size * 2
     hex_height = hex_size * 2
-    hex_horizontal_spacing = (hex_width ) + (hex_border_size if hex_border_size < 0 else 0) + x_spacing #* 0.8660254
+    hex_horizontal_spacing = hex_width + (hex_border_size if hex_border_size < 0 else 0) + x_spacing #* 0.8660254
     hex_vertical_spacing = hex_height + (hex_border_size if hex_border_size < 0 else 0) + y_spacing
     col = 0
     row = 0
     def draw_hexagon(x, y, color="#FFFFFFFF", rotation=0, outline_color="#12165380", outline_width=0, sides=6):
-        #side_length = (hex_size * 2) / math.sqrt(3)
-        side_length = 2 * hex_size * math.tan(math.pi / sides)
+        #side_length = (hex_size * 2) / math.sqrt(3) #hexagons only
+        side_length = 2 * hex_size * math.tan(math.pi / sides) #hexagons, squares, triangle can tile
         points = [(x + side_length * math.cos(math.radians(angle + rotation)), y + side_length * math.sin(math.radians(angle + rotation))) for angle in range(0, 360, (360 // sides))]
         draw.polygon(points, fill=color, outline=outline_color, width=max(-5, outline_width))
     # Function to range a floating number
@@ -88,11 +92,32 @@ def generate_hexagon_grid(hex_size, border_size, input_image=None, image_width=0
         col = 0 
         for x in frange(start_x, max(image_width + additional_width, image_width, rotated_image_width) + (end_x - start_x), hex_horizontal_spacing):
             col += 1
-            x_offset = hex_width // 2
-            y_offset = (hex_height // 2) #* 1.15470054342517
-            # Adjust y_offset for columns 1 and 3 to overlap
-            if col % 2 == 1:
-                y_offset -= (hex_height // 2) #* 0.8660254
+
+            # Calculate offsets based on the number of sides
+            if sides == 4:
+                # Squares line up perfectly; no vertical offset is needed.
+                x_offset = int(hex_width + hex_horizontal_spacing * 2)
+                y_offset = 0
+                rotation_offset = -45
+            elif sides == 3:
+                # For equilateral triangles, you might offset rows by about one-third
+                # of the triangle�s height. Adjust as needed.
+                x_offset = hex_width + hex_horizontal_spacing
+                y_offset = int((hex_height * 2) + hex_vertical_spacing)
+                rotation_offset = -60
+                # Adjust y_offset for columns 1 and 3 to overlap
+                if col % 2 == 1:
+                    y_offset -= (hex_height // 2) #* 0.8660254
+                    rotation_offset = 0
+            else:
+                # Default behavior (6 sides)
+                x_offset = hex_width // 2
+                y_offset = (hex_height // 2) #* 1.15470054342517
+                rotation_offset = 0
+                # Adjust y_offset for columns 1 and 3 to overlap
+                if col % 2 == 1:
+                    y_offset -= (hex_height // 2) #* 0.8660254
+
             if rotated_input_image:
                 # Sample the colors of the pixels in the hexagon, if fill_hex is True
                 if fill_hex:
@@ -121,12 +146,12 @@ def generate_hexagon_grid(hex_size, border_size, input_image=None, image_width=0
                     else:
                         print(f"color found: {avg_color}")
                         #draw_hexagon(x + x_offset, y + y_offset, color="#{:02x}{:02x}{:02x}{:02x}".format(*avg_color if fill_hex else (0,0,0,0)), outline_color=border_color, outline_width=hex_border_size)
-                        draw_hexagon(x + x_offset, y + y_offset, color="#{:02x}{:02x}{:02x}{:02x}".format(*avg_color), outline_color=border_color, outline_width=hex_border_size, sides=sides)
+                        draw_hexagon(x + x_offset, y + y_offset, color="#{:02x}{:02x}{:02x}{:02x}".format(*avg_color), rotation=rotation_offset, outline_color=border_color, outline_width=hex_border_size, sides=sides)
                 else:
-                    draw_hexagon(x + x_offset, y + y_offset, color="#000000", outline_color=border_color, outline_width=hex_border_size, sides=sides)
+                    draw_hexagon(x + x_offset, y + y_offset, color="#000000", rotation=rotation_offset, outline_color=border_color, outline_width=hex_border_size, sides=sides)
             else:
                 color = "#%02x%02x%02x%02x" % (128, math.ceil(y) % 255, math.ceil(x) % 255, 255) if fill_hex else (0,0,0,0)
-                draw_hexagon(x + x_offset, y + y_offset, color=color, outline_color=border_color, outline_width=hex_border_size, sides=sides)
+                draw_hexagon(x + x_offset, y + y_offset, color=color, rotation=rotation_offset, outline_color=border_color, outline_width=hex_border_size, sides=sides)
     if rotation != 0:
         #image.show()
         # Rotate the final image
@@ -178,8 +203,8 @@ def generate_hexagon_grid_with_text(hex_size, border_size, input_image=None, ima
     draw = ImageDraw.Draw(image, mode="RGBA")
     hex_width = hex_size * 2
     hex_height = hex_size * 2
-    hex_horizontal_spacing = (hex_width ) + (hex_border_size if hex_border_size < 0 else 0) + x_spacing #* 0.8660254
-    hex_vertical_spacing = hex_height + (hex_border_size if hex_border_size < 0 else 0) + y_spacing
+    hex_horizontal_spacing = (hex_width + (hex_border_size if hex_border_size < 0 else 0) + x_spacing) * ((6 / sides) if sides > 3 else 1.3333) #* 0.8660254
+    hex_vertical_spacing = (hex_height + (hex_border_size if hex_border_size < 0 else 0) + y_spacing) * ((6 / sides) if sides > 3 else 3.0)
     col = 0
     row = 0
     ## Function to draw optional text
@@ -213,8 +238,8 @@ def generate_hexagon_grid_with_text(hex_size, border_size, input_image=None, ima
             pass
     hex_index = -1  # Initialize hex index
     def draw_hexagon(x, y, color="#FFFFFFFF", rotation=0, outline_color="#12165380", outline_width=0, sides=6):
-        #side_length = (hex_size * 2) / math.sqrt(3)
-        side_length = 2 * hex_size * math.tan(math.pi / sides)
+        #side_length = (hex_size * 2) / math.sqrt(3) #hexagons only
+        side_length = 2 * hex_size * math.tan(math.pi / sides) #hexagons, squares, triangle can tile
         points = [(x + side_length * math.cos(math.radians(angle + rotation)), y + side_length * math.sin(math.radians(angle + rotation))) for angle in range(0, 360, (360 // sides))]
         draw.polygon(points, fill=color, outline=outline_color, width=max(-5, outline_width))
     # Function to range a floating number
@@ -230,11 +255,33 @@ def generate_hexagon_grid_with_text(hex_size, border_size, input_image=None, ima
         for x in frange(start_x, max(image_width + additional_width, image_width, rotated_image_width) + (end_x - start_x), hex_horizontal_spacing):
             col += 1
             hex_index += 1  # Increment hex index
-            x_offset = hex_width // 2
-            y_offset = (hex_height // 2) #* 1.15470054342517
-            # Adjust y_offset for columns 1 and 3 to overlap
-            if col % 2 == 1:
-                y_offset -= (hex_height // 2) #* 0.8660254
+
+            # Calculate offsets based on the number of sides
+            if sides == 4:
+                # Squares line up perfectly; no vertical offset is needed.
+                x_offset = hex_size
+                y_offset = 0
+                rotation_offset = -45
+            elif sides == 3:
+                # For equilateral triangles, you might offset rows by about one-third
+                # of the triangle�s height. Adjust as needed.
+                x_offset = -hex_border_size * 2 #hex_width * math.tan(math.pi / sides) - hex_border_size * 2
+                y_offset = -hex_border_size * 2
+                rotation_offset = -60
+                # Adjust y_offset for columns 1 and 2 to overlap
+                if col % 2 == 1:
+                    x_offset += int(hex_size * 0.8660254)
+                    y_offset -= int(hex_height * 1.5) 
+                    rotation_offset = 0
+            else:
+                # Default behavior (6 sides)
+                x_offset = hex_width // 2
+                y_offset = (hex_height // 2) #* 1.15470054342517
+                rotation_offset = 0
+                # Adjust y_offset for columns 1 and 3 to overlap
+                if col % 2 == 1:
+                    y_offset -= (hex_height // 2) #* 0.8660254
+
             if rotated_input_image:
                 # Sample the colors of the pixels in the hexagon, if fill_hex is True
                 if fill_hex:
@@ -263,12 +310,12 @@ def generate_hexagon_grid_with_text(hex_size, border_size, input_image=None, ima
                     else:
                         print(f"color found: {avg_color}")
                         #draw_hexagon(x + x_offset, y + y_offset, color="#{:02x}{:02x}{:02x}{:02x}".format(*avg_color if fill_hex else (0,0,0,0)), outline_color=border_color, outline_width=hex_border_size, sides=sides)
-                        draw_hexagon(x + x_offset, y + y_offset, color="#{:02x}{:02x}{:02x}{:02x}".format(*avg_color), outline_color=border_color, outline_width=hex_border_size, sides=sides)
+                        draw_hexagon(x + x_offset, y + y_offset, color="#{:02x}{:02x}{:02x}{:02x}".format(*avg_color), rotation=rotation_offset, outline_color=border_color, outline_width=hex_border_size, sides=sides)
                 else:
-                    draw_hexagon(x + x_offset, y + y_offset, color="#00000000", outline_color=border_color, outline_width=hex_border_size, sides=sides)
+                    draw_hexagon(x + x_offset, y + y_offset, color="#00000000", rotation=rotation_offset, outline_color=border_color, outline_width=hex_border_size, sides=sides)
             else:
                 color = "#%02x%02x%02x%02x" % (128, math.ceil(y) % 255, math.ceil(x) % 255, 255) if fill_hex else (0,0,0,0)
-                draw_hexagon(x + x_offset, y + y_offset, color=color, outline_color=border_color, outline_width=hex_border_size, sides=sides)
+                draw_hexagon(x + x_offset, y + y_offset, color=color, rotation=rotation_offset, outline_color=border_color, outline_width=hex_border_size, sides=sides)
             # Draw text in hexagon
             if add_hex_text_option != None:
                 font_size = calculate_font_size(hex_size, 0.333, 20, 7)
@@ -322,18 +369,19 @@ def generate_hexagon_grid_with_text(hex_size, border_size, input_image=None, ima
                         # Calculate position to center text in hexagon
                         # text_x = x + x_offset - (text_width / 2)
                         # text_y = y + y_offset - (text_height / 2)
-                        # Calculate position to center text in hexagon
+                        # Calculate position to top left text in hexagon
                         text_x = x + x_offset - (hex_size / 1.75)
-                        text_y = y + y_offset - (hex_size / 1.25)
+                        text_y = y + y_offset - (hex_size / 1.75)
                         # Draw the text directly onto the image
-                        font_image = draw_text_with_emojis(
+                        font_image = draw_rotated_text_with_emojis(
                             image=font_image,
                             text=text,
                             font_color=update_color_opacity(text_color,255),
                             offset_x=text_x,
                             offset_y=text_y,
                             font_name=font_name,
-                            font_size=font_size
+                            font_size=font_size,
+                            angle = -1.0 * rotation
                         )                        
                         # # Use Pilmoji to draw text with emojis
                         # with Pilmoji(image) as pilmoji: