Display method, electronic equipment and storage medium

Abstract

The invention discloses a display method, electronic equipment and a 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 each sub-display area has at least one color; in response to audio playing of the terminal, the plurality of sub-display areas change at least along a first direction of the terminal and / or along a second direction of the terminal along with audio playing, the first direction is perpendicular to the second direction, and the second direction is perpendicular to the first direction. The change comprises at least one of shape change, position change and / or color change of the plurality of sub display areas. According to the display method provided by the invention, deep interaction between the dynamic wallpaper and the audio is realized.

Description

Technical Field

[0001] The present application relates to the field of terminal technology, and in particular to a display method, electronic device, and storage medium. Background Art

[0002] Currently, some devices, such as mobile phones, use dynamic wallpapers with certain animation effects to enhance visual quality. However, these dynamic wallpapers often incorporate fixed looping animations or visual effects, making them relatively simple and unable to meet the growing demand for personalization and interactivity. Summary of the Invention

[0003] In a first aspect, the present application provides a display method, comprising: Presenting a plurality of sub-display areas on a display interface of the terminal, each sub-display area having at least one color; In response to the playback of audio of the terminal, the multiple sub-display areas change at least along the first direction of the terminal and / or along the second direction of the terminal following the playback of the audio, wherein the first direction and the second direction are perpendicular, and the change includes at least one of a shape change, a position change and / or a color change of the multiple sub-display areas.

[0004] In some embodiments, multiple sub-display areas are presented 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, the plurality of curves are adjusted in height to obtain a plurality of sub-display areas; wherein Two adjacent sub-display areas at least intersect with each other in the first direction.

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

[0006] In some embodiments, further comprising: determining a minimum scaling factor according to the smaller of the first scaling factor and the reciprocal of the second scaling factor; determining, based on the minimum scaling factor, vertical scaling components of the texture coordinates of the plurality of sub-display areas along a first direction of the terminal; determining a horizontal scaling component of the texture coordinates of the plurality of sub-display areas along a second direction of the terminal based on the minimum scaling factor and the second scaling factor; The first zoom coefficient is an overall zoom coefficient that controls the synchronous zooming of the multiple sub-display areas along the first direction and the second direction of the terminal, and the second zoom coefficient is a horizontal zoom coefficient that controls the zooming of the multiple sub-display areas along the second direction of the terminal; the first zoom coefficient changes periodically with the playback of the audio.

[0007] In some embodiments, the multiple sub-display areas change positions at least along a first direction of the terminal and / or along a second direction of the terminal following the playing of the audio, including: The multiple sub-display areas are vertically translated in the first direction of the terminal following the playback of the audio, wherein the sub-display area that is vertically translated beyond the limit of the display interface returns to the starting position of the display interface in the first direction and then continues to be vertically translated; and / or The multiple sub-display areas are horizontally translated in the second direction of the terminal following the playback of the audio, wherein the sub-display area that is horizontally translated beyond the display interface limit returns to the starting position of the display interface in the second direction and then continues to be horizontally translated.

[0008] In some embodiments, further comprising: performing horizontal translation on the texture coordinates of the plurality of sub-display areas based on a horizontal translation component and a first modulo length, wherein the first modulo length is the modulo length of the horizontal translation component; The texture coordinates of the plurality of sub-display areas are vertically translated based on the vertical translation component and a second modulo length, where the second modulo length is the modulo length of the vertical translation component.

[0009] In some embodiments, a change trend of the horizontal translation component follows a sliding direction of a sliding gesture received on the display interface.

[0010] In some embodiments, the changing trend of the vertical translation component changes with the state switching of the display state of the display interface, and the state switching of the display state of the display interface includes switching from the lock screen display state to the desktop display state, or switching from the desktop display state to the lock screen display state.

[0011] In some embodiments, the multiple sub-display areas change color 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 color of the first sub-display area changes along the second direction of the terminal as the audio is played; and / or 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 of the terminal as the audio is played, 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.

[0012] In some embodiments, the multiple sub-display areas change at least along a first direction of the terminal and / or along a second direction of the terminal following the playing of the audio, including: Rendering parameters of the pixels of the plurality of sub-display areas change at least along a first direction of the terminal and / or along a second direction of the terminal as the audio is played, and the rendering parameters include at least one of texture coordinates and colors.

[0013] In some embodiments, further comprising: Determining curve function values corresponding to the abscissas of texture coordinates of pixel points on the display interface of the terminal in the plurality of sub-display areas; The sub-display area where the pixel point on the display interface of the terminal is located is determined according to the ordinate of the texture coordinate of the pixel point on the display interface of the terminal and the curve function values corresponding to the multiple sub-display areas.

[0014] 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 coordinate of the pixel point on the display interface of the terminal and the curve function values corresponding to the multiple sub-display areas includes: determining that a distance between a first ordinate of a texture coordinate of a first pixel point in a top sub-display area among the multiple sub-display areas and a curve function value corresponding to the top sub-display area is less than a half height corresponding to the top sub-display area, the first ordinate being obtained by subtracting a minimum ordinate value from the ordinate of the texture coordinate of the first pixel point; and / or Determine that the distance between the second vertical coordinate of the texture coordinate 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, and the second vertical coordinate is obtained by adding the vertical coordinate of the texture coordinate of the second pixel point to the minimum value of the vertical coordinate.

[0015] In some embodiments, further comprising: In response to a click operation on the smart card on the lock screen interface of the terminal, multiple sub-display areas are presented 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.

[0016] In a second aspect, the present application provides an electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements any of the above-described methods when executing the program.

[0017] In a third aspect, the present application provides a non-transitory computer-readable storage medium having a computer program stored thereon, which implements any of the methods described above when executed by a processor.

[0018] In a fourth aspect, the present application provides a computer program product, comprising a computer program, which implements any of the methods described above when executed by a processor. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] In order to more clearly illustrate the technical solutions in the present application or the prior art, a brief introduction will be given below to the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0020] Figure 1 A schematic diagram of a dynamic wallpaper provided in one embodiment of the present application; Figure 2 A schematic diagram of the structure of a terminal provided in one embodiment of the present application; Figure 3 A schematic diagram of a flow chart of a display method provided in one embodiment of the present application; Figure 4 A schematic diagram of a dynamic music wallpaper provided in one embodiment of the present application; Figure 5 One of the Bezier curve schematic diagrams provided for one embodiment of the present application; Figure 6 A second schematic diagram of a Bezier curve provided for one embodiment of the present application; Figure 7 A third schematic diagram of a Bezier curve provided for one embodiment of the present application; Figure 8A A schematic diagram of a scenario in which a sub-display area is horizontally shifted and misaligned according to an embodiment of the present application; Figure 8B A schematic diagram of a scenario in which a sub-display area is horizontally translated and flipped according to an embodiment of the present application; Figure 9 A schematic diagram of a scene in which colors are arranged in an S-shaped curve according to an embodiment of the present application; Figure 10A schematic diagram of the color rendering effect provided by one embodiment of the present application; Figure 11 A schematic diagram of the color rendering principle provided for one embodiment of the present application; Figure 12 A fourth schematic diagram of a Bezier curve provided for one embodiment of the present application; Figure 13 A fifth Bezier curve diagram provided for one embodiment of the present application; Figure 14 A schematic diagram of the structure of an electronic device provided in one embodiment of the present application. DETAILED DESCRIPTION

[0021] To make the objectives, technical solutions, and advantages of this application more clear, the technical solutions of this application will be clearly and completely described below in conjunction with the accompanying drawings. Obviously, the embodiments described are only part of the embodiments of this application, not all of them. Based on the embodiments of this application, all other embodiments obtained by ordinary technicians in this field without making any creative efforts are within the scope of protection of this application.

[0022] The terms "first," "second," and the like in the specification and claims of this application are used to distinguish similar objects, and are not used to describe a specific order or precedence. It should be understood that the terms used in this manner are interchangeable where appropriate, so that the embodiments of this application can be implemented in an order other than that illustrated or described herein, and that the objects distinguished by "first" and "second" are generally of the same type, and do not limit the number of objects. For example, the first object can be one or more. In addition, the term "and / or" in the specification and claims refers to at least one of the connected objects, and the character " / " generally indicates that the objects connected are in an "or" relationship.

[0023] In an era where smartphones and other smart devices are deeply integrated into daily life, wallpapers, as a subtle medium for personal expression and emotional communication, are attracting increasing attention from users. To enhance visual quality, current technologies allow for dynamic wallpapers with certain animation effects. However, these dynamic wallpapers often incorporate fixed looping animations or visual effects, resulting in a relatively simple design that fails to meet the growing demand for personalization and interactivity.

[0024] To this end, the present application provides a display method by dividing the terminal display interface into multiple sub-display areas, and driving these sub-display areas to change in the vertical direction in real time according to audio playback, such as shape, position and color changes, thereby achieving deep interaction between dynamic wallpaper and audio, bringing users a more personalized and interactive visual experience.

[0025] For example, see Figure 1 (A) to Figure 1 As shown in (C), it shows four sub-display areas a0, a1, a2 and a3, each of which is assigned a specific color. As these sub-display areas gradually move downward in the vertical direction, the wallpaper appears to be Figure 1 (A) to Figure 1 (C) Different visual effects and dynamic beauty.

[0026] The display method provided in the embodiments of the present 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, and personal digital assistants (PDAs). It can also be applied to databases, servers, and service response systems based on terminal artificial intelligence. The embodiments of the present application do not impose any restrictions on the specific type of terminal.

[0027] For example, the terminal can be a station (STAION, ST) in a WLAN, 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 device 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 and a next-generation communication system, 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).

[0028] As an example and not a limitation, when the terminal is a wearable device, the wearable device can also be a general term for wearable devices that are intelligently designed and developed by applying wearable technology to daily wear, 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 equipped with far-field communication modules and / or near-field communication modules.

[0029] In some embodiments, the terminal may be a Figure 2 The hardware structure of the mobile phone 100 is shown as follows: Figure 2 As 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 will understand that Figure 2 The structure of the mobile phone 100 shown in the figure does not constitute a limitation on the electronic device. The electronic device may include more or fewer components than shown in the figure, or combine certain components, or arrange the components differently.

[0030] The following combination Figure 2 A detailed introduction to the various components of a mobile phone: The RF circuit 110 can be used to receive and send signals during information transmission or calls. In particular, after receiving the downlink information from the base station, it is sent to the processor 180 for processing; in addition, the designed uplink data is sent to the base station. Generally, the RF circuit includes but is not limited to an antenna, at least one amplifier, a transceiver, a coupler, a low noise amplifier (LNA), a duplexer, etc. In addition, the RF circuit 110 can also communicate with the network and other devices through wireless communication. The above-mentioned 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-orbit satellite connection and / or IR technology, etc. The GNSS may include a global positioning system (GPS), a global navigation satellite system (GLONASS), a Beidou navigation satellite system (BDS), a quasi-zenith satellite system (QZSS) and / or a satellite-based augmentation system (SBAS), etc.

[0031] 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, wherein the program storage area may store an operating system, an application required for at least one function (such as a sound playback function, an image playback function, etc.), etc.; the data storage area may store data created according to the use of the mobile phone (such as pictures, audio data, phone books, etc.), etc. In addition, the memory 120 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other volatile solid-state storage device. Specifically, the memory 120 may store pictures taken by an electronic device or downloaded via a wireless network.

[0032] The input unit 130 can be used to receive input digital or character information, and to generate key signal input related to the user settings and function control 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 user touch operations on or near it (such as operations performed by the user using a finger, stylus, or any other suitable object or accessory on or near the touch panel 131) and drive the corresponding connection device according to a pre-set program. Optionally, the touch panel 131 may include two parts: a touch detection device and a touch controller. Among them, the touch detection device detects the user's touch direction and detects the signal caused by the touch operation, and transmits the signal to the touch controller; the touch controller receives the touch information from the touch detection device and converts it into touch point coordinates, which are then sent to the processor 180. It can also receive commands sent by the processor 180 and execute them. In addition, the touch panel 131 can be implemented using various 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, switch keys, etc.), a trackball, a mouse, and a joystick.

[0033] The display unit 140 can be used to display information input by the user or information provided to the user and various menus of the mobile phone. The display unit 140 may include a display panel 141. Optionally, the display panel 141 may 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 may cover the display panel 141. When the touch panel 131 detects a touch operation on or near it, it is transmitted to the processor 180 to determine the type of touch event. The processor 180 then provides a corresponding visual output on the display panel 141 according to the type of touch event. Although in Figure 2 In the embodiment, the touch panel 131 and the display panel 141 are two independent components to realize the input and output functions of the mobile phone. However, 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.

[0034] The mobile phone 100 may also 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, wherein the ambient light sensor may adjust the brightness of the display panel 141 according to the brightness of the ambient light, and the proximity sensor may turn off the display panel 141 and / or the backlight when the mobile phone is moved to the ear. As a type 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 described here.

[0035] Audio circuit 160, speaker 161, and microphone 162 provide an audio interface between the user and the phone. Audio circuit 160 converts received audio data into electrical signals and transmits them to speaker 161, which then converts them into sound signals for output. Microphone 162, on the other hand, converts collected sound signals into electrical signals, which are then received by audio circuit 160 and converted into audio data. The audio data is then processed by processor 180 and transmitted via RF circuit 110 to, for example, another electronic device, or to memory 120 for further processing.

[0036] Communication technologies such as Wi-Fi, Bluetooth, and Near Field Communication (NFC) are 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-mentioned WIFI module 170 may include a Wi-Fi chip, a Bluetooth chip, and an NFC chip. The Wi-Fi chip can realize the function of Wi-Fi Direct connection between the mobile phone 100 and other electronic devices, and can also enable the mobile phone 100 to operate in AP mode (Access Point mode) that can provide wireless access services and allow other wireless devices to access, or in STA mode (Station mode) that can connect to an AP but does not accept wireless devices to access, thereby establishing point-to-point communication between the mobile phone 100 and other Wi-Fi devices.

[0037] The processor 180 is the control center of the mobile phone. It connects all parts of the mobile phone using various interfaces and lines. By running or executing software programs and / or modules stored in the memory 120 and calling data stored in the memory 120, it performs various functions of the mobile phone and processes data, thereby monitoring the entire mobile phone. 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). The different processing units may be independent devices or integrated into one or more processors.

[0038] The mobile phone 100 also includes a power supply 190 (such as a battery) for supplying power to various components. Preferably, the power supply can be logically connected to the processor 180 through a power management system, thereby managing functions such as charging, discharging, and power consumption through the power management system.

[0039] The mobile phone 100 may also include a camera. Optionally, the camera may be located in the front or rear of the mobile phone, which is not limited in this embodiment of the present application. The mobile phone may capture a scene image of the current scene through the camera and determine scene information and scene type by analyzing the scene image.

[0040] Figure 3 This is a flow chart of the display method provided in the embodiment of the present application. Figure 3 As shown, a display method is provided, including the following steps, and the process steps of the method are only a possible implementation of the present application.

[0041] Step 310: Present multiple sub-display areas on the display interface of the terminal, each sub-display area having at least one color.

[0042] Here, 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 needs. For example, it can be a uniformly distributed geometric layout or an irregular geometric layout.

[0043] Each sub-display area is assigned at least one color. Here, the color can be obtained from the cover of the terminal's smart card, pictures in an album, or other suitable applications that can provide bitmaps. These bitmaps usually display multiple colors.

[0044] In this embodiment, the color selection can be fixed or dynamically generated. For example, each sub-display area can be a single solid color or a gradient color. These colors can be randomly assigned or set according to a preset color scheme.

[0045] In some examples, in response to a click operation on a smart card on the lock screen interface of the terminal, multiple sub-display areas are presented on the display interface of the terminal, and at least one color of each sub-display area is determined based on the display color of the smart card.

[0046] Here, the colors are extracted from the smart card on the terminal’s lock screen, e.g. Figure 4 Music media cards displayed.

[0047] 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 a terminal, such as a mobile phone, is in lock screen mode, if a music application is playing music in the background, a music card will be displayed on the lock screen interface. This card usually contains elements such as a play / pause button, 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 controls without unlocking the phone. In other examples, when the terminal is unlocked, the music media card can also be displayed on the main interface of the terminal. For example, one area of the main interface is configured to display the music media card, and other areas are configured to display the top status bar, application icons, and / or bottom shortcut icons, so that basic music playback control can be achieved through the music media card even when the music application remains running in the background.

[0048] like Figure 4 As shown, when the user starts the music player of the terminal, the music player will load and parse the local or online music library, prepare the playlist and audio data. At the same time, the terminal creates a music media card, which contains key information about the currently playing music. The terminal will register and display the music media card at the location specified by the system. This music media card is the entrance to 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 in the music player interface to lock the screen, the terminal will display the created music media card in the lock screen interface.

[0049] In one example, when a user clicks on a non-functional area of a music media card, the terminal will activate the music wallpaper function and begin acquiring music covers to subsequently generate dynamic wallpaper effects based on the music covers. In another example, when a command to click on a non-functional area of a music media card is received on the terminal's main interface, the terminal can enlarge the music media card and display it in the center of the main interface, covering the application icon.

[0050] 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 functional buttons, such as play, pause, previous song, next song, etc.

[0051] In one example, a color with higher saturation, brightness, and other attributes in the music cover may be selected, or a color with a larger display area in the music cover may be selected, or a color that best represents the theme or emotional tone of the music may be selected.

[0052] In another example, a color extraction algorithm (such as the Palette.Swatch color extraction algorithm) can be used to automatically identify and extract multiple colors from music cover art. After extracting multiple colors, a color can be selected based on its color area, brightness, saturation, or other factors.

[0053] Furthermore, to avoid visually similar colors, 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 composed of three dimensions: L represents lightness, and a and b represent color opposition dimensions. Together, these three dimensions form a three-dimensional color space for describing and quantifying color. The Lab space is based on human visual perception and is more suitable for quantifying color differences.

[0054] In Lab space, the Euclidean distance between multiple candidate colors is calculated. If the Euclidean distance is less than a set threshold (such as 20 or other appropriate value), the candidate colors are considered too close and need to be eliminated. If the number of colors obtained is less than the required number (such as 3), you can randomly select colors from a pre-made color library to supplement them. However, when selecting, you must ensure that the Euclidean distance between the newly selected colors and the already selected colors in Lab space remains greater than or equal to the set threshold to ensure color diversity and visual distinction.

[0055] Furthermore, after screening out a plurality of colors, the colors may be converted into corresponding dark and light colors for use in subsequent wallpaper rendering.

[0056] It should be understood that color in the HSL color space consists of three components: hue (H), saturation (S), and lightness (L). Therefore, in this embodiment, a color can be adjusted to a gradient color by adjusting its lightness and saturation values in the HSL color space.

[0057] 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 adjusting colors more intuitive and flexible. For each color's HSL value, the corresponding dark and light versions are generated by adjusting the saturation and brightness. For example, lowering the brightness value and increasing the saturation value can obtain its corresponding dark color, while increasing the brightness value and lowering the saturation value can obtain its corresponding light color. After that, the adjusted dark and light HSL values are converted back to one-dimensional int color values, and then the one-dimensional int color values are converted into three-dimensional and normalized RGB values for subsequent wallpaper rendering.

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

[0059] First, a static private method called 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.

[0060] Next, create an integer array darkLight of length 2 to store the dark and light color values. Create a floating-point array hsl of length 3 to store the HSL (hue, saturation, and lightness) values of the colors. Call the colorToHSL method in the ColorUtils class to convert the input color value color to an HSL value and store the result in the hsl array.

[0061] Furthermore, a new HSL array hsl1 is created. This new HSL array hsl1 is an adjustment to the original HSL array hsl to generate a darker version. For example, in the new HSL array hsl1, the original hue remains unchanged, the original saturation is increased by 0.1 using the saturate function (the saturation function is used to ensure that the adjusted saturation does not exceed 1), and the original brightness is reduced by 0.1 using the saturate function (the brightness is used to ensure that the adjusted brightness does not fall below 0).

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

[0063] Similarly, create another new HSL array hsl2. The new HSL array hsl2 is an adjustment to the original HSL array hsl to generate a lighter version. For example, in the new HSL array hsl2, the original hue is kept unchanged, the original saturation is reduced by 0.1, and the original brightness is increased by 0.1.

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

[0065] Finally, an array containing the dark and light color values is returned.

[0066] Step 320: In response to the playback of audio of the terminal, the multiple sub-display areas change at least along the first direction of the terminal and / or along the second direction of the terminal following the playback of the audio, wherein the first direction is perpendicular to the second direction, and the change includes at least one of a shape change, a position change and / or a color change of the multiple sub-display areas.

[0067] Here, the first direction refers to the height direction of the terminal, which can be the negative direction of the y-axis of the terminal or the positive direction of the y-axis; the second direction refers to the width direction of the terminal, which can be the negative direction of the x-axis of the terminal or the positive direction of the x-axis.

[0068] In this embodiment, the changes in the multiple sub-display areas on the display interface are synchronized with audio playback. Certain audio characteristics (such as volume, tempo, and frequency) can also trigger dynamic changes in the multiple sub-display areas on the display interface. For example, during audio playback, the sub-display areas will dynamically change based on the audio's tempo. The faster the audio's tempo, the faster the sub-display areas will change along the first direction of the terminal and / or along the second direction of the terminal.

[0069] In actual applications, the sub-display area can change in shape, for example, from large to small; the sub-display area can also change in position on the screen, for example, from the left side of the screen to the right side, or from the top to the bottom; the sub-display area can also change in color, for example, from one color to another, or from a dark color to a light color. During audio playback, the sub-display area will undergo at least one of the above changes.

[0070] In an embodiment of the present application, by dividing the terminal display interface into multiple sub-display areas and driving these sub-areas to change in the vertical direction in real time according to audio playback, such as changes in shape, position and color, a deep interaction between dynamic wallpaper and audio is achieved, bringing users a more personalized and interactive visual experience.

[0071] It should be noted that each implementation method of the present application can be freely combined, the order can be changed, or it can be executed separately, and does not need to rely on or depend on a fixed execution order.

[0072] In some embodiments, multiple sub-display areas are presented 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, the plurality of curves are adjusted in height to obtain a plurality of sub-display areas; wherein Two adjacent sub-display areas at least intersect with each other in the first direction.

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

[0074] Next, based on the number of curves drawn and the height of the display interface in the first direction (i.e., the vertical direction), the curves are adjusted to ensure that the heights of the adjusted curves adapt to the height of the display interface and can be used to divide the display interface into multiple sub-display areas. Here, there are no noticeable gaps between the sub-display areas, but rather they are connected or overlapped to create a continuous visual effect.

[0075] In one example, multiple Bezier curves are drawn. Specifically, the improved Bezier function formula can be used , to calculate the texture coordinate uv on the Bezier curve during the system graphics rendering process.

[0076] Here, x corresponds to the u coordinate in the texture coordinate system, representing the width of the terminal window. 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 of the terminal window, where (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 using the above Bezier function formula. By iterating the x values, a series of (x, y) points can be obtained. Connecting these points forms a Bezier curve.

[0077] Here, b0, b1, b2, and b3 are Bezier parameters u_b, which together determine the shape and position of the Bezier curve.

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

[0079] like Figure 5 As shown in the figure, it depicts a Bezier curve generated under a specific Bezier parameter (b0, b1, b2, b3) configuration. When the x value is 0, the y value is equal to b0, and when the x value 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.

[0080] 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 may start at a0 and increment to aLINE_NUM-1. For each Bezier curve, a set of Bezier parameters u_b (i.e., b0, b1, b2, and b3 mentioned above) are defined. These Bezier parameters determine the shape and position of the Bezier curve.

[0081] Furthermore, a width distribution strategy can be defined based on the terminal window height and the number of curves to ensure that all Bezier curves are visually distributed as evenly as possible on the screen. For example, the average width of each Bezier curve can be calculated based on the terminal window height and then adjusted based on the specific shape and distribution of the Bezier curves. It should be noted that the Bezier curve after width adjustment is referred to as the second Bezier curve below.

[0082] for example Figure 6 As shown in (A) in the figure, four Bezier curves numbered from a0 to a3 are drawn on screen 600, and the initial state of all Bezier curves is a horizontal straight line (i.e., b0=b1=b2=b3). The initial height of the starting point of each Bezier curve is set according to the number (i.e., the b0 value). After that, each Bezier curve is adjusted according to its width distribution, and each Bezier curve extends upward and downward around its own center line, thereby obtaining multiple second Bezier curves (i.e., sub-display areas). In this process, each second Bezier curve at least contacts with the adjacent second Bezier curve, or partially overlaps in some areas, thereby forming a second Bezier curve. Figure 6 In (B), the second Bezier curve of the upper layer covers the visual effect of the second Bezier curve of the lower layer.

[0083] In addition, the Bezier parameter u_b of each second Bezier curve can be dynamically adjusted according to needs. Figure 7 As shown, when b0=b1≠b2≠b3, the second Bezier curve can be transformed from Figure 7 (A) in is transformed to Figure 7 In (B), when b0≠b1≠b2=b3, the second Bezier curve can be changed from Figure 7 (A) in is transformed to Figure 7 In (C), when b0≠b1≠b2≠b3, the second Bezier curve can be changed from Figure 7 (A) in is transformed to Figure 7 (D) in the.

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

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

[0086] Here, the plurality of sub-display areas may undergo at least one of vertical scaling and horizontal scaling changes in shape following audio playback.

[0087] In actual applications, the vertical scaling of the multiple sub-display areas can be the same or different. However, it should be understood that the multiple sub-display areas always cover the entire vertical range of the screen during the scaling process, and there will be no blank or broken display interface.

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

[0089] In some embodiments, further comprising: determining a minimum scaling factor according to the smaller of the first scaling factor and the reciprocal of the second scaling factor; determining, based on the minimum scaling factor, vertical scaling components of the texture coordinates of the plurality of sub-display areas along a first direction of the terminal; determining a horizontal scaling component of the texture coordinates of the plurality of sub-display areas along a second direction of the terminal based on the minimum scaling factor and the second scaling factor; The first zoom coefficient is an overall zoom coefficient that controls the synchronous zooming of the multiple sub-display areas along the first direction and the second direction of the terminal, and the second zoom coefficient is a horizontal zoom coefficient that controls the zooming of the multiple sub-display areas along the second direction of the terminal; the first zoom coefficient changes periodically with the playback of the audio.

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

[0091] Among them, when the overall scaling factor u_scale and the horizontal scaling factor u_scaleX are less than 1, it means that the sampling selection area is reduced, and the effect displayed on the screen is magnified (for example, the visual effect is that certain areas of the sub-display area are magnified and displayed on the screen). When it is greater than 1, it means that the sampling selection area is enlarged, and the effect displayed on the screen is reduced (that is, the visual effect is that the sub-display area is reduced and displayed on the screen). Generally, in order to avoid excessive magnification of the sampling selection area (for example, the texture coordinates after magnification exceed the range of the texture image) causing a partial black screen on the screen, the overall scaling factor u_scale and the horizontal scaling factor u_scaleX are usually less than or equal to 1.

[0092] In one example, the overall scaling factor u_scale is configured as a value that changes periodically over time, for example, with a minimum value of 0.95 and a maximum value of 1, and the horizontal scaling factor u_scaleX is configured as a fixed value, for example, 1. By selecting the smaller coefficient between u_scale and 1.0 / s_scaleX as the minimum scaling factor minScale, it is possible to ensure that a partial black screen does not appear in the horizontal and vertical directions.

[0093] 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 by multiplying 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.

[0094] In an embodiment of the present application, a variety of different visual effects can be generated by combining vertical scaling and horizontal scaling, and the scaled sub-display area always covers the entire height and width of the screen, avoiding visual breaks or discontinuities and ensuring the overall aesthetics of the dynamic wallpaper.

[0095] In some embodiments, the multiple sub-display areas change positions at least along a first direction of the terminal and / or along a second direction of the terminal following the playing of the audio, including: The multiple sub-display areas are vertically translated in the first direction of the terminal following the playback of the audio, wherein the sub-display area that is vertically translated beyond the limit of the display interface returns to the starting position of the display interface in the first direction and then continues to be vertically translated; and / or The multiple sub-display areas are horizontally translated in the second direction of the terminal following the playback of the audio, wherein the sub-display area that is horizontally translated beyond the display interface limit returns to the starting position of the display interface in the second direction and then continues to be horizontally translated.

[0096] Here, the plurality of sub-display areas may undergo at least one of vertical translation and horizontal translation changes as the audio is played.

[0097] In actual applications, the vertical translation degrees of multiple sub-display areas can be the same or different. However, it should be understood that if a sub-display area exceeds the limits of the display interface during vertical translation (for example, moving beyond the top or bottom of the screen), it will return to the display interface's starting vertical position and continue to translate, ensuring that the sub-display area always dynamically moves within the screen range and does not completely disappear.

[0098] Similarly, the horizontal translation of multiple sub-display areas can be the same or different. However, it should be understood that if a sub-display area exceeds the limits of the display interface during horizontal translation (for example, moving outside the left or right side of the screen), it will return to the display interface's starting horizontal position and continue to translate, ensuring that the sub-display area always dynamically moves within the screen range and does not disappear completely.

[0099] In some embodiments, further comprising: performing horizontal translation on the texture coordinates of the plurality of sub-display areas based on a horizontal translation component and a first modulo length, wherein the first modulo length is the modulo length of the horizontal translation component; The texture coordinates of the plurality of sub-display areas are vertically translated based on the vertical translation component and a second modulo length, where the second modulo length is the modulo length of the vertical translation component.

[0100] In one embodiment, the periodic mapping of texture coordinates may be used to achieve an infinite translation effect of the sub-display area in the vertical direction.

[0101] It should be understood that the v value of a texture coordinate is periodic and its value range is [0,1]. When the v value of a texture coordinate 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.

[0102] In one embodiment, in order to achieve a translation effect in the vertical direction, each sub-display area to be rendered needs to be “tiled” to achieve wireless translation of the sub-display area in the vertical direction.

[0103] In one example, the second modulo length is 1. In other words, the "tiling" is achieved by performing a modulo operation on the vertical translation amount by 1, because the vertical "tiling" period is equal to the maximum value of the vertical texture coordinate (or texture height) being 1.

[0104] For example, u_translate.y represents the vertical translation component of the sub-display area. Assuming its value is 2.5, it means that the sub-display area is expected to be moved 2.5 units downward from its original position. This application exemplarily uses the change of texture coordinates to realize the translation of the sub-display area on the terminal window. Since the maximum value of the texture coordinates in height and width is 1, in order to achieve seamless repeat of the texture, the modulo operation is used to ensure that any translation amount that exceeds the texture period will be "wrapped" back into the texture period. Since the result of the modulo operation of 2.5 to 1 is 0.5, this means that the texture is repeated twice in the vertical direction and then repeated again from the position of 0.5. In fact, only the part that exceeds two complete periods, that is, 0.5 units, needs to be considered. This will be used together with the original texture position to determine the specific position of the texture repetition. In actual texture mapping, the result of adding 0.5 to the original texture position will be used as the vertical component of the texture coordinate to ensure that the texture can be correctly repeated in the vertical direction.

[0105] That is to say, no matter how the texture coordinates are translated in the vertical direction, the modulo operation can ensure that the texture is seamlessly repeated in the range of 0-1 in the vertical direction, and the repetition of texture coordinates can achieve the visual effect of infinite translation of the sub-display area in the vertical direction.

[0106] Similarly, in order to achieve the horizontal translation effect, each sub-display area to be rendered needs to be "tiled" to achieve infinite horizontal translation of the sub-display area. The implementation principle is basically similar to the aforementioned vertical tiling, so it will not be repeated here.

[0107] In an embodiment of the present application, a variety of different visual effects can be generated by combining vertical translation and horizontal translation, and after exceeding the display interface limit, it returns to the starting position and continues to translate, ensuring that the sub-display area always moves dynamically within the screen range, ensuring the overall aesthetics of the dynamic wallpaper.

[0108] In one embodiment, Figure 8AAs shown, in order to avoid the occurrence of curve misalignment 801 and curve misalignment 802 after the sub-display area is horizontally translated (i.e., causing a sense of visual fragmentation), it is necessary to first flip the sub-display area horizontally, for example Figure 8B As shown in FIG, two symmetrical sub-display areas are obtained, so that the sub-display areas can be infinitely translated in the horizontal direction without the occurrence of Figure 8A Misalignment shown.

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

[0110] It should be noted that the object of translation adjustment or scaling adjustment in the embodiment of the present application is the mapping relationship between texture coordinates and sub-display areas, and this mapping relationship is expressed using texture coordinates. For example, a texture coordinate can be called an original texture coordinate before adjustment, and the pixel point corresponding to the original texture coordinate falls into a certain sub-display area, so that the pixel point can be sampled from the sub-display area according to the original texture coordinate. When the original texture coordinate of the pixel point is changed, the sampling position of the pixel point on the sub-display area is actually changed. For example, the sampling is adjusted from the first sub-display area to the second sub-display area, which visually presents an upward translation of the sub-display area (assuming that x does not change). Therefore, when the wallpaper is rendered to the screen, it can display visual effects such as translation, scaling, and color changes.

[0111] For texture coordinates, multiplying the texture coordinates by a value greater than 1 displays as reduction on the screen, multiplying the texture coordinates by a value less than 1 displays as enlargement on the screen, adding a positive value to the texture coordinates displays as upward movement on the screen, and subtracting a positive value from the texture coordinates displays as downward movement on the screen.

[0112] For example, the original texture coordinates are (0.5, 0.5), and the original sampling results in the pixel in the middle of the texture image. By adding 0.3 to the y value of the texture coordinates, the texture coordinates change to (0.5, 0.8). During sampling, the corresponding pixel (0.5, 0.8), which is the pixel at the bottom of the image, will be taken. The effect displayed on the screen is that the pixel originally at the bottom of the screen moves to the middle of the screen, that is, it appears to be moving upward.

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

[0114] The translation coefficient is a vector u_translate containing a horizontal translation component u_translate.x and a vertical translation component u_translate.y, which is used to control the horizontal and vertical translation of the sub-display area. 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.

[0115] As previously explained, to ensure that translations outside the texture period are "wrapped" back into the texture period, the actual horizontal and vertical translation components, translateX and translateY, need to be calculated using a modulo operation on the horizontal and vertical translation components, u_translate.x and u_translate.y, respectively. For example, translateX = mod(u_translate.x, M) and translateY = mod(u_translate.y, N). Here, mod() is a modulo operation, M is the modulo length of the horizontal translation component, and N is the modulo length of the vertical translation component.

[0116] According to the above description, when the sub-display area is horizontally flipped, M is 2, and when the sub-display area is not horizontally flipped, M is 1. Usually, the sub-display area is not vertically flipped, so N is 1.

[0117] The change trend of the horizontal translation component changes with the sliding direction of the sliding gesture received on the display interface.

[0118] In one example, the horizontal translation component u_translate.x can change as the terminal receives a gesture instruction for a sliding gesture on the main interface. For example, when the terminal receives a gesture instruction for sliding left or right on the main interface, u_translate.x increases or decreases. For example, when the terminal receives a gesture instruction for sliding left on the main interface, u_translate.x increases as the main interface slides left, and the longer the sliding distance indicated by the gesture instruction for sliding left, the more u_translate.x increases. In other words, 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.

[0119] Alternatively, when the terminal receives a rightward swipe gesture command on the main interface, u_translate.x decreases as the main interface swipes rightward, and the longer the swipe distance indicated by the rightward swipe gesture command, the more u_translate.x decreases. In other words, the sub-display area on the wallpaper of the terminal's main interface now presents a visual effect of leftward movement.

[0120] Alternatively, a left-slide gesture indicates that u_translate.x decreases, and a right-slide gesture indicates that u_translate.x increases. At this time, the sub-display area on the wallpaper of the terminal main interface presents a moving visual effect opposite to that described above.

[0121] Among them, the change trend of the vertical translation component changes with the state switching of the display state of the display interface, and the state switching of the display state of the display interface includes switching from the lock screen display state to the desktop display state, or switching from the desktop display state to the lock screen display state.

[0122] In one example, the vertical translation component u_translate.y can change as the terminal switches between the lock screen interface and the main interface. For example, when the terminal enters the main interface from the lock 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 upward movement. 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 upward movement and then downward movement.

[0123] For example, when the terminal enters the lock screen interface from the main interface, the vertical translation component u_translate.y keeps decreasing, for example, u_translate.y decreases from 0 to -100. During this process, the sub-display area on the wallpaper of the terminal main interface presents a downward moving visual effect.

[0124] It's understandable that you can also control the speed of the wallpaper's sub-display area's movement by adjusting the speed at which u_translate.y increases or decreases. For example, if u_translate.y increases from 0 to 100 and then decreases to 0 within 500ms, the speed of the sub-display area displayed will be completely different from if u_translate.y increases from 0 to 100 and then decreases to 0 within 200ms. The same can be done to control the speed at which u_translate.x increases or decreases. By changing these parameters, you can achieve panning and zooming animation effects for the sub-display area.

[0125] 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 as needed.

[0126] Finally, the original texture coordinate uv is scaled and translated by the two-dimensional vector scaling factor scale, the true horizontal translation component translateX, and the true vertical translation component translateY to obtain the new texture coordinate uv1. The original vertex coordinate mapped by the original texture coordinate uv will be sampled from the new texture coordinate uv1 when shading.

[0127] In one example, uv1 = uv × scale + (1.0 - scale) × 0.5 + vec (translateX, translateY). Specifically, the original texture coordinate uv is scaled by the two-dimensional vector scaling factor scale, translated according to the true horizontal translation component translateX and the true vertical translation component translateY, and the scaled and translated texture coordinates are adjusted using an offset of "(1.0 - scale) × 0.5" to ensure that the center points of the scaled sub-display area are evenly arranged along the center of the screen.

[0128] This is because after scaling the original texture coordinates, the scaling operation also affects the coordinate space of the original texture coordinates. If the scaled original texture coordinates are not properly offset, the scaled original texture coordinates will be offset relative to the center of the texture coordinate system. For example, when the scale is 0.95, assuming the original texture coordinates are (0.5, 0.5), which is located 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 located at the center of the texture coordinate system. In other words, scaling causes the center position of the texture coordinate system to shift from (0.5, 0.5) to (0.475, 0.475), which is obviously incorrect. Therefore, the scaled original texture coordinates must be readjusted back to the center.

[0129] As previously explained, scaling and translation of the sub-display area's texture coordinates can be implemented in the vertex shader. This vertex shader processes the data for each vertex in the wallpaper model, including position, color, and texture coordinates. It performs linear operations such as translation, rotation, and scaling. These operations typically do not change the relative positions of vertices in the wallpaper model.

[0130] The following is a Java method for getting the scaled and translated texture coordinate uv1 in the vertex shader.

[0131] First, a function called uvTransform is defined, which accepts a parameter uv of type vec2, which represents the original texture coordinates.

[0132] Next, a floating-point variable called minScale is defined. It uses the min function to calculate the minimum value between u_scale and 1.0 / u_scaleX. u_scale is the overall scaling factor, while u_scaleX is the horizontal scaling factor. This minimum value is used to ensure that the scaling does not exceed a certain range.

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

[0134] A floating-point variable named translateX is defined, which uses the mod function to calculate the horizontal translation component u_translate.x modulo M, where M is the modulo length of the horizontal translation component. A floating-point variable named translateY is also defined, which uses the mod function to calculate the vertical translation component u_translate.y modulo N, where N is the modulo length of the vertical translation component.

[0135] According to the previous description of this article, when the sub-display area is flipped horizontally, the value of M is 2, and when the sub-display area is not flipped horizontally, the value of M is 1. Similarly, when the sub-display area is flipped vertically, the value of N is 2. Usually, the sub-display area will not be flipped vertically, so the value of N is 1.

[0136] Finally, a vec2 variable named uv1 is defined to store the transformed texture coordinates. The calculation process is to first scale the original texture coordinates uv by the scale vector, then calculate half the size of the gap that may appear after scaling and add it to the scaled coordinates to maintain the center position of the texture. Finally, the calculated translation amount is added to the scaled and adjusted coordinates to complete the coordinate transformation, returning the new texture coordinates uv1.

[0137] refer to Figure 8B As shown, in order to achieve infinite horizontal translation of the sub-display area, the sub-display area can also be periodically flipped. At the same time, to avoid sharp images at the flipping junction, this embodiment also constrains the four parameters of the sub-display area to ensure that the edge slope of the sub-display area is 0.

[0138] Specifically, the vertical coordinate in the texture coordinates after the sub-display area is flipped remains unchanged, and the horizontal coordinate after the sub-display area is flipped can be obtained in the following manner.

[0139] First, use the mod function to calculate the horizontal coordinate uv.x of the original texture coordinate uv. Add 2.0 and then take the result modulo 2.0. This result is recorded as x1. The range of x1 is always between 0 and 2. Next, calculate the result of x1 flipped symmetrically about x=1.0, recorded 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. This ensures that the horizontal coordinate of the texture coordinates of the flipped sub-display area always ranges between [0, 1], allowing the sub-display area to be flipped continuously.

[0140] Because flipping a sub-display area is a nonlinear transformation, to preserve its inherent properties, the above flip transformation can be implemented in the fragment shader. The fragment shader processes each rasterized fragment (pixel). Performing nonlinear transformations in the fragment shader ensures that each fragment's properties are correctly transformed and unaffected by linear interpolation during rasterization.

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

[0142] First, a function called flip is defined, which accepts a parameter uv of type vec2, which represents the original texture coordinates. The purpose of this function is to flip the texture coordinates.

[0143] Next, a floating-point variable named x1 is defined. It uses the modulus operator to calculate the remainder of adding 2.0 to the original texture coordinate uv and dividing it by 2.0. By adding 2.0 and then taking the modulus, we ensure that the value of x1 is always in the range [0,2.0). The modulus operator then maps it back to the range [0,1), but the order of the values in x1 is flipped.

[0144] A floating-point variable named x2 is defined. This operation further handles the flipping effect by calculating 1.0 minus the difference between the absolute values of x1 and 1.0. This operation effectively maps the value of x1 to the range [0, 1], thus achieving a horizontal flip. Specifically, when x1 approaches 0, x2 approaches 1; and when x1 approaches 1, x2 approaches 0.

[0145] Finally, a new vec2 type value is returned, whose x component is the flipped x2, while the y-coordinate of the texture coordinate uv remains the original uv.y. In this way, the texture coordinate is only flipped in the horizontal direction, while remaining unchanged in the vertical direction.

[0146] In some embodiments, the multiple sub-display areas change color 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 color of the first sub-display area changes along the second direction of the terminal as the audio is played; and / or 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 of the terminal following the playback of the audio, 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.

[0147] In some embodiments, in order to make the color changes between adjacent sub-display areas more gentle and natural, an S-shaped curve color arrangement method is used. Figure 9 As shown, in each translation cycle, from top to bottom, the color of the first sub-display area changes from left to right; the color of the second sub-display area changes from right to left, and the color on its left side is consistent with the color of the previous sub-display area; the color of the third sub-display area changes from left to right, and the color on its left side is consistent with the color of the previous sub-display area; and the S-shaped twist gradient continues like this. The final rendering effect is referenced Figure 10 shown.

[0148] Here, a plurality of color center points may be defined first, and then the color of the pixel point uv in the i-th sub-display area may be obtained by interpolating the color value in the color center point.

[0149] For ease of understanding, this embodiment assumes that all sub-display area lines are sequentially connected to form a circular ring. Three color center points are equally spaced on this ring, 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 pixel uv in the i-th sub-display area in the ring, the colors of these three color center points are interpolated according to the interpolation ratio colorRate to obtain a colored ring.

[0150] Continue to refer Figure 9 As shown, four sub-display areas numbered a0 to a3 are drawn in sequence from top to bottom on the screen, and the sub-display area starts with the sub-display area numbered a0, and the color of the first sub-display area gradually changes from left to right; the color of the second sub-display area gradually changes from right to left, and the color of its right side is consistent with the color of the right side of the previous sub-display area; the color of the third sub-display area gradually changes from left to right, and the color of its left side is consistent with the color of the left side of the previous sub-display area.

[0151] Here, the second Bezier curve after the curve height adjustment is taken as an example for explanation. For the pixel point uv in the sub-display area numbered i in the ring, the interpolation ratio colorRate can be obtained as follows: Calculate the interpolation step size between each second Bezier curve, i.e., step = 1.0 / LINE_NUM. Determine the interpolation starting position for the second Bezier curve currently numbered i, i.e., start = i × step. Determine the horizontal coordinate uv.x of the pixel point uv in the sub-display area numbered i, and set the Bezier parameter u_b of the second Bezier curve to (0, 0, 1, 1).

[0152] The Bessel function is used to interpolate the pixel point uv using the horizontal coordinate uv.x and a specific Bessel parameter u_b to obtain the first interpolation coefficient ratio1, that is, ratio1=bessel(u,vec4(0.0,0.0,1.0,1.0)).

[0153] Furthermore, in this embodiment, since the second Bezier curve adopts an S-shaped twist gradient, the relative position x of the pixel point uv on the second Bezier curve currently numbered i relative to the interpolation starting position of the first second Bezier curve is determined according to the parity of the number of the second Bezier curve.

[0154] If the number i is an even number, the color of the second Bezier curve representing the current number i changes gradually from left to right, as shown in the reference Figure 9 The Bezier curves numbered a0 and a2 in the graph are shown in Figure 1. The relative position x of pixel uv on the second Bezier curve currently numbered i is x = start + ratio1 × step. That is, starting from the interpolation starting position start of the second Bezier curve currently numbered i, the relative position x is calculated based on the first interpolation coefficient ratio1 and the interpolation step size step.

[0155] If the number i is an odd number, the color of the second Bezier curve representing the current number i changes gradually from right to left, as shown in the reference Figure 9 For the Bezier curves a1 and a3 in the graph, the relative position x of the pixel uv on the second Bezier curve currently numbered i is x = start + (1.0 – ratio1) × step. That is, starting from the interpolation start position start of the second Bezier curve currently numbered i, the relative position x is calculated using (1.0 – ratio1) and the interpolation step size step.

[0156] Next, the relative interpolation distance dist1 between the relative position x of the current pixel uv and each color center point is calculated. Because the color center moves periodically in a circular ring, in this embodiment, the minimum of 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 uv and each color center point.

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

[0158] Specifically, if interpolation is performed between the color center points u_colorCenter.y and u_colorCenter.z, the sum of the two minimum relative distances is calculated as sum = min(dist1.y) + min(dist1.z), and the Bessel function is used again for interpolation to obtain the interpolation ratio rate, that is, rate = bessel(min(dist1.z) / sum, vec4(0.0,0.0,1.0,1.0)). 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.

[0159] It should be noted that directly performing linear interpolation between two adjacent color center points may result in overly abrupt color changes, especially when the color difference is large. Therefore, in this embodiment, a Bezier function is used for interpolation. By adjusting the Bezier parameter u_b of the second Bezier curve, a smoother transition is achieved, reducing color abruptness. Since the shape of the second Bezier curve can be changed by adjusting the Bezier parameter u_b, the speed of color change can be controlled. Therefore, in this embodiment, the Bezier parameter u_b of the second Bezier curve is also adjusted to gradually slow the color change near the flip center position, avoiding the appearance of obvious color clumps, such as bright spots and dark spots.

[0160] In some embodiments, Bezier color blending is performed.

[0161] Here, for ease of understanding, the color interpolation using three color center points is continued as a representative for explanation.

[0162] refer to Figure 11 As shown, color interpolation is performed using three color center points o, p, and q. The color of each color center point is obtained by mixing the dark and light colors corresponding to a primary color. In this embodiment, a dark-light gradient is used in the vertical direction of the second Bezier curve, and a primary color gradient is used in the horizontal direction.

[0163] In this embodiment, a second interpolation coefficient ratio2 in the vertical direction for pixel point uv on the second Bezier curve currently numbered i is first determined. Specifically, a vertical distance dist3 from pixel point uv on the second Bezier curve currently numbered i to the bottom of the second Bezier curve is determined. Then, a second interpolation coefficient ratio is determined based on the vertical distance dist3 and the half-width u_width(i) of the second Bezier curve currently numbered i.

[0164] In one 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 is exactly at the bottom of the second Bezier curve), the second interpolation coefficient ratio2 is 1, indicating that the entire underlying color (e.g., a dark color) is used. When the distance dist3 is equal to twice the half-width of the curve (i.e., the pixel is exactly at the top of the second Bezier curve), the second interpolation coefficient ratio2 is 0, indicating that the entire upper color (e.g., a light color) is used. In this way, the value of the second interpolation coefficient ratio2 decreases linearly as the distance dist3 increases, achieving a gradient effect from dark to light colors.

[0165] Afterwards, the color of the color center point is determined according to the second interpolation coefficient ratio2. Figure 11 As 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.

[0166] Taking the color of the color center point o as an example, 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 controlling the dark color u_colors[0]. Conversely, when the second interpolation coefficient ratio2 is closer to 1, the generated color color1 is closer to controlling the light color u_colors[1].

[0167] Finally, the color of the pixel point uv on the second Bezier curve currently numbered i is obtained by mixing the colors of the three color center points using the interpolation ratio colorRate of the three color center points.

[0168] The above color mixing process can be implemented by a Java method.

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

[0170] 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 half-width u_width[i] of the curve. This coefficient is used to interpolate the color depth in the vertical direction.

[0171] Use the mix function to mix colors between u_colors[0] (light color of color 1) and u_colors[1] (dark color of color 1) according to the second interpolation coefficient ratio2 to obtain the light and dark mixed result of color 1.

[0172] Use the mix function to mix colors between u_colors[2] (light color of color 2) and u_colors[3] (dark color of color 2) according to the second interpolation coefficient ratio2 to obtain the light and dark mixed result of color 2.

[0173] Use the mix function to mix colors between u_colors[4] (light color of color 3) and u_colors[5] (dark color of color 3) according to the second interpolation coefficient of ratio2 to obtain the light and dark mixed result of color 3.

[0174] Takes a weighted average of the three mixed colors according to the color weight colorRate to obtain the final mixed color color. Returns the final mixed color color.

[0175] It's important to note that when multiple colors transition continuously in space, if the pixel values in the transition area change discontinuously or the number of transition layers is small, this can lead to color gradation issues, which visually appear as distinct color stratification or stepped gradients. The severity of this gradation issue is often inversely proportional to the smoothness of the color transition: the fewer the transition layers, the stronger the sense of stratification. This phenomenon may be subtle in static images, but because the human eye is more sensitive to subtle differences in dynamic changes, it is particularly noticeable in dynamic displays (such as wallpaper animations).

[0176] In this embodiment, in order to avoid color gradation problems, an appropriate amount of random noise (such as Gaussian noise, uniform noise, etc.) is introduced into the color transition area to simulate the natural blurring effect of color transition in nature, thereby effectively reducing or eliminating the visual sense of color gradation.

[0177] First, a random number is generated to create a noise value. This noise value is then added directly to the color of the pixel's UV. Because the noise value is small, only a slight adjustment is made to the pixel's UV color, effectively masking the original color gradation and making the color transition smoother.

[0178] In one example, the original texture coordinate v_originuV of the pixel point can be operated using the sine function sin() and the vector dot function dot(), and the decimal part of the result can be taken by the fract function to generate a random number noise between 0 and 1. The random number noise is then scaled to the range of the color channel [0, 255] as the noise value, and finally the generated noise value is directly added to the color of the pixel point uv.

[0179] The above color level elimination process can be implemented through a Java method.

[0180] First, a function called dithering is defined, which accepts a vec3 type parameter color, which represents the color to be dithered, that is, the final mixed color color is returned above.

[0181] Next, generate a noise value noise. This is done by the following steps: Get the original texture coordinates, usually the original texture coordinates received from the fragment shader.

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

[0183] Pass the dot product result to the sin function to get a periodic value.

[0184] The result of the sin function is multiplied by a large constant 43758.5453. This is to amplify the periodic variation so that more randomness is obtained when rounding.

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

[0186] Subtract 0.5 from the pseudorandom number so that its range becomes [-0.5, 0.5).

[0187] Finally, divide the result by 256.0 to reduce the noise range so that the effect of dithering is less noticeable.

[0188] Finally, the generated noise value noise is added to each component of the original color, and the dithered color is returned. For example, the color components can be added element-by-element: color.r + noise; color.g + noise; color.b + noise. This dithering slightly changes the value of each color component, making the color transition appear smoother.

[0189] In some embodiments, the multiple sub-display areas change at least along a first direction of the terminal and / or along a second direction of the terminal following the playing of the audio, including: Rendering parameters of the pixels of the plurality of sub-display areas change at least along a first direction of the terminal and / or along a second direction of the terminal as the audio is played, and the rendering parameters include at least one of texture coordinates and colors.

[0190] Texture coordinates are used to define the position of pixels within a sub-display area. By adjusting the texture coordinates of pixels, dynamic changes to the sub-display area, such as translation, rotation, or scaling, can be achieved.

[0191] Color parameters include RGB values of pixels, etc. By adjusting the color parameters of pixels, the color of the sub-display area can be changed.

[0192] In this embodiment, each rendering parameter is set with two time-related variables: speed and parameter accumulation.

[0193] Velocity represents the rate at which a parameter's value changes over time. The magnitude of the velocity determines how quickly the value changes, while the direction of the velocity determines the direction of the change (e.g., whether the value increases or decreases). For example, at the beginning of an animation, the velocity might start from zero and gradually increase to create an acceleration effect; at the climax of the animation, the velocity might reach a maximum; then, the velocity might gradually decrease until the end of the animation. Furthermore, the velocity variable might dynamically adjust based on user interactions (e.g., swipes, taps, etc.).

[0194] The parameter accumulator is a value accumulated over time, representing the current value of the parameter. Each frame, the product of the speed and the time difference is calculated and added to the parameter accumulator to update the parameter value.

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

[0196] Here, the scaling factor u_scale can be set to two sets of parameter values to achieve periodic changes in the animation. When the cumulative value of these parameters reaches the limit of one set of parameters, the direction of the speed change is changed to change to the other set of parameters.

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

[0198] In the periodic change mode, when there is no user operation, the speed change of all rendering parameters is set to the minimum speed to ensure the smoothness and stability of the rendering effect, and the minimum speed does not change over time.

[0199] When in transition change mode, from the lock screen to the desktop, the speed change of all rendering parameters can follow the gradual change from the minimum value to the maximum value, and then gradually decrease to the minimum value, thus creating a transitional visual experience.

[0200] The speed direction of vertical translation can be upward first and then downward. This creates a visual experience of bouncing or rebounding. In the process of going from the desktop to the lock screen, the speed change of all rendering parameters can follow a decreasing rule from the maximum value to the minimum value. At the same time, the speed direction of vertical translation can always be downward. In addition, when the user slides the desktop, only the speed direction of horizontal translation can be adjusted according to the sliding direction. For example, when sliding horizontally to the left on the desktop, adjust the speed direction of horizontal translation to the left; when sliding horizontally to the right on the desktop, adjust the speed direction of horizontal translation to the right.

[0201] In some embodiments, further comprising: Determining curve function values corresponding to the abscissas of texture coordinates of pixel points on the display interface of the terminal in the plurality of sub-display areas; The sub-display area where the pixel point on the display interface of the terminal is located is determined according to the ordinate of the texture coordinate of the pixel point on the display interface of the terminal and the curve function values corresponding to the multiple sub-display areas.

[0202] In this embodiment, first, it is necessary to define the functions of each sub-display area. These functions can be linear, quadratic, cubic, or other functions, depending on the shape of the sub-display area. Next, for each pixel on the display interface, its texture coordinates are obtained; based on the horizontal coordinates of the pixel's texture coordinates, the function value of the horizontal coordinates of the pixel's texture coordinates in each sub-display area is calculated. Finally, the vertical coordinates of the pixel's texture coordinates are compared with the function values of each sub-display area to determine the sub-display area where the pixel is located.

[0203] Here, the explanation is given by taking the second Bezier curve drawn on the display interface in the sub-display area as an example after the curve height is adjusted.

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

[0205] Typically, a GPU renders images in parallel, pixel by pixel. When multiple second-order Bezier curves are drawn on the screen and overlap, the GPU cannot directly determine which second-order Bezier curve a pixel belongs to, nor can it handle occlusion between these second-order Bezier curves. Therefore, this embodiment defines a rendering order strategy that allows the GPU to determine which second-order Bezier curve any pixel on the screen lies on.

[0206] Specifically, the traversal order of the second Bezier curve is determined according to the stacking order of the second Bezier curve, such as Figure 12 As shown, when four second Bezier curves numbered a0 to a3 are drawn sequentially from top to bottom on the screen, and the multiple second Bezier curves are stacked one by one from bottom to top along the screen, the traversal order of the second Bezier curves is determined to be from large to small, that is, starting from the second Bezier curve numbered a3 to the second Bezier curve numbered a0, to determine which second Bezier curve the pixel belongs to.

[0207] For ease of understanding, this embodiment is explained by taking the second Bezier curves drawn from top to bottom on the screen as being numbered in increasing order, and multiple second Bezier curves being stacked one by one from bottom to top along the screen as a representative.

[0208] First, determine the texture coordinate uv of the currently processed pixel point, the total number of second Bezier curves LINE_NUM in one translation cycle, the Bezier parameter u_b(i) of each second Bezier curve, and the half-width u_width(i) of each second Bezier curve.

[0209] It should be noted that the half width of the second Bezier curve in this embodiment refers to half of the width on both sides of the center line of the second Bezier curve. Figure 12 Line L is the center line of the second Bezier curve numbered a0, and the distance from line L to the upper edge line L1 of the second Bezier curve is equal to the distance from line L to the lower edge line L2 of the second Bezier curve.

[0210] The half-width of the second Bezier curve determines the space it occupies on the screen. By adjusting the half-width of each curve, you can control the degree of overlap and occlusion between curves. Typically, the half-width of the second Bezier curve is in the range of [1 / LINE_NUM×0.75, 1 / LINE_NUM] to avoid a half-width that is too small and causes the background to show through. A half-width that is too large will cause excessive overlap and occlusion between Bezier curves, resulting in an unsightly rendered image.

[0211] Next, traverse the second Bezier curve one by one from the bottom (that is, the second Bezier curve with the largest number) to the top (the second Bezier curve with the smallest number).

[0212] For example, see Figure 13 As shown, for each Bezier curve, the Bezier function of this Bezier curve (i.e. ) to determine its position in the texture coordinate system (see Figure 13), and then extend upward and downward based on the set half-width u_width(i) of the Bezier curve to form a Bezier curve strip area of the second Bezier curve with a width of 2u_width(i).

[0213] Determine the Bezier function value y corresponding to the horizontal coordinate uv.x in the texture coordinate uv of the given pixel point on this second Bezier curve. Then calculate the distance dist0 between the vertical coordinate uv.y in the texture coordinate uv of the given pixel point and the Bezier function value y. If the calculated distance dist0 is less than the half-width u_width[i] of the current second Bezier curve, it means that the current pixel point is inside this second Bezier curve. Then return the number i of this second Bezier curve and the vertical distance uv.y-y+u_width[i] from the pixel point to the bottom of this second Bezier curve. Otherwise, continue traversing towards the top until a second Bezier curve that meets the requirements is found.

[0214] 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 coordinate of the pixel point on the display interface of the terminal and the curve function values corresponding to the multiple sub-display areas includes: determining that a distance between a first ordinate of a texture coordinate of a first pixel point in a top sub-display area among the multiple sub-display areas and a curve function value corresponding to the top sub-display area is less than a half height corresponding to the top sub-display area, the first ordinate being obtained by subtracting a minimum ordinate value from the ordinate of the texture coordinate of the first pixel point; and / or Determine that the distance between the second vertical coordinate of the texture coordinate 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, and the second vertical coordinate is obtained by adding the vertical coordinate of the texture coordinate of the second pixel point to the minimum value of the vertical coordinate.

[0215] Here, the second Bezier curve is used as an example for explanation.

[0216] It should be understood that when the second Bezier curve is periodically translated in the vertical direction so that the second Bezier curve can be infinitely translated in the vertical direction, a rendering misalignment problem may occur. Figure 12 As shown in the figure, Bezier curve misalignment is divided into the following two cases.

[0217] The first type: The second Bezier curve crosses the upper bounds into the previous translation cycle. For example, region N in the second Bezier curve with the top number a0 in the current translation cycle crosses the upper bounds into the bottom of the previous translation cycle. The second Bezier curve that crossed the upper bounds in the current translation cycle was at the top and should be rendered last. However, after crossing the upper bounds, it is at the bottom of the previous translation cycle and should be rendered first.

[0218] The second type: The second Bezier curve crosses the boundary downward into the next translation cycle. For example, region M in the second Bezier curve numbered a3 at the bottom of the current translation cycle crosses the boundary downward into the bottom of the next translation cycle. The second Bezier curve that crosses the boundary in the current translation cycle is at the bottom and should be rendered first. However, after crossing the boundary downward, it is at the top of the next translation cycle and should be rendered last.

[0219] Therefore, in this embodiment, in order to avoid rendering errors caused by the top and bottom second Bezier curves crossing into adjacent translation cycles, a rendering order strategy is further defined to achieve correct rendering of the second Bezier curve when performing periodic translation in the vertical direction.

[0220] First, perform an upward cross-border check on the top curve. Specifically, traverse at least two second Bezier curves (e.g., 2) from the top (i.e., the Bezier curve with the smallest number). For each second Bezier curve, first use the Bezier function of this second Bezier curve (i.e., ) Determine the Bezier function value y corresponding to the horizontal coordinate uv.x in the texture coordinate uv of the given pixel point in this second Bezier curve, and then determine whether the second Bezier function value y is less than the half-width u_width[i] of the current second Bezier curve. If so, it is considered that the top curve may cross the boundary upward. When the top curve may cross the boundary upward, subtract 1 from the vertical coordinate uv.y in the texture coordinate uv of the given pixel point to obtain the new second vertical coordinate v. Then calculate the distance dist0 between the second vertical coordinate v and the Bezier function value y. If the calculated distance dist0 is less than the half-width u_width[i] of the current second Bezier curve, it means that the current pixel point is located inside this second Bezier curve. Return the number i of this second Bezier curve and the vertical distance v-y+u_width[i] from the pixel point to the bottom of this second Bezier curve. Otherwise, continue traversing until a second Bezier curve that meets the requirements is found.

[0221] Next, the second Bezier curve is traversed one by one from the bottom (i.e., the second Bezier curve with the largest number) to the top (the second Bezier curve with the smallest number). The specific traversal method is the same as described above and will not be repeated here.

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

[0223] The above rendering process can be implemented by a Java method. The following is a Java method for obtaining the number of the second Bezier curve where a pixel point at a given UV position is located and the vertical distance from the point to the bottom of the second Bezier curve.

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

[0225] Next, start a for loop, initialize i to 1, and decrement i if i is greater than or equal to 0. This loop is used to traverse the two second Bezier curves at the top.

[0226] Call the bessel function, passing in uv.x (the texture coordinate's u value) and u_b[i] (the Bessel parameter for the i-th curve). Calculate the y value of the second Bessel curve at the u coordinate. Check whether the calculated y value is less than the half-width of the i-th curve, u_width[i]. If so, an upward crossover may have occurred.

[0227] 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], the current texture coordinate uv is within the strip of the curve. If the current texture coordinate is within the strip, return a vec2 containing the curve index i and the calculated v - y + u_width[i], which is the vertical distance from the pixel to the bottom of the second Bézier curve.

[0228] Continue to start a new for loop, traversing 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], the current texture coordinate is within the strip area of the curve. If the current texture coordinate is within the strip area of the curve, return a value containing the curve index i and the calculated uv.y-y+u_width[i], which is the vertical distance from the pixel to the bottom of this second Bezier curve.

[0229] 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 whether it is greater than 1.0-u_width[i] to determine whether a downward cross-border has occurred. 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], the current texture coordinate is within the strip area of the curve. If the current texture coordinate is within the strip area, return a value containing the curve index i and the calculated v-y+u_width[i], which is the vertical distance from the pixel point to the bottom of this second Bezier curve.

[0230] In the embodiment of the present application, the above method is used to achieve precise control of each pixel on the display interface, thereby realizing a more complex dynamic wallpaper effect.

[0231] Figure 14 An example of a physical structure diagram of an electronic device is shown below. Figure 14As shown, the electronic device may include: a processor 1410, a communication interface 1420, a memory 1430, and a communication bus 1440, wherein the processor 1410, the communication interface 1420, and the memory 1430 communicate with each other via the communication bus 1440. The processor 1410 may call the logic instructions in the memory 1430 to execute a display method, which includes: presenting a plurality of sub-display areas on the display interface of the terminal, each sub-display area having at least one color; in response to the playing of audio of the terminal, the plurality of sub-display areas change along at least a first direction of the terminal and / or along a second direction of the terminal following the playing of the audio, wherein the first direction is perpendicular to the second direction, and the change includes at least one of a shape change, a position change, and / or a color change of the plurality of sub-display areas.

[0232] In addition, the logical instructions in the above-mentioned memory 1430 can be implemented in the form of a software functional unit and can be stored in a computer-readable storage medium when sold or used as an independent product. Based on this understanding, the technical solution of the present application, or the part that contributes to the existing technology, or the part of the technical solution, can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for enabling a computer device (which can be a personal computer, server, or network device, etc.) to execute all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk, etc. Various media that can store program code.

[0233] On the other hand, the present application also provides a computer program product, which includes a computer program, which 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 the above-mentioned method embodiments, the method including: presenting multiple sub-display areas on the display interface of the terminal, each sub-display area having at least one color; in response to the playback of audio of the terminal, the multiple sub-display areas change at least along the first direction of the terminal and / or along the second direction of the terminal following the playback of the audio, wherein the first direction is perpendicular to the second direction, and the change includes at least one of a shape change, a position change and / or a color change of the multiple sub-display areas.

[0234] On the other hand, the present application also provides a non-transitory computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, is implemented to execute the display method provided by the above-mentioned method embodiments, the method comprising: presenting multiple sub-display areas on the display interface of the terminal, each sub-display area having at least one color; in response to the playback of audio of the terminal, the multiple sub-display areas change at least along the first direction of the terminal and / or along the second direction of the terminal following the playback of the audio, wherein the first direction is perpendicular to the second direction, and the change includes at least one of a shape change, a position change and / or a color change of the multiple sub-display areas.

[0235] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units, i.e., they may be located in one location or distributed across multiple network units. Some or all of the modules may be selected based on actual needs to achieve the objectives of the present embodiment. Persons of ordinary skill in the art will be able to understand and implement the present invention without inventive effort.

[0236] Through the above description of the embodiments, those skilled in the art will clearly understand that each embodiment can be implemented using software plus a necessary general-purpose hardware platform, or of course, hardware. Based on this understanding, the essence of the above technical solution, or the portion 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, a magnetic disk, or an optical disk, and includes a number of instructions for causing a computer device (such as a personal computer, server, or network device) to execute the methods described in each embodiment or certain portions of the embodiments.

[0237] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions 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: include: Presenting a plurality of sub-display areas on a display interface of the terminal, each sub-display area having at least one color; In response to the playback of audio of the terminal, the multiple sub-display areas change at least along the first direction of the terminal and / or along the second direction of the terminal following the playback of the audio, wherein the first direction and the second direction are perpendicular, and the change includes at least one of a shape change, a position change and / or a color change of the multiple sub-display areas.

2. The display method according to claim 1, characterized in that: A plurality of sub-display areas are presented 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, the plurality of curves are adjusted in height to obtain a plurality of sub-display areas; wherein Two adjacent sub-display areas at least intersect with each other in the first direction.

3. The display method according to claim 1, characterized in that: The multiple sub-display areas change shape at least along a first direction of the terminal and / or along a second direction of the terminal following the playing of the audio, including: The multiple sub-display areas are vertically scaled in a first direction of the terminal following the playback of the audio, wherein the heights of the multiple sub-display areas after vertical scaling are not less than the height of the terminal in the first direction; and / or The multiple sub-display areas are horizontally scaled in the second direction of the terminal following the playback of the audio, wherein the widths of the multiple sub-display areas after horizontal scaling are not less than the width of the terminal in the second direction.

4. The display method according to claim 3, characterized in that: Also includes: determining a minimum scaling factor according to the smaller of the first scaling factor and the reciprocal of the second scaling factor; determining, based on the minimum scaling factor, vertical scaling components of the texture coordinates of the plurality of sub-display areas along a first direction of the terminal; determining, based on the minimum scaling factor and the second scaling factor, horizontal scaling components of the texture coordinates of the plurality of sub-display areas along a second direction of the terminal; in The first zoom coefficient is an overall zoom coefficient that controls the synchronous zooming of the multiple sub-display areas along the first direction and the second direction of the terminal, and the second zoom coefficient is a horizontal zoom coefficient that controls the zooming of the multiple sub-display areas along the second direction of the terminal; the first zoom coefficient changes periodically with the playback of the audio.

5. The display method according to claim 1, characterized in that: The multiple sub-display areas change positions at least along a first direction of the terminal and / or along a second direction of the terminal following the playing of the audio, comprising: The multiple sub-display areas are vertically translated in the first direction of the terminal following the playback of the audio, wherein the sub-display area that is vertically translated beyond the limit of the display interface returns to the starting position of the display interface in the first direction and then continues to be vertically translated; and / or The multiple sub-display areas are horizontally translated in the second direction of the terminal following the playback of the audio, wherein the sub-display area that is horizontally translated beyond the display interface limit returns to the starting position of the display interface in the second direction and then continues to be horizontally translated.

6. The display method according to claim 5, characterized in that: Also includes: performing horizontal translation on the texture coordinates of the plurality of sub-display areas based on a horizontal translation component and a first modulo length, wherein the first modulo length is the modulo length of the horizontal translation component; The texture coordinates of the plurality of sub-display areas are vertically translated based on the vertical translation component and a second modulo length, where the second modulo length is the modulo length of the vertical translation component.

7. The display method according to claim 6, characterized in that: The change trend of the horizontal translation component changes following the sliding direction of the sliding gesture received on the display interface.

8. The display method according to claim 6, characterized in that: The changing trend of the vertical translation component changes with the state switching of the display state of the display interface, and the state switching of the display state of the display interface includes switching from the lock screen display state to the desktop display state, or switching from the desktop display state to the lock screen display state.

9. The display method according to claim 1, characterized in that: The multiple sub-display areas change color at least along a first direction of the terminal and / or along a second direction of the terminal following the playing of the audio, comprising: The color of the first sub-display area changes along the second direction of the terminal as the audio is played; and / or 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 of the terminal as the audio is played, 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.

10. The display method according to claim 1, characterized in that: The multiple sub-display areas change at least along a first direction of the terminal and / or along a second direction of the terminal following the playing of the audio, comprising: Rendering parameters of the pixels of the plurality of sub-display areas change at least along a first direction of the terminal and / or along a second direction of the terminal as the audio is played, and the rendering parameters include at least one of texture coordinates and colors.

11. The display method according to claim 10, characterized in that: Also includes: Determining curve function values corresponding to the abscissas of texture coordinates of pixel points on the display interface of the terminal in the plurality of sub-display areas; The sub-display area where the pixel point on the display interface of the terminal is located is determined according to the ordinate of the texture coordinate of the pixel point on the display interface of the terminal and the curve function values corresponding to the multiple sub-display areas.

12. The display method according to claim 11, characterized in that: 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 coordinate of the pixel point on the display interface of the terminal and the curve function values corresponding to the plurality of sub-display areas includes: determining that a distance between a first ordinate of a texture coordinate of a first pixel point in a top sub-display area among the multiple sub-display areas and a curve function value corresponding to the top sub-display area is less than a half height corresponding to the top sub-display area, the first ordinate being obtained by subtracting a minimum ordinate value from the ordinate of the texture coordinate of the first pixel point; and / or Determine that the distance between the second vertical coordinate of the texture coordinate 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, and the second vertical coordinate is obtained by adding the vertical coordinate of the texture coordinate of the second pixel point to the minimum value of the vertical coordinate.

13. The display method according to claim 1, characterized in that: Also includes: In response to a click operation on the smart card on the lock screen interface of the terminal, multiple sub-display areas are presented 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.

14. An electronic device, characterized in that: The method comprises a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the method according to any one of claims 1 to 13 when executing the computer program.

15. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the method according to any one of claims 1 to 13 is implemented.

Images