Display method, electronic equipment and readable storage medium

Abstract

The invention discloses a display method, electronic equipment and a readable storage medium, and belongs to the technical field of terminals.The display method comprises the steps that a plurality of sub-display areas are displayed on a display interface of a terminal, and every two adjacent sub-display areas are at least mutually connected in the first direction of the terminal; in response to audio playing of the terminal, the color of a first sub-display area changes along a second direction of the terminal, and in the first direction, the color of a second sub-display area adjacent to the first sub-display area changes along a direction opposite to the second direction, the change starting color of the second sub-display area is the same as the change ending color of the first sub-display area; wherein the first direction is perpendicular to the second direction. According to the display method provided by the invention, the wallpaper can present different visual effects.

Description

Technical Field

[0001] This application relates to the technical field of terminals, and in particular, to a display method, an electronic device, and a readable storage medium. Background Art

[0002] Currently, in order to present a better visual effect, the wallpapers of some terminals such as mobile phones present dynamic wallpapers with a certain animation effect. However, such dynamic wallpapers only incorporate fixed loop animations or visual effects, which are relatively single and difficult to meet the growing personalized and interactive needs. Summary of the Invention

[0003] In a first aspect, this application provides a display method, including: Presenting a plurality of sub-display areas on the display interface of the terminal, wherein two adjacent sub-display areas at least intersect with each other in a first direction of the terminal; In response to the playback of the audio of the terminal, the color of a first sub-display area changes along a second direction of the terminal, the color of a second sub-display area adjacent to the first sub-display area in the first direction changes along the opposite direction of the second direction, and the starting color of the change of the second sub-display area is the same as the ending color of the change of the first sub-display area; wherein The first direction and the second direction are perpendicular.

[0004] In some embodiments, presenting a plurality of sub-display areas on the display interface of the terminal includes: Drawing a plurality of curves on the display interface; Based on the number of the plurality of curves and the height of the terminal in the first direction, adjusting the heights of the plurality of curves to obtain a plurality of sub-display areas.

[0005] In some embodiments, it further includes: The color of the first sub-display area gradually changes from a first starting color of change to a first ending color of change along the second direction; and The first ending color of change of the first sub-display area transitions to a second starting color of change of the second sub-display area, and the color of the second sub-display area gradually changes from the second starting color of change to a second ending color of change along the opposite direction of the second direction.

[0006] In some embodiments, the color of each sub-display area presents a gradual change in depth along the first direction.

[0007] In some embodiments, it further includes: Generating noise values of pixel points in the plurality of sub-display areas; Perform color level elimination on the colors of the pixel points in the multiple sub-display areas based on the noise values of the pixel points in the multiple sub-display areas.

[0008] In some embodiments, it further includes: In response to a click operation on the smart card on the lock screen interface of the terminal, present multiple sub-display areas on the display interface of the terminal, and at least one color of each sub-display area is determined according to the display color of the smart card.

[0009] In some embodiments, it further includes: In response to the playback of the audio of the terminal, the multiple sub-display areas change at least along the first direction and / or along the second direction of the terminal following the playback of the audio, and the change includes at least one of the shape change and the position change of the multiple sub-display areas.

[0010] In some embodiments, wherein, the multiple sub-display areas change in shape at least along the first direction and / or along the second direction of the terminal following the playback of the audio, including: The multiple sub-display areas are vertically scaled following the playback of the audio in the first direction of the terminal, wherein the height of the vertically scaled multiple sub-display areas is not less than the height of the terminal in the first direction; and / or The multiple sub-display areas are horizontally scaled following the playback of the audio in the second direction of the terminal, wherein the width of the horizontally scaled multiple sub-display areas is not less than the width of the terminal in the second direction.

[0011] In some embodiments, the multiple sub-display areas change in position at least along the first direction and / or along the second direction of the terminal following the playback of the audio, including: The multiple sub-display areas are vertically translated following the playback of the audio in the first direction of the terminal, wherein the sub-display areas that exceed the display interface limit during vertical translation return to the starting position of the display interface in the first direction and then continue to undergo vertical translation; and / or The multiple sub-display areas are horizontally translated following the playback of the audio in the second direction of the terminal, wherein the sub-display areas that exceed the display interface limit during horizontal translation return to the starting position of the display interface in the second direction and then continue to undergo horizontal translation.

[0012] In some embodiments, it further includes: Determine the abscissa of the texture coordinates of the pixel points on the display interface of the terminal at the curve function values corresponding to the multiple sub-display areas; Determine the sub-display area where the pixel on the display interface of the terminal is located according to the ordinate of the texture coordinate of the pixel on the display interface of the terminal and the curve function values corresponding to the multiple sub-display areas.

[0013] In some embodiments, determining the sub-display area where the pixel on the display interface of the terminal is located according to the ordinate of the texture coordinate of the pixel on the display interface of the terminal and the curve function values corresponding to the multiple sub-display areas includes: Determine that the distance between the first ordinate of the texture coordinate of the first pixel in the top sub-display area among the multiple sub-display areas and the curve function value corresponding to the top sub-display area is less than half of the height corresponding to the top sub-display area, where the first ordinate is obtained by subtracting the minimum value of the ordinate from the ordinate of the texture coordinate of the first pixel; And / or Determine that the distance between the second ordinate of the texture coordinate of the second pixel in the bottom sub-display area among the multiple sub-display areas and the curve function value corresponding to the top sub-display area is less than half of the height corresponding to the top sub-display area, where the second ordinate is obtained by adding the minimum value of the ordinate to the ordinate of the texture coordinate of the second pixel.

[0014] In a second aspect, the present application provides an electronic device, including a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the program, it implements the method as described in any one of the above.

[0015] In a third aspect, the present application provides a non-transitory computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, it implements the method as described in any one of the above.

[0016] In a fourth aspect, the present application provides a computer program product, including a computer program. When the computer program is executed by a processor, it implements the method as described in any one of the above. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] In order to more clearly illustrate the technical solutions in the present application or the prior art, the following will briefly introduce the drawings required for use in the description of the embodiments or the prior art. Obviously, the drawings in the following description are some embodiments of the present application. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.

[0018] Figure 1 Schematic diagram of a dynamic wallpaper provided by an embodiment of the present application; Figure 2 Schematic diagram of the structure of a terminal provided by an embodiment of the present application; Figure 3 Flow schematic diagram of a display method provided in an embodiment of the present application; Figure 4 One of the schematic diagrams of a Bézier curve provided in an embodiment of the present application; Figure 5 Another schematic diagram of a Bézier curve provided in an embodiment of the present application; Figure 6 Yet another schematic diagram of a Bézier curve provided in an embodiment of the present application; Figure 7 Schematic diagram of a dynamic music wallpaper provided in an embodiment of the present application; Figure 8 Schematic diagram of a scene where colors are arranged in an S-shaped curve provided in an embodiment of the present application; Figure 9 Schematic diagram of a color rendering principle provided in an embodiment of the present application; Figure 10 Schematic diagram of a dynamic music wallpaper provided in an embodiment of the present application; Figure 11A Schematic diagram of a scene where the sub-display area is horizontally translated and misaligned provided in an embodiment of the present application; Figure 11B Schematic diagram of a scene where the sub-display area is horizontally translated and flipped provided in an embodiment of the present application; Figure 12 Another schematic diagram of a Bézier curve provided in an embodiment of the present application; Figure 13 Another schematic diagram of a Bézier curve provided in an embodiment of the present application; Figure 14 Schematic diagram of the structure of an electronic device provided in an embodiment of the present application. Detailed implementation manners

[0019] To make the objectives, technical solutions and advantages of the present application clearer, the technical solutions in the present application will be clearly and completely described below with reference to the accompanying drawings in the present application. Apparently, the described embodiments are some, but not all, of the embodiments of the present application. All other embodiments obtained by those of ordinary skill in the art without making creative efforts based on the embodiments in the present application belong to the scope of protection of the present application.

[0020] The terms "first", "second", etc. in the description and claims of this application are used to distinguish similar objects, rather than to describe a specific order or sequence. It should be understood that such terms can be interchanged under appropriate circumstances, so that the embodiments of this application can be implemented in an order other than those illustrated or described here, and the objects distinguished by "first" and "second" are generally of the same type, and the number of objects is not limited. For example, the first object can be one or more. In addition, "and / or" in the description and claims means at least one of the connected objects, and the character " / " generally indicates that the related objects before and after are in an "or" relationship.

[0021] In this era when smartphones and other intelligent terminals are deeply integrated into daily life, wallpapers, as a delicate medium for personalized expression and emotional transmission, have received increasing attention from users. In order to present a better visual effect, the current related technologies can realize presenting dynamic wallpapers with certain animation effects. However, such dynamic wallpapers only incorporate fixed-loop animations or visual effects, which are relatively single and difficult to meet the growing demands for personalization and interactivity.

[0022] To this end, this application provides a display method. By dividing the terminal display interface into multiple sub-display areas and driving the color of these sub-display areas to change dynamically in real time according to audio playback, the wallpaper can present different visual effects.

[0023] For example, referring to Figure 1 from A to Figure 1 as shown in C in, it shows 4 sub-display areas a0, a1, a2, and a3. Each sub-display area is assigned a specific color, and in the vertical direction, the starting color and ending color of the change of two adjacent sub-display areas are the same, so that the wallpaper presents a visually coherent and coordinated color change from Figure 1 from A to Figure 1 to C in.

[0024] The display method provided by the embodiments of this application can be applied to terminals such as mobile phones, tablet computers, wearable devices, in-vehicle devices, augmented reality (AR) / virtual reality (VR) devices, laptop computers, ultra-mobile personal computers (UMPCs), netbooks, personal digital assistants (PDAs), etc. It can also be applied to databases, servers, and service response systems based on terminal artificial intelligence. The embodiments of this application do not impose any restrictions on the specific types of terminals.

[0025] For example, the terminal may be a station (STAION, ST) in a WLAN, and may be a cellular phone, a cordless phone, a Session Initiation Protocol (SIP) phone, a Wireless Local Loop (WLL) station, a Personal Digital Assistant (PDA) device, a handheld device with wireless communication capabilities, a computing device, or other processing devices connected to a wireless modem, a computer, a laptop computer, a handheld communication device, a handheld computing device, and / or other devices for communicating on a wireless system, as well as next-generation communication systems, such as a mobile terminal in a 5G network, a mobile terminal in a future evolved Public Land Mobile Network (PLMN), or a mobile terminal in a future evolved Non-terrestrial Network (NTN), etc.

[0026] By way of example and not limitation, when the terminal is a wearable device, the wearable device may also be a general term for devices that apply wearable technology to the intelligent design of daily wear and develop wearable devices, such as gloves, watches, AR (Augmented Reality) head-mounted display devices, VR (Virtual Reality) head-mounted display devices, or MR (Mixed Reality) head-mounted display devices configured with far-field communication modules and / or near-field communication modules.

[0027] In some embodiments, the above terminal may be a mobile phone 100 having the hardware structure as Figure 2 shown. As Figure 2 shown, the mobile phone 100 may specifically include components such as a Radio Frequency (RF) circuit 110, a memory 120, an input unit 130, a display unit 140, a sensor 150, an audio circuit 160, a WIFI module 170, a processor 180, and a power supply 190. Those skilled in the art can understand that Figure 2 the structure of the mobile phone 100 shown in

[0028] does not constitute a limitation on the electronic device. The electronic device may include more or fewer components than shown, or combine certain components, or have different component arrangements.

[0028] Next, the specific components of the mobile phone will be introduced in conjunction with Figure 2 : The RF circuit 110 can be used for receiving and transmitting information or signals during communication. Specifically, after receiving the downlink information from the base station, it is sent to the processor 180 for processing. Additionally, the uplink data is transmitted to the base station. Generally, the RF circuit includes, but is not limited to, antennas, at least one amplifier, a transceiver, a coupler, a low noise amplifier (LNA), a duplexer, etc. Moreover, the RF circuit 110 can also communicate with the network and other devices via wireless communication. The above wireless communication can use any communication standard or protocol, and the wireless communication can include global system for mobile communications (GSM), general packet radio service (GPRS), code division multiple access (CDMA), wideband code division multiple access (WCDMA), time-division code division multiple access (TD-SCDMA), long term evolution (LTE), new radio (NR), GNSS, FM, low earth orbit satellite connection, and / or IR technology, etc. The GNSS can include global positioning system (GPS), global navigation satellite system (GLONASS), beidou navigation satellite system (BDS), quasi-zenith satellite system (QZSS), and / or satellite based augmentation systems (SBAS), etc.

[0029] The memory 120 can be used to store software programs and modules. The processor 180 executes various functional applications and data processing of the mobile phone by running the software programs and modules stored in the memory 120. The memory 120 may mainly include a program storage area and a data storage area. Among them, the program storage area can store an operating system, application programs required for at least one function (such as a sound playback function, an image playback function, etc.); the data storage area can store data created according to the use of the mobile phone (such as pictures, audio data, phone books, etc.). In addition, the memory 120 can include a high-speed random access memory, and can also include a non-volatile memory, such as at least one magnetic disk storage device, a flash memory device, or other volatile solid-state storage devices. Specifically, the memory 120 can store pictures taken by the electronic device or downloaded through a wireless network.

[0030] The input unit 130 can be used to receive input digital or character information, and generate key signal inputs related to the user settings and function controls of the mobile phone 100. Specifically, the input unit 130 may include a touch panel 131 and other input devices 132. The touch panel 131, also known as a touch screen, can collect touch operations of the user on or near it (such as operations of the user using a finger, a stylus, or any suitable object or accessory on or near the touch panel 131), and drive the corresponding connecting device according to a preset program. Optionally, the touch panel 131 can include two parts: a touch detection device and a touch controller. Among them, the touch detection device detects the touch position of the user, detects the signal brought by the touch operation, and transmits the signal to the touch controller; the touch controller receives the touch information from the touch detection device, converts it into contact coordinates, and then sends it to the processor 180, and can receive commands sent by the processor 180 and execute them. In addition, the touch panel 131 can be implemented in multiple types such as resistive, capacitive, infrared, and surface acoustic wave. In addition to the touch panel 131, the input unit 130 may further include other input devices 132. Specifically, the other input devices 132 may include, but are not limited to, one or more of a physical keyboard, function keys (such as volume control keys, power on / off keys, etc.), a trackball, a mouse, a joystick, etc.

[0031] The display unit 140 can be used to display information input by the user or information provided to the user, as well as various menus of the mobile phone. The display unit 140 may include a display panel 141. Optionally, the display panel 141 can be configured in the form of a liquid crystal display (LCD), a light emitting diode (LED), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED), etc. Further, the touch panel 131 can cover the display panel 141. When the touch panel 131 detects a touch operation on or near it, it transmits the operation to the processor 180 to determine the type of touch event. Subsequently, the processor 180 provides a corresponding visual output on the display panel 141 according to the type of touch event. Although in Figure 2 the touch panel 131 and the display panel 141 are implemented as two independent components to realize the input and output functions of the mobile phone, in some embodiments, the touch panel 131 and the display panel 141 can be integrated to realize the input and output functions of the mobile phone.

[0032] The mobile phone 100 may further include at least one sensor 150, such as a light sensor, a motion sensor, and other sensors. Specifically, the light sensor may include an ambient light sensor and a proximity sensor. Among them, the ambient light sensor can adjust the brightness of the display panel 141 according to the brightness of the ambient light, and the proximity sensor can turn off the display panel 141 and / or the backlight when the mobile phone is moved to the ear. As a kind of motion sensor, the accelerometer sensor can detect the magnitude of acceleration in all directions (generally three axes), and can detect the magnitude and direction of gravity when stationary. It can be used for applications that identify the posture of the mobile phone (such as horizontal and vertical screen switching, related games, magnetometer posture calibration), vibration recognition related functions (such as pedometer, tapping), etc.; as for other sensors that the mobile phone can also be configured with, such as gyroscopes, barometers, hygrometers, thermometers, infrared sensors, etc., they will not be elaborated here.

[0033] The audio circuit 160, the speaker 161, and the microphone 162 can provide an audio interface between the user and the mobile phone. The audio circuit 160 can transmit the electrical signal converted from the received audio data to the speaker 161, and the speaker 161 converts it into a sound signal for output; on the other hand, the microphone 162 converts the collected sound signal into an electrical signal, which is received by the audio circuit 160 and then converted into audio data. After the audio data is output to the processor 180 for processing, it is sent to another electronic device, for example, via the RF circuit 110, or the audio data is output to the memory 120 for further processing.

[0034] Communication technologies such as Wi-Fi, Bluetooth, and Near Field Communication (NFC) belong to short-range wireless transmission technologies. The mobile phone can help users send and receive emails, browse the web, and access streaming media through the WIFI module 170, which provides users with wireless broadband Internet access. The above WIFI module 170 may include a Wi-Fi chip, a Bluetooth chip, and an NFC chip. Through the Wi-Fi chip, the mobile phone 100 can be connected to other electronic devices in Wi-Fi Direct mode, or the mobile phone 100 can operate in the AP mode (Access Point mode) that can provide wireless access services and allow other wireless devices to access, or operate in the STA mode (Station mode) that can be connected to an AP but does not accept wireless device access, so as to establish point-to-point communication between the mobile phone 100 and other Wi-Fi devices.

[0035] The processor 180 is the control center of the mobile phone, connecting various parts of the entire mobile phone through various interfaces and circuits. By running or executing software programs and / or modules stored in the memory 120, and by calling data stored in the memory 120, it executes various functions of the mobile phone and processes data, thereby monitoring the mobile phone as a whole. Optionally, the processor 180 may include one or more processing units; optionally, the processor 180 may include, for example, an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Among them, different processing units can be independent devices or integrated in one or more processors.

[0036] The mobile phone 100 also includes a power supply 190 (such as a battery) for powering each component. Preferably, the power supply can be logically connected to the processor 180 through a power management system, so as to realize functions such as management of charging, discharging, and power consumption management through the power management system.

[0037] The mobile phone 100 may also include a camera. Optionally, the position of the camera on the mobile phone can be front-facing or rear-facing, and the embodiments of the present application do not limit this. Among them, the mobile phone can collect a scene image of the current scene through the camera, and determine the scene information and scene type by analyzing the scene image.

[0038] Figure 3 This is a schematic flowchart of the display method provided by the embodiments of the present application. As Figure 3 shown, a display method is provided, including the following steps. The steps of this method are only a possible implementation manner of the present application.

[0039] Step 310: Present a plurality of sub-display areas on the display interface of the terminal, where two adjacent sub-display areas at least intersect with each other in the first direction of the terminal.

[0040] In this embodiment, the entire display interface of the terminal is divided into several independent sub-display areas. The number, shape, and arrangement of the sub-display areas can be flexibly defined according to requirements. For example, it can be a uniformly distributed geometric shape layout or an irregular geometric shape layout.

[0041] Here, two adjacent sub-display areas in the first direction can be that their upper and lower edges intersect with each other, or there is partial overlap between the two sub-display areas in the first direction. However, from the display effect, these two sub-display areas are closely adjacent, without gaps or overlapping parts.

[0042] Step 320: In response to the playback of the audio of the terminal, the color of the first sub-display area changes along the second direction of the terminal, the color of the second sub-display area adjacent to the first sub-display area in the first direction changes along the opposite direction of the second direction, and the starting color of the change of the second sub-display area is the same as the ending color of the change of the first sub-display area.

[0043] Here, the first direction and the second direction are perpendicular. The first direction refers to the height direction of the terminal, which can be the negative direction towards the y-axis of the terminal or the positive direction towards the y-axis; the second direction refers to the width direction of the terminal, which can be the negative direction towards the x-axis of the terminal or the positive direction towards the x-axis.

[0044] In this embodiment, at least one color is assigned to each sub-display area. Here, the color can be obtained from the cover of the smart card of the terminal, the pictures in the album, or other suitable applications that can provide bitmaps. These bitmaps usually display multiple colors.

[0045] It should be understood that the color of the sub-display area is not static but changes over time. This change can be periodic (such as changing from color A to color B and then from color B to color A), or unidirectional (such as changing from color A to color B and then starting from color A again to change to color B).

[0046] Here, the starting color of the change refers to the color at the starting point of the color change during the change process of the sub-display area along the second direction. The ending color of the change refers to the color at the ending point of the color change during the change process of the sub-display area along the second direction.

[0047] In this embodiment, the sub-display area always has a color and the color changes over time. Specifically, between the starting color of the change and the ending color of the change, the color changes according to a certain rule (such as a gradual change).

[0048] Furthermore, the color changes of multiple sub-display areas on the display interface can also be synchronized with the audio playback, and certain features of the audio (such as volume, rhythm, frequency, etc.) can also trigger the dynamic changes of the colors of multiple sub-display areas on the display interface. For example, during the audio playback, the sub-display area will change dynamically according to the rhythm of the audio. The faster the rhythm of the audio, the faster the color of the sub-display area changes from the starting color of the change to the ending color of the change.

[0049] Among them, in the first direction, the change direction of the color of the first sub-display area is opposite to that of the adjacent second sub-display area, and the starting color of the change of the second sub-display area is the same as the ending color of the change of the first sub-display area, enhancing the consistency of the overall visual effect.

[0050] For example, referring to Figure 1 As shown, if the first direction is the positive y-axis direction and the first sub-display area is a1, then the second sub-display area is a2. The color of a1 changes from left to right along the x-axis, and the color of a2 changes from right to left along the x-axis, and the ending color on the right side of a1 is the same as the starting color on the right side of a2. If the first direction is the negative y-axis direction and the first sub-display area is a1, then the second sub-display area is a0. The color of a1 changes from left to right along the x-axis, and the color of a0 changes from right to left along the x-axis, and the ending color on the right side of a1 is the same as the starting color on the right side of a0.

[0051] In the embodiment of the present application, by dividing the terminal display interface into multiple sub-display areas and driving the dynamic changes of the colors of these sub-display areas in real time according to the audio playback, the wallpaper can present different visual effects. Furthermore, the color of the second sub-display area adjacent to the first sub-display area in the first direction changes in the opposite direction of the second direction, and the starting color of the change of the second sub-display area is the same as the ending color of the change of the first sub-display area, achieving a visual effect of dynamic, coherent, and coordinated color changes.

[0052] It should be noted that each embodiment of the present application can be freely combined, the order can be swapped, or it can be executed independently, and does not need to rely on or depend on a fixed execution order.

[0053] In some embodiments, multiple sub-display regions are presented on the display interface of the terminal, including: Draw multiple curves on the display interface; Based on the number of the multiple curves and the height of the terminal in the first direction, adjust the heights of the multiple curves to obtain multiple sub-display regions.

[0054] First, draw multiple curves on the display interface of the terminal. These curves can be of any shape, such as wavy lines, broken lines, etc., and the specific shape can be flexibly adjusted.

[0055] Next, according to the number of the drawn curves and the height of the display interface in the first direction (i.e., the vertical direction), adjust the heights of these curves to ensure that the heights of the adjusted multiple curves can adapt to the height of the display interface and can divide the display interface into multiple sub-display regions. Here, there are no obvious gaps between the sub-display regions, but they are connected or overlapped with each other to form a continuous visual effect.

[0056] In an example, draw multiple Bezier curves. Specifically, an improved Bezier function formula can be used to calculate the texture coordinates uv located on the Bezier curve during the system graphics rendering process.

[0057] Among them, x corresponds to the u coordinate in the texture coordinate system, representing the width direction of the terminal window, and the domain is [0,1], where (0,0) corresponds to the left vertex of the terminal window, and (1,0) corresponds to the right vertex of the terminal window; y corresponds to the v coordinate in the texture coordinate system, representing the height direction of the terminal window. Among them, (0,1) corresponds to the left bottom of the terminal window, and (1,1) corresponds to the right bottom of the terminal window. For each x value within the domain, the corresponding y value can be calculated through the above Bezier function formula. By iterating the x values, a series of (x,y) points can be obtained, and connecting these points can form a Bezier curve.

[0058] Here, b0, b1, b2, and b3 are the Bezier parameters u_b, and these Bezier parameters jointly determine the shape and position of the Bezier curve.

[0059] Among them, b0 controls the height at the left end of the Bezier curve, b1 controls the slope at the left end of the Bezier curve, b2 controls the slope at the right end of the Bezier curve, and b3 controls the height at the right end of the Bezier curve. When b0 = b1 = b2 = b3, the Bezier curve is a horizontal straight line.

[0060] Such as Figure 4As shown, it depicts a Bezier curve generated under a specific configuration of Bezier parameters (b0, b1, b2, b3). When x is 0, the y value is equal to b0, and when x is 1, the y value is equal to b3. By adjusting different combinations of these Bezier parameters (b0, b1, b2, b3), multiple Bezier curves can be generated.

[0061] In one embodiment, after determining the number of Bezier curves LINE_NUM to be drawn on the screen, a Bezier curve number is defined for each Bezier curve. For example, the Bezier curve numbers can start from a0 and increase incrementally to aLINE_NUM - 1. For each Bezier curve, a set of Bezier parameters u_b (i.e., b0, b1, b2, and b3 as described above in this text) is defined, and these Bezier parameters determine the shape and position of the Bezier curve.

[0062] In addition, a width allocation strategy can also be defined based on the height of the terminal window and the number of curves to ensure that all Bezier curves are visually distributed on the screen as evenly as possible. For example, the average width of each Bezier curve can be calculated based on the height of the terminal window, and then adjusted according to the specific shape and distribution of the Bezier curves. It should be noted that the Bezier curve after width adjustment will be referred to as the second Bezier curve in the following text.

[0063] For example Figure 5 As shown in A of, on the screen 600, 4 Bezier curves with numbers increasing incrementally from a0 to a3 are drawn, and the initial state of all Bezier curves is a horizontal straight line (i.e., b0 = b1 = b2 = b3). The initial height (i.e., the b0 value) of the starting point of each Bezier curve is set according to the number. After that, each Bezier curve is adjusted according to its width allocation, and each Bezier curve extends upward and downward around its respective center line, thus obtaining multiple second Bezier curves (i.e., sub-display areas). In this process, each second Bezier curve at least touches the adjacent second Bezier curve, or partially overlaps in some areas, thus forming a visual effect where the upper second Bezier curve covers the lower second Bezier curve as shown in B of Figure 5 In, the upper second Bezier curve will cover the lower second Bezier curve.

[0064] In addition, the Bezier parameters u_b of each second Bezier curve can be dynamically adjusted according to requirements later. Continuing to refer to Figure 6 As shown, when b0 = b1 ≠ b2 ≠ b3, the second Bezier curve can be transformed from Figure 6 In A of to Figure 6 In B of, when b0 ≠ b1 ≠ b2 = b3, the second Bezier curve can be transformed from Figure 6 In A of to Figure 6 In C of, when b0 ≠ b1 ≠ b2 ≠ b3, the second Bezier curve can be transformed fromFigure 6 transform A in Figure 6 to D in

[0065] In the embodiments of the present application, by adjusting the shape, quantity, and height of the curve, the display interface can be divided into multiple dynamically changing sub-display areas, and combined with the real-time audio data of audio playback, the personalization and interactivity of the dynamic wallpaper are realized, providing users with a richer and more immersive visual experience.

[0066] In some embodiments, it further includes: The color of the first sub-display area gradually changes from a first change start color to a first change end color along the second direction; and The first change end color of the first sub-display area transitions to the second change start color of the second sub-display area, and the color of the second sub-display area gradually changes from a second change start color to a second change end color along the opposite direction of the second direction.

[0067] In this embodiment, each sub-display area presents a color gradient effect in the second direction (the positive or negative direction of the x-axis). That is, the color of each sub-display area in the second direction (the positive or negative direction of the x-axis) is a gradient process, gradually transitioning from a change start color to a first change end color. For example, if the first change start color of the first sub-display area is blue and the first change end color is red, then the color of the first sub-display area along the second direction of the terminal will gradually change from blue to red.

[0068] For example, refer to Figure 7 As shown, the color of the first sub-display area 701 gradually changes from orange to yellow, the color of the second sub-display area 702 gradually changes from yellow to green, the color of the third sub-display area 703 gradually changes from green to blue, the color of the fourth sub-display area 704 gradually changes from blue to red, and the color of the fifth sub-display area 705 gradually changes from red to orange.

[0069] Here, the start change of the color of each sub-display area is not a sudden or jump change. Specifically, the color of the first sub-display area gradually changes from the first change start color to the first change end color. When reaching the first change end color, the first change end color does not suddenly disappear, but continues to smoothly transition to the second change start color of the second sub-display area. This transition is not a mutation, but makes the color changes of the two sub-display areas form a continuous and natural connection visually, without obvious boundaries or interruptions.

[0070] For example, refer to Figure 1 from A to Figure 1As shown by C in [description], it shows that the colors of the four sub-display areas a0, a1, a2, and a3 are constantly changing. The color changes between adjacent sub-display areas always remain consistent at the junctions, avoiding problems such as color jumps or incoherence.

[0071] In practical applications, through an interpolation algorithm, it can be ensured that at the end of the color change in the first sub-display area (at the junction with the second sub-display area) and the start of the color change in the second sub-display area, the colors transition smoothly rather than suddenly switching.

[0072] In one example, multiple color center points can be defined first. Then, for the color of the pixel point uv in the i-th sub-display area, the color of each sub-display area can be obtained by interpolating the color values in the color center points.

[0073] For ease of understanding, in this embodiment, it is assumed that all the sub-display area lines are arranged in order together to form a circular ring with the head and tail connected. On this circular ring, 3 color center points are evenly spaced, namely u_colorCenter.x, u_colorCenter.y, and u_colorCenter.z. The positions of the color center points change periodically between 0 and 1 over time. Each color center point is colored with a color. For the color of the pixel point uv in the i-th sub-display area in the circular ring, it is interpolated from the colors of these three color center points according to the interpolation ratio colorRate, and a colored circular ring can be obtained.

[0074] Continue to refer to Figure 8 As shown, four sub-display areas numbered a0 to a3 are drawn from top to bottom on the screen. The sub-display areas start from number a0. The color of the first sub-display area fades from left to right; the color of the second sub-display area fades from right to left, and the color on its right is the same as the color on the right of the previous sub-display area; the color of the third sub-display area fades from left to right, and the color on its left is the same as the color on the left of the previous sub-display area.

[0075] Here, taking the second Bezier curve after the curve height adjustment of the Bezier curve drawn on the display interface as the sub-display area as an example for explanation, for the interpolation ratio colorRate of the pixel point uv in the sub-display area numbered i in the circular ring, it can be obtained in the following way: Calculate the interpolation step between each second Bezier curve, i.e., step = 1.0 / LINE_NUM. Determine the interpolation start position of the second Bezier curve with the current number i, i.e., start = i × step. Determine the abscissa uv.x of the pixel point uv on the sub-display area with the number i, and set the Bezier parameter u_b of the second Bezier curve to (0, 0, 1, 1).

[0076] Use the abscissa uv.x of the pixel point uv and a specific Bezier parameter u_b to perform interpolation using the Bezier function to obtain the first interpolation coefficient ratio1, i.e., ratio1 = bessel(u, vec4(0.0, 0.0, 1.0, 1.0)).

[0077] Furthermore, since the second Bezier curve in this embodiment uses an S-shaped torsion gradient, the relative position x of the pixel point uv on the second Bezier curve with the current number i relative to the interpolation start position of the first second Bezier curve is determined according to the parity of the number of the second Bezier curve.

[0078] If the number i is even, it indicates that the color of the second Bezier curve with the current number i fades from left to right, such as the Bezier curves numbered a0 and a2 in the reference Figure 8 . Then the relative position x of the pixel point uv on the second Bezier curve with the current number i is x = start + ratio1 × step. That is, starting from the interpolation start position start of the second Bezier curve with the current number i, the relative position x is calculated according to the first interpolation coefficient ratio1 and the interpolation step step.

[0079] If the number i is odd, it indicates that the color of the second Bezier curve with the current number i fades from right to left, such as the Bezier curves numbered a1 and a3 in the reference Figure 8 . Then the relative position x of the pixel point uv on the second Bezier curve with the current number i is x = start + (1.0 – ratio1) × step. That is, starting from the interpolation start position start of the second Bezier curve with the current number i, the relative position x is calculated according to (1.0 - ratio1) and the interpolation step step.

[0080] Next, calculate the relative interpolation distance dist1 between the relative position x of the current pixel point uv and each color center point. Since the color center moves periodically in the ring, in this embodiment, the minimum value between each relative interpolation distance dist1 and (1 - dist1) is taken to obtain the minimum relative interpolation distance min(dist1) between the relative position x of the current pixel point uv and each color center point.

[0081] Finally, compare the minimum relative interpolation distances with respect to the three color center points to determine between which two color center points the uv of the current pixel is interpolated. For example, when min(dist1.x) > min(dist1.y) and min(dist1.x) > min(dist1.z), interpolation is performed between the color center point u_colorCenter.y and the color center point u_colorCenter.z.

[0082] Specifically, if interpolation is performed between the color center point u_colorCenter.y and the color center point u_colorCenter.z, calculate the sum of the two minimum relative distances sum = min(dist1.y) + min(dist1.z), and use the Bessel function for interpolation again to obtain the interpolation ratio rate, that is, rate = bessel(min(dist1.z) / sum, vec4(0.0, 0.0, 1.0, 1.0)). Then the first interpolation ratio corresponding to the color center point u_colorCenter.y is rate, the second interpolation ratio corresponding to the color center point u_colorCenter.z is (1 - rate), and the third interpolation ratio corresponding to the color center point u_colorCenter.x is 0.

[0083] It should be noted that performing linear interpolation directly between two adjacent color center points may result in too abrupt color changes, especially when the color differences are large. Therefore, in this embodiment, the Bessel function is used for interpolation to achieve a smoother transition by adjusting the Bessel parameter u_b of the second Bessel curve and reduce color mutations. Since the shape of the second Bessel curve can be changed by adjusting the Bessel parameter u_b, the speed of color change can be controlled. Therefore, in this embodiment, the Bessel parameter u_b of the second Bessel curve is also adjusted to gradually slow down the color change near the flipping center position to avoid obvious color clusters such as bright spots and dark spots.

[0084] Furthermore, the colors of each sub-display area can also show a gradual change in shade along the first direction.

[0085] Within each sub-display area, the colors in the first direction (the positive or negative direction of the y-axis) can show a gradual change in shade. For example, gradually transition from a darker color (lower brightness or higher saturation) to a lighter color (higher brightness or lower saturation), or, gradually transition from a lighter color (lower brightness or higher saturation) to a darker color (higher brightness or lower saturation).

[0086] In one example, the colors of each sub-display area can use a gradual change in shade in the first direction and a gradual change in the main color in the second direction.

[0087] Here, for the sake of easy understanding, the above example of using three color center points for color interpolation will be continued for explanation.

[0088] Refer to Figure 9 As shown, three color center points o, p, and q are used for color interpolation. Among them, the color of each color center point is obtained by mixing the dark color and the light color corresponding to a primary color. In this embodiment, a light-dark gradient is used in the vertical direction of the second Bézier curve, and a primary color gradient is used in the horizontal direction.

[0089] In this embodiment, first, the second interpolation coefficient ratio2 of the pixel point uv on the second Bézier curve with the current number i in the vertical direction is determined. Specifically, the vertical distance dist3 from the pixel point uv on the second Bézier curve with the current number i to the bottom of this second Bézier curve is determined, and then the second interpolation coefficient ratio is determined according to the vertical distance dist3 and the half-width u_width(i) of the second Bézier curve with the current number i.

[0090] In an example, the second interpolation coefficient ratio2 = 1.0 - dist3 / u_width(i) × 2. In other words, when the distance dist3 is 0 (i.e., the pixel point is exactly at the bottom of the second Bézier curve), the second interpolation coefficient ratio2 is 1, indicating the use of the complete lower-layer color (such as the dark color); when the distance dist3 is equal to twice the half-width of the curve (i.e., the pixel point is exactly at the top of the second Bézier curve), the second interpolation coefficient ratio2 is 0, indicating the use of the complete upper-layer color (such as the light color). In this way, the value of the second interpolation coefficient ratio2 decreases linearly as the distance dist3 increases, thereby achieving a gradient effect from dark to light in color.

[0091] After that, the colors of the color center points are determined according to the second interpolation coefficient ratio2. As Figure 9 shown, the color of the color center point o is obtained by mixing the dark color u_colors[0] and the light color u_colors[1] corresponding to a primary color. The color of the color center point p is obtained by mixing the dark color u_colors[2] and the light color u_colors[3] corresponding to a primary color. The color of the color center point q is obtained by mixing the dark color u_colors[4] and the light color u_colors[5] corresponding to a primary color.

[0092] Taking the color of the color center point o as a representative for explanation, the color of the color center point o, color1 = mix(u_colors[0], u_colors[1], ratio2), where mix(a, b, x) = a×(1 - x) + b×x. That is, the second interpolation coefficient ratio is used to control the mixing ratio between the dark color u_colors[0] and the light color u_colors[1]. When the second interpolation coefficient ratio2 is closer to 0, the generated color color1 is closer to the control dark color u_colors[0]. On the contrary, when the second interpolation coefficient ratio2 is closer to 1, the generated color color1 is closer to the control light color u_colors[1].

[0093] Finally, using the interpolation ratio colorRate of the three color center points of the pixel point uv on the second Bezier curve with the current number i, the colors of the three color center points are mixed to obtain the color of the pixel point uv on the second Bezier curve with the current number i.

[0094] The above color mixing process can be implemented through a Java method.

[0095] First, a function named getColor is defined, which accepts three parameters: an integer i representing the number of the curve, a floating-point number dist3 representing the distance from the current point to the second Bezier curve, and a vec3 type colorRate used for the weights of mixing three colors.

[0096] Next, a second interpolation coefficient ratio2 is calculated, which is based on the ratio of the distance dist3 from the current point to the second Bezier curve and a constant 2.0 multiplied by the curve half-width u_width[i]. This coefficient is used for color shading interpolation in the vertical direction.

[0097] Use the mix function to perform color mixing between u_colors[0] (the light color of color 1) and u_colors[1] (the dark color of color 1) according to the second interpolation coefficient ratio2 to obtain the shading mixing result of color 1.

[0098] Use the mix function to perform color mixing between u_colors[2] (the light color of color 2) and u_colors[3] (the dark color of color 2) according to the second interpolation coefficient ratio2 to obtain the shading mixing result of color 2.

[0099] Use the mix function to perform color mixing between u_colors[4] (the light color of color 3) and u_colors[5] (the dark color of color 3) according to the ratio2 second interpolation coefficient to obtain the shading mixing result of color 3.

[0100] Perform a weighted average on the three mixed colors according to the color weight colorRate to obtain the final mixed color color. Return the final mixed color color.

[0101] In some embodiments, it further includes: Generate the noise value of the pixel points in the multiple sub-display areas; Based on the noise values of the pixel points in the multiple sub-display areas, perform color level elimination on the colors of the pixel points in the multiple sub-display areas.

[0102] It should be noted that when multiple colors continuously transition in space, if the pixel value changes in the transition area are discontinuous or the number of transition layers is small, it will cause the color level problem, that is, obvious color stratification or stepped gradient appears visually. The severity of the color level problem is often inversely proportional to the smoothness of the color transition, that is, the fewer the transition layers, the stronger the sense of stratification. This phenomenon may not be easily noticed in static images, but because the human eye is more sensitive to subtle differences in dynamic changes, it is particularly obvious during dynamic display (such as wallpaper animation).

[0103] In this embodiment, in order to avoid the color level problem, an appropriate amount of random noise (such as Gaussian noise, uniform noise, etc.) is introduced in the color transition area to simulate the natural blur effect of color transition in nature, thereby effectively reducing or eliminating the sense of color level visually.

[0104] First, generate a random number to be used as the generated noise value. Then directly add the generated noise value to the color of the pixel point uv. Since the noise value is very small, only a tiny adjustment is made to the color of the pixel point uv, effectively masking the original sense of color level and making the color transition smoother.

[0105] In an example, the original texture coordinates v_originuV of the pixel point can be first operated on using the sine function sin() and the vector dot product function dot(), and the fractional part of the result is taken through the fract function to generate a random number noise between 0 and 1. Then scale the random number noise to the range of the color channel [0, 255] as the noise value, and finally directly add the generated noise value to the color of the pixel point uv.

[0106] The above process of eliminating the color level can be implemented through a Java method.

[0107] First, a function named dithering is defined, which accepts a parameter color of type vec3, representing the color to be dithered, that is, the final mixed color color returned above.

[0108] Next, a noise value noise is generated. This is done through the following steps: Obtain the original texture coordinates, usually the original texture coordinates received from the fragment shader.

[0109] Use the dot function to calculate the dot product of the original texture coordinates and a fixed vector vec2(12.9898, 78.233). This fixed vector is used to generate pseudo-random numbers.

[0110] Pass the dot product result to the sin function to obtain a periodic value.

[0111] Multiply the result of the sin function by a large constant 43758.5453. This is to amplify the periodic variation so as to obtain more randomness when taking the integer part.

[0112] Use the fract function to obtain the fractional part of the product, which will generate a pseudo-random number in the range [0, 1).

[0113] Subtract 0.5 from the pseudo-random number to make its range [-0.5, 0.5).

[0114] Finally, divide the result by 256.0 to narrow the noise range, so that the impact of dithering will be relatively subtle.

[0115] Finally, add the generated noise value noise to each component of the original color color, and then return the dithered color. For example, perform element-wise addition on the color components, i.e., color.r + noise; color.g + noise; color.b + noise. In this way, the dithering will slightly change the value of each color component, making the color transition look smoother.

[0116] In some embodiments, it further includes: In response to a click operation on the smart card on the lock screen interface of the terminal, present a plurality of sub-display areas on the display interface of the terminal. At least one color of each sub-display area is determined according to the display color of the smart card.

[0117] Here, the color is extracted from the smart card on the lock screen interface of the terminal, such as Figure 10 The music media card shown.

[0118] A music media card is an interface element that integrates functions such as music playback control, recommendation, and sharing, providing users with a convenient music operation experience. When the terminal, such as a mobile phone, is in the locked screen state, if there is a music application playing music in the background, a music card will be displayed on the locked screen interface. This card usually contains elements such as play / pause buttons, song information (such as name, singer), and music cover (usually represented as the background of the music media card), allowing users to perform basic music playback control without unlocking the phone. In some other examples, when the terminal is in the unlocked state, the music media card can also be displayed on the main interface of the terminal. For example, a region of the main interface is configured to display the music media card, and other regions are configured to display the top status bar, application icons, and / or bottom quick icons, enabling basic music playback control through the music media card even when the music application is running in the background.

[0119] As Figure 10 shown, when the user starts the music player of the terminal, the music player will load and parse the local or online music library, preparing the playlist and audio data. At the same time, the terminal creates a music media card, which contains key information of the currently playing music. The terminal will register and display the music media card at the position specified by the system, and this music media card is the entry to enable the music wallpaper function. In another example, when switching from the music player interface to other interfaces, such as the main interface, the terminal will display the created music media card in the main interface, or when the terminal receives a lock screen instruction and locks the screen in the music player interface, the terminal will display the created music media card in the locked screen interface.

[0120] In one example, when the user clicks on the non-functional area of the music media card, the terminal will enable the music wallpaper function and start obtaining the music cover to achieve subsequent dynamic wallpaper effects based on the music cover. In another example, when receiving an instruction to click on the non-functional area of the music media card on the main interface of the terminal, the terminal can enlarge the music media card and display it centered on the main interface, covering the application icons.

[0121] It can be understood that the non-functional area of the music media card refers to the area of the music media card that does not include any function buttons. The above function buttons include, for example, play, pause, previous, next, etc.

[0122] In one example, colors with higher saturation, brightness, etc. attributes in the music cover can be selected, or colors with a larger display area in the music cover can be selected, or colors that best represent the music theme or emotional tone can be selected.

[0123] In another example, multiple colors can also be automatically identified and extracted from a music cover through a color extraction algorithm (such as the Palette.Swatch color picking algorithm). After multiple colors are extracted, selection can be made from the multiple colors based on factors such as the color proportion area, brightness, saturation, or other factors of the colors.

[0124] Further, to avoid the multiple extracted colors being too visually similar, after extracting multiple candidate colors from the multiple colors, these candidate colors can be converted from the RGB color space to the Lab color space. The Lab color space is a color-opponent space and consists of three dimensions: L represents brightness, and a and b represent color opponent dimensions. These three dimensions together constitute a three-dimensional color space for describing and quantifying colors. The Lab space is based on human visual perception and is more suitable for quantifying color differences.

[0125] In the Lab space, calculate the Euclidean distance between multiple candidate colors. If the Euclidean distance is less than a set threshold (such as 20 or other suitable values), then these candidate colors are considered too close and some candidate colors need to be removed. If the final number of colors obtained is less than the required number (such as 3), then colors can be randomly selected from a pre-made color library for supplementation, but when selecting, it is necessary to ensure that the Euclidean distance of the newly selected colors from the already selected colors in the Lab space remains greater than or equal to the set threshold to ensure color diversity and visual distinctiveness.

[0126] Further, after screening out multiple colors, the colors can be converted into corresponding dark and light colors for subsequent wallpaper rendering use.

[0127] It should be understood that a color in the HSL color space includes three components: hue (Hue, H), saturation (Saturation, S), and brightness (Lightness, L). Therefore, in this embodiment, the brightness value and saturation value of a color in the HSL color space can be adjusted to adjust it into a gradient color.

[0128] Specifically, each color is converted from a one-dimensional int color value to an HSL color value. The HSL color space provides direct control over hue, saturation, and brightness, which makes color adjustment more intuitive and flexible. For the HSL value of each color, corresponding dark and light versions are generated by adjusting saturation and brightness. For example, reducing the brightness value and increasing the saturation value can obtain its corresponding dark color, while increasing the brightness value and reducing the saturation value can obtain its corresponding light color. After converting the adjusted dark and light HSL values back to one-dimensional int color values, the one-dimensional int color values are converted into three-dimensional and normalized RGB values for subsequent wallpaper rendering use.

[0129] The above conversion process can be implemented through a Java method. The following is a Java method for obtaining the dark and light versions of a given color, which is commonly used in UI design to provide color diversity and layering.

[0130] First, a static private method named getDarkLightColor is defined. It accepts an integer parameter color, which represents a color value (usually an ARGB value). The method returns an integer array int[], containing two elements, representing the dark and light versions of the input color respectively.

[0131] Next, an integer array darkLight with a length of 2 is created to store the dark and light color values. A floating-point array hsl with a length of 3 is created to store the HSL (hue, saturation, lightness) values of the color. The colorToHSL method in the ColorUtils class is called to convert the input color value color to HSL values and store the result in the hsl array.

[0132] Furthermore, a new HSL array hsl1 is created. The new HSL array hsl1 is an adjustment of the original HSL array hsl for generating the dark version. For example, in the new HSL array hsl1, the original hue remains unchanged. The original saturation is increased by 0.1 through the saturate function (ensuring that the adjusted saturation does not exceed 1 through the saturate function), and the original lightness is decreased by 0.1 through the saturate function (ensuring that the adjusted lightness does not fall below 0 through the saturate function).

[0133] The HSLToColor method in the ColorUtils class is called to convert the hsl1 array of the new HSL back to a color value and store it in the first position of the darkLight array, which is the dark version.

[0134] Similarly, another new HSL array hsl2 is created. The new HSL array hsl2 is an adjustment of the original HSL array hsl for generating the light version. For example, in the new HSL array hsl2, the original hue remains unchanged, the original saturation is decreased by 0.1, and the original lightness is increased by 0.1.

[0135] The HSLToColor method in the ColorUtils class is called to convert the hsl2 array of the new HSL back to a color value and store it in the second position of the darkLight array, which is the light version.

[0136] Finally, the array containing the dark color value and the light color value is returned.

[0137] In some embodiments, it further includes: In response to the playback of the audio of the terminal, the plurality of sub-display regions change at least along a first direction and / or along a second direction of the terminal following the playback of the audio, and the change includes at least one of a change in the shape and a change in the position of the plurality of sub-display regions.

[0138] Here, the shape of the sub-display region can also be changed, such as being enlarged or reduced along the horizontal direction or the vertical direction; the sub-display region can also be position-transformed on the screen, such as moving from the left side of the screen to the right side, or moving from the top to the bottom. During the audio playback, at least one of the above changes will occur to the sub-display region.

[0139] In the embodiments of the present application, by dividing the terminal display interface into a plurality of sub-display regions and driving these sub-regions to change along the vertical direction and / or the horizontal direction in real time according to the audio playback, such as changes in shape, position, and color, a deep interaction between the dynamic wallpaper and the audio is achieved, bringing a more personalized and interactive visual experience to the user.

[0140] In some embodiments, the plurality of sub-display regions change in shape at least along a first direction and / or along a second direction of the terminal following the playback of the audio, including: The plurality of sub-display regions perform vertical scaling following the playback of the audio in the first direction of the terminal, wherein the height of the plurality of sub-display regions after vertical scaling is not less than the height of the terminal in the first direction; and / or The plurality of sub-display regions perform horizontal scaling following the playback of the audio in the second direction of the terminal, wherein the width of the plurality of sub-display regions after horizontal scaling is not less than the width of the terminal in the second direction.

[0141] Here, the plurality of sub-display regions can follow the audio playback to undergo at least one of vertical scaling or horizontal scaling in terms of shape change.

[0142] In practical applications, the scaling degrees of the plurality of sub-display regions in the vertical direction can be the same or different. However, it should be understood that the plurality of sub-display regions always cover the entire vertical range of the screen during the scaling process, and there will be no blank or broken areas on the display interface.

[0143] Similarly, the scaling degrees of the plurality of sub-display regions in the horizontal direction can be the same or different. However, it should be understood that the plurality of sub-display regions always cover the entire horizontal range of the screen during the scaling process, and there will be no blank or broken areas on the display interface.

[0144] In some embodiments, it further includes: Determine a minimum scaling factor according to the smaller of the first scaling factor and the reciprocal of the second scaling factor; Based on the minimum scaling factor, determine the vertical scaling component of the texture coordinates of the multiple sub-display areas along the first direction of the terminal; Based on the minimum scaling factor and the second scaling factor, determine the horizontal scaling component of the texture coordinates of the multiple sub-display areas along the second direction of the terminal; where The first scaling factor is an overall scaling factor for controlling the synchronous scaling of the multiple sub-display areas along the first direction and the second direction of the terminal, and the second scaling factor is a horizontal scaling factor for controlling the scaling of the multiple sub-display areas along the second direction of the terminal; the first scaling factor changes periodically following the playback of the audio.

[0145] Specifically, the first scaling factor is the overall scaling factor u_scale for controlling the synchronous scaling of the sub-display areas in the horizontal and vertical directions, and the second scaling factor is the horizontal scaling factor u_scaleX for controlling the scaling of the sub-display areas in the horizontal direction.

[0146] Wherein, when the overall scaling factor u_scale and the horizontal scaling factor u_scaleX are less than 1, it means reducing the sampling selection area, and the effect of displaying on the screen is magnification (for example, visually, some areas of the sub-display area are magnified and then displayed on the screen), and when it is greater than 1, it means enlarging the sampling selection area, and the effect of displaying on the screen is reduction (that is, visually, the sub-display areas are all reduced and then displayed on the screen). Usually, in order to avoid local black screens on the screen caused by excessive magnification of the sampling selection area (for example, the magnified texture coordinates exceed the range of the texture image), the overall scaling factor u_scale and the horizontal scaling factor u_scaleX usually take values less than or equal to 1.

[0147] In an example, the overall scaling factor u_scale is configured as a value that changes periodically with time. For example, its minimum value is equal to 0.95, its maximum value is equal to 1, and the horizontal scaling factor u_scaleX is configured as a fixed value, such as 1. The smaller coefficient of u_scale and 1.0 / s_scaleX can be selected as the minimum scaling factor minScale, so as to ensure that there is no local black screen in the horizontal and vertical directions.

[0148] In this embodiment, the final two-dimensional vector scaling factor scale is calculated based on the minimum scaling factor minScale and the horizontal scaling factor u_scaleX. Specifically, the horizontal scaling component of the two-dimensional vector scaling factor scale is determined according to the product of the minimum scaling factor minScale and the horizontal scaling factor u_scaleX, and the vertical scaling component of the two-dimensional vector scaling factor scale is determined by the minimum scaling factor minScale.

[0149] In the embodiments of the present application, by combining vertical scaling and horizontal scaling, a variety of different visual effects can be generated, and the scaled sub-display areas always cover the entire height and width of the screen, avoiding visual breaks or incoherence and ensuring the overall aesthetics of the dynamic wallpaper.

[0150] In some embodiments, the plurality of sub-display areas change their positions at least along a first direction of the terminal and / or along a second direction of the terminal following the playback of the audio, including: The plurality of sub-display areas perform vertical translation following the playback of the audio in the first direction of the terminal, wherein a sub-display area that exceeds the display interface limit during vertical translation returns to the starting position of the display interface in the first direction and then continues to perform vertical translation; and / or The plurality of sub-display areas perform horizontal translation following the playback of the audio in the second direction of the terminal, wherein a sub-display area that exceeds the display interface limit during horizontal translation returns to the starting position of the display interface in the second direction and then continues to perform horizontal translation.

[0151] Here, the plurality of sub-display areas can change their positions in at least one of vertical translation or horizontal translation following the audio playback.

[0152] In practical applications, the translation degrees of the plurality of sub-display areas in the vertical direction can be the same or different. However, it should be understood that if a sub-display area exceeds the display interface limit during vertical translation (for example, moves outside the top or bottom of the screen), it will return to the starting position of the display interface in the vertical direction and then continue to translate to ensure that the sub-display area always moves dynamically within the screen range and does not completely disappear.

[0153] Similarly, the translation degrees of the plurality of sub-display areas in the horizontal direction can be the same or different. However, it should be understood that if a sub-display area exceeds the display interface limit during horizontal translation (for example, moves outside the left or right side of the screen), it will return to the starting position of the display interface in the horizontal direction and then continue to translate to ensure that the sub-display area always moves dynamically within the screen range and does not completely disappear.

[0154] In some embodiments, it further includes: Perform horizontal translation on the texture coordinates of the multiple sub-display regions based on the horizontal translation component and the first modulo length, where the first modulo length is the modulo length of the horizontal translation component; Perform vertical translation on the texture coordinates of the multiple sub-display regions based on the vertical translation component and the second modulo length, where the second modulo length is the modulo length of the vertical translation component.

[0155] In one embodiment, the periodic mapping of texture coordinates can be utilized to achieve an infinite translation effect of the sub-display regions in the vertical direction.

[0156] It should be understood that the v value of the texture coordinates is periodic, and its value range is [0, 1]. When the v value of the texture coordinates exceeds this range, it will automatically wrap back to the range of [0, 1]. For example, if the v value of a texture coordinate is 1.5, it is actually equivalent to 0.5.

[0157] In one embodiment, in order to achieve the translation effect in the vertical direction, it is necessary to "tile" each sub-display region to be rendered to achieve the infinite translation of the sub-display regions in the vertical direction.

[0158] In one example, the second modulo length is 1. In other words, the implementation of "tiling" is obtained by taking the modulo operation of the translation amount in the vertical direction by 1, because the "tiling" period in the vertical direction is equal to the maximum value of the texture coordinates in the vertical direction (or called the texture height) which is 1.

[0159] For example, u_translate.y represents the vertical translation component of the sub-display region. Assuming its value is 2.5, it means that it is desired to move the sub-display region 2.5 units downward from its original position. In this application, the change of texture coordinates is exemplarily used to achieve the translation of the sub-display region on the terminal window. Since the maximum values of the texture coordinates in both height and width are 1, in order to achieve seamless repetition of the texture, the modulo operation is used to ensure that any translation amount exceeding the texture period will be "wrapped" back into the texture period. Since the result of taking the modulo operation of 2.5 by 1 is 0.5, this means that the texture repeats twice in the vertical direction and then repeats again starting from the position of 0.5. In fact, only the part exceeding two complete periods, that is, 0.5 unit, needs to be considered, and this will be used together with the original texture position to determine the specific position of the texture repetition. In the actual texture mapping, the result of adding 0.5 to the original texture position will be used as the vertical direction component of the texture coordinates to ensure that the texture can be correctly repeated in the vertical direction.

[0160] That is to say, regardless of how the texture coordinates are translated in the vertical direction, the modulo operation can ensure that the texture seamlessly repeats within the range of 0-1 in the vertical direction. By repeating the texture coordinates, the sub-display area can visually present an infinite translation effect in the vertical direction.

[0161] Similarly, to achieve the translation effect in the horizontal direction, it is necessary to "tile" each sub-display area to be rendered to achieve an infinite translation of the sub-display area in the horizontal direction. The implementation principle is basically similar to the aforementioned vertical tiling, so it will not be elaborated here.

[0162] In the embodiments of the present application, by combining vertical translation and horizontal translation, various different visual effects can be generated. After exceeding the display interface limit, it returns to the starting position and continues to translate, ensuring that the sub-display area is always dynamically moving within the screen range and ensuring the overall aesthetics of the dynamic wallpaper.

[0163] In one embodiment, as Figure 11A shown, to avoid the situation of curve misalignment 1101 and curve misalignment 1102 (i.e., a sense of visual fragmentation) after the sub-display area is horizontally translated, it is necessary to first horizontally flip the sub-display area in the horizontal direction. For example, Figure 11B shown to obtain two symmetric sub-display areas, so that the sub-display area can achieve infinite translation in the horizontal direction without the misalignment situation as Figure 11A shown.

[0164] At the same time, the dynamic visual effect can also be enhanced by dynamically adjusting the scaling factor of the sub-display area. For example, when the sub-display area is translated in the vertical direction, the scaling factor can be gradually increased or decreased to simulate the effect of the curve gradually approaching or moving away from the observer.

[0165] It should be noted that in the embodiments of the present application, the object of translation adjustment or scaling adjustment is the mapping relationship between the texture coordinates and the sub-display area, and this mapping relationship is represented by the texture coordinates. For example, a texture coordinate can be called the original texture coordinate before adjustment. The pixel point corresponding to this original texture coordinate falls into a certain sub-display area. Therefore, this pixel point can be sampled from the sub-display area according to the original texture coordinate. When changing the original texture coordinate of this pixel point, it is actually changing the sampling position of this pixel point on the sub-display area. For example, it is adjusted from the first sub-display area to the second sub-display area for sampling, which visually presents an upward translation of the sub-display area (assuming x remains unchanged). Therefore, when the wallpaper is rendered on the screen, visual effects such as translation, scaling, and color change can be displayed.

[0166] For texture coordinates, multiplying the texture coordinates by a value greater than 1 is displayed as shrinking on the screen, multiplying the texture coordinates by a value less than 1 is displayed as enlarging on the screen, adding a positive value to the texture coordinates is displayed as moving up on the screen, and subtracting a positive value from the texture coordinates is displayed as moving down on the screen.

[0167] For example, if the original texture coordinates are (0.5, 0.5), the pixels in the middle of the texture image are obtained during the original sampling. When adding 0.3 to the y value of the texture coordinates, the texture coordinates change to (0.5, 0.8). During sampling, the pixels corresponding to (0.5, 0.8), that is, the pixels at the bottom of the picture, will be taken. The effect displayed on the screen is that the pixels originally at the bottom of the screen move to the middle of the screen, that is, it is displayed as an upward movement effect.

[0168] Specifically, according to the input scaling factor and translation factor, the texture coordinates of the sub-display area can be transformed.

[0169] The translation factor is a vector u_translate that includes a horizontal translation component u_translate.x and a vertical translation component u_translate.y, and is used to control the translation of the sub-display area in the horizontal and vertical directions. By modifying the values of the two translation components in u_translate, the position of the sub-display area on the screen can be changed.

[0170] Referring to the foregoing description in this article, in order to implement that the translation amount exceeding the texture period is "wrapped" back into the texture period, it is necessary to calculate the true horizontal translation component translateX and the true vertical translation component translateY for the horizontal translation component u_translate.x and the vertical translation component u_translate.y through the modulo operation. Such as translateX = mod(u_translate.x, M), translateY = mod(u_translate.y, N). Among them, mod() is the modulo operation, M is the modulo length of the horizontal translation component, and N is the modulo length of the vertical translation component.

[0171] According to the foregoing description in this article, when the sub-display area is horizontally flipped, M takes the value of 2, and when the sub-display area is not horizontally flipped, M takes the value of 1. Usually, the sub-display area is not vertically flipped, so N takes the value of 1.

[0172] Among them, the change trend of the horizontal translation component follows the sliding direction of the sliding gesture received on the display interface.

[0173] In one example, the horizontal translation component u_translate.x can vary according to the gesture instruction of the swipe gesture received by the terminal on the main interface. For example, when the terminal receives a left-right swipe gesture instruction on the main interface, u_translate.x increases or decreases. For example, when the terminal receives a left swipe gesture instruction on the main interface, u_translate.x increases as the main interface swipes left, and the longer the sliding distance indicated by the left swipe gesture instruction, the more u_translate.x increases. That is to say, at this time, the sub-display area on the wallpaper of the terminal's main interface presents a visual effect of moving to the right.

[0174] Alternatively, when the terminal receives a right swipe gesture instruction on the main interface, u_translate.x decreases as the main interface swipes right, and the longer the sliding distance indicated by the right swipe gesture instruction, the more u_translate.x decreases. That is to say, at this time, the sub-display area on the wallpaper of the terminal's main interface presents a visual effect of moving to the left.

[0175] Alternatively, a left swipe gesture instruction indicates that u_translate.x decreases, and a right swipe gesture instruction indicates that u_translate.x increases. At this time, the visual effect presented by the sub-display area on the wallpaper of the terminal's main interface is opposite to that described above in this article.

[0176] Among them, the change trend of the vertical translation component changes following the state switch of the display state of the display interface. The state switch of the display state of the display interface includes switching from the locked screen display state to the desktop display state, or switching from the desktop display state to the locked screen display state.

[0177] In one example, the vertical translation component u_translate.y can change as the terminal switches between the locked screen interface and the main interface. For example, when the terminal enters the main interface from the locked screen interface, the vertical translation component u_translate.y first increases and then decreases. For example, u_translate.y first increases from 0 to 100 and then decreases to 0. During this process, the sub-display area on the wallpaper of the terminal's main interface presents a visual effect of moving upward. In another example, u_translate.y first increases from 0 to 100 and then decreases to -100. During this process, the sub-display area on the wallpaper of the terminal's main interface presents a visual effect of moving upward and then downward.

[0178] For example, when the terminal enters the locked screen interface from the main interface, the vertical translation component u_translate.y continuously decreases. For example, u_translate.y decreases from 0 to -100. During this process, the sub-display area on the wallpaper of the terminal's main interface presents a visual effect of moving downward.

[0179] It can be understood that the speed of the sub-display area movement on the wallpaper can also be controlled by adjusting the speed of u_translate.y when increasing or decreasing. For example, the movement speed of the sub-display area shown when u_translate.y increases from 0 to 100 and then decreases to 0 within 500 ms is completely different from that when u_translate.y increases from 0 to 100 and then decreases to 0 within 200 ms. Similarly, the speed of increasing or decreasing of u_translate.x can also be controlled in this way. By changing the changes of these parameters, the translation and scaling animation effects of the sub-display area can be achieved.

[0180] It should be noted that this application does not impose any restrictions on the value range of u_translate.x and u_translate.y, and those skilled in the art can select an appropriate value range according to needs.

[0181] Finally, the original texture coordinates uv are scaled and translated through the two-dimensional vector scaling coefficient scale, the true horizontal translation component translateX, and the true vertical translation component translateY to obtain the new texture coordinates uv1. When the original vertex coordinates mapped by the original texture coordinates uv are shaded, sampling will be performed from the new texture coordinates uv1.

[0182] In an example, uv1 = uv × scale + (1.0 - scale) × 0.5 + vec(translateX, translateY). Specifically, the original texture coordinates uv are scaled according to the two-dimensional vector scaling coefficient scale, translated according to the true horizontal translation component translateX and the true vertical translation component translateY. At the same time, an offset "(1.0 - scale) × 0.5" is used to adjust the scaled and translated texture coordinates to ensure that the center points of the sub-display areas after translation and scaling are evenly arranged along the center of the screen.

[0183] This is because after scaling the original texture coordinates, the scaling operation also affects the coordinate space of the original texture coordinates. Assuming that no appropriate offset is applied to the scaled original texture coordinates, the scaled original texture coordinates will be offset relative to the center of the texture coordinate system. For example, when scale is 0.95, assuming the original texture coordinates are (0.5, 0.5), which is at the center of the texture image, the scaled original texture coordinates are (0.475, 0.475). Obviously, the scaled original texture coordinates are not at the center of the texture coordinate system, that is, the scaling has shifted the center position of the texture coordinate system from (0.5, 0.5) to (0.475, 0.475), which is clearly incorrect. Therefore, the scaled original texture coordinates need to be readjusted back to the center position.

[0184] Referring to the foregoing description in this article, the scaling and translation transformation process of the texture coordinates of the sub-display area can be implemented by processing in the vertex shader. Here, the vertex shader is used to process the data of each vertex in the wallpaper model, including position, color, texture coordinates, etc. It performs linear operations such as translation, rotation, scaling and other transformations. These operations generally do not change the relative position relationship between the vertices in the wallpaper model.

[0185] The following is a Java method for obtaining the scaled and translated texture coordinates uv1 in the vertex shader.

[0186] First, a function named uvTransform is defined, which accepts a parameter uv of type vec2, and this parameter represents the original texture coordinates.

[0187] Then, a floating-point variable named minScale is defined, which calculates the minimum value between u_scale and 1.0 / u_scaleX through the min function. u_scale is the overall scaling factor, and u_scaleX is the scaling factor in the horizontal direction. This minimum value is used to ensure that the scaling does not exceed a certain range.

[0188] A vec2 variable named scale is defined, which contains two components: the scaling factor in the horizontal direction minScale×u_scaleX and the scaling factor in the vertical direction minScale. In this way, the x and y components of the texture coordinates can be scaled separately.

[0189] A floating-point variable named translateX is defined, which calculates the result of taking the modulus of the horizontal translation component u_translate.x with respect to M using the mod function, where M is the modulus length of the horizontal translation component. Additionally, a floating-point variable named translateY is defined, which calculates the result of taking the modulus of the vertical translation component u_translate.y with respect to N using the mod function, where N is the modulus length of the vertical translation component.

[0190] According to the foregoing description in this article, when the sub-display area is horizontally flipped, M takes the value of 2, and when the sub-display area is not horizontally flipped, M takes the value of 1. Similarly, when the sub-display area is vertically flipped, N takes the value of 2, and usually the sub-display area is not vertically flipped, so N takes the value of 1.

[0191] Finally, a vec2 variable named uv1 is defined, which stores the transformed texture coordinates. The calculation process is as follows: First, scale the original texture coordinates uv according to the scale vector, then calculate half of the possible gap size after scaling and add it to the scaled coordinates to maintain the center position of the texture, and finally add the calculated translation amount to the scaled and adjusted coordinates to complete the final coordinate transformation and return the new transformed texture coordinates uv1.

[0192] Reference Figure 11B As shown, in order to enable the sub-display area to be infinitely translated in the horizontal direction, the sub-display area can also be processed by periodic flipping. At the same time, to avoid sharp images at the flipping connection, in this embodiment, the edge slope of the sub-display area is also made 0.

[0193] Specifically, the ordinate in the texture coordinates after flipping the sub-display area remains unchanged, and the abscissa after flipping the sub-display area can be obtained in the following way: First, use the mod function to calculate the result of taking the modulus of the abscissa uv.x of the original texture coordinates uv plus 2.0 with respect to 2.0, denoted as x1, and the range of x1 is always between [0, 2]. Then calculate the result of the symmetric flip of x1 with respect to x = 1.0, denoted as x2. Specifically, first calculate abs(x1 - 1), that is, calculate the distance from x1 to 1.0, and then subtract abs(x1 - 1) from 1.0 to get x2, ensuring that the range of the abscissa in the texture coordinates after flipping the sub-display area is always between [0, 1] to achieve continuous flipping of the sub-display area.

[0194] Since the flipping of the sub-display area is a non-linear transformation, in order to maintain the original characteristics of the flipping, the above flipping transformation process can be implemented by processing in the fragment shader. Here, the fragment shader processes each fragment (pixel) after rasterization. Performing non-linear transformation in the fragment shader can ensure that the attributes of each fragment are the correct results after transformation and will not be affected by the linear interpolation during the rasterization process.

[0195] The following is a Java method for performing flipping processing in the fragment shader.

[0196] First, a function named flip is defined. It accepts a parameter uv of type vec2, which represents the original texture coordinates. The purpose of this function is to perform flipping processing on the texture coordinates.

[0197] Next, a floating-point variable named x1 is defined. It calculates the remainder of the sum of the abscissa uv.x of the original texture coordinates uv plus 2.0 divided by 2.0 through the modulo operation mod. By adding 2.0 and then taking the remainder, it can ensure that the value of x1 is always in the range of [0, 2.0), and then through the modulo operation, it is mapped back to the range of [0, 1), but the arrangement order of the value of x1 is flipped.

[0198] A floating-point variable named x2 is defined. It further processes the flipping effect by calculating the absolute value difference between 1.0 and x1 and then subtracting it from 1.0. This operation actually maps the value of x1 to the range of [0, 1] and realizes horizontal flipping. Specifically, when x1 is close to 0, x2 is close to 1; when x1 is close to 1, x2 is close to 0.

[0199] Finally, a new value of type vec2 is returned. Its x component is the flipped x2, while the ordinate of the texture coordinates uv remains the original uv.y unchanged. In this way, the texture coordinates are only flipped horizontally and remain unchanged vertically.

[0200] In some embodiments, it further includes: The rendering parameters of the pixel points in the multiple sub-display areas change at least along the first direction and / or along the second direction of the terminal following the playback of the audio. The rendering parameters include at least one of texture coordinates and colors.

[0201] Texture coordinates are used to define the position of pixel points in the sub-display area. By adjusting the texture coordinates of pixel points, dynamic changes in the sub-display area can be achieved, such as translation, rotation, or scaling.

[0202] Color parameters include the RGB values of pixel points, etc. By adjusting the color parameters of pixel points, color changes in the sub-display area can be achieved.

[0203] In this embodiment, two time-related variables are set for each rendering parameter: speed and parameter accumulation.

[0204] The speed represents the rate at which the parameter value changes over time. The magnitude of the speed determines how fast the parameter value changes, and the direction of the speed determines the direction of the parameter value change (such as an increase or decrease in the parameter value). For example, at the start of an animation, the speed may gradually increase from zero to achieve an acceleration effect; at the climax of the animation, the speed may reach its maximum value; subsequently, the speed may gradually decrease until the animation ends. In addition, the speed variable may also be dynamically adjusted according to user interactions (such as swiping, clicking, etc.).

[0205] The parameter accumulation is a value that accumulates over time and represents the current value of the parameter. In each frame, the product of the speed and the time difference is calculated and added to the parameter accumulation to update the value of the parameter.

[0206] As described above, the texture coordinates of the pixel points can be determined based on the scaling factor u_scale and the translation factor u_translate. The color value of the pixel points can be determined based on the color center point u_colorCenter.

[0207] Here, two sets of parameter values can be set for the scaling factor u_scale to achieve periodic changes in the animation. When the parameter accumulation of these parameters reaches the boundary of one set of parameters, the direction of the speed is changed to make it change to the other set of parameters.

[0208] Furthermore, the change patterns of the rendering parameters of the pixel points in multiple sub-display areas in this embodiment following the audio playback can change at least along the first direction and / or the second direction of the terminal and can be divided into two types: periodic change, that is, changing periodically over time, and transition change, such as the change triggered by switching from the lock screen to the desktop or from the desktop to the lock screen.

[0209] When in the periodic change pattern, when the user has no operation, the change speeds of all rendering parameters are set to the minimum speed to ensure the smoothness and stability of the rendering effect, and the minimum speed does not change over time.

[0210] When in the transition change pattern, during the process from the lock screen to the desktop, the change speeds of all rendering parameters can follow a pattern of gradually changing from the minimum value to the maximum value and then gradually decreasing to the minimum value, thus creating a transitional visual experience.

[0211] The velocity direction of vertical translation can be to translate upward first and then downward. In this way, a visual feeling of bouncing or rebounding is created. During the process from the desktop to the lock screen, the velocity change of all rendering parameters can follow the decreasing rule of gradually changing from the maximum value to the minimum value. At the same time, the velocity direction of vertical translation can always be downward. In addition, when the user slides the desktop, the velocity direction of horizontal translation can be adjusted only according to the sliding direction. For example, when sliding horizontally to the left on the desktop, the velocity direction of horizontal translation is adjusted to the left; when sliding horizontally to the right on the desktop, the velocity direction of horizontal translation is adjusted to the right.

[0212] In some embodiments, it further includes: Determine the abscissa of the texture coordinates of the pixel points on the display interface of the terminal at the curve function values corresponding to the multiple sub-display areas; According to the ordinate of the texture coordinates of the pixel points on the display interface of the terminal and the curve function values corresponding to the multiple sub-display areas, determine the sub-display area where the pixel points on the display interface of the terminal are located.

[0213] In this embodiment, first, functions for each sub-display area need to be defined. These functions can be linear, quadratic, cubic, or other functions, specifically depending on the shape of the sub-display area. Then, for each pixel point on the display interface, obtain its texture coordinates; calculate the function values of the abscissa of the texture coordinates of the pixel point in the functions of each sub-display area according to the abscissa of the texture coordinates of the pixel point. Finally, compare the ordinate of the texture coordinates of the pixel point with the function values of each sub-display area to determine the sub-display area where the pixel point is located.

[0214] Here, taking the second Bezier curve after curve height adjustment with the sub-display area being the Bezier curve drawn on the display interface as an example for explanation.

[0215] It should be noted that in this embodiment, multiple second Bezier curves are drawn on the screen, and there is stacking between the second Bezier curves. Refer to Figure 12 As shown, four second Bezier curves numbered a0 to a3 are drawn on the screen from top to bottom in sequence, and the four second Bezier curves are a translation period and translate infinitely upward or downward along the vertical direction of the screen.

[0216] Generally, the GPU renders images in units of pixel points. When there is stacking between multiple second Bezier curves drawn on the screen, the GPU cannot directly determine which second Bezier curve a pixel point belongs to, nor can it handle the occlusion relationship between the second Bezier curves. Therefore, in this embodiment, a rendering order strategy is defined to enable the GPU to determine which second Bezier curve any pixel point on the screen is on.

[0217] Specifically, determine the traversal order of the second Bézier curves according to the stacking order of the second Bézier curves. As Figure 12 shown, when 4 second Bézier curves numbered from a0 to a3 are drawn on the screen from top to bottom in sequence, and multiple second Bézier curves are stacked one by one from bottom to top on the screen, determine that the traversal order of the second Bézier curves is to traverse from the one with the larger number to the one with the smaller number one by one, that is, start traversing from the second Bézier curve numbered a3 to the second Bézier curve numbered a0 to determine which second Bézier curve the pixel point belongs to.

[0218] For ease of understanding, in this embodiment, it is explained by taking the numbers of the second Bézier curves drawn on the screen from top to bottom in sequence increasing, and multiple second Bézier curves being stacked one by one from bottom to top on the screen as an example.

[0219] First, determine the texture coordinates uv of the currently processed pixel point, the total number of second Bézier curves LINE_NUM within one translation period, the Bézier parameter u_b(i) of each second Bézier curve, and the half-width u_width(i) of each second Bézier curve.

[0220] It should be noted that the half-width of the second Bézier curve in this embodiment refers to half of the width occupied on each side of the center line of the second Bézier curve. Continuing to refer to Figure 12 , line L is the center line of the second Bézier curve numbered a0, and the distance from line L to the upper edge line L1 of this second Bézier curve is equal to the distance from line L to the lower edge line L2 of this second Bézier curve.

[0221] The half-width of the second Bézier curve determines the occupied space of the second Bézier curve on the screen. By adjusting the half-width of each curve, the overlapping degree and occlusion effect between the curves can be controlled. Generally, the value range of the half-width of the second Bézier curve can be [0.75×1 / LINE_NUM, 1 / LINE_NUM] to avoid the background being revealed due to too small a half-width; too large a half-width will cause too much overlap and occlusion between the Bézier curves, making the rendered image unaesthetic.

[0222] Next, traverse the second Bézier curves one by one from the bottom (i.e., the second Bézier curve with the largest number) to the top (the second Bézier curve with the smallest number).

[0223] For example, as shown in Figure 13 , for each Bézier curve, first use the Bézier function of this Bézier curve (i.e., ) to determine its position in the texture coordinate system (see Figure 13as shown by the dashed line in [Fig.], then extend upward and downward respectively based on the set half-width u_width(i) of the Bézier curve, to form a Bézier curve strip region of the second Bézier curve with a width of 2u_width(i).

[0224] Determine the Bézier function value y corresponding to this second Bézier curve for the abscissa uv.x in the texture coordinates uv of the given pixel point, and then calculate the distance dist0 between the ordinate uv.y in the texture coordinates uv of the given pixel point and the Bézier function value y. If the calculated distance dist0 is less than the half-width u_width[i] of the current second Bézier curve, it indicates that the current pixel point is inside this second Bézier curve, then return the number i of this second Bézier curve and the vertical distance uv.y - y + u_width[i] from this pixel point to the bottom of this second Bézier curve. Otherwise, continue to traverse upward until a second Bézier curve that meets the requirements is found.

[0225] In some embodiments, determining the sub-display area where the pixel point on the display interface of the terminal is located according to the ordinate of the texture coordinates of the pixel point on the display interface of the terminal and the curve function values corresponding to the multiple sub-display areas includes: Determine that the distance between the first ordinate of the texture coordinates of the first pixel point in the top sub-display area among the multiple sub-display areas and the curve function value corresponding to the top sub-display area is less than the half-height corresponding to the top sub-display area, where the first ordinate is obtained by subtracting the minimum value of the ordinate from the ordinate of the texture coordinates of the first pixel point; and / or Determine that the distance between the second ordinate of the texture coordinates of the second pixel point in the bottom sub-display area among the multiple sub-display areas and the curve function value corresponding to the top sub-display area is less than the half-height corresponding to the top sub-display area, where the second ordinate is obtained by adding the minimum value of the ordinate to the ordinate of the texture coordinates of the second pixel point.

[0226] Here, continue to take the second Bézier curve as an example for explanation.

[0227] It should be understood that when the second Bézier curve is translated periodically in the vertical direction so that the second Bézier curve can be translated infinitely in the vertical direction, a rendering misalignment problem may occur. Continue to refer to Figure 12 as shown, the misalignment of the Bézier curve is divided into the following two cases.

[0228] The first case: The second B-spline curve crosses the upper boundary into the previous translation period. For example, the region N in the second B-spline curve with the top number a0 in the current translation period crosses the upper boundary to the bottom in the previous translation period. The second B-spline curve that crosses the boundary in the current translation period is at the top and should be rendered last. However, after crossing the upper boundary, it is at the bottom of the previous translation period and should be rendered first.

[0229] The second case: The second B-spline curve crosses the lower boundary into the next translation period. For example, the region M in the second B-spline curve with the bottom number a3 in the current translation period crosses the lower boundary to the top in the next translation period. The second B-spline curve that crosses the boundary in the current translation period is at the bottom and should be rendered first. However, after crossing the lower boundary, it is at the top of the next translation period and should be rendered last.

[0230] Therefore, in this embodiment, in order to avoid rendering errors caused by the second B-spline curves at the top and bottom crossing into adjacent translation periods, a rendering order strategy is also defined to achieve correct rendering of the second B-spline curves during vertical periodic translation.

[0231] First, perform the upward boundary crossing detection for the top curves. Specifically, traverse at least two second B-spline curves (such as 2 curves) from the top (i.e., the B-spline curve with the smallest number). For each second B-spline curve, first use the B-spline function of this second B-spline curve (i.e., ) to determine the abscissa uv.x in the texture coordinates uv of the given pixel point in the B-spline function value y corresponding to this second B-spline curve. Then, determine whether the second B-spline function value y is less than the half-width u_width[i] of the current second B-spline curve. If so, it is considered that the top curve may cross the upper boundary. When the top curve may cross the upper boundary, subtract 1 from the ordinate uv.y in the texture coordinates uv of the given pixel point to obtain the new second ordinate v. Then, calculate the distance dist0 between the second ordinate v and the B-spline function value y. If the calculated distance dist0 is less than the half-width u_width[i] of the current second B-spline curve, it means that the current pixel point is inside this second B-spline curve, and then return the number i of this second B-spline curve and the vertical distance v - y + u_width[i] from this pixel point to the bottom of this second B-spline curve. Otherwise, continue to traverse downward until a second B-spline curve that meets the requirements is found.

[0232] Next, traverse the second B-spline curves one by one from the bottom (i.e., the second B-spline curve with the largest number) to the top (the second B-spline curve with the smallest number). The specific traversal method is the same as described above and will not be elaborated here.

[0233] Finally, perform bottom curve downward out-of-bounds detection. Specifically, traverse at least two second Bézier curves (e.g., 2 curves) upward from the bottom (i.e., the second Bézier curve with the largest number). For each second Bézier curve, first use the Bézier function of this second Bézier curve (i.e., ) to determine the abscissa uv.x in the texture coordinates uv of the given pixel point at the Bézier function value y corresponding to this second Bézier curve. Then, determine whether the Bézier function value y is greater than 1 - u_width[i]. If so, it is considered that the bottom curve may go out of bounds downward. When the bottom curve may go out of bounds downward, add 1 to the ordinate uv.y in the texture coordinates uv of the given pixel point to obtain the new second ordinate v. Then, calculate the distance dist0 between the second ordinate v and the Bézier function value y. If the calculated distance dist0 is less than the half-width u_width[i] of the current second Bézier curve, it means that the current pixel point is inside this second Bézier curve, and return the number i of this second Bézier curve and the vertical distance v - y + u_width[i] from the pixel point to the bottom of this second Bézier curve. Otherwise, continue to traverse downward until a second Bézier curve that meets the requirements is found.

[0234] The above rendering process can be implemented through a Java method. The following is a Java method for obtaining the number of the second Bézier curve where the pixel at the given uv position is located and the vertical distance from the point to the bottom of the second Bézier curve.

[0235] First, a function named getRenderSeq is defined. It accepts a parameter uv of type vec2, which represents the coordinates of the texture coordinate system, and returns a value of type vec2.

[0236] Then, a for loop is started, initializing i to 1 and decrementing i while i is greater than or equal to 0. This loop is used to traverse the two second Bézier curves at the top.

[0237] Call the bessel function, passing in uv.x (i.e., the u value of the texture coordinate) and u_b[i] (representing the Bézier parameter of the i-th curve), and calculate the y value of the second Bézier curve at the u coordinate. Check whether the calculated y value is less than the half-width u_width[i] of the i-th curve. If so, an upward out-of-bounds situation may have occurred.

[0238] Calculate a temporary variable v as uv.y - 1.0, and calculate the distance dist0 between v and y. If dist0 is less than u_width[i], it indicates that the current texture coordinate uv is within the strip region of the curve. If the current texture coordinate is within the strip region, return a vec2 that contains the index i of the curve and the calculated v - y + u_width[i], which is the vertical distance from this pixel point to the bottom of this second Bezier curve.

[0239] Continue to start a new for loop, traversing downward from LINE_NUM - 1 to 0 to traverse all curves. Calculate the y value of the i-th curve at the u coordinate, and calculate the distance dist0 between uv.y and y. If the distance dist0 is less than u_width[i], then the current texture coordinate is within the strip region of the curve. If the current texture coordinate is within the strip region of the curve, return a value that contains the curve index i and the calculated uv.y - y + u_width[i], which is the vertical distance from this pixel point to the bottom of this second Bezier curve.

[0240] Continue to start a new for loop to traverse the two second Bezier curves at the bottom. Calculate the y value of the i-th curve at the u coordinate, and check if it is greater than 1.0 - u_width[i] to determine if a downward out-of-bounds occurs. Calculate a temporary variable v as uv.y + 1.0, and calculate the distance dist0 between v and y. If the distance dist0 is less than u_width[i], then the current texture coordinate is within the strip region of the curve. If the current texture coordinate is within the strip region, return a value that contains the curve index i and the calculated v - y + u_width[i], which is the vertical distance from this pixel point to the bottom of this second Bezier curve.

[0241] In the embodiment of the present application, precise control of each pixel point on the display interface is achieved in the above manner, thereby achieving a more complex dynamic wallpaper effect.

[0242] Figure 14 Illustrates a schematic diagram of the physical structure of an electronic device, such as Figure 14As shown, the electronic device may include: a processor 1410, a communications interface 1420, a memory 1430, and a communication bus 1440. Among them, the processor 1410, the communications interface 1420, and the memory 1430 communicate with each other through the communication bus 1440. The processor 1410 may call the logical instructions in the memory 1430 to execute the display method, which includes: presenting a plurality of sub-display areas on the display interface of the terminal, where two adjacent sub-display areas at least intersect with each other in a first direction of the terminal; in response to the playback of the audio of the terminal, the color of the first sub-display area changes along a second direction of the terminal, and the color of the second sub-display area adjacent to the first sub-display area in the first direction changes along the opposite direction of the second direction, and the starting color of the change of the second sub-display area is the same as the ending color of the change of the first sub-display area; where the first direction and the second direction are perpendicular.

[0243] In addition, when the logical instructions in the above-mentioned memory 1430 are implemented in the form of a software functional unit and sold or used as an independent product, they can be stored in a computer-readable storage medium. Based on such an understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or a part of this technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in various embodiments of this application. The foregoing storage medium includes: various media such as a USB flash drive, a mobile hard disk, a read-only memory (ROM, Read-Only Memory), a random access memory (RAM, Random Access Memory), a magnetic disk, or an optical disc that can store program codes.

[0244] On the other hand, the present application also provides a computer program product, which includes a computer program. The computer program can be stored on a non-transitory computer-readable storage medium. When the computer program is executed by a processor, the computer can execute the display method provided by each of the above method embodiments. The method includes: presenting a plurality of sub-display areas on the display interface of the terminal, wherein two adjacent sub-display areas at least intersect with each other in a first direction of the terminal; in response to the playback of the audio of the terminal, the color of a first sub-display area changes along a second direction of the terminal, and the color of a second sub-display area adjacent to the first sub-display area in the first direction changes along the opposite direction of the second direction, and the starting color of the change of the second sub-display area is the same as the ending color of the change of the first sub-display area; wherein the first direction and the second direction are perpendicular.

[0245] In another aspect, the present application also provides a non-transitory computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, it is configured to execute the display method provided by each of the above method embodiments. The method includes: presenting a plurality of sub-display areas on the display interface of the terminal, wherein two adjacent sub-display areas at least intersect with each other in a first direction of the terminal; in response to the playback of the audio of the terminal, the color of a first sub-display area changes along a second direction of the terminal, and the color of a second sub-display area adjacent to the first sub-display area in the first direction changes along the opposite direction of the second direction, and the starting color of the change of the second sub-display area is the same as the ending color of the change of the first sub-display area; wherein the first direction and the second direction are perpendicular.

[0246] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed to multiple network units. Some or all of the modules can be selected according to actual needs to achieve the purpose of the solution of this embodiment. A person of ordinary skill in the art can understand and implement it without creative labor.

[0247] Through the description of the above embodiments, those skilled in the art can clearly understand that each embodiment can be implemented by means of software plus a necessary general hardware platform, and of course, it can also be implemented by hardware. Based on such an understanding, the essence of the above technical solution, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., and includes several instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in each embodiment or some parts of the embodiments.

[0248] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present application, and are not intended to limit them; although the present application has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that they can still modify the technical solutions recorded in the foregoing embodiments, or perform equivalent replacements for some of the technical features; and these modifications or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present application.

Claims

1. A display method, applied to a terminal, characterized in that, Including: Presenting a plurality of sub-display areas on the display interface of the terminal, wherein two adjacent sub-display areas at least intersect with each other in a first direction of the terminal; In response to the playback of the audio of the terminal, the color of the first sub-display area changes along a second direction of the terminal, and the color of the second sub-display area adjacent to the first sub-display area in the first direction changes along the opposite direction of the second direction, and the change start color of the second sub-display area is the same as the change end color of the first sub-display area; wherein The first direction and the second direction are perpendicular.

2. The display method according to claim 1, wherein Presenting a plurality of sub-display areas on the display interface of the terminal, including: Drawing a plurality of curves on the display interface; Based on the number of the plurality of curves and the height of the terminal in the first direction, adjusting the curve heights of the plurality of curves to obtain a plurality of sub-display areas.

3. The display method according to claim 1, wherein Further including: The color of the first sub-display area gradually changes from a first change start color to a first change end color along the second direction; And The first change end color of the first sub-display area transitions to the second change start color of the second sub-display area, and the color of the second sub-display area gradually changes from a second change start color to a second change end color along the opposite direction of the second direction.

4. The display method according to claim 1, wherein The color of each sub-display area presents a gradual change in depth along the first direction.

5. The display method according to claim 1, wherein Further including: Generating noise values of pixel points in the plurality of sub-display areas; Based on the noise values of the pixel points in the plurality of sub-display areas, performing color level elimination on the colors of the pixel points in the plurality of sub-display areas.

6. The display method according to claim 1, characterized in that Further including: In response to a click operation on the smart card on the lock screen interface of the terminal, presenting a plurality of sub-display areas on the display interface of the terminal, and at least one color of each sub-display area is determined according to the display color of the smart card.

7. The display method according to claim 1, characterized in that Further including: In response to the playback of the audio of the terminal, the plurality of sub-display areas change at least along the first direction and / or along the second direction of the terminal following the playback of the audio, and the change includes at least one of a shape change and a position change of the plurality of sub-display areas.

8. The display method according to claim 7, wherein The plurality of sub-display areas change in shape at least along the first direction and / or along the second direction of the terminal following the playback of the audio, including: The plurality of sub-display areas are vertically scaled following the playback of the audio in the first direction of the terminal, wherein the height of the vertically scaled plurality of sub-display areas is not less than the height of the terminal in the first direction; and / or The plurality of sub-display areas are horizontally scaled following the playback of the audio in the second direction of the terminal, wherein the width of the horizontally scaled plurality of sub-display areas is not less than the width of the terminal in the second direction.

9. The display method according to claim 7, wherein The plurality of sub-display areas change in position at least along the first direction and / or along the second direction of the terminal following the playback of the audio, including: The multiple sub-display areas perform vertical translation following the playback of the audio in a first direction of the terminal, wherein a sub-display area that vertically translates beyond the limit of the display interface returns to the starting position of the display interface in the first direction and then continues to perform vertical translation; and / or The multiple sub-display areas perform horizontal translation following the playback of the audio in a second direction of the terminal, wherein a sub-display area that horizontally translates beyond the limit of the display interface returns to the starting position of the display interface in the second direction and then continues to perform horizontal translation.

10. The display method according to claim 1, wherein Further comprising: Determining the abscissa of the texture coordinates of a pixel point on the display interface of the terminal at a curve function value corresponding to the multiple sub-display areas; Determining the sub-display area where the pixel point on the display interface of the terminal is located according to the ordinate of the texture coordinates of the pixel point on the display interface of the terminal and the curve function value corresponding to the multiple sub-display areas.

11. The display method according to claim 10, wherein Determining the sub-display area where the pixel point on the display interface of the terminal is located according to the ordinate of the texture coordinates of the pixel point on the display interface of the terminal and the curve function value corresponding to the multiple sub-display areas, comprising: Determining that the distance between the first ordinate of the texture coordinates of a first pixel point in the top sub-display area among the multiple sub-display areas and the curve function value corresponding to the top sub-display area is less than half of the height corresponding to the top sub-display area, where the first ordinate is obtained by subtracting the minimum value of the ordinate from the ordinate of the texture coordinates of the first pixel point; and / or Determining that the distance between the second ordinate of the texture coordinates of a second pixel point in the bottom sub-display area among the multiple sub-display areas and the curve function value corresponding to the top sub-display area is less than half of the height corresponding to the top sub-display area, where the second ordinate is obtained by adding the minimum value of the ordinate to the ordinate of the texture coordinates of the second pixel point.

12. An electronic device, characterized in that, Comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, where the processor implements the method according to any one of claims 1 to 11 when executing the computer program.

13. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that, The computer program, when executed by the processor, implements the method according to any one of claims 1 to 11.

Images