About Project:
This project explores the application of mathematical rules, including modular arithmetic and randomized probability clustering, to generate dynamic patterns within triangular hexagonal grids. Inspired by modular mosaic games, this experiment studies how these mathematical principles can shape visual design and aesthetic expression.
I became interested in the concept of dynamic patterns on triangular grids while reading a chapter in Bruno Munari’s book on Triangle, which references Tomshinsky’s work. The original concept involved a mosaic game where players used triangular pieces in six colors, arranging them freely to form larger hexagons. The game studied how players psychologically approached patterns and color arrangements
Unable to find detailed information on Tomshinsky’s game, this project began as an experiment based on its core idea. Starting with making a simple grid with equilateral triangles in six colors, the project developed into an exploration of how simple constraints—like limiting the number of colors in each small hexagon—could generate diverse patterns. Mathematical rules were introduced to further expand the possibilities, resulting in a dynamic, rule-based system of visual experimentation.
Overview:
Developed using P5.js, the project constructs a triangular hexagon grid where triangles are grouped and colored based on adjustable rules. By applying mathematical rules and constraints to the triangle grid, the project demonstrates how small changes in geometry, color distribution, and grouping affect the overall visual output.
User Guide:
Color Parameter:
- Color Blending: Controls how smoothly colors blend between adjacent triangles.
- Color Shuffle: Randomizes the color selection for the grid each time it’s adjusted.
Pattern Parameter:
- Pattern Rule: Sets different color arrangement rules, from random patterns to structured designs.
- Triangle Grouping: Adjusts how many triangles are grouped in the hexagonal unit.
Shape Parameter:
- Corner Radius: Changes the roundness of hexagon corners.
- Hexagon Size: Adjusts the size of hexagons in the grid, making them smaller or larger.
This work is licensed under CC BY-NC-SA 4.0
ตารางหกเหลี่ยมสามเหลี่ยม:
โปรเจคนี้เป็นการศึกษาความเป็นไปได้ในการประยุกต์ใช้กฎทางคณิตศาสตร์ เช่น คณิตมอดุลาร์ (Modular Arithmetic) และความน่าจะเป็นแบบสุ่ม (Randomized Probability Clustering) เพื่อสร้างรูปแบบที่เปลี่ยนแปลงได้ในกริดสามเหลี่ยมหกเหลี่ยม โดยการทดลองนี้มีวัตถุประสงค์เพื่อทำความเข้าใจการนำหลักการทางคณิตศาสตร์ไปใช้ร่วมกับการกำหนดรูปแบบทางสุนทรียศาสตร์ของแพทเทิร์นที่สร้างจากกริดสามเหลี่ยมได้อย่างไรบ้าง
ในเบื้องต้น งานชิ้นนี้ได้รับแรงบันดาลใจจากบทความเรื่องสามเหลี่ยมในหนังสือ Square Circle Triangle ของคุณ Bruno Munari โดยมีการอ้างอิงถึงผลงานของคุณ Tomshinsky เมื่อปี 1968 เกี่ยวกับการสร้างเกมโมเสกจากชิ้นส่วนสามเหลี่ยมหกสี ผู้เล่นสามารถจัดเรียงสีได้ตามใจชอบ เพื่อให้ตอนท้ายประกอบกันเป็นรูปหกเหลี่ยมขนาดใหญ่ เป็นเกมจิตวิทยาเพื่อศึกษาลักษณะและบุคลิกของผู้เล่น ผ่านผลลัพธ์ขององค์ประกอบทางทัศนศิลป์ที่เกิดขึ้น
Image Source: "Square Circle Triangle", Bruno Munari, Page 270-271. Published by Princeton Architectural Press, 2016.
เนื่องจากหาข้อมูลเพิ่มเติมเกี่ยวกับเกมนี้ไม่ค่อยได้ ผมจึงลองเขียนโปรแกรมทดสอบขึ้นมา โดยเริ่มแรกเป็นเพียงการสร้างตารางจากสามเหลี่ยมด้านเท่า โดยกำหนดให้ใช้สีได้มากที่สุดหกสี และสำรวจว่าเราจะสามารถทำอะไรได้บ้างจากข้อจำกัดพื้นฐานนี้ จากนั้นทำไปทำมาก็เริ่มเป็นการทดลองที่ผสมผสานการสร้างข้อกำหนดต่าง ๆ เพิ่มเติมเข้าไป เช่น การจำกัดจำนวนของสีที่ใช้ในกลุ่มเล็ก ๆ และการสร้างแพทเทิร์นจากหลักคณิตศาสตร์
โดยตัวแปรที่ใช้ในการสร้างแพทเทิร์นของงานมีดังต่อไปนี้:
- Color Blending: ปรับการผสมสีของชิ้นส่วนที่อยู่ใกล้กันให้กลมกลืนมากขึ้น
- Color Shuffle: สุ่มเลือกสีชุดใหม่จากจานสีเพื่อสร้างความหลากหลายให้กับผลงาน
- Pattern Rule: กำหนดกติกาการจัดเรียงชิ้นส่วนสามเหลี่ยมในรูปแบบต่าง ๆ
- Triangle Grouping: กำหนดจำนวนสามเหลี่ยมที่ใช้สีร่วมกันในการประกอบเป็นหกเหลี่ยมขนาดเล็ก
- Corner Radius: ปรับรัศมีความโค้งของมุมสามเหลี่ยม
- Hexagon Size: ปรับขนาดของหกเหลี่ยมในตาราง
เมื่อได้ลองทำออกมา พบว่าความน่าสนใจสำหรับผม อยู่ที่การสร้างความเป็นไปได้ที่หลากหลายขององค์ประกอบทางทัศนศิลป์ ด้วยการใช้ข้อกำหนดพื้นฐานของสี การจัดวาง และรูปร่างของชิ้นส่วนย่อยในตารางที่สร้างจากสามเหลี่ยมด้านเท่า เป็นงานที่สนุก ผมเลยนำมาบันทึกเก็บไว้ ทุกท่านที่ผ่านมาสามารถทดสอบดูได้นะครับ หวังว่าจะมีประโยชน์บ้างไม่มากก็น้อยครับ
ขอบคุณครับ
2024.09.17
*This program was made using p5.js, a JavaScript library for creative coding.
Appendix A: Using Modular Arithmetic for Grid Pattern Design
Modular Arithmetic:
Modular arithmetic is a system where numbers "wrap around" after reaching a certain value, called the modulus. A common example is a clock: after 12 hours, it resets to 1. Mathematically, this is expressed as:
-
-
- is the original number
- is the modulus
- is the remainder after dividing by
-
In other words, when you divide by , the remainder is .
For example:
This means that when 15 is divided by 12, the remainder is 3, which is the same as 15:00 in 24-hour time is 3:00 PM in 12-hour time.
Pattern Rule: Alternating Colors
In a triangular grid, modular arithmetic helps create repeating patterns by controlling elements such as alternating colors. Each triangle gets a value based on its position, and the modulus ensures the pattern repeats cyclically.
case 4: // Alternating colors
baseColor = selectedPalette[(row + col + i) % selectedPalette.length];
break;
(row + col + i)
generates a unique value for each triangle.- The modulus
%selectedPalette.length
ensures that the color cycles through the palette, repeating as needed.
Example with a 6-Color Palette:
This generates values from 0 to 5, corresponding to the six colors. This creates a repeating color pattern across the grid, ensuring a mathematical aesthetic and cyclical distribution of colors.
Appendix B: Using Randomized Probability Clustering for Grid Pattern Design
Randomized Probability Clustering:
In this method, triangles in the grid are more likely to share the same color as their neighboring triangles. This approach creates clusters of similar colors, leading to an organic, more natural look within the pattern.
The probability of clustering is controlled by a parameter called clusteringProbability
, which determines how likely a triangle is to inherit the color of its neighboring triangle. This random process creates color clusters while still allowing for some randomization.
The probability that a triangle adopts the color of a neighboring triangle is given by:
-
-
- : The probability of a triangle adopting the color of its neighbor.
- : The clustering probability, ranging between 0 and 1, for example, = 0.6 means a 60% chance of clustering.
-
Pattern Rule: Random Pattern with Probability Clustering
In this project, the clustering probability applies independently to both the left and top neighbors. The logic for color assignment is as follows:
case 2: // Random Pattern with Probability Clustering
{
let clusteringProbability = 0.6;
if (col > 0 && random(1) < clusteringProbability) {
baseColor = grid[row][col - 1][i]; // Cluster with left neighbor
} else if (row > 0 && random(1) < clusteringProbability) {
baseColor = grid[row - 1][col][i]; // Cluster with top neighbor
} else {
baseColor = random(selectedPalette); // Choose a new random color
}
break;
}
- If = 0.6, the code checks whether a random number (between 0 and 1) is less than 0.6.
- If true, the triangle clusters with its left or top neighbor; if false, it picks a new random color from the palette.
This creates a pattern where 60% of the triangles form clusters with their neighbors, and 40% introduce randomness. Higher probabilities create more clusters, while lower probabilities create more scattered patterns.