JP2017016622A - User interface program and computer implementation method - Google Patents

Abstract

PROBLEM TO BE SOLVED: To dynamically implement, with respect to an object generated as a user interface (UI) in response to a slide operation by means of an object, flexible deformation processes that vary according to the slide operation.SOLUTION: There is provided a user interface (UI) program that outputs to a touch panel a UI image in conjunction with a slide operation on the touch panel. This UI program causes a computer equipped with a touch panel to function as: a formation unit that forms a group of meshes by associating multiple meshes each having multiple polygons with each other; a combining unit that forms a combined mesh on the basis of the group of meshes; and an output unit that generates and displays a UI image on the basis of the shape of the combined mesh.SELECTED DRAWING: Figure 9

Description

  The present invention relates to a user interface program (UI program) that outputs a user interface (UI) image in conjunction with a sliding operation on a touch panel by an object, and a computer mounting method thereof.

  Various UIs are used on a touch panel in recent user terminals including a touch panel such as a smartphone. For example, in the prior art of Patent Document 1, the slide operation extends from the start point to the end point according to the slide operation on the touch panel, and the size or shape is different between one end portion on the start point side and the other end portion on the end point side. A UI for displaying a cursor is disclosed (see [Summary] in Patent Document 1). Here, in particular, during the slide operation, a deformation process is performed in which the cursor width is narrowed so that the area of the cursor becomes constant as the cursor lengthens (see paragraph [0018] of Patent Document 1).

JP 2012-33060 A

  The present invention provides a UI program that dynamically realizes various and flexible deformation processes for an object generated as a UI image in conjunction with a slide operation by an object (such as a user's finger) and a computer-implemented method thereof. With the goal.

  In order to solve the above problems, the first invention is a UI program that outputs a user interface (UI) image to the touch panel in conjunction with a slide operation on the touch panel. The UI program includes a forming unit that forms a mesh set by associating a plurality of meshes each having a plurality of polygons, a mixing unit that forms a mixed mesh based on the mesh set, and a mixed mesh shape. Based on this, a computer having a touch panel is caused to function as an output unit that generates and displays a UI image.

  The second invention is a computer-implemented method for outputting a user interface (UI) image in conjunction with a slide operation on the touch panel. The computer-implemented method includes forming a mesh set by associating a plurality of meshes each having a plurality of polygons with each other on the touch panel, forming a mixed mesh based on the mesh set, and mixing The method includes generating a UI image based on the shape of the mesh, and displaying the generated UI image.

FIG. 1 is a schematic diagram of an example user terminal capable of executing a UI program according to an embodiment of the present invention. FIG. 2 is a schematic diagram showing a physical configuration of the user terminal of FIG. FIG. 3 is a schematic diagram showing input / output in the user terminal of FIG. FIG. 4 is a schematic diagram of a UI image showing the object configuration in the initial state according to the embodiment of the present invention. FIG. 5 is a schematic diagram showing a polygon configuration realized by using the UI program according to the embodiment of the present invention. FIG. 6 is a schematic diagram showing a polygon configuration realized by using the UI program according to the embodiment of the present invention. FIG. 7 is a schematic diagram showing an elastic object and a polygon configuration formed in conjunction with the slide operation according to the embodiment of the present invention. FIG. 8 is a schematic diagram showing two exemplary elastic objects serving as mixing controls according to the embodiment of the present invention. FIG. 9 is a schematic diagram showing mixed object generation realized by using the UI program according to the embodiment of the present invention. FIG. 10 is a schematic diagram showing a polygon (mesh) configuration of each object generated corresponding to FIG. FIG. 11 is a graph of the mixing ratio function used in the mixed object generation of FIG. FIG. 12 is a schematic diagram showing a state of mixed object formation using a mixing ratio function corresponding to FIG. FIG. 13 is a functional block diagram implemented using a UI program according to the embodiment of the present invention. FIG. 14 is a series of processing flowcharts related to UI image generation implemented using the functional block diagram of FIG.

[Description of Embodiment of the Present Invention]
First, the contents of the embodiment of the present invention will be listed and described. The computer program according to the embodiment of the present invention has the following configuration.

(Item 1)
A UI program that outputs a user interface (UI) image to the touch panel in conjunction with a slide operation on the touch panel,
A forming unit that forms a set of meshes by associating a plurality of meshes each having a plurality of polygons;
A mixing unit that forms a mixed mesh based on the set of meshes;
A UI program that causes a computer including the touch panel to function as an output unit that generates and displays a UI image based on the shape of the mixed mesh.

(Item 2)
In the UI program described in item 1,
The forming unit forms a set of vertices by associating arbitrary vertices of the polygon with each other between the plurality of mesh sets,
The UI program in which the mixing unit determines an arbitrary vertex corresponding to the polygon in the mixed mesh based on a predetermined mixing ratio function for the set of vertices.

(Item 3)
The UI program according to item 2, wherein the mixing ratio function is defined according to the distance of the slide operation.

(Item 4)
4. The UI program according to item 2 or 3, wherein the mixing ratio function is further defined according to the slide operation time.
According to the UI program of this item, by making the above-mentioned mixing ratio function according to time, it is possible to express more visually dynamic and diverse object deformations.

(Item 5)
The UI program according to any one of items 2 to 4, wherein the mixing ratio function includes a periodic function of the distance.
According to the UI program of this item, an object that can be deformed so as to have a periodic motion can be expressed by using the mixing ratio function as a periodic function.

(Item 6)
Item 6. The UI program according to Item 5, wherein the periodic function has an attenuation characteristic.
According to the UI program of this item, it is possible to represent an object that can be deformed so as to gradually shift to one specific object shape by the attenuation characteristic.

(Item 7)
The UI program according to item 6, wherein the attenuation characteristic is defined based on a time of the slide operation.
According to the UI program of this item, it is possible to express object transition due to more dynamic deformation limited to a specific time by making the attenuation characteristic follow time.

(Item 8)
The plurality of meshes include a first mesh and a second mesh,
8. The item according to claim 1, wherein the formed mixed mesh is formed so as to move from one of the first and second meshes to the other in conjunction with the sliding operation. UI program.
According to the UI program of this item, it is possible to represent an object that can be deformed so as to clearly shift from one object shape to another object shape.

(Item 9)
A computer-implemented method for outputting a user interface (UI) image in conjunction with a slide operation on a touch panel,
Associating a plurality of meshes each having a plurality of polygons with each other to form a set of meshes;
Forming a mixed mesh based on the set of meshes;
Generating a UI image based on the shape of the mixed mesh;
And displaying the generated UI image.

(Item 10)
In the computer-implemented method according to item 9,
The step of forming the mesh set includes the step of associating arbitrary vertices of the polygon with each other between the plurality of mesh sets to form a vertex set;
The computer-implemented method, wherein the step of forming the mixed mesh comprises determining any corresponding vertex of the polygon in the mixed mesh based on a predetermined mixing ratio function for the vertex set.

(Item 11)
The computer-implemented method of item 10, wherein the mixing ratio function is defined according to the distance of the slide operation.

(Item 12)
Item 12. The computer-implemented method of item 10 or 11, wherein the mixing ratio function includes a periodic function of the distance having an attenuation characteristic.

(Item 13)
13. The computer-implemented method of item 12, wherein the attenuation characteristic is defined based on the time of the slide operation.

(Item 14)
The plurality of meshes include a first mesh and a second mesh,
14. The item according to any one of items 9 to 13, wherein the formed mixed mesh is formed so as to shift from one of the first and second meshes to the other in conjunction with the sliding operation. Computer mounting method.

[Details of the embodiment of the present invention]
Hereinafter, a UI program for outputting a user interface (UI) image to the touch panel in conjunction with a slide operation on a touch panel by an object and a computer mounting method thereof according to an embodiment of the present invention will be described with reference to the drawings. In the figure, the same components are denoted by the same reference numerals.

  The UI program according to the embodiment of the present invention is executed in response to a user operation on a touch panel included in a user terminal such as a smartphone. As illustrated in FIG. 1, the smartphone 1 includes a touch panel 2, and the user can control the operation of the user terminal (for example, progress of a smartphone game) through a user operation on the touch panel 2. Note that the user terminal that executes the UI program according to the present embodiment is not limited to the smartphone 1, and may be any device as long as it is a terminal having a touch panel, such as a PDA or a tablet computer device.

  As shown in FIG. 2, the smartphone 1 includes a CPU 3, a main memory 4, an auxiliary memory 5, a transmission / reception unit 6, a display unit 7, and an input unit 8 that are connected to each other via a bus. Of these, the main memory 4 is composed of, for example, a DRAM, and the auxiliary memory 5 is composed of, for example, an HDD. The auxiliary memory 5 is a recording medium capable of recording the UI program and the like according to the present embodiment. The UI program stored in the auxiliary memory 4 is expanded on the main memory 4 and executed by the CPU 3. Note that data generated while the CPU 3 operates in accordance with the UI program and data used by the CPU 3 are also temporarily stored on the main memory 4. The transmission / reception unit 6 establishes connection (wireless connection and / or wired connection) between the smartphone 1 and the network under the control of the CPU 3 and transmits / receives various information. The display unit 7 displays various information to be presented to the user under the control of the CPU 3. The input unit 8 detects an input operation on the touch pal 2 by the user.

  The display unit 7 and the input unit 8 correspond to the touch panel 2 described above. As illustrated in FIG. 3, the touch panel 2 includes a touch sensing unit 301 corresponding to the input unit 8 and a liquid crystal display unit 302 corresponding to the display unit 7. The touch panel 2 displays an image under the control of the CPU 3 and receives an interactive touch operation (mainly a physical contact operation such as a touch operation, a slide (swipe) operation, and a tap operation) by a user, and a control unit Based on the control processing by 303, the corresponding graphic is displayed on the liquid crystal display unit 302.

  More specifically, the touch sensing unit 301 supplies an operation signal corresponding to the touch operation by the user to the control unit 303. The touch operation can be performed by any object. For example, it may be made by a user's finger or a device such as a stylus may be used. The touch sensing unit 301 is disposed on an upper layer of a liquid crystal display unit 302 such as a liquid crystal panel, an organic EL, or a plasma display due to the structure of the touch panel. The touch sensing unit 301 can employ a pressure detection method, a resistance film method, a capacitance method, an electromagnetic induction method, or the like. When receiving an input by touching an object on the touch sensing unit 301, a change amount of pressure, electrical resistance, electric capacity, elastic wave energy, or the like is detected at the contact position, and the corresponding touch on the liquid crystal display unit 302 is detected. Coordinates are specified. When detecting an operation signal from the touch sensing unit 301, the control unit 303 performs processing for transmitting, as a user operation command, a graphic (not shown) including a UI image corresponding to the operation to the liquid crystal display unit as a display signal. . The liquid crystal display unit 302 displays a graphic corresponding to the display signal.

(1) Forming process of each object based on polygon (mesh) formation Hereinafter, with reference to FIGS. 4 to 7, a polygon (mesh) that is implemented to generate a UI image by the UI program according to the present embodiment. A process of forming each object based on the formation will be described. The UI image generated by this embodiment is largely based on (i) elastic object formation processing, and (ii) mixed elastic object formation processing that forms a mixed elastic object by mixing a plurality of elastic object sets. . Hereinafter, a set of a plurality of polygons is referred to as a mesh. That is, the mesh is composed of a plurality of polygons.

(1-a) Outline of Elastic Object Forming Process FIG. 4 schematically shows a UI image of an example object having a circular shape, which is formed as an initial state when an object touches the touch panel 2. As shown in FIG. 4A, the elastic object is generated as a substantially square UI image 750 when displayed on the screen. The UI image 750 includes a translucent area 760 and a transparent area 770, and the translucent area 760 is superimposed on the screen display area as a basic display area of the object and displayed on the screen.

  More specifically, the elastic object is accommodated in a substantially square mesh region and divided into a plurality of polygons 710. In the example of FIG. 4B, the UI image 750 is divided into 4 × 4 = 16 polygons, and the entire polygon set (mesh) accommodates the elastic object. In the example of FIG. 4B, the shape of the polygon is a square. However, the shape is not limited to this. For example, each polygon may be formed as a triangle having three points, or any shape. Can do. It will also be understood that the number of polygons to be divided is not limited.

  Furthermore, a semi-transparent region 760, such as the circular shape of FIG. 4, can be mathematically uniquely defined from a given formula using a set of coordinates of the vertices of all polygons. In the case of FIG. 4B, the vertices are arranged so that each polygon is a square, and a circular translucent region 760 is defined by substituting each vertex coordinate of the polygon into a given mathematical expression. A circular object is displayed. Similarly, when the polygons are arranged to have other shapes, the object shape is uniquely determined mathematically by substituting each coordinate into the given mathematical formula. Note that it is known that a given mathematical expression for forming a circular shape as shown in FIG. 4B is generally a mathematical expression using a triangular function.

  With the slide operation on the touch panel, the initial circular object can be gradually and gradually deformed. More specifically, it is realized by virtually executing a process of elastically expanding the user interface image 750 like a rubber sheet, in particular, a physical calculation process of expanding the vertex of each polygon as follows. The 5 and 6 schematically show how the vertices of some polygons of the object are moved in accordance with the user's slide operation. The white circles in FIG. 6 represent the positions of the corresponding vertices before movement (that is, in FIG. 5). By moving the coordinates of the vertices 720 of the plurality of polygons constituting the mesh, elastic deformation of the initial circular object shown in FIG. 4 is expressed.

  More specifically, FIG. 5 corresponds to the initial state of FIG. 4, and each vertex 720 is arranged in a mesh shape so that each polygon has a square shape. On the other hand, in FIG. 6, when the coordinate of an arbitrary vertex 720A is moved to 720A 'in accordance with the slide operation of the object, the other vertex 720 is also moved and arranged so as to follow this. For example, in accordance with a given movement rule, a movement vector (for example, having a movement direction and a movement distance) is determined according to a given movement rule in conjunction with the user's slide operation, and each coordinate of the movement destination is determined accordingly. Can be determined. Regarding the movement rule, in the example of FIG. 6, the movement distance of the vertex 720 'other than the vertex 720A' is weighted by the distance from the vertex 720A. That is, as shown in the drawing, the moving distance is made smaller as the vertex is located farther from the vertex 720A.

  The movement rule regarding each vertex of the polygon is not limited to the example of FIG. 6, and various rules can be set. Another example is shown in FIG. In the example of (i) of FIG. 7, in conjunction with the slide operation (slide operation distance L) by the user's finger, each vertex is formed into a rectangular shape so that each polygon has the same size, and the slide operation is performed. Move in the direction (y-axis direction). Further, in the example of (ii), in addition to the example of (i), each vertex is moved in the direction perpendicular to the slide operation direction (x-axis direction) according to the slide operation distance L, so that the entire mesh has a trapezoidal shape. Form to have.

  As described above, once each polygon is determined, the object shape can be uniquely determined mathematically by substituting the vertex coordinates into a given mathematical expression. That is, in the example of (i), an elliptical object is formed, and in the example of (ii), a substantially egg-shaped object having a thickness in the lower half is formed. By continuously forming such a shape in conjunction with the user's finger slide operation, an object that is elastically deformed flexibly from the initial shape in FIG. 4 to the shape after movement by a distance L in FIG. 7 is expressed. be able to.

(1-b) Mixed Elastic Object Formation Processing The UI image generated according to the present embodiment is prepared by preparing two or more objects formed as described above, and further mixing them as a set (performing blend processing). Is generated. Here, a mixture of objects of two patterns (pattern i and pattern ii) as illustrated in FIG. 8 is assumed. The objects of both patterns have an initial circular shape as shown in FIG. 4, and in conjunction with the slide operation, at the slide operation distance L, the bottom has a round teardrop shape (pattern i) and the bottom has a round tip. It is formed while elastically deforming along with the slide operation so as to become a rod-shaped one (pattern ii) that becomes thinner toward the surface.

  FIG. 9 shows an example of a mixed object formed by mixing such two patterns of elastic objects. The example of FIG. 9 is a case of the slide operation distance l (<L in FIG. 8), and the slide operation is in a relatively initial stage as compared with FIG. In the example of FIG. 9, the distribution ratio for mixing is “1: 1”. That is, by mixing (blending) 50% of the teardrop-shaped object of pattern i and 50% of the bar-shaped object of pattern ii, the mixed object having the mixed pattern has a bottle shape as shown in the figure. Formed.

FIG. 10 shows a mesh configuration example corresponding to each object of FIG. As described above, the shape of the object and the configuration of the mesh are in one-to-one correspondence based on a predetermined mathematical formula. In addition, each polygon constituting the mesh of the pattern i and the pattern ii has a triangular shape, and a function of each vertex is defined as a slide operation distance function for each pattern. In the example of FIG. 10, the number of polygons is a set value, the number of polygons in pattern 1 and pattern 2 match, and the vertex coordinates of each polygon in pattern 1 and the vertex coordinates of each polygon in pattern 2 are associated one-to-one. Assume what is possible. More specifically, a vertex vector U i (x i, y i) (pattern 1) and V i (x i, y i) (pattern) up to each vertex with a predetermined reference point (the origin of the xy coordinates) as a reference. 2) are associated with each other and stored in the storage unit. The mixed vertex vector W i (x i, y i) generated by the mixing process can be defined as follows based on the vertex vectors U i, V i and the mixing ratio w.
W i = U i × w + V i × (1−w)
In this way, the vertex coordinates of each polygon of the corresponding mixed pattern can be calculated from the vertex coordinates of each polygon of pattern 1 and pattern 2. According to the embodiment of the present invention, as shown in FIG. 7, not only the initial circular object is elastically deformed so as to be stretched, but also a plurality of patterns of objects are mixed to form an elastic deformation mode. It can be more diverse. 8 to 10 exemplify the mixing process of two objects for the sake of simplicity, it should be understood that the pattern of objects to be mixed is not limited to two and may be three or more. .

(1-c) Application of Mixing Ratio Function A mixing ratio function defined as a function of the distance and / or time of the user's slide operation is further applied to the mixing object formed by the present embodiment. Thereby, it is possible to give a visually dynamic motion to the mixed object.

FIG. 11 is a graph of an example of the mixing ratio function applied according to the present embodiment. In the graph of FIG. 11, the horizontal axis represents the slide operation distance (L), and the vertical axis represents the mixing ratio of pattern i (W (L), where 0 <W (L) <1). As shown in the figure, in the range of the slide operation distance from 0 to L 0 and the range of L 0 to L 1, the mixing ratio is “1.0”, that is, the pattern i is formed of a mixed object of 100%. Further, in the range of the slide operation distance from L 1 to L 2, the mixing ratio is defined as a function based on a trigonometric function. That is, in the example of FIG. 11, the mixing ratio W (L) is
W (L) = c × cos {(L−L 1) / 2π}
Is defined as

  As in the above formula, in the range from L 1 to L 2, the mixing ratio should not only adopt a cosine curve as a periodic function of the slide operation distance but also be further attenuated. In other words, c in the above formula represents an attenuation characteristic, and is preferably defined as c = t−1 (0 <t <1), for example. In this example, the attenuation characteristic is defined as a function of the slide operation time t. The time of the slide distance L 1 is set to t = 0, and the amplitude of the mixing ratio W (L) is attenuated for 1 second from that time. However, the mixing ratio function can be applied.

  When the mixing ratio function in the example of FIG. 11 is applied to the mixing process of the elastic objects having the pattern i and the pattern ii shown in FIG. 8, the mixed object (A ) To () are generated. Among these, the mixed object (A) (I) has the mixing ratio “1” (100%) of the pattern i, while the mixed object (E) (K) (K) has the mixing ratio “0” of the pattern i. (0%. Mixing ratio of pattern i is 100%). On the other hand, the mixed objects (U) (O) (Ki) have mixing ratios of approximately “0.8” (80%), “0.6” (60%), “0.4”, respectively, as shown in the figure. (40%), it is understood that a bottle shape is formed by mixing the two based on the above formula.

  Furthermore, as shown in FIG. 11, the elastic deformation of the mixed object as shown in FIG. 12 can be performed by using the periodic function of the slide operation distance as the mixing ratio function. In particular, as the slide operation distance increases, it is possible to provide a dynamic visual effect that the elastic object vibrates in the width direction so as to shake. It should be understood that the mixing ratio function is not limited to the examples of FIG. 11 and FIG. For example, it may be a mixing ratio function having characteristics other than the periodic function, and the operation time may be adopted on the horizontal axis. In general, any mathematical function can be applied as long as it shifts from the pattern i (mixing ratio “1.0”) to the elastic object of the pattern ii (mixing ratio “0”). Even when three or more types of patterns are used, a pre-transition pattern and a post-transition pattern can be selected and a mixing ratio function having an attenuation characteristic can be defined using an arbitrary mathematical function.

  In the above embodiment, the distance of the slide operation and the time of the slide operation are employed as the parameters used for the mixing ratio function. However, other than this, for example, the acceleration of the slide operation is employed. Also good. Also. You may employ | adopt the arbitrary variables which consist of these combinations.

(2) Main functions and processing flow of UI program Referring to FIGS. 13 and 14, a set of main functions implemented in the UI program according to the present embodiment and a processing flow executed based on the functions will be described. To do. In the function set of FIG. 13, the control unit 80 of FIG. 3 processes the input as the operation signal and generates the output as the display signal. As shown in FIG. 13, the set of main functions includes a control unit 80 including a user operation unit 800 related to a user input operation through the touch panel and a UI control unit 900 that generates a UI image in response to the user input operation. Including.

  The user operation unit 800 includes an object contact determination unit 820 on the touch panel and a slide operation determination unit 840 on the touch panel. In addition, the UI control unit 900 includes an initial circular object forming unit 920 for generating an initial circular shape, a mesh direction adjusting unit 940 for adjusting the mesh direction, and a mesh set based on an operation distance in conjunction with a slide operation. A mesh forming unit 950 that forms a mesh, a mesh mixing unit 970 that mixes a plurality of mesh sets, and a UI image generation / output unit 990 that generates a UI image of a mixed object related to the formed mixed polygon.

  Subsequently, as shown in the processing flow of FIG. 14, in the series of processes for generating the UI image of the mixed object, first, when contact determination of the object is performed by the contact determination unit 820 in step S102, in step S103, The initial circular object forming unit 920 forms an initial circular elastic object and an initial set (initial mesh) of corresponding polygons around the contact start point on the touch panel (see also FIG. 4). Subsequently, in step S104, the slide operation determination unit 840 performs a slide operation determination on the touch panel. If it is determined that the slide operation is being performed, in step S105, the mesh direction adjusting unit 940 adjusts the direction of the mesh so as to follow the slide operation direction so as to be linked to the slide operation (see FIG. 7), and the mesh forming unit 950 forms a set of first and second meshes each having a plurality of polygons. In step S106, the mesh forming unit 950 continues to associate the first and second meshes with each other and stores them in the storage unit. That is, between the first and second mesh sets, arbitrary vertexes of the polygons constituting each are associated with each other to form a vertex set.

  Next, in step S107, the mesh mixing unit 970 forms a corresponding mixed mesh based on the set of the first mesh and the second mesh. Here, the mixture ratio function defined according to the distance of the slide operation is applied to a set of coordinates of arbitrary vertices of each polygon associated between the first mesh and the second mesh, and the corresponding mixed mesh is obtained. Arbitrary vertex coordinates of the constituent polygons are calculated.

  Finally, in step S108, a UI image of the mixed object is generated based on the generated overall shape of the mixed mesh, and the UI image is displayed. Note that the series of processing from step S104 to S108 is continuously repeated while the slide operation is being performed. Accordingly, the mixed object can be expressed as being elastically deformed through dynamic and flexible expansion / contraction deformation and vibration deformation during the slide operation. As a result of the sliding operation by the user, one of the first mesh and the second mesh (for example, the first mesh; pattern i in FIG. 12) to the other (for example, the second mesh; pattern ii in FIG. 12). The object shape is formed so as to shift to the other side.

  The number of polygons constituting each of the pattern i, the pattern ii, and the mixed pattern according to the above embodiment is the same (see FIG. 10 and the like). However, the present invention can be applied even when the number of polygons is different. In this case, it is understood that vertex coordinates that are approximate to each other may be associated with each other between the polygon sets.

  In the above embodiment, the mixture ratio function is applied to all vertex coordinate sets. However, the mixture ratio function may be applied only to some vertex coordinate sets. .

As described above, the UI program for outputting a UI image in conjunction with the slide operation on the touch panel by the object and the computer mounting method thereof according to the embodiment of the present invention have been described with some examples. The above-described embodiments are merely examples for facilitating understanding of the present invention, and are not intended to limit the present invention. The present invention can be changed and improved without departing from the gist thereof, and it is needless to say that the present invention includes equivalents thereof.

Claims (14)

A UI program that outputs a user interface (UI) image to the touch panel in conjunction with a slide operation on the touch panel,
A forming unit that forms a set of meshes by associating a plurality of meshes each having a plurality of polygons;
A mixing unit that forms a mixed mesh based on the set of meshes;
A UI program that causes a computer including the touch panel to function as an output unit that generates and displays a UI image based on the shape of the mixed mesh. The UI program according to claim 1,
The forming unit forms a set of vertices by associating arbitrary vertices of the polygon with each other between the plurality of mesh sets;
The UI program in which the mixing unit determines an arbitrary vertex corresponding to the polygon in the mixed mesh based on a predetermined mixing ratio function for the set of vertices.   The UI program according to claim 2, wherein the mixing ratio function is defined according to the distance of the slide operation.   The UI program according to claim 2 or 3, wherein the mixing ratio function is further defined according to a time of the slide operation.   The UI program according to claim 2, wherein the mixing ratio function includes a periodic function of the distance.   The UI program according to claim 5, wherein the periodic function has an attenuation characteristic. The UI program according to claim 6, wherein the attenuation characteristic is defined based on a time of the slide operation. The plurality of meshes include a first mesh and a second mesh,
The mixed mesh formed is formed so as to shift from one of the first and second meshes to the other in conjunction with the sliding operation. UI program. A computer-implemented method for outputting a user interface (UI) image in conjunction with a slide operation on a touch panel,
Associating a plurality of meshes each having a plurality of polygons with each other to form a set of meshes;
Forming a mixed mesh based on the set of meshes;
Generating a UI image based on the shape of the mixed mesh;
And displaying the generated UI image. The computer-implemented method of claim 9, wherein
The step of forming the mesh set includes the step of forming a vertex set by associating arbitrary vertices of the polygon with each other between the plurality of mesh sets;
The computer-implemented method, wherein the step of forming the mixed mesh comprises determining any corresponding vertex of the polygon in the mixed mesh based on a predetermined mixing ratio function for the vertex set.   The computer-implemented method of claim 10, wherein the mixing ratio function is defined according to a distance and / or time of the slide operation.   The computer-implemented method according to claim 10 or 11, wherein the mixing ratio function includes a periodic function of the distance having an attenuation characteristic.   The computer-implemented method of claim 12, wherein the attenuation characteristic is defined based on a time of the slide operation. The plurality of meshes include a first mesh and a second mesh,
The mixed mesh formed is formed so as to shift from one of the first and second meshes to the other in conjunction with the sliding operation. Computer implementation method.