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
Image Source: "Square Circle Triangle", Bruno Munari, Page 270-271. Published by Princeton Architectural Press, 2016.
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
-
In other words, when you divide
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.lengthensures 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,
-
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
- 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.
