Wallpaper Patterns with Voronoi Diagram Motifs

Year: 2022 Authors: Jordan A. Houser

Core claim

Voronoi-diagram motifs combined with wallpaper symmetry groups can generate highly customizable, varied images across all seventeen plane symmetry types.

Topics

wallpaper symmetry, Voronoi diagrams, art generator, artistic analysis

Domains

plane symmetry groups, Voronoi geometry, Minkowski metrics, generative art, pattern design, visual aesthetics

Methods

JavaScript programs, local and non-local generation, parameter customization, random color palettes

Media

JavaScript, colored Voronoi diagrams, image canvas

Paper text

The text below is the locally extracted OCR/Markdown version of the paper. Raw PDF files remain local and are not published here.

Bridges 2022 Conference Proceedings

Wallpaper Patterns with Voronoi Diagram Motifs

Jordan A. Houser

Lexington, SC, USA; jordan.houser.a@gmail.com

Abstract

This paper introduces the use of Voronoi diagrams as motifs for the seventeen types of wallpaper patterns. By using two JavaScript programs, users can customize the Voronoi-augmented image by selecting a type of pattern, changing its metric, the number of its sites, and its colors. This level of customization and randomized parts of the Voronoi diagrams allows for a near infinite variety of interesting visuals. The paper describes how changing the Voronoi diagrams affect the outcome of the images. An artistic analysis follows.

Introduction

In making an art generator, it is important to be able to create a piece of art which allows for both a clear theme and plenty of variation. The seventeen types of wallpaper patterns serve as the base and the Voronoi diagrams as the point of distinction. Two JavaScript programs, the local and non-local programs, make wallpaper patterns with Voronoi diagram motifs. In the following section, I describe the math behind the art. Then, I detail the functionality and feature effects of the programs. Finally, I provide an artistic language to delineate the properties of the images.

Background

The key elements of the images created by my programs [3] are wallpaper patterns and Voronoi diagrams. A wallpaper pattern is a pattern whose transformations that leave it unchanged can be translated in two linearly independent directions [2]. These patterns are representations of the seventeen plane symmetry groups whose elements are the transformations. The common notation for these groups is the International Union of Crystallography (IUC) notation [6]. Wallpaper patterns are made by applying the symmetry group transformations to their fundamental region, the smallest area of the pattern whose images under their group cover the plane [2]. Figure 1 shows the fundamental region of pattern type p3 and its image after transformations.

Figure 1: The fundamental region and image of pattern type $p3$ . Figure (a) is the fundamental region and (b) is the image after applying the group transformations.

Houser

A Voronoi diagram of sites is a collection of regions called Voronoi cells that divide the plane according to the distances between sites and points. Every cell corresponds to a site and contains the points closest to that site than all other sites in the plane. A boundary is made when points are equidistant from two or more sites [1]. Figure 2 shows an example of a Voronoi diagram.

Figure 2: A Voronoi diagram with 20 sites, each within a Voronoi cell.

A metric is a distance function $D(X,Y)$ that is symmetric, satisfies the triangle inequality and is non-negative. The metric is zero if and only if the points are the same, that is $D(X,Y)=0$ if and only if $X=Y$ . The programs use the Minkowski metric, a generalization of the Euclidean and Manhattan metrics. For any two points $X=(x_1,x_2)$ and $Y=(y_1,y_2)$ , the Minkowski metric of order $p$ in two dimensions is:

When the order of the metric is 1, we have the Manhattan or taxicab metric, when the order is 2 we have the familiar Euclidean metric [4]. The order 3 case is called the ‘Minkowski’ metric in the programs, but it is not named formally. The metric unit disks are shown in Figure 3.

(a)

(b)

(c) Figure 3: The unit disks of the (a) order 1, (b) order 2, and (c) order 3 Minkowski metrics.

Programs

The programs use Voevudko’s Voronoi diagram code [7] as the basis to create the images. Voevudko’s generator allows users to make a colored Voronoi diagram, change the metric, and change the number of sites. To create the types of patterns, I made the transformations and fundamental regions in both programs. The Local Program extends Voevudko’s code to make Voronoi diagrams inside the fundamental regions of the patterns. After the Local Program makes a Voronoi diagram, I copy and move the region according to its group transformations to fill the image canvas. The types of patterns are made the same way in the Non-Local Program, but the fundamental region is a cut out of an underlying image. Part of this process is shown in Figure 1. For aesthetic variation, there are twelve color palettes to choose from. A palette consists of a range of colors randomly assigned to Voronoi cells. To create eleven of the twelve color palettes, I changed the red, green and blue values of Voevudko’s random color maker. Nine of the seventeen types of wallpaper patterns are shown in Figure 4 and the eight remaining types are seen in Figure 5 with blue-jewel palettes.

Wallpaper Patterns with Voronoi Diagram Motifs

(a)

(b)

(c)

(d) (g) Figure 4: The Local Program creates nine of the seventeen types of wallpaper patterns. Top: (a) $p1$ , (b) $p2$ , (c) pm Middle: (d) $pg$ , (e) $pmm$ , (f) $pmg$ Bottom: (g) $p4$ , (h) $p4m$ , (i) $p4g$ .

(e) (h)

(f) (i)

Houser

(a)

(b)

(c)

(d)

(g) Figure 5: The Non-Local Program makes the remaining eight types of wallpaper patterns. Top: (a) pgg, (b) cm, (c) cmm, Middle: (d) p3, (e) p3m1, (f) p31m, Bottom: (g) p6, (h) p6m.

(f) (h)

Wallpaper Patterns with Voronoi Diagram Motifs

Program Feature Effects

Now I describe the features through an artistic lens. Changing the Voronoi diagrams has interesting visual consequences for the pattern images. The geodesics of the metrics are now referred to as lines in the subsequent discussion. For the Minkowski metric of order 1, the edges of the Voronoi cells are angular lines lending to an inorganic and mechanical look. The order 3 case generates shapes with smooth long edges creating an organic effect. The shape of Voronoi cells for the order 2 metric are rigid and sharp resembling ordinary polygons. Figure 6 shows the use of both the order 1 and order 3 Minkowski metrics.

(a) (c) Figure 6: Images with the Minkowski metrics. Order 1: (a) pmg and (b) pg. Order 3: (c) p2 and (d) p4g.

(b) (d)

The number of sites in a Voronoi diagram affects the level of visual clutter in the image as shown in Figure 7. A low number of sites, 50 and below, yields minimalist pictures with clear symmetry as seen in Figure 7a and Figure 6. High site counts, 300 and above, are compact and busy, making images with a zoomed out effect. Although there is no upper limit to the number of sites, visual interest decreases above 10,000 sites.

Houser

(a)

(b)

(c) Figure 7: The pattern type $p4g$ with (a) 10, (b) 1000 and (c) 10000 sites.

Color enhances or downplays parts of an image. Simple palettes with one or two colors are high contrast, but they look smooth and gradual because they have so few colors. These palettes come in bright and dark variations. Bright palettes are light and flat such as an orange palette in Figure 8a, a light-blue palette in Figure 8b, a purple-blue palette in Figure 8c, and a seagreen palette in Figure 8b. Dark palettes, like dark-green in Figure 8e, create illusions of depth with medium to low values of one color.

(a) (d) Figure 8: Images with simple color palettes: (a) orange, (b) light-blue, (c) purple-blue, (d) seagreen, and (e) dark-green. In grayscale, color effects are subdued.

(c) (e)

Wallpaper Patterns with Voronoi Diagram Motifs

Multicolor palettes like blue-jewel, used for Figures 4, 5 and 7, and coral, used in Figure 6a and later in Figure 11a, have several colors with low contrast making a balanced image. Other multicolor palettes, such as red-blue in Figure 9a and green-blue in Figure 9b, have several colors, but they have a wide range of values to make striking images. A random color palette can look pleasant or chaotic due to its inherent nature. The picture in Figure 9c is vibrant, yet not overwhelming. There are two remaining palettes, dark-blue and dark-red, but they are too dim to see in grayscale.

(a)

(b)

(c) Figure 9: Images with multicolor palettes. (a) red-blue, (b) green-blue, and (c) random.

These images are the kinds ripe for pareidolia, the perception of meanginful figures in random or ambiguous visual patterns [5]. This is a subjective phenomena. For example, where I perceive a cat in Figure 6b another person may view a fancy chair or a warthog. My favorite examples of images that induce pareidolia are in Figure 10. These forms may be harder to see for pictures with many sites.

(a) Figure 10: Pictures with distinct forms. (a) A man kneeling in the moonlight and (b) legs in a triad.

(b)

Houser

Conclusion

Creating an art generator requires simplicity and the ability to describe aspects of an object. The use of the seventeen wallpaper types and Voronoi diagrams allows for simplicity without sacrificing variety. The artistic language provides a structured method to describe the image features. In future work, a study could be run to examine what users like in the generated pictures. Before then, I plan to work on improving the programs’ capabilities by integrating the two programs and optimizing the Voronoi algorithm. I also plan to improve the current feature selections and add new ones. The images in Figure 11 are a preview of my experiments with symmetric colorings.

(a) Figure 11: Symmetric colorings of pattern type $p4m$ .

(b)

Acknowledgements

None of this work would have been possible without the amazing support from my mentor and guide, Carolyn Yackel. She is responsible for the Local Program’s triangle code and the idea for the motif. I am grateful to Margaret Symington and the anonymous reviewers for their gracious comments which helped the paper immensely. Thank you to A. E. Voevudko for making his program available.

References

[1] A. Dobrin. A Review of Properties and Variations of Voronoi Diagrams. Whitman College. 2005. https://www.whitman.edu/Documents/Academics/Mathematics/dobrinat.pdf [2] J. A. Gallian. Contemporary Abstract Algebra, 9th ed. Cengage Learning, 2017. [3] J. A. Houser. Homepage. 2022. https://github.com/jordan-a-houser [4] J. K. Hunter. An Introduction to Real Analysis. University of California at Davis. 2012. https://www.math.ucdavis.edu/~hunter/m125a/intro_analysis_ch7.pdf [5] Merriam-Webster, Inc. Pareidolia. Merriam-Webster.com Dictionary. 2022. https://www.merriam-webster.com/dictionary/pareidolia [6] D. Schattschneider. “The Plane Symmetry Groups: Their Recognition and Notation.” The American Mathematical Monthly, 85, 6, pp. 439–450, 1978. https://doi.org/10.1080/00029890.1978.11994612 [7] A. E. Voevudko. Voronoi Diagram Javascript Version #2. Rosetta Code. 2021. https://rosettacode.org/wiki/Voronoi_diagram#Version_.232