Computer-generated Floral Ornament Based on Magnetic Curves

Anton L.

Aug 2, 2016·14 min read

If you are interested in purchasing the code descriped in this paper, you can do so here: https://gum.co/floral

Introduction

Floral decoration was a commonly used type of ornamental design throughout the Middle Ages [1]. Many of the illuminated manuscripts that date to the Medieval times used floral ornament for illusrations, decorative bands and margins [2]. Figure 1 provides some examples of the historical usage of floral ornament. These examples demonstrate that floral ornament comes in different shapes and forms, but it is often used to achieve a common goal of filling in the empty space on a page in a random manner (Figure 1a and 1b). Occasionally, the ornament is joined with other illustrations in a manuscript making it a seamless component of the design (Figure 1a). The ornament found on the bands and borders is typically more constrained and is subject to heavy repetition (Figure 1c and 1d).

With the development of sophisticated printing technologies less and less documents and books were decorated by hand and with floral ornament. Along with other types of decoration it slowly became obsolete [1]. However, instead of disappearing entirely it eventually made its way into wallpaper designs of the 17th century. Figure 2a shows a wallpaper from England dating from around 1680, which is one of a few early floral wallpapers to survive to this day [7]. Typical features of floral ornament such as space-filling and repetition make a great decoration tool for for wallpaper artists, which is why it remained common throughout the 18th and 19th centuries and is even still used today (Figures 2b and 2c).

While the concept of using vegetation to produce ornament seems to be very trivial to take up, it proves to be difficult to create a good floral ornament design by hand. It turns out that hand drawn floral ornamentation is a very time-consuming task that requires a great deal of skill and training. In fact, most of the floral clip-art found on the web (Figure 3) is usually produced by experienced artists and is usually quite costly. As a result, one naturally tends to think about automated ways of generate floral motifs.

This article explores the problem of how to produce aesthetically pleasing computer-generated ornament. The method described here is a combination of two papers by Ling Xu et al. [11] and M. T. Wong et al. [1], which are further discussed in the next section. However, instead of of making the entire process fully automated, as aforementioned papers suggest, this article focuses on an idea of interactive user control. The vision here is that while it is possible to automatically produce a relatively attractive floral ornament, artistic input still remains the best tool for evaluation, about whether or not the resultant ornament is indeed aesthetically pleasing. Consequently, the tool that is described in this article relies on a heavy UI component.

Background Information and Related Work

Inspiration for this project comes from the paper “Computer-generated floral ornament” [1] by M. T. Wong et al., which is one of the first successful attempts to produce aesthetically pleasing floral motifs.

In his paper Wong notes that even though floral ornaments often contain various plant-like features such as leaves, flowers and vines, the elements are often arranged in an unnatural way that is impossible for a real plant. Therefore, Wong eliminates L-system as a way to modal floral ornament and, instead, he suggests the use of adaptive clip-art. His method is based on using a set of procedural growth rules, that place pre-made clip-art elements near the largest unoccupied circles within a given region, which is then to be filled with the ornament. The algorithm described in this article adopts the idea of adaptive clip-art, but replaces the procedural growth rules with a simpler method to generate plant-like curves, which is proposed by the paper “Magnetic Curves: Curvature-Controlled Aesthetic Curves Using Magnetic Fields” [11] by Ling Xu et al.

While the results produced by Wong’s algorithm (Figure 4a) are significantly more attractive than the results of the magnetic curves method (Figure 4b), there are a number of reasons why combination of both methods is the primary focus of this article. The algorithm suggested by Wong is very complex, as it is based on the writing of non-trivial growth rules using C-preprocessor. As a result, it doesn’t provide much room for interactive control. On the other hand, Xu’s algorithm is much easier to implement and control interactively, since it’s based on set of predefined numerical parameters. Moreover, by adding the idea of adaptive clip-art the aesthetic quality of results achieved by the magnetic curves method can be significantly improved, as is demonstrated in this article.

Algorithm

Starting Point

The starting point of my algorithm is the basic implementation of the magnetic curves paper. The idea behind the magnetic curves algorithm is that under certain constraints a charged particle that moves under the influence of a magnetic field will trace out interesting spiral curves. By recursively releasing secondary particles from the original particle at constant intervals, more complicated curves that resemble branching vegetation can be produced.

To generate the initial curve I launch a particle from the bottom center of the screen with a velocity 1px per time interval pointing straight up. I use the same function for the charge of the particle as recommended in the paper: q(t) =(T-t)^(-α). At the beginning of the curve t = 0.

Next, I generate the points of the curve using Forward Euler numerical integration with a dt value of 1. This way T is equal precisely to the number of samples for the curve. Moreover, given that the initial velocity is equal to 1px, T is also roughly equal to the length of the curve in pixels. To keep the curve smooth, I use a constant value of B over the entire space of the canvas. Overall, the algorithm used to trace a particicle can be summarized by the following psuedo code:

TRACE_PARTICLE(start_x, start_y, start_vx, start_vy, T, alpha)
 x = start_x
 y = start_y
 vx = start_vx
 vy = start_vy
 t = 0
 dt = 1
 points = array()
 while t < 
  Add new point [x, y] to points
  q = (T - t)^(-alpha)
  x = x + vx * dt
  y = y + vy * dt
  ax =  -vy * q
  ay = vx * q
  vx = vx + ax * dt
  vy = vy + ay * dt
 end
 return points
end

To release secondary particles from the parent curve the domain of t variable [0, T] can be split into N subintervals with the length T/N each. At the end of each interval a new particle can be launched, thus, producing N sub-branches. For each secondary particle we can use the position and the velocity of the parent particle as the initial conditions. However, the sign of the charge of every second launched sub-particle should flipped so that the sub-particle curves the opposite way.

Once the points of all the points’ trajectories have been generated, Catmull-Rom splines [12] can be used to interpolate them into smooth curves. The result is shown the Figure 5 below.

Curve Levels

The magnetic curves paper suggests using 4 different levels of particles to produce branches of 4 sizes. Each curve level is represented by a value of T, which defines it’s length, and a value of alpha, which defines it’s curvature. While the paper recommends using preset values of T and alpha, I’ve found that these parameters have the most impact on the way the ornament looks. Therefore, they are the natural candidates for interactive user control.

Furthermore, the branching algorithm in my implementation differs slightly from the one suggested in the original paper. Xu states that for any new branch a particle with the highest possible T should be chosen. Particles with lower values of T should only be selected, if particles with higher values of T intersect already generated branches. However, after studying Xu’s results, I’ve realized that this rule is the main reason why the ornament based on magnetic curves looks less natural than Wong’s results.

Looking back on a real plant, one can notice that any branch is never bigger than its parent branch. To apply this idea to my algorithm I restrict any sub-particles to have values of T no higher than its parent’s. While the restriction impacts the ability of the algorithm to produce a space-filling curve, the results end up more aesthetically pleasing.

Variable Strokes

Another component of my algorithm that is primary aimed for improving aesthetic quality of the results is an idea of variables strokes. Trunks of real plants rarely have constant girth. Instead, stems get thinner and thinner as you move away from the root. We can update the magnetic curves in a similar fashion. The base curve starts with a preset stroke width of 15 pixels at the root. As the curve grows the stroke width is decreased linearly until it is equal to zero at t = T. For each of the branching curves the initial stroke width is set equal to the stroke width of the parent curve at the start of the branch. An example is shown in Figure 6 below.

Without a doubt, the curve in Figure 6b looks much more plant-like than the one in Figure 6a. Moreover, the initial stroke width is another good parameter to be under user control.

Space-Filling

One of the main advantages of Wong’s method of generating floral ornament is its superior ability to generate space-filling motifs, which are still easthetically pleasing. The reason, why the magnetic curves method is less effective at this task is because the base curve is finite and always curves only one way.

To eliminate this problem, I wish to give the user control over the base stem of the ornament. In my algorithm the user can define a set of points that the stem must go through. The stem is then generated by interpolating the points using Catmull-Rom spines. The base stem acts as the top level of the magnetic curve, thus, the remainder of the algorithm is unchanged.

Moreover, to better facilitate space filling I extend the algorithm specified in Xu’s paper to an arbitrary region. The region is defined by a set of points that can also be provided by the user of the application. To recall, Xu’s algorithm achieves space-filling by quantizing the space into cells and then assigning unique IDs to cells, which have a curve passing through them. This method turns out to be quite easy to extend to an arbitrary region by simply setting the IDs of cells that do not belong to the region to -1.

Adaptive Clip Art

Finally, the main improvement to the magnetic curves algorithm that I implemented is the addition of adaptive floral clip-art similar to what is suggested by Wong et al. In my implementation I use 3 types of clip-art elements as shown in Figure 7.

Figure 7 Clip-art types: leaf, flower and bud

These elements are easily generated at runtime using a few splines, and can quickly be replaced with other elements or even with clip-art loaded from an SVG file. The only restriction is that each element must have an origin point and a direction. For instance, the leaf and the bud elements have the origin at the bottom left corner of the element. The flower has the origin at its center. All of the elements must follow a straight up direction.

An element’s origin and direction are used to place clip-art along the branches of the ornament. A new clip-art element is placed for each new launched sub-particle. The origin of the element is set at the particle’s start position, and the direction of the element is aligned with the direction of the particle’s initial velocity. Moreover, the element is reflected along the line of its direction to make it grow in the opposite direction from where the related sub-particle curves. Finally, the element is scaled according to the curve level that it is being generated for. In that sense, the clip-art is adaptive to the rest of the ornament.

The clip-art elements also participate in space-filling. Each element is assigned a unique ID at the time of creation. This ID is copied to each cell that the element intersects, when it’s placed onto the canvas. New elements are only allowed to intersect their parent curves. If no element can be placed at a certain position due to space-filling constraints, the position gets ignored.

At each level of the curve, it’s up to the user to decide which clip-art element type is used or whether no clip-art should be used at all.

Results

Summary

The result of my work is a GUI application written in Java, which under user control can produce various kinds of floral ornament. It’s fully interactive meaning that all changes of the ornament parameters are reflected in real-time to the user. Some of these parameters are as follows:

• Initial stem width (in pixels)
• Initial curl direction (left or right)
• Number of curve levels
• Parameters of the curve at each level (Length/Curvature/Number of branches)
• Clip-art element type
• Ornament region points
• Control points for the base step of the ornament

The demo of the application can seen in this video:

If you are interested in purchasing the code descriped in this paper, you can do so here: https://gum.co/floral

Demo Images

A sample output of my application is shown in Figure 8. In this ornament 4 levels of magnetic curves are used with parameters shown in the Table 1 below.

The initial stem width is set to 15 pixels and the initial curvature direction is to the right. My artistic judgement played a big part in selecting these parameter values. I believe that it’s safe to say that the final outcome is quite visually pleasing.

Figure 9 demonstrates another sample that shows an ornament base on a pre-defined base stem, which is used to decorate an arbitrary arc.

The final example in Figure 10 show how the ornament exported in a vector SVG format can be used to produce an interesting colorful background. In this image two motifs are overlayed on top of each other.

Animation

One of the long term goals of this project was an ability to produce a growth animation for floral ornament. I proudly state that this goal was successfully reached. To produce a growth animation I simply linearly tweened the values of T for all of the curve levels. The example of the growth animation can be seen in this video:

Conclusions and Future Work

In this article I presented an overview of a tool I developed for interactive generation of floral ornament. While constrained to a pre-set selection of clip-art, this tool showcases the great possibilities of the magnetic curves algorithm to produce aesthetically pleasing ornament, when combined with the idea of adaptive clip-art.

Without a doubt, the algorithm I presented in this article greatly improves upon Ling Xu’s results from his original “magnetic curves” article. The results that I was able to achieve with my tool are comparable in their quality to a floral design that can be produced by a professional artist.

I hope that the work I’ve done here can be used one day to aid an artist in the generation of beautiful designs.

Abandoned Features

When I initially proposed this project, there were a few extra features that I wanted to implement, but eventually chose not to or never got around to.

First of all, I wanted to have the ability to vary the value of B using a Poison noise function as suggested in the original “magnetic curves” paper. However, I eventually realized that adding noise to the magnetic field would make the ornament less smooth, hence, less aesthetically pleasing. As a result, this features was excluded from the implementation plan.

Furthermore, I initially wanted to make the clip-art more adaptive to its environment as suggested by Wong’s paper. For instance, each “bud” element has a small stem extending to it. It would be interesting to determine the length of this stem at run-time according to a certain set of rules. However, in the end simply adapting the clip-art elements to the direction and the size of the parent curve proved to be sufficient enough to produce good results. Hence, this feature was never implemented.

Possible Extensions

The extensions to the work I presjented in this article are almost limitless. There is still much that could be done in order to improve the quality of the results. Here is a list of some ideas:

• To produce the magnetic curves I used the same charge function as suggested in the paper. Other functions could be experimented with to produce more interesting types of curves. Xu touches upon this subject and notes that triangular waves are a good choice for experimentation.
• One of the main problems with the magnetic curves algorithm is its ability to produce attractive space-filling curves. In this article I address this issue by requiring user input. It would be great to do it automatically. One possible way to address this issue is to make the charge function repeat with some period and make the main charged particle bounce off the edges of the ornament region. The magnetic field strength B can be increased along the region boundaries to achieve this effect. Moreover, the parameters of the charge function can be updated at runtime to facilitate space filling.
• Some of the historical example of floral ornament that I had seen allowed an intersection between stems by arranging them into plait-work. This would be an interesting idea to experiment with.

Finally, in my algorithm I used a very simple way to place the clip-art along the curve (at equal intervals). It would be interesting to develop a more intelligent way of determining a good location to place an element, thus, making the algorithm more adaptive in nature. Moreover, using multiple types of clip-art on each level is another extension that could prove to be useful. Overall, the problem of clip-art distribution could serve a good research area in the long term.

Bibliography

1. Wong M. T., Zongker D. E., Salesin D. H.: Computer-generated floral ornament. In Proceedings of SIGGRAPH ’98 (1998), ACM Press, pp. 423–434.
2. “Frame” The Grove Encyclopedia of Decorative Arts. Ed. Gordon Campbell. © Oxford University Press 2006. The Grove Encyclopedia of Decorative Arts: (e-reference edition). Oxford University Press. [Accessed April 15th, 2010]
3. Introduction to Luke-Arts, Northwestern Church of Christ, Dec. 2008. [Online] http://www.nwcofc.com/bible-studies/ [Accessed April 15th, 2010]
4. Illuminated Manuscript Leaf on Vellum, Bloomsbury Auctions, Apr. 2008. [Online] http://ny.bloomsburyauctions.com/detail/NY008/20.0 [Accessed April 15th, 2010]
5. Lewis F. Day. Nature in Ornament. B.T. Batsford, London, 1898.
6. Judaica Collection, Yale University Library, Oct 2008. [Online] http://www2.library.yale.edu/judaica/newacquisitions2006.html [Accessed April 15th, 2008]
7. Sheet of wallpaper, late 17th century. Museum no. E.1003–1976, Victoria and Albert Museum. [Online] http://www.vam.ac.uk/images/image/22261-popup.html [Accessed April 15th, 2010]
8. Floral wallpaper, about 1850–75. Museum no. E.800–1969, Victoria and Albert Museum. [Online] http://www.vam.ac.uk/images/image/22252-popup.html [Accessed April 15th, 2010]
9. W Red, Black and Taupe Large Scale Modern Floral Wallpaper, Home Depot Catalog, Catalog #100632840, 2010.
10. Floral Ornament Vector Pack, Ideal Hut, Oct. 2009. [Online] http://www.idealhut.com/freebies/freebie-release-5-floral-ornaments-vector-pack/ [Accessed April 15th, 2010]
11. Xu L., Mould D.: Magnetic Curves: Curvature-Controlled Aeshetic Curves Using Magnetic Fields. In Computational Aesthetics in Graphics, Visualization, and Imaging (2009). pp. 1- 8.
12. Catmull, Edwin and Rom, Raphael, A class of local interpolating splines, in R.E. Barnhill and R.F. Riesenfed (eds.) Computer Aided Geometric Design, Academic Press, New York, 1974, 317–326.