Implementation of Fast-Building Interactive Scene with Chinese Paper Cutting Style

Abstract

As one of the precious intangible cultural heritages, traditional Chinese paper cutting has a long history and profound cultural connotation. In the digital age, traditional paper cutting is gradually moving towards digital paper cutting in order for better inherit and development. In the research of paper cutting digitalization, computer has been normally adopted to make two-dimensional paper cutting, to focus on the restoration of paper cutting process. There is still a little difficult for users who are not familiar with paper cutting; three-dimensional model has also been used to improve the picture effect, but it is not easy to show the characteristics of paper cutting with three-dimensional models. In order to address such an issue, this paper innovates the artistic style of digital paper cutting by combining paper cutting with common visual effects in modern 2D games, improves the efficiency of scene construction by writing automatic generation algorithms, and perfects the interactive mode of digital paper cutting by introducing natural interaction. In this way, users can participate in the process of creating paper cutting works, and creation of paper cutting works becomes simple and efficient benefiting from the automatic generation algorithm and natural interaction. Finally, by comparing to works of other paper cutting style, the works achieved by the solution proposed in this paper illustrates the advantages of digitalization in three aspects: artistic style, fast generation, and natural interaction.

1 Introduction

Being widely spread, Chinese paper cutting is a kind of folk traditional art with a long history in China, which is to cut out various kinds of visual images and design patterns on the paper with tools such as scissors or nicking tools, and to add decorative design as embellishments in order to create image symbols with implications of blessing, good luck and prayer. Its extensive mass character, unique regional character and strong design features make it a well-known traditional art form in China as well as a cultural symbol that can represent China’s distinctive characteristics [1].

However, due to the limitation of tools and materials, traditional paper cutting is made with “paper” as the carrier, which is more difficult and takes a long time. Therefore, people began to try to change the form of traditional paper cutting, so that the paper cutting art can be better inherited and developed. For example, Kung Fu Panda 3 is a movie released in 2016. When doing localized promotion in China, it used paper cutting posters to attract the attention of many Chinese people (see Fig. 1), which contribute to the new vitality of Chinese paper cutting.

Fig. 1.

Source: Li Zhao

Kung Fu Panda 3 Chinese paper cutting style poster.

In addition, the research on paper cutting digitalization has attracted more and more attention in recent years. Some have established a digital “paper cutting museum” by analyzing the characteristics of traditional paper cutting: for example, using web pages as a platform and the form of interactive animation, paper cutting culture is displayed with a novel interactive interface from production process to product display [2]; or built a computer-based digital protection framework of paper cutting art by developing computer-aided paper cutting design software and computer-aided paper cutting multimedia display system [3]. Some have studied how to better make paper cutting graphics with diversified shapes on computers: for example, by developing functions such as drawing patterns and editing patterns, and writing cutting algorithms of models, an editing tool capable of generating paper cuttings with good hollowing-out effects has been produced [4]; or used the idea of symmetrical origami to create different patterns after unfolding by editing the shape of folded paper cuts [5]. Some others have studied how to combine paper cutting with digital games so that players can experience the charm of paper cutting art in the process of playing games: for example, using mobile phones as the platform, players can create different shapes by touching and swiping on screens according to the given paper cutting templates [6]; the Nishan Shaman is a commercial work with paper cutting art style (see Fig. 2). Since releasing in 2018, its design combining shaman culture with music rhythm has been widely praised by players.

Fig. 2.

Paper cutting style game Nishan Shaman released in 2018

However, the form of “paper cutting museum” focuses on the accurate reproduction of paper cutting culture, and its target audience is closer to those who have a strong interest in paper cutting art; making paper cutting with computer pays more attention to the restoration of paper cutting process, and it is still a bit difficult for users who are not familiar with paper cutting; in the production of paper cutting games, a large amount of picture materials need to be provided to enrich the content of the scene. Some games try to improve the picture effect in the form of three-dimensional models, but it is not easy to express the characteristics of paper cutting by three-dimensional models and it will need better-performance hardware. Therefore, there is a demand for a method that can efficiently generate paper cutting style scenes.

This paper is to make a work which is able to generate a scene fast with the traditional Chinese paper cutting style, to present the Chinese paper cutting style art in a digitalized form. Digitalization of traditional Chinese paper cutting art is not simply copying and transplanting Chinese paper cutting from physical form into digital form, but to innovate the traditional Chinese paper cutting to a certain extent according to its features and advantages, and to improve the technique needed for a better presentation of Chinese paper cutting style, so as to find the agreement between traditional Chinese paper cutting and modern technology. At the same time, interactive content is added and paper cutting elements are generated efficiently by writing automatic generation algorithms so that users can quickly create paper cutting style scenes.

2 Analysis and Research of Digital Paper Cutting

2.1 Art Style of Digital Paper Cutting

As a kind of hollowed-out art, the presentation form of Chinese traditional paper cutting is often static, and the modeling is rather generalized. If the original artistic style of traditional paper cutting has to be completely kept, it will be difficult to give full play to the advantages of digital dynamics, and it is not easy for users to quickly distinguish various elements in the scene in the process of interaction. Therefore, by referring to the visual effects commonly used in modern 2D games, this paper makes appropriate innovations on the artistic style of digital paper cutting.

Modern 2D game screen design can often simulate 3D environmental effects while maintaining its own artistic style. More importantly, compared to 3D game scenes, it can simulate some visual effects previously available only in 3D environment with lower hardware resource occupation and more efficient algorithms. The realization of exquisite visual effects is usually inseparable from the following technologies: 2D depth of field, screen post-processing and parallax scrolling. These technologies enable developers to create a magnificent game world in two-dimensional space.

Paper cutting, as a hollowed-out art based on two-dimensional plane, pays great attention to line composition and exaggerated modeling, as well as aestheticism of outline. The planarity of paper cutting makes it easy to adapt to parallax scrolling technology. However, because paper cutting itself often appears in a single layer and there will be no other elements underneath, we need to make appropriate innovations on the hollowing-out characteristics of paper cutting art. This paper gets inspiration from “color-lined paper cutting”, and replaces the hollowing-out effect of paper cutting by lining color paper under monochrome paper cutting; at the same time, as an activity that players can participate in and interact with, the elements in the scene need to be able to be distinguished quickly and clearly, so it is also necessary to make a certain degree of trade-off between exaggerated shapes and abstract outlines of paper cutting.

Therefore, based on “color-lined paper cutting” and combined with the technology used to improve visual effects in modern 2D games, this paper explores the brand-new expression pattern that digital paper cutting can bring.

2.2 Automatic Generation Algorithm

Both the traditional paper cutting and the existing digital paper cutting are difficult to make, which is not friendly to people who have just come into contact with paper cutting culture. And if you want to have more people pay attention to and interest in paper cutting art, it is very necessary to reduce the threshold of creating paper cutting works.

Therefore, this paper first puts forward the following requirements: a large number of elements in the scene need to be generated automatically, rather than being added and produced by users one by one; because of this, unlike the automatic generation algorithm often used by developers in the production of scenes, the automatic generation algorithm in this paper is processed in real-time during the operation of the work, so it requires a certain amount of low performance. Because users will participate in the generation of the whole paper cutting scene, to enable different users to get different generated results, it is necessary to have the randomness of the automatic generation algorithm, but complete randomness will make the generated results uncontrollable, so the construction of the automatic generation algorithm needs to find a balance between randomness and certainty.

Based on the above requirements, this paper refers to some commercial works in the implementation of automatic generation algorithm. For example, Ubisoft shared the automatic generation algorithm used in the development of Far Cry 5 at the 2017 Game Developers Conference. In essence, points, curves, and surfaces are artificially arranged in the scene first and then generated by the algorithm according to these Artificial Marks [7]. And made the developer of the “Horizon Zero Dawn” Guerrilla Games on its website is to share the way they quickly generate scene: first to establish a complete set of brush system, the system can not only within the scope of the brush to generate the game objects, such as plants and gravel, and also consider when drawing draw area of terrain (such as too steep slopes to generate the growth of the straight tree), and the generated near the game relationship between objects, such as two trees should not be too close, the tree should have a reasonable number of bushes, grass, etc.) covering [8].In this way, the creators can quickly generate objects using the brushes, and the algorithm helps with planning in the process. It can be seen that in these two different automatic generation algorithms, the idea of automatic generation of Artificial Marks matching algorithm is adopted.

In this paper, Artificial Marks and random parameter algorithm are also adopted to generate objects in the scene, which can not only make multiple objects relatively evenly distributed in space, but also reduce the sense of repetition of the picture through random factors.

2.3 Interaction of Digital Paper Cutting

To enrich the content of the work and give full play to the digital advantages of paper cutting, users need to be able to further interact with these generated paper cutting elements. In this paper, after the user creates the desired paper cutting object, you can also configure the weather (wind volume, rainfall), time (daytime, dusk, night), and other elements in the current scene according to your own creative will. In this way, with the help of the power of digital technology, the traditional paper cutting art is no longer limited to a single, static, low transmission efficiency mode, but vividly displayed in front of the user through animation. The introduction of interaction also allows users not only to appreciate paper cutting works but also to participate in the creation process of paper cutting.

Besides, this paper also discusses the way of interaction to a certain extent. The interaction of traditional input devices is limited, which is different from the activities in the real world and is limited to some extent in the breadth and dimension of experience. For example, in traditional ball games, athletes need to pay attention to many factors such as body posture, force Angle, and force size; in digital games, players generally only need to move, click and press buttons through the mouse, keyboard, and so on. Therefore, such a limitation can have an impact on the player’s immersion [9]. However, natural interaction can overcome this limitation to some extent and increase the dimension of interaction. Furthermore, natural interaction allows the user to focus on the task itself with little need to think [10]. Therefore, creating paper cutting style scenes through natural interaction not only strengthens the user experience but also leaves a deeper impression on users. At the same time, it also reduces the learning threshold, so that users can better enter the environment of paper cutting creation.

Therefore, in the process of realizing the work, this paper introduces Leap Motion as the input interface in user interaction and uses Leap Motion to identify gesture, hand position, speed, and other information to construct user interaction mode, to improve the breadth and dimension of user experience.

In conclusion, thanks to the modern 2D games perfect visual effect of the use of technology, and automatic generation algorithm and natural interaction, each user can interact through a few simple movements, using different types of trees, such as weather, time-limited control options, you can generate many different styles of paper cutting. That is to say, each user can create their unique paper cutting works, and the entire creation process is fast and efficient. This way of creation is more suitable for today’s fast-paced lifestyle, and users will be more willing to participate in the process of understanding and making paper cuts.

3 Application

Through the analysis and research on digital paper cutting, this paper develops a work that can quickly generate interactive paper cutting style scenes. Thanks to the gradual maturity of the game engine, the author can spend more time on differentiated development work without investing too much in basic game functions such as graphics rendering, animation functions and physical engines. Among them, the game engine Unity has become one of the most applicable tools for developing 2D games. Therefore, according to the characteristics of Chinese paper cutting, this paper selects Unity as the implementation tool, and makes full use of the functions integrated in Unity to better achieve the research objectives of this paper.

3.1 Realization of the Automatic Generation Algorithm

As each user is expected to get different generated results, the automatic generation algorithm needs to have the participation of random functions. At the same time, it is necessary to ensure that the randomly generated results conform to certain rules of composition, so it is necessary to limit the processing of randomness. In this paper, only three Layer Objects are used to illustrate the realization of the automatic generation algorithm, and more Layer Objects can be inferred according to the same algorithm idea. In the actual work in this article, 40 Layer Objects can be configured.

The steps to implement the automatic generation algorithm in this paper are as follows:

• 1. Generate Layer Objects and configure the properties of these Layer Objects according to a specific pattern (see Fig. 3).

Fig. 3.

Layer object generation

• 2. Generate a different number of Artificial Marks under each Layer Object according to a specific pattern (see Fig. 4).

Fig. 4.

Generation of artificial marks

• 3. Generate a paper cutting object within a certain range of each Artificial Mark. The generated paper cutting object can read the properties of its layer level, and decide some properties of itself according to the reading results (see Fig. 5).

Fig. 5.

Generation of paper cutting objects

Thus, the generated result is shown below (see Fig. 6):

Fig. 6.

The results obtained using the automatic generation algorithm proposed in this paper

In Step 1, the properties of the Layer Object are shown below (see Table 1):

Table 1. Properties of the layer object

“Layer Object Hierarchy” refers to the order of layers. It can be understood that the smaller the layer hierarchy is, the closer it is to the camera. However, it should be noted that this work is built in a two-dimensional space, mainly because of the ability to use some of the functions integrated into a two-dimensional space by Unity, as well as for optimization considerations. As a result, almost all game objects in the scene have no depth information. Also, the projection of the camera in two-dimensional space is the orthogonal mode, so there will be no perspective effect. This requires you to artificially make the farther away objects look smaller, which is where the “Layer Scale Factor” attribute comes from.

In step 2, the positions of the Artificial Marks are always evenly distributed. The purpose of Artificial Marks is to limit random factors. Each Artificial Mark will generate a corresponding paper cutting object, and this paper cutting object is generated in a random range and must be near its corresponding Artificial Mark. A picture is used here to illustrate the Artificial Mark and its corresponding generation range through different colors in the picture (see Fig. 7).

Fig. 7.

Generation range corresponding to artificial mark

The following figures respectively show the generated results of different generation quantities when the automatic generation algorithm proposed in this paper is used (see Fig. 8, Fig. 9 and Fig. 10):

Fig. 8.

Generates 11 objects

Fig. 9.

Generates 20 objects

Fig. 10.

Generates 46 objects

It can be seen that the automatic generation algorithm proposed in this paper can not only guarantee certain randomness under the condition of different generation quantities but also make each paper cutting object a relatively uniform distribution to a certain extent.

3.2 Implementation of the Automatic Generation Algorithm

By referring to the visual effects commonly used in modern 2D games, such as parallax movement technology and 2D depth of field technology, this paper creates a scene that combines the visual effects of traditional paper cutting and modern 2D games.

Parallax Scrolling Technology.

Parallax scrolling technology is to create a scene with an illusion of depth in a two-dimensional space, and it has been used in traditional animation as early as the 1930s through multi-plane imaging technology [11]. Parallax scrolling is a technique that adjusts the moving speed of each Layer Object according to the camera’s moving speed when the camera is moving. The layers closer to the camera move faster, while the layers farther away from the camera move slower. The main algorithms to implement the parallax movement effect is as follows:

The “parallax scaling factor” can control the speed attenuation between different Layer Objects. Thus, by setting different values for this variable, different degrees of parallax movement can be achieved, thus simulating the depth needed for the current scene.

2D Depth of Field Effect.

The so-called depth of field effect refers to a camera that can only focus on a single object’s distance at one time. Such a camera has a relatively clear imaging range before and after the focus, while the scene outside this range is blurred [12]. The depth of field effect is supposed to be a kind of screen post-processing technology, but the depth of field effect realized in a 2D environment is often different from the depth of field effect realized in 3D space by screen post-processing, so it is especially emphasized here that it is implemented in 2D space.

The fundamental reason why depth of field can’t be achieved directly through on-screen post-processing is that this method requires depth information for elements in the scene. However, the Unity platform does not attach depth information to the processing of two-dimensional objects. In other words, the depth information of these objects in two-dimensional space is 0. This causes these objects to be treated as the same depth through on-screen post-processing, and therefore to be “all clear” or “all blur” for all objects. Therefore, to achieve the effect of depth of field in two-dimensional space, a completely different implementation method is needed from that in three-dimensional space.

In past games, 2D images were blurred directly by some image processing software. The advantage of this is that when rendering a two-dimensional image in a game engine, the shading process is still just sampling the texture of the original image, which puts less pressure on the GPU. But there are more obvious disadvantages. First, you need to blur each different image, which greatly increases the amount of work. Second, each image has an extra blurry version compared to the previous one. If the image is required to appear on multiple layers requiring parallax scrolling, multiple corresponding versions need to be created by setting different blurry parameters. This not only increases the memory footprint but also doubles the game’s capacity. Third, if you need to change the shape of these images at a later date, you can go back to the original image and change it, but then you need to blur it again. Drawing details directly on an image that has already been blurred is a disaster.

For the above reasons, this paper attempts to use shaders that can be blurred to achieve the depth of field effect in two-dimensional space. Different from using image processing software for blur operation, blur shading is usually realized by averaging the color value of each pixel sampled from the original texture and the color value of its surrounding pixel to a given degree before the two-dimensional image is rendered on the screen, to achieve a blur visual effect. In this way, varying degrees of blurriness can be generated based on the original image simply by adjusting the blurriness intensity parameters in the program (see Fig. 11), which greatly reduces the workload, saves the game space, and facilitates the subsequent adjustment of the original details.

Fig. 11.

Results of different blur intensities

Because of a paper cutting object blur strength is determined by its layer level, the function of configuring blur intensity can combine with the above automatic generation algorithm. When the paper cutting object is generated, read the current Layer Object information, and get the current generated paper cutting object corresponding blur strength. This can be done by adding one more property to the Layer Object. The changed properties of the Layer Object are shown in Table 2:

Table 2. The changed properties of the Layer Object

3.3 Realization of Natural Interaction

In the process of exploring digital paper cutting, using mouse, keyboard, and mobile phone screen as interactive devices is still the mainstream operation mode. However, such a traditional interaction model is relatively simple, resulting in the actual interaction behavior of users and the behavior they act in the virtual world is always different, and this difference will bring learning costs to users. Natural interaction can overcome this limitation to a certain extent, so this paper hopes to introduce natural interaction to reduce the threshold of learning and improve the interest of the work. This paper uses Leap Motion as an attempt at natural interaction, which allows users to construct elements in the scene, control the time and weather in the scene, etc. When setting up paper cutting scenes, users can use different ways to interact naturally according to their needs.

Leap Motion is an optical sensor that can locate and collect information for human hands in human-computer interaction. Its small size, high accuracy of data collection, strong stability, good recognition, in line with the human engineering law, should be applied to a variety of fields. When human-computer interaction is carried out, Leap Motion collects the data information of human hands through the camera, identifies different gestures according to the information obtained, and can be fed back to the virtual environment to obtain the model of human hands. Leap Motion encapsulates a large number of internal APIs, which can facilitate access to relevant data, and Leap Motion officially has good support for Unity. Therefore, this paper chooses Leap Motion as the input device for the work.

Leap Motion and Automatic Generation Algorithm.

Based on the automatic generation algorithm, the interactive part is added to implement the function of controlling the generation process of paper cutting objects. The position of the hand in 3D space can be easily obtained through the API provided by Leap Motion. Therefore, considering the animation effect of the paper cutting object, this paper implements the generation of the paper cutting object when the hand moves from the bottom to the top. When the hand moves from top to bottom, the paper cutting object is destroyed (see Fig. 12).

Fig. 12.

The generation and destruction of paper cutting objects controlled by hand movement up and down

In the process of moving the hand from low to high, the program will detect the vertical coordinate of the hand in real-time. Based on the coordinates obtained, calculate the distance the hand has moved during this time. If the distance is greater than the set threshold, the function that generates the paper cutting object is called once. The specific execution process can be seen in the following code:

Thus, the animation effect generated by the paper cutting object in the scene can be implemented when the hand is raised (see Fig. 13):

Fig. 13.

Hand lifting control paper cutting object generation

The function of destroying the paper cutting object is the same, that is, when the hand moves from high to low, it detects its coordinates in the vertical direction.

Leap Motion and Weather Control.

“Weather control” means that the user can control the intensity of the stroke and the amount of rain in the current scene, and the changes of these parameters will be reflected in real-time through the paper cutting objects in the scene. For example, the stronger the wind, the more the paper objects will shake. This is achieved mainly by writing shaders that are applied to paper cutting objects.

In this shader, a gradient noise image is sampled by a variable varying with time, and the vertex position of the paper cutting object is changed according to the result of sampling. In this way, as long as the scaling ratio of the variable that changes with time and the scaling coefficient of the gradient noise image itself is changed, the shaking degree of the paper cutting object can be changed, correspond to different wind intensities.

These variables in this shader are modified by the speed of the hand movement (see Fig. 14). When it is detected through the Leap Motion API that the current moving speed of the hand is greater than a set threshold, the value of the relevant variable will be increased. When the current speed of hand movement is detected to be less than a set threshold, the value of the relevant variable is decreased.

Fig. 14.

Variables related to hand movement speed control shader

Rain is achieved through particle effects. So to change the size of the rain is to change the number of particles emitted in the particle system. After that, the intensity of the wind and the size of the rain are correlated to achieve the effect that the stronger the wind is, the greater the rain will be (see Fig. 15).

Fig. 15.

The intensity of the wind is related to the amount of rain

Leap Motion and Time Control.

“Time control” means that the user can change the time of day, dusk, or night of the current scene. This is achieved through screen post-processing technology. The screen post-processing technology refers to a series of operations on the screen image after rendering a complete scene and obtaining the screen image to achieve various screen effects. This technology can add more artistic effects to the game screen [13]. This paper uses the post-processing effect of color adjustment to map the color value of each pixel in the screen image to other colors according to specific rules, to achieve the effect of changing the scene time.

This paper changes scene time by detecting hand orientation (see Fig. 16). When the hands were down, it was daytime. Hands to the left, time is dusk; when the hands are up, time is night (see Fig. 17).

Fig. 16.

Orientation control time of hand

Fig. 17.

Orientation control time of hand

4 Results and Evaluation

At the present, the generated results achieved by using the algorithm in this paper are shown in the following figures (see Fig. 18, Fig. 19, Fig. 20, Fig. 21, and Fig. 22). At the same time, the implementation effects in other papers are selected for comparison (see Fig. 23).

Fig. 18.

The effect achieved with the algorithm proposed in this paper (No. 1)

Fig. 19.

The effect achieved with the algorithm proposed in this paper (No. 2)

Fig. 20.

The effect achieved with the algorithm proposed in this paper (No. 3)

Fig. 21.

The effect achieved with the algorithm proposed in this paper (No. 4)

Fig. 22.

The effect achieved with the algorithm proposed in this paper (No. 5)

Fig. 23.

Source: Image from [4] (right) and [6] (left)

Effects for comparison.

It can be seen that the scenes generated by this algorithm are of the following advantages: with the automatic generating algorithm, the efficiency of scene construction is greatly improved, and rich scene content can be generated by a small number of paper cutting images; the unique sense of depth in 3D space is simulated in 2D space by using parallax scrolling and 2D depth of field; compared to the static paper cutting images in other works, users can also add animation effects to these paper cutting images after the paper cutting images are generated; in addition, previous works are often operated by mouse, keyboard or touch screen. This paper introduces the way of natural interaction to improve the breadth and dimension of user experience.

5 Conclusion

In view of the issues existing in traditional Chinese paper cutting and digital paper cutting, this paper starts from three aspects of artistic style of digital paper cutting, fast scenes construction of paper cutting style, and interaction of paper cutting elements, to put forward respectively the solutions of combining paper cutting with the visual effects commonly used in modern 2D games, writing automatic generation algorithm, and introducing natural interaction. From the comparative analysis of the achieved results with other works, it can be concluded that the solution in this paper shows the advantages of digital paper cutting in three aspects: artistic style, fast generation, and natural interaction. However, the current automatic generation algorithm is only adaptive to flat terrain conditions, and the obtained scenes are relatively simple and repeated. In the future, we will continue to study the design of automatic generation algorithm to achieve better varied paper cutting style scenes.