Particle animation generation method, system and electronic equipment

Abstract

The present application discloses a particle animation generation method, system, and electronic device, the method comprising: determining first configuration information corresponding to the particle animation; creating a three-dimensional region in a virtual three-dimensional coordinate system according to the first configuration information, and creating three-dimensional particles within the three-dimensional region; rotating the virtual three-dimensional coordinate system so that the three-dimensional region is tilted; projecting the rotated virtual three-dimensional coordinate system onto a two-dimensional canvas corresponding to a display window for presenting the particle animation, so that the three-dimensional region corresponds to a two-dimensional region on the two-dimensional canvas, and the three-dimensional particles are displayed within the two-dimensional region to form the particle animation. In this way, the three-dimensional particles can be made to move in the virtual three-dimensional space, presenting a three-dimensional particle animation effect, enhancing the visual sense of depth, improving the authenticity and smoothness of the particle animation, making the particle animation more vivid and having better performance, thereby improving the user experience.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a particle animation generation method, system and electronic device. Background Art

[0002] Particle animation is a type of computer animation, also known as particle effects or particle systems. It is widely used in web pages, games, film and television special effects, virtual reality, and data visualization. Common examples include clouds, fog, rain, water, fire, and starlight.

[0003] With the continuous development of computer technology, users have increasingly higher requirements for the performance of particle animation, such as realism and smoothness. Therefore, how to better improve the performance of particle animation and obtain better particle animation to enhance the user experience is a problem currently being explored in the field. Summary of the Invention

[0004] The implementation of this application provides a particle animation generation method, system and electronic device, which can obtain more realistic, smoother and better-performing particle animation, thereby improving the user experience.

[0005] To solve the above technical problems, in a first aspect, an implementation of the present application provides a particle animation generation method, the method comprising: determining first configuration information corresponding to the particle animation, the first configuration information comprising attribute information and rendering information of three-dimensional particles corresponding to the particle animation, and attribute information of a three-dimensional region corresponding to the particle animation; creating a three-dimensional region in a virtual three-dimensional coordinate system according to the first configuration information, and creating three-dimensional particles within the three-dimensional region; rotating the virtual three-dimensional coordinate system so that the three-dimensional region is tilted; projecting the rotated virtual three-dimensional coordinate system onto a two-dimensional canvas corresponding to a display window for presenting the particle animation, so that the three-dimensional region corresponds to a two-dimensional region on the two-dimensional canvas, and the three-dimensional particles are displayed correspondingly within the two-dimensional region to form the particle animation, wherein the virtual three-dimensional coordinate system has the center of the two-dimensional canvas as its origin, that is, the origin of the virtual three-dimensional coordinate system overlaps with the center of the two-dimensional canvas, the X-axis and Y-axis of the virtual three-dimensional coordinate system are located on the two-dimensional canvas, and the Z-axis of the virtual three-dimensional coordinate system is perpendicular to the two-dimensional canvas and faces the side of the display window facing the user.

[0006] The particle animation generation method simulates the three-dimensional spatial characteristics of the real world by creating a virtual three-dimensional coordinate system and a three-dimensional region. The virtual three-dimensional coordinate system is rotated and projected onto a two-dimensional canvas, and the three-dimensional particles are projected onto the two-dimensional region for display. These simple mathematical transformations create a three-dimensional spatial effect, allowing three-dimensional particles to move in a virtual three-dimensional space, achieving a three-dimensional particle animation effect. This enhances the visual or spatial depth perception, improves the realism and smoothness of the particle animation, and makes the particle animation more vivid and effective, thereby improving the user experience. Furthermore, this implementation is simple and easy to deploy, requiring no complex 3D rendering processing. Convincing three-dimensional effects can be created using only a two-dimensional canvas, reducing the performance requirements of the display device or electronic device to which the method is applied. A lightweight three-dimensional particle system can be created that can run in, for example, a common web browser without the need for additional plug-in support, thus embracing a wide range of application scenarios and ensuring the widespread and compatible application of this technology.

[0007] Furthermore, a three-dimensional area is set as a geometric space constraint to limit the activity range of three-dimensional particles, thereby realizing the geometric boundary definition, so that three-dimensional particles can move in the three-dimensional area. This can enable three-dimensional particles to realize constrained movement of particles within a limited geometric space (i.e., a three-dimensional area, such as an inclined cube), and can simulate real physical collision and rebound effects, making the movement of three-dimensional particles more spatial and orderly, improving the authenticity and smoothness of particle animation, etc., making particle animation more vivid and effective, thereby enhancing the user experience.

[0008] Furthermore, the 3D region can also include multiple sub-regions, each containing corresponding 3D particles, thus spatially dividing or differentiating the 3D region. This allows for the display of 3D particle motion in different regions, making particle animation more vivid and effective, thereby enhancing the user experience.

[0009] Furthermore, three-dimensional particles are created according to the first configuration information corresponding to the particle animation, thereby ensuring the consistency of the three-dimensional particles in the initial state and the consistency of the visual effects; by establishing a three-dimensional stereoscopic area in a virtual three-dimensional coordinate system, the three-dimensional stereoscopic display effect of the particle animation is achieved; the three-dimensional stereoscopic area is tilted following the rotation of the virtual three-dimensional coordinate system, thereby enhancing the dynamics of the three-dimensional particles and rich visual levels.

[0010] In one implementation of the present application, the rotation process is to rotate the three-dimensional coordinate system 45 degrees in a clockwise direction.

[0011] In one implementation of the present application, the three-dimensional area is a cube, and the two-dimensional area is a rhombus.

[0012] When establishing a virtual 3D coordinate system and 3D region using the aforementioned method, the coordinate system origin is placed at the center of the canvas, achieving centralization. This simplifies coordinate system rotation and scaling calculations and gives the particle animation a visually symmetrical aesthetic. The establishment of the 3D coordinate system's X, Y, and Z axes simulates the 3D properties of the real world, enhancing the perception of depth in the particle animation. Coordinate transformations for a 45-degree rotation angle are relatively simple and can simulate a more realistic 3D effect. Specifically, when the rotation angle is 45 degrees (π / 4 radians), the coordinate transformation is particularly simple, creating the illusion of 3D space. The 3D region and the 2D projection shape define a bounded activity space that restricts the particle's range of motion, enhancing the particle's sense of space and order. Furthermore, the formation of the diamond-shaped region creates the illusion of a 3D cube relative to the 2D canvas.

[0013] In one implementation of the present application, the first configuration information includes the following information: attribute information of three-dimensional particles, rendering information of three-dimensional particles, and attribute information of three-dimensional regions.

[0014] Furthermore, the attribute information of three-dimensional particles includes, for example, motion attribute information and / or visual attribute information of three-dimensional particles. The motion attribute information of three-dimensional particles includes, for example, the movement direction and speed of the particles, and the visual attribute information of three-dimensional particles includes, for example, the number, size, position, color, etc. of the particles.

[0015] The rendering information of three-dimensional particles includes, for example, the rendering technology, rendering method, and rendering cycle selection used by the color and visual feedback system. Among them, rendering technology includes, for example, technology based on the Hue, Saturation, Lightness (HSL) color model for rendering. Specific rendering methods include rendering based on particle position, rendering based on particle movement speed, rendering based on user interaction, etc., and of course, rendering methods also include rendering based on smooth transition processing. Of course, rendering methods also include rendering based on corresponding application scenarios, etc. The rendering cycle can be rendered in a timed manner, etc. Based on rendering technology, smoother animation effects can be achieved and unnecessary calculations can be reduced.

[0016] The attribute information of the three-dimensional region includes, but is not limited to, the number, size, and position of the three-dimensional region.

[0017] When generating particle animation using the above method, a more realistic and demand-oriented particle animation can be rendered based on the attribute information of the three-dimensional particles corresponding to the particle animation and the rendering information of the three-dimensional particles corresponding to the particle animation; the attribute information based on the three-dimensional area can limit the area of the particle animation, and also provide a clear spatial framework for the complex effects of the particle animation.

[0018] In one implementation of the present application, the method also includes determining first configuration information corresponding to the particle animation through at least one of the following information: basic configuration information corresponding to the particle animation, particle attribute configuration logic information corresponding to the particle animation, performance information of the display environment corresponding to the particle animation, the display environment includes the display device and / or the network in which the display device is located, and scene information of the application scene corresponding to the particle animation.

[0019] In the implementation of this application, the basic configuration information corresponding to the particle animation is pre-configured by the user according to the particle animation generation requirements. The basic configuration information of the particle animation includes, for example, particle object pool information, three-dimensional area attribute information, and particle corresponding force field attribute information.

[0020] By adopting the above method, the first configuration information corresponding to the particle animation is determined according to the basic configuration information corresponding to the particle animation, and then three-dimensional particles are generated according to the first configuration information. In this way, there is no need to perform configuration when generating three-dimensional particles, which speeds up the efficiency of particle animation generation.

[0021] Furthermore, first configuration information corresponding to the particle animation is determined based on the performance information of the display environment corresponding to the particle animation, and then three-dimensional particles are generated based on the first configuration information. This can make the generated three-dimensional particles more suitable for the current display environment and allow the particle animation to be adjusted according to the performance parameters of different display devices, ensuring smooth operation of the particle animation on different display devices. For example, the rendering frame rate can be determined based on performance, achieving frame rate adaptability.

[0022] Furthermore, first configuration information corresponding to the particle animation is determined based on the scene information of the application scenario corresponding to the particle animation, and then three-dimensional particles are generated based on the first configuration information. This can generate particle animations that are more suitable for the current application scenario, allowing particle animations to be differentiated according to different application scenarios, providing functional animation effects and functional experiences for various application scenarios, and improving the user experience. For example, different rendering methods can be determined based on different application scenarios such as browsers and games.

[0023] In one implementation of the present application, the particle attribute configuration logic information includes: simulating the perspective relationship between the three-dimensional coordinate system and the three-dimensional space, and determining the attribute value of the target attribute of the three-dimensional particle according to the rule that the coordinate value of the Z-axis coordinate of the three-dimensional particle is positively correlated with the attribute value of the target attribute of the three-dimensional particle.

[0024] When generating particle animation using the above method, the perspective relationship is simulated according to the Z-axis coordinate of the particles in the three-dimensional coordinate system, and the target properties of the three-dimensional particles are adjusted according to the positive correlation rule. In this way, the Z coordinate can be used to affect the visual properties of the particles and achieve depth encoding. For example, particles in the distance appear smaller, more transparent, and move slower, which increases the sense of space and movement of the particle animation in the two-dimensional plane projection.

[0025] In one implementation of the present application, creating three-dimensional particles includes: grouping the three-dimensional particles corresponding to the particle animation to obtain multiple three-dimensional particle groups; and performing one-time rendering processing on the three-dimensional particles in each three-dimensional particle group using the same rendering configuration information.

[0026] When creating three-dimensional particles using the above method, by grouping the three-dimensional particles, the duplication of the first configuration information of the particles is reduced, which facilitates the range adjustment of the particle properties; using the same rendering configuration information to perform a one-time rendering process on the three-dimensional particles in each three-dimensional particle group ensures the consistency of each particle in the same particle group, reduces the number of redraws in the rendering, and can also more efficiently utilize the display device resources.

[0027] In one implementation of the present application, the method further includes: determining second configuration information corresponding to the particle animation; and updating the created three-dimensional particles according to the second configuration information to update the particle animation.

[0028] When the particle animation is generated in the above manner, the three-dimensional particles created are updated according to the second configuration information, thereby ensuring the continuity of the image and enhancing the sense of movement of the particles.

[0029] In one implementation of the present application, the second configuration information includes attribute information of the three-dimensional particles and rendering information of the three-dimensional particles.

[0030] In one implementation of the present application, the method further includes: determining second configuration information of the particle animation through at least one of the following information: user interaction information corresponding to the three-dimensional particles, movement information of the three-dimensional particles in the three-dimensional stereoscopic area, data source information of the data corresponding to the three-dimensional particles, and performance information of the display environment corresponding to the particle animation, where the display environment includes the display device and / or the network in which the display device is located.

[0031] The above-mentioned method determines second configuration information based on user interaction information, and then updates the three-dimensional particles based on the second configuration information to update the particle animation. This allows the particle animation to change based on user operations, making the particle animation more vivid. Determining second configuration information based on the movement information of the three-dimensional particles within the three-dimensional region, and then updating the three-dimensional particles based on the second configuration information to update the particle animation, ensures the boundary constraints of the three-dimensional particles in the three-dimensional space and improves the mobility and rationality of the particle animation. Determining second configuration information based on data source information corresponding to the three-dimensional particles, and then updating the three-dimensional particles based on the second configuration information to update the particle animation, allows the particle animation to be updated and changed in real time according to the actual situation of the current three-dimensional particles, making the particle animation more responsive to needs. Determining second configuration information based on performance information of the display environment corresponding to the particle animation, and then updating the three-dimensional particles based on the second configuration information to update the particle animation, allows the particle animation to be dynamically adjusted according to different display devices and / or the network in which the display devices are located, ensuring the smooth operation of the particle animation on various display devices.

[0032] In one implementation of the present application, the motion information includes the following information: information about the region where the three-dimensional particle is located in the three-dimensional region and collision information between the three-dimensional particle and the boundary of the three-dimensional region.

[0033] When the particle animation is generated in the above manner, the 3D particles in the particle animation can be adjusted and managed conveniently based on the position information of the 3D particles in the 3D region and the collision information between the 3D particles and the 3D region.

[0034] In one implementation of the present application, the method also includes: rendering the boundary of the two-dimensional area on a two-dimensional canvas; adjusting the visibility of the boundary of the two-dimensional area on the two-dimensional canvas based on the density of three-dimensional particles around the boundary of the three-dimensional stereoscopic area; and rendering the collision visual effect of the three-dimensional particles and the boundary of the three-dimensional stereoscopic area on the two-dimensional canvas.

[0035] When generating particle animation using the above method, the rendering of the two-dimensional area boundary and the adjustment of visibility enhance the user's perception of the spatial range; the collision visual effect of rendering three-dimensional particles and the boundary of the three-dimensional area in the two-dimensional canvas enhances the realism of the collision between particles and boundaries, and the timely feedback highlights the interactivity of the animation.

[0036] In one implementation of the present application, the method also includes: rendering a collision visual effect of three-dimensional particles and the boundary of a three-dimensional stereoscopic area on a two-dimensional canvas, including: determining the rebound velocity component and rebound angle of the three-dimensional particles in the collision direction; and simulating the non-completely elastic collision of the three-dimensional particles according to the energy loss function to achieve a collision visual effect.

[0037] When generating particle animation using the above method, the velocity components, rebound angles, and the non-perfectly elastic collisions of particles simulated using the energy loss function simulate the actual physical reactions of rebound in the real world, making the particle animation more realistic and improving the visual realism.

[0038] In one implementation of the present application, the method further includes: when it is detected that the three-dimensional particle passes through the boundary of the three-dimensional region, correcting the position of the three-dimensional particle so that the three-dimensional particle is within the three-dimensional region.

[0039] When generating particle animation using the above method, the position correction of the three-dimensional particles ensures that the three-dimensional particles move in the three-dimensional space, maintains the integrity of the animation scene, avoids unnecessary rendering operations on particles outside the picture, and improves the running efficiency of the animation.

[0040] In one implementation of the present application, the method also includes: managing the movement of three-dimensional particles through at least one of the following strategies: speed upper limit control strategy; nonlinear damping simulation control strategy; motion inertia simulation strategy; micro-disturbance simulation strategy; time-based physical integration simulation strategy.

[0041] When generating particle animation using the above method, controlling the speed upper limit prevents the particles from moving at excessive speeds, which would affect the integrity and smoothness of the animation. The nonlinear damping simulation strategy and the motion inertia simulation strategy introduce physical phenomena in the display world, making the particle animation more realistic and enhancing the visual realism. The micro-perturbation simulation strategy prevents the particle animation from falling into static or mechanized periodic motion, thereby enhancing the realism of the particle animation. The time-based physical integration simulation strategy ensures that the particle animation has consistent physical behavior on different display devices and at different frame rates, thus ensuring the consistency of the particle animation.

[0042] In a second aspect, the implementation of the present application provides a page generation method, including: determining a particle animation, the particle animation is generated according to the particle animation generation method provided by any implementation of the first aspect above; generating a page including the particle animation according to the particle animation.

[0043] In a third aspect, the implementation of the present application provides a particle animation generation system, including: multiple processing systems, which cooperate to implement the above-mentioned particle animation generation method.

[0044] In a possible implementation of the third aspect mentioned above, the particle animation generation system includes multiple processing systems such as a rendering engine core system, a particle lifecycle management system, a three-dimensional space simulation system, a physics engine system, a user interaction processing system, a boundary collision and constraint simulation system, a speed control and physics simulation system, a color and visual feedback system, etc.

[0045] The above system is used to generate particle animation. The core system of the rendering engine ensures the integrity of the particle animation and the authenticity of the particle motion characteristics; the particle life cycle system ensures the number of particle objects while avoiding frequent particle creation, and also ensures the randomness and diversity of the behavior of three-dimensional particles in particle animation; the three-dimensional space simulation system makes the movement and collision effects of three-dimensional particles close to the physical reactions in reality, making the particle animation have a more realistic visual effect.

[0046] In a fourth aspect, an implementation method of the present application provides an electronic device, comprising: a memory for storing a computer program, the computer program including program instructions; a processor for executing the program instructions so that the electronic device implements the particle animation generation method provided by any possible implementation method of the above-mentioned first aspect, and / or implements the page generation method provided by any possible implementation method of the above-mentioned second aspect.

[0047] In a fifth aspect, the implementation method of the present application provides a computer-readable storage medium, which stores a computer program. The computer program includes program instructions, and the program instructions are executed by an electronic device to enable the electronic device to implement the particle animation generation method provided by any possible implementation method of the above-mentioned first aspect, and / or implement the page generation method provided by any possible implementation method of the above-mentioned second aspect.

[0048] It can be understood that the beneficial effects of the second to fifth aspects mentioned above can also be found in the relevant description of the first aspect mentioned above, and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0049] In order to more clearly illustrate the technical solution of the present application, the following is a brief introduction to the drawings used in the description of the implementation method of the present application.

[0050] Figure 1 A schematic diagram of the structure of a particle animation generation system provided by an embodiment of the present invention;

[0051] Figure 2 A schematic diagram of a flow chart of a particle animation generation method provided by an embodiment of the present invention;

[0052] Figure 3 Another schematic flow chart of a particle animation generation method provided by an embodiment of the present invention;

[0053] Figure 4 A schematic diagram of a flow chart of a page generation method provided by an embodiment of the present invention;

[0054] Figure 5 A schematic structural diagram of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0055] As mentioned earlier, particle animation is widely used in fields such as web pages, games, film and television special effects, virtual reality, and data visualization to achieve animation presentation. Below, we will use the field of internet web design as an example to illustrate the implementation of particle animation.

[0056] In the current field of Internet web design, the user's sensory experience of web pages and the visual appeal of web pages to users have become important indicators for measuring website quality. Therefore, factors such as web page layout optimization, color matching application, user interaction design, and responsive design are becoming increasingly important. Current traditional web design usually uses static elements or simple particle animation effects, which makes it difficult to form deep interaction with users. For example, the current web particle animation technologies mainly include the following categories:

[0057] Simple Cascading Style Sheets (CSS) particle animation: This approach primarily relies on CSS3 transition and animation properties to achieve simple element transformations, such as fade-in, fade-out, movement, and scaling, creating simple CSS particle animations. This simple web particle animation technique can run smoothly on low-performance devices, but the resulting web particle animations are often too simplistic and lack complexity and interactivity.

[0058] 2D Canvas Particle Animation: This technology primarily uses Hypertext Markup Language (HTML) 5 Canvas technology to draw large numbers of 2D particles, creating visual effects such as particle flow and connected lines. For example, an e-commerce website uses connected particle effects in its background. While basic 2D Canvas particle animation technology is relatively simple to implement and offers good compatibility, web page particle animations implemented using this method only move within a two-dimensional plane, lacking a sense of spatial depth and exhibiting limited interactivity.

[0059] Preset interactive animations: These primarily implement interactive particle animations based on pre-set animation paths and triggering conditions, such as parallax effects triggered by scrolling or element transformations triggered by hovering. Preset animation paths give developers precise control over visual presentation, but particle animations implemented this way lack the physical realism and naturalness of real-time computation, resulting in a less natural visual experience.

[0060] Therefore, the web page particle animation technology existing in the prior art has the following main disadvantages:

[0061] Dimensional limitations: Existing particle animations are limited to two-dimensional planes, lack a sense of spatial depth, and cannot simulate the three-dimensional spatial characteristics of the real world.

[0062] Lack of spatial limitations: Most existing particle animations move in unbounded space and lack the limitation of specific geometric space, which makes the particle behavior lack a sense of structure and order.

[0063] Lack of realistic physical interaction: Existing particle animations typically use simple linear motion or preset paths, lacking physical effects such as collisions and acceleration changes, resulting in an unnatural visual experience.

[0064] Insufficient interactive feedback: User interaction with particle animation is usually limited to simple follow or hover effects, lacking complex mechanical simulations such as repulsion, attraction, and other diversified interactions.

[0065] It's difficult to balance performance and effects: High-quality particle effects often require rendering a large number of particles, resulting in high performance consumption. To ensure performance, developers have to reduce the number of particles or simplify physics calculations, which affects visual effects.

[0066] In response to the above-mentioned problems, the implementation of the present application provides a particle animation generation method, which includes: based on the first configuration information of the particle animation, creating a three-dimensional stereo area in a virtual three-dimensional coordinate system, and creating three-dimensional particles in the three-dimensional stereo area, and based on the coordinate system rotation processing, making the virtual three-dimensional coordinate system and the three-dimensional stereo area in an inclined state, and making the inclined three-dimensional stereo area correspond to a two-dimensional area on a two-dimensional canvas, so that the three-dimensional particles are displayed in the two-dimensional area to form a particle animation. Among them, the first configuration information includes the attribute information and rendering information of the three-dimensional particles corresponding to the particle animation, as well as the attribute information of the three-dimensional stereo area corresponding to the particle animation. In addition, the origin of the virtual three-dimensional coordinate system overlaps with the center of the two-dimensional canvas, the X-axis and the Y-axis are located on the two-dimensional canvas, and the Z-axis is perpendicular to the two-dimensional canvas and faces the side of the display window facing the user.

[0067] In this way, by constructing a virtual 3D coordinate system and a 3D stereoscopic region, rotating and projecting the 3D coordinate system onto a 2D canvas, and projecting the 3D particles onto the 2D region for display, these simple mathematical transformations achieve a 3D spatial effect, allowing 3D particles to move in a virtual 3D space. This creates a 3D particle animation effect, enhances the visual sense of depth, and improves the realism and fluidity of the particle animation, making the particle animation more vivid and effective, thereby enhancing the user experience. Furthermore, this implementation is simple and easy to deploy, requiring no complex 3D rendering processing. Using only a 2D canvas, a convincing 3D effect can be created. This reduces the performance requirements of the display device used for this method, allowing for the creation of a lightweight 3D particle system that can run in, for example, a standard web browser without the need for additional plugins. This allows for a wide range of applications, thus ensuring the widespread and compatible application of this technology.

[0068] Furthermore, traditional particle systems often make particles move in infinite space and lack a clear sense of boundaries. The implementation method of this application creates a three-dimensional area to form a boundary-constrained particle system based on a virtual geometric body, providing a clear spatial framework for particle movement. That is, the rebound velocity component and rebound angle of the three-dimensional particles in the collision direction can be determined based on the three-dimensional area. According to the energy loss function, the non-completely elastic collision of the three-dimensional particles is simulated to render the collision visual effect of the three-dimensional particles and the boundary of the three-dimensional area on a two-dimensional canvas. In this way, the three-dimensional particles move dynamically in the three-dimensional area according to the second configuration information, with a clear sense of spatial structure. The rebound behavior of the particles adds to the dynamism and fun of the particle system, while also providing users with a clear interactive boundary perception.

[0069] In addition, placing the origin of the three-dimensional coordinate system at the center of the two-dimensional canvas realizes central processing, thereby simplifying the calculation of coordinate system rotation and scaling, and making the particle animation visually present the beauty of central symmetry; the establishment of the X, Y, and Z axes of the three-dimensional coordinate system can simulate the three-dimensional characteristics of the real world and enhance the depth sense of particle animation; the coordinate transformation based on rotation processing is relatively simple and can simulate a more realistic three-dimensional effect, which can visually create the illusion of three-dimensional space; the limitation of three-dimensional stereoscopic area and two-dimensional projection shape, and the bounded activity space limit the movement range of particles, enhancing the spatial sense and order of particles.

[0070] Furthermore, in the implementation of the present application, second configuration information for the particle animation is determined by determining at least one of the following: user interaction information corresponding to the three-dimensional particles, motion information of the three-dimensional particles within a three-dimensional region, data source information for the three-dimensional particles, and performance information for the display environment corresponding to the particle animation. Based on the second configuration information, the created three-dimensional particles are updated to update the particle animation. This allows the three-dimensional particles to dynamically change based on user interaction, allowing the particles to respond to user input in a physically intuitive manner. Alternatively, the three-dimensional particles can be dynamically adjusted based on their current motion state, making the particle animation more vivid. Alternatively, the three-dimensional particles can be dynamically adjusted based on the performance information of the current display environment, making the particle animation more consistent with the current display environment and providing a better user visual experience.

[0071] Furthermore, in the implementation of this application, the motion of three-dimensional particles is managed through at least one of a velocity cap control strategy, a nonlinear damping simulation control strategy, a motion inertia simulation strategy, a micro-perturbation simulation strategy, and a time-based physical integration simulation strategy. This ensures that particle motion conforms to the physical laws of the real world while also being visually aesthetic. Particles avoid unintuitive movements, resulting in an elegant dynamic balance.

[0072] Next, taking the particle animation generation method and particle system provided by the implementation of this application as an example of applying to page design, the particle animation generation method and system provided by the implementation of this application are described in detail.

[0073] In order to more clearly understand the particle animation generation method, system and electronic device provided by the present application, the technical solution of the present application will be further described in detail below with reference to the accompanying drawings.

[0074] In one implementation of this application, the particle animation generation system is a three-dimensional particle system, which can also be referred to as a particle animation system or a particle special effects system. The system architecture in this application adopts a modular design concept, dividing the entire particle animation generation system into multiple functionally independent and mutually collaborative system modules. These multiple system modules cooperate to implement the particle animation generation method provided in this implementation.

[0075] Furthermore, the system architecture in this application can be based on the front-end Web technology stack, mainly using HTML5 Canvas as a rendering carrier, combined with JavaScript language to implement complex computing logic and interactive functions, and realize an interactive user experience enhancement system based on canvas to produce three-dimensional particle animation.

[0076] For example, Figure 1As shown in the figure, the system architecture mainly includes the rendering engine core system, particle life cycle management system, three-dimensional space simulation system, physics engine system, user interaction processing system, boundary collision and constraint simulation system, speed control and physics simulation system, color and visual feedback system.

[0077] Specifically, the rendering engine core system is the hub of the entire particle system, primarily responsible for visually presenting the calculation results of three-dimensional particle animation to the user. This application primarily uses Canvas 2D context technology as the primary rendering technology. The main reasons are: first, Canvas 2D is supported by almost all modern browsers, requiring no additional plug-ins or special hardware acceleration, and therefore has wide compatibility; second, compared to Web Graphics Library (Web GL) technology, the Canvas 2D Application Programming Interface (API) is more concise and intuitive, easier to implement and maintain, and has a more balanced development complexity; third, for the number of particles designed for this system (1000-2000), Canvas 2D can provide sufficient performance support and better performance adaptability.

[0078] The core rendering engine system creates a full-screen Canvas element, obtains a 2D drawing context for the particle animation, and establishes a frame-by-frame rendering loop. It also uses a smart rendering strategy to optimize performance, redrawing only the changed areas rather than the entire canvas. It also utilizes the browser's request Animation Frame API instead of traditional timers to achieve smoother animations and reduce unnecessary calculations.

[0079] Therefore, using Canvas 2D as the main rendering technology can ensure that the particle system can be supported by almost all modern browsers, and no additional plug-ins or special hardware are required for acceleration. The Canvas 2D API is more concise and intuitive, and facilitates system implementation and maintenance. For the particle scale of this system, such as 1000-2000 particles, Canvas2D technology can provide more sufficient performance support.

[0080] Furthermore, during the rendering process, in order to reduce the overhead of switching the Canvas drawing context state, the system can also implement a rendering batch mechanism, and in order to better adapt to the device performance, the system can also implement a frame rate adaptation mechanism.

[0081] Among them, the rendering batch mechanism can be, for example, grouping particles according to visual attributes (such as color and size), and the same group of particles are drawn at one time using the same drawing context configuration to reduce the number of style switching and path creation.

[0082] Regarding the frame rate adaptation mechanism, for example, the actual rendering frame rate can be monitored. When the frame rate drops, the number of particles can be automatically reduced or physical calculations can be simplified. When the device performance is sufficient, the number of particles can be increased or advanced visual effects can be enabled to achieve a mechanism that dynamically adjusts the rendering accuracy according to the device performance.

[0083] The particle lifecycle management system is primarily responsible for managing the creation, maintenance, and updates of 3D particles. It implements functions such as particle pool management, property initialization, state updates, and boundary processing. Particle pool management utilizes a particle pre-allocation and object pool design pattern. A fixed number of particle objects are created at system startup and stored in the object pool, avoiding the performance overhead and memory fragmentation caused by frequent dynamic object creation and destruction at runtime. Property initialization uses an efficient random number generation algorithm and array operations to perform batch initial property settings for all particles in a single loop at system startup. Each particle is assigned an initial position in 3D space (e.g., a random position (x, y, z)), velocity (e.g., an initial velocity vector (vx, vy, vz)), and visual attributes such as size and color, ensuring randomness and diversity in particle behavior. State updates update particle positions and velocities at each animation frame based on physical rules and external interactions. Boundary processing detects and handles particle interactions with pre-set spatial boundaries, enabling effects such as bounces and wraparounds.

[0084] For example, the particle lifecycle management system determines the first configuration information corresponding to the particle animation by determining at least one of the basic configuration information corresponding to the particle animation, the particle attribute configuration logic information corresponding to the particle animation, the performance information of the display environment corresponding to the particle animation, and the scene information of the application scene corresponding to the particle animation, and performs particle lifecycle management based on the first configuration information.

[0085] The 3D space simulation system, the first core innovation of this system, primarily utilizes pure 2D Canvas technology and simulates 3D space effects. It implements coordinate system conversion, perspective effects, depth sorting, and geometric space constraints. The coordinate system conversion function establishes a virtual 3D coordinate system, performs coordinate system conversion, and projects the 3D coordinates onto a 2D canvas. The perspective function simulates perspective relationships in 3D space, making distant particles appear smaller to achieve a perspective effect. The depth sorting function adjusts the particle animation drawing order and transparency based on the particle's Z-axis coordinate to achieve depth sorting along the Z-axis, enhancing the sense of spatial hierarchy. The geometric space constraint function defines a tilted cube region (as an example of a 3D region) in virtual 3D space to limit the particle's range of motion and thus implement geometric space constraints.

[0086] Therefore, although HTML5 Canvas is essentially a two-dimensional drawing surface, this application's implementation creates a virtual three-dimensional sense of space through clever mathematical transformations. The three-dimensional space simulation system implements virtual three-dimensional space construction technology, specifically through the creation of a virtual three-dimensional coordinate system, coordinate system tilt transformation processing, centering processing, and depth encoding processing.

[0087] The virtual 3D coordinate system is created by first defining a virtual 3D coordinate system with the center of the 2D canvas corresponding to the particle animation display window as the origin (0, 0, 0), where the X-axis points to the right, the Y-axis points downward, and the Z-axis points perpendicular to the screen and outward. Thus, the virtual 3D coordinate system is created with the center of the 2D canvas as the origin, with the X-axis and Y-axis located on the 2D canvas, and the Z-axis perpendicular to the 2D canvas and oriented toward the user-facing side of the 2D canvas.

[0088] After the virtual three-dimensional coordinate system is created, a three-dimensional region is created in the virtual three-dimensional coordinate system. The three-dimensional region may be a cube, for example.

[0089] Then, in order to create a three-dimensional effect, the system performs a coordinate system tilt transformation process, such as applying a 45-degree rotation transformation to the standard virtual three-dimensional coordinate system, such as rotating the virtual three-dimensional coordinate system 45 degrees in a clockwise direction.

[0090] Thus, a tilted cube is defined as the boundary space for particle activity, realizing the geometric boundary definition. The cube can be described by parameters such as the center point coordinates (cubeCenterX, cubeCenterY, cubeCenterZ), side length (cube Size), and tilt angle (usually 45 degrees).

[0091] Coordinate transformation causes the cube, originally a square in the XY plane, to appear as a rhombus, creating the illusion of a three-dimensional cube. Its mathematical essence is a two-dimensional rotation matrix, so the rotation transformation employs matrix operations. Specifically, for any point (x, y), the new coordinates (x', y') after rotation by an angle θ are calculated as follows: x' = x·cos(θ) - y·sin(θ), and y' = x·sin(θ). Therefore, when θ is 45 degrees (i.e., π / 4 radians), the transformation is particularly concise, creating the illusion of three-dimensional space.

[0092] In this implementation, by translating the Canvas's drawing origin (i.e., the origin of the virtual three-dimensional coordinate system) to the center of the canvas, rotation and scaling calculations are simplified, and the special effects are visually presented with a centrally symmetrical aesthetic.

[0093] Furthermore, the created 3D regions can be spatially differentiated and optimized. For example, when the number of particles is large, the system uses spatial partitioning techniques (such as grid partitioning or quadtree) to divide the 3D region into multiple regions, recording the particles within each region. In subsequent motion management such as collisions, only the interactions between particles in adjacent regions are calculated, rather than global pairwise calculations. This allows for optimized collision detection and force field calculations for particles in different spaces.

[0094] Furthermore, when creating 3D particles within a 3D region, the system can leverage the Z coordinate to influence the particle's visual properties, achieving depth encoding. Specifically, the target attribute value of the 3D particle can be determined based on the positive correlation between the particle's Z-axis coordinate value and the particle's target attribute value. Target attributes can include visual attributes such as the particle's size and transparency, as well as motion attributes such as its speed.

[0095] For example, the smaller the Z value (i.e., the farther away from the viewer or user), the smaller the particle size, enabling particle size scaling. The smaller the Z value, the higher the particle transparency, enabling transparency adjustment. The Z value also affects the speed of particle projection on the XY plane, simulating a perspective effect and enabling movement speed adjustment.

[0096] The advantage of this virtual three-dimensional space construction technology is that it does not require a complex 3D rendering library. It can create convincing three-dimensional effects using only the basic Canvas 2D API, greatly reducing the system's requirements for device performance while ensuring wide compatibility.

[0097] The physics engine system is primarily responsible for simulating the physical behavior of particle motion, achieving natural, realistic visual effects. It primarily consists of a kinematics calculator, a collision detector, a bounce processor, and a damping simulator. The kinematics calculator calculates particle velocity and position changes in all directions based on classical mechanics formulas; the collision detector detects particle boundaries with three-dimensional regions, as well as particle-to-particle collisions; the bounce processor calculates and applies a bounce effect when a collision is detected; and the damping simulator simulates factors like air resistance to attenuate particle velocity.

[0098] The user interaction processing system is one of the core components of this system (the third core component), primarily responsible for user interaction. It captures user input and converts it into a force field that influences particle behavior. The system implements functions such as user input capture, force field generation, influence range calculation, and force decomposition and application. User input capture, for example, can monitor user interaction events such as mouse movements, clicks, and touches. Force field generation involves creating a virtual force field based on the user input position using a stance generator. This can be a repulsive, attractive, or composite field. Influence range calculation determines the force field's radius of influence and identifies the affected particles. Force decomposition and application involves calculating the force exerted by the force field on each particle and decomposing it into components in the X, Y, and Z directions, which are then applied to the particle.

[0099] The user interaction processing system can also be considered a highly natural user interaction force system or adaptive force field interaction system, enabling particles to react to user input in a physically intuitive manner. This is the third core point of this application. The implementation of the user interaction processing system specifically includes force field model design, distance and direction calculation, adaptive force component solution, smooth transition processing, multi-touch support, and personalized reaction coefficient setting.

[0100] Force field model design refers to the system designing a force field model centered on the user input point based on field theory concepts from physics. For example, you can define the force field's influence radius (mouse repulsion radius), set the force field's strength parameter (mouse repulsion force), and establish a mathematical relationship for force attenuation over distance (usually using an inverse proportional relationship).

[0101] Distance and direction calculations are performed for each particle within the force field's range when the user moves the mouse or touches the screen. For example, the system calculates the Euclidean distance from the particle to the force field's center, the unit vector in the direction of the force (using the inverse tangent function to calculate the angle), and the force attenuation coefficient based on distance.

[0102] Adaptive force component solving involves breaking down force field effects into velocity components in each direction. For example, trigonometric functions (cosine and sine) are used to decompose force into horizontal and vertical components, force magnitude is calculated based on distance and a preset attenuation curve, and a global speed factor is applied to control response sensitivity.

[0103] Smoothing out force transitions means that the system implements a smooth transition mechanism to avoid sudden changes at the edges of the force field. For example, this involves applying a gradual falloff at the edges of the force field, using easing functions to make force changes more natural, and adding small random perturbations to avoid overly mechanical overall motion.

[0104] Multi-touch support refers to the system's extended support for multi-touch interaction on touch devices. For example, it can simultaneously track the positions of multiple touch points, calculate the force field superposition effect generated by each touch point, and implement gesture recognition, such as pinching to adjust the force field strength.

[0105] Personalized reaction coefficients assign slightly different reaction coefficients to different particles, adding natural diversity to group movements. For example, reaction sensitivity is adjusted based on particle size, with larger particles reacting more slowly. Force effects are adjusted based on the particle's current speed, simulating different inertias. Small random factors are applied to make group behavior more natural and less rigid.

[0106] This adaptive force field interaction system makes user interaction with particles extremely intuitive and engaging. Whether hovering, moving, or clicking, particles react naturally and intuitively, greatly enhancing the interactive experience of the web page.

[0107] Traditional particle systems often move in infinite space, lacking a clear sense of boundaries. This application implementation provides a boundary collision and constraint simulation system based on virtual geometric bodies, providing a clear spatial framework for particle motion and implementing boundary collision and constraint simulation technology, which is the second core point of this system. The implementation of this system includes the aforementioned geometric boundary definition of the particle motion space, as well as boundary detection algorithms, physical rebound simulation, boundary correction mechanisms, and visual boundary prompts.

[0108] Among them, the boundary detection algorithm means that the system performs boundary detection on each particle in each frame update to determine whether the particle exceeds the boundary in any direction of X, Y, or Z, and calculates the distance and normal direction of the particle to the nearest boundary to detect whether a collision response needs to be triggered.

[0109] Physical bounce simulation simulates the actual physical bounce of particles when they hit a boundary. For example, this involves inverting the particle's velocity component in the direction of impact, applying energy loss coefficients to simulate inelastic collisions, and calculating the bounce angle to ensure compliance with the physical principle that the angle of incidence equals the angle of reflection.

[0110] The boundary correction mechanism is implemented to prevent particles from crossing boundaries due to floating-point calculation errors or high-speed motion. Upon detecting a particle crossing a boundary, the system immediately corrects its position to the inside of the boundary. A small random displacement is applied to prevent particles from getting stuck on the boundary. In extreme cases, emergency measures are implemented, such as resetting the particle to the center of the space.

[0111] Visual boundary cues refer to the system selectively rendering boundary outlines or corner markers to enhance the user's perception of spatial extent. For example, semi-transparent lines can be drawn to represent cube edges, brief visual feedback effects can be drawn at boundary collision points, and boundary visibility can be adjusted based on particle density.

[0112] This boundary collision and constraint simulation technology gives the particle effects a clear sense of spatial structure. The particle rebound behavior adds dynamism and fun to the system, while also providing users with a clear perception of interactive boundaries.

[0113] The speed control and physics simulation system can make particle motion more consistent with the physical laws of the real world. This implementation primarily involves a speed limit control strategy, nonlinear damping simulation control strategy, motion inertia simulation strategy, micro-perturbation simulation strategy, and time-based physical integration simulation strategy. This is the fourth core point of this system. Thus, the motion of three-dimensional particles is managed using at least one of these strategies: speed limit control strategy, nonlinear damping simulation control strategy, motion inertia simulation strategy, micro-perturbation simulation strategy, and time-based physical integration simulation strategy.

[0114] The velocity cap control strategy involves limiting particle velocity through a velocity amplification algorithm to prevent it from increasing indefinitely. For example, the modulus of the particle's current 2D velocity is calculated and compared to a preset maximum velocity threshold. If the modulus exceeds the threshold, the particle's velocity components in all directions are scaled proportionally while maintaining the direction of motion.

[0115] The nonlinear damping simulation control strategy simulates natural damping effects such as air resistance. For example, the speed decay coefficient (speed decay) is set to a value slightly less than 1, making the damping effect more pronounced as the particle speed increases. This ensures that the damping effect in particle motion conforms to the law of quadratic resistance. At extremely low speeds, the speed control and physics simulation systems will apply a minimum speed threshold to prevent particles from coming to a complete standstill, which will affect the particle animation.

[0116] The motion inertia simulation strategy involves the system simulating the inertia of an object. For example, it determines the current velocity of a particle and controls its response to external forces (such as touch or click forces) based on the particle's current velocity. The greater the velocity, the slower the change in direction caused by the external force, simulating the particle's realistic mass. A smooth transition strategy is also applied to make the particle's velocity changes more natural.

[0117] The micro-perturbation simulation strategy is to prevent the particle system from falling into complete stillness or mechanized periodic motion. Based on the micro-perturbation simulation strategy, small and random forces are periodically applied during the particle motion to simulate the influence of natural factors such as Brownian motion or air flow. The intensity of the perturbation can be dynamically adjusted according to the overall activity of the particles.

[0118] The time-based physics integration strategy means that the system uses a time-based physics integration method, rather than a frame-based one. Specifically, when updating particle animations, the system uses a time-based physics integration method, recording the time difference between the previous and current frames of the particle animation and calculating the particle displacement based on the actual elapsed time. This ensures consistent physical behavior across different display devices and frame rates.

[0119] In this way, the motion control of three-dimensional particles based on speed control and physical simulation systems makes the particle motion conform to physical laws and have visual beauty, and prevents particles from making counterintuitive movements, ensuring that the overall particle system exhibits an elegant dynamic balance.

[0120] To enhance user experience and aesthetics, this application also designs a dynamic color and visual feedback system, which is the fifth core feature of this system. The implementation of this color and visual feedback system involves HSL-based color models, dynamic color changes, visual coherence maintenance, and behavior-triggered visual emphasis.

[0121] The HSL-based color model refers to the system using the HSL (Hue-Saturation-Lightness) color model instead of the traditional RGB. This model makes it easier to achieve harmonious color schemes, facilitate hue gradients and brightness adjustments, and supports translucency (HSLA, where H stands for Hue, S for Saturation, L for Lightness, and A for Alpha) to enhance layering.

[0122] Dynamic color changes mean that particle color changes dynamically based on a variety of factors. For example, you can color based on spatial mapping of particle position, dynamic coloring based on particle velocity (faster speed, brighter color), and feedback coloring based on user interaction (greater force, more pronounced color change).

[0123] Maintaining visual consistency means smoothing color transitions to avoid visual discomfort caused by sudden color changes. For example, color gradients use interpolation rather than direct replacement, introducing delays and damping to color changes, keeping the overall color tone within a preset harmonious range.

[0124] The theme color adaptation mechanism allows the system to automatically adapt to a website's brand or theme colors. For example, it analyzes the dominant hue of a page, extracts basic color values, and automatically generates a harmonious color scheme based on color theory. It also supports switching between light and dark modes and seasonal theme changes.

[0125] Behavior-triggered visual emphasis refers to the system implementing visual emphasis effects based on particle behavior. For example, a brief brightness boost or color change occurs during collision, a trailing effect enhances the sense of movement during rapid motion, and a temporary increase in color saturation when subjected to a force field.

[0126] This color and visual feedback system not only enhances the aesthetics of special effects, but also provides users with intuitive feedback on system status through visual changes, greatly improving the immersion and satisfaction of the interaction.

[0127] In another implementation of the present application, the particle animation generation system may further include other systems for implementing other functions, which may be configured as needed.

[0128] The particle animation generation system provided by this application adopts a modular design concept, dividing the entire particle animation generation system into multiple functionally independent and interoperable system modules. Based on the front-end web technology stack, it mainly uses HTML5 Canvas as a rendering medium and combines JavaScript language to implement complex calculation logic and interactive functions.

[0129] The particle animation generation system uses lightweight three-dimensional space simulation technology, which reduces the technical threshold and performance requirements for creating three-dimensional interactive effects on the web; a physics-based interactive force field system is designed, breaking through the simple "hover-change" mode in traditional web page interaction and creating a very realistic interactive experience; at the same time, it has a constrained geometric space particle behavior system, which is different from the traditional particle system that moves in boundless or simple boundary space, ensuring the continuity of visual effects and physical realism; an adaptive performance optimization system is implemented, which can dynamically adjust the complexity of the particle system according to the display device performance, network conditions and user interaction intensity, ensuring that the particle system can provide the best performance-experience balance on various display devices; a visual-behavior collaborative feedback system is established, realizing a behavior-triggered visual feedback mechanism, greatly enhancing the comprehensibility and satisfaction of the interaction.

[0130] Next, the particle animation generation method provided by the implementation of this application, that is, the particle special effect generation method is described in detail.

[0131] Figure 2 A particle animation generation method provided for the implementation of this application is as follows: Figure 2 As shown, the generation method includes the following steps.

[0132] Step S301: Determine first configuration information corresponding to the particle animation.

[0133] Step S302: creating a three-dimensional region in the virtual three-dimensional coordinates according to the first configuration information, and creating three-dimensional particles in the three-dimensional region.

[0134] Step S303 : rotating the virtual three-dimensional coordinate system so that the three-dimensional region is tilted.

[0135] In step S304, the rotated virtual three-dimensional coordinate system is projected onto a two-dimensional canvas corresponding to a display window for presenting particle animation, so that the three-dimensional area corresponds to a two-dimensional area of the two-dimensional canvas, and the three-dimensional particles are displayed in the two-dimensional area to form a particle animation.

[0136] Specifically, regarding the first configuration information in step S301, the first configuration information includes attribute information of 3D particles corresponding to the particle animation, rendering information of the 3D particles corresponding to the particle animation, and attribute information of the 3D region.

[0137] Specifically, the attribute information of three-dimensional particles includes, for example, the motion attribute information and / or visual attribute information of the three-dimensional particles. The motion attribute information of the three-dimensional particles includes, for example, the movement direction and speed of the particles. The visual attribute information of the three-dimensional particles includes, for example, the number, size, position, color, etc. of the particles.

[0138] Exemplarily, when the particle lifecycle management system is started, all particle objects are created in advance and stored in an object pool. Using an efficient random number generation algorithm and array operations, the initial attribute settings of all particles are completed according to the first configuration information of the three-dimensional particles in one initialization loop, such as the initial motion velocity vector (vx, vy, vz) of the particle (as an example of motion attribute information of the three-dimensional particle), such as the random position (x, y, z) of the particle in the three-dimensional space and visual attributes such as size and quantity (as an example of visual attribute information of the three-dimensional particle).

[0139] Furthermore, the rendering information of the three-dimensional particles corresponding to the particle animation includes the selection of the rendering technology, rendering method and rendering cycle adopted by the color and visual feedback system.

[0140] Rendering technologies include those based on the HSL (Hue-Saturation-Lightness) color model. Rendering methods include particle position-based rendering, particle velocity-based rendering, and user interaction-based rendering. Furthermore, smooth transitions are also possible. Furthermore, rendering methods can be tailored to specific application scenarios. Rendering cycles can be timed.

[0141] In the implementation of this application, in order to enhance the user experience and the aesthetics of particle animation, color rendering of three-dimensional particles is performed through a color and visual feedback system.

[0142] In terms of color rendering of three-dimensional particles: the HSL (Hue-Saturation-Lightness) color model (as an example of rendering technology) is used for color rendering instead of the traditional RGB scheme. This makes it easier to achieve a harmonious color scheme, more convenient to achieve hue gradients and brightness adjustments, and supports translucency effects (HSLA) to enhance the sense of layering.

[0143] In terms of dynamic color changes: particle color supports dynamic changes based on multiple factors. For example, it can be colored based on the spatial mapping of the particle position (as an example of rendering processing based on the particle position), it can be dynamically colored based on the particle movement speed (as an example of rendering processing based on the particle movement speed). The faster the particle speed, the brighter the color. It can be colored based on feedback from user interaction (as an example of rendering processing based on user interaction). The greater the force on the particle, the more obvious the color change.

[0144] To maintain color consistency: The color and visual feedback system avoids visual discomfort caused by sudden color changes by smoothing color transitions. It uses an interpolation algorithm rather than direct replacement to achieve particle color gradients (as another example of a rendering method), and introduces delay damping when particles change color. For the entire particle animation, the overall color tone is guaranteed to be within a preset harmonious range (as an example of rendering processing based on a smooth transition method).

[0145] In the adaptation of particle animation to application scenarios: the color and visual feedback system can automatically adapt to the brand color or theme color of the website. First, it analyzes the main color of the page and extracts the basic color values from it. Then, it automatically generates a coordinated color scheme based on color theory. It also supports switching between light and dark modes and seasonal theme changes (as an example of rendering processing based on the corresponding application scenario).

[0146] Regarding the visual effects caused by particle behavior: The color and visual feedback system has developed a visual emphasis effect based on particle behavior, which produces a brief brightness increase or color change when particles collide, adds a tail effect to enhance the sense of particle movement when three-dimensional particles move quickly, and temporarily increases the color saturation of particles as a prompt when particles are affected by force fields.

[0147] Using the above-mentioned color and visual feedback system for 3D particle rendering not only enhances the aesthetics of the 3D particle effects, but also provides users with intuitive feedback on the status of the particle system through visual changes, greatly improving the immersion and satisfaction of the interaction.

[0148] Furthermore, the attribute information of the three-dimensional region includes but is not limited to the number, size, position, etc. of the three-dimensional region.

[0149] Furthermore, the size of the 3D area is proportional to the viewport size, and is generally set to 60% of the window size.

[0150] Furthermore, the position of the three-dimensional area is represented by the center point coordinates (cubeCenterX, cubeCenterY, cubeCenterZ), the side length (cubeSize), and the tilt angle.

[0151] The three-dimensional area is a cube (also known as a cube). In this way, the three-dimensional area clearly marks the activity space of the particles and provides a clear spatial framework for the particle movement.

[0152] In a particle animation generation method disclosed in another implementation of the present application, the particle animation generation method also includes: determining the first configuration information corresponding to the particle animation through at least one of the following information: basic configuration information corresponding to the particle animation; particle attribute configuration logic information corresponding to the particle animation; performance information of the display environment corresponding to the particle animation, the display environment including the display device and / or the network where the display device is located; and scene information corresponding to the application scene of the particle animation.

[0153] Specifically, the basic configuration information corresponding to the particle animation includes but is not limited to the number of particles, the size of the cube, force field parameters and other basic configurations.

[0154] Furthermore, the number of particles during particle animation generation is managed using a particle pool. By creating a fixed number of particle objects, memory fragmentation caused by frequent creation and destruction of objects during the operation of the particle lifecycle system is avoided; the size of the cube is proportional to the viewport size; the force field parameters are the influence radius and strength parameters of the force field, as well as the inverse proportional relationship between the force field's force attenuation with distance.

[0155] Specifically, the particle attribute configuration logic for particle animations uses the 3D space simulation system to influence the visual properties of particles through their Z-axis coordinates. For example, by simulating perspective in 3D space, particles farther away appear smaller. The particle drawing order and transparency are adjusted based on their Z-axis coordinates, enhancing the spatial layering of the particle animation.

[0156] Specifically, the performance information of the display environment corresponding to the particle animation is obtained by the particle system monitoring the actual rendering frame rate. When the frame rate drops, the number of particles is automatically reduced or the physical calculation is simplified. When the display device performance is sufficient and the frame rate is stable, the number of particles is increased or advanced visual effects are activated. This can improve the animation visual effect while providing users with a smooth visual experience.

[0157] Specifically, the scene information of the particle animation corresponding to the application scenario is the running scenario of the particle animation, such as browsers, games, etc. Multiple groups of configuration schemes are preset for different scenarios, the number of particles is adaptively adjusted based on the performance of the display device, and the particle movement speed, force field range, attenuation coefficient, maximum speed, etc. of the particle animation are preset based on the user interaction density.

[0158] In a particle animation generation method disclosed in another implementation of the present application, the particle attribute configuration logic information includes: simulating the perspective relationship between the three-dimensional coordinate system and the three-dimensional space, and determining the attribute value of the target attribute of the three-dimensional particle according to the rule that the coordinate value of the Z-axis coordinate of the three-dimensional particle is positively correlated with the attribute value of the target attribute of the three-dimensional particle.

[0159] Specifically, the target attributes can be, for example, the aforementioned visual attributes, motion attributes, etc., and the attribute values (Z values) of the target attributes include, for example, the size, transparency, and speed of the particles. The smaller the Z value, the smaller the particle drawing size, and the smaller the Z value, the higher the particle transparency. The Z value affects the projection speed of the particles in the XY plane, simulating the perspective effect, making the particle motion effect more realistic, and the visual effect of the particle animation closer to reality.

[0160] Furthermore, regarding step S302 , a three-dimensional region is created in the virtual three-dimensional coordinates according to the first configuration information, and three-dimensional particles are created in the three-dimensional region.

[0161] Illustratively, when the aforementioned system is started, all particle objects are pre-created and stored in an object pool, thereby avoiding performance overhead and memory fragmentation caused by dynamic creation and destruction of objects at runtime.

[0162] Furthermore, when the page is a browser page, the system uses, for example, the request AnimationFrame API instead of the traditional timer, to achieve smoother animation effects and reduce unnecessary calculations; the request Animation Frame API can adapt to the different refresh rates of different browsers and display devices, ensuring that the animation can run at a consistent frame rate in various environments; most modern browsers have optimized the request Animation Frame, which can better utilize hardware acceleration and other performance optimization technologies, thereby improving the performance and smoothness of the animation.

[0163] When initializing particle properties, the initial property settings of the particle include: random position in three-dimensional space (x, y, z); initial motion velocity vector (vx, vy, vz); and particle visual properties, such as particle size and color.

[0164] The system uses an efficient random number generation algorithm and array operations, so that the initialization settings of all particles can be completed in one cycle.

[0165] To adapt to the different frame rates caused by the performance of different display devices, the system implements a mechanism to dynamically adjust the simulation accuracy based on the performance: the particle system constantly monitors the actual rendering frame rate. When the frame rate drops, it automatically reduces the number of particles and / or simplifies the physical calculations. When the display device performance is sufficient, it increases the number of particles and / or enables advanced visual effects.

[0166] The use of the above-mentioned high-performance particle generation and management technology enables the particle system to smoothly render thousands of interactive particles on ordinary display devices, providing users with a smooth visual experience.

[0167] Furthermore, in a particle animation generation method disclosed in another implementation of the present application, creating three-dimensional particles includes: grouping the three-dimensional particles corresponding to the particle animation to obtain multiple three-dimensional particle groups; and performing a one-time rendering process on the three-dimensional particles in each three-dimensional particle group using the same rendering configuration information.

[0168] Specifically, during the generation of high-performance particles, in order to reduce the overhead of switching between Canvas drawing states, the system groups three-dimensional particles according to characteristics including but not limited to color and size to obtain multiple three-dimensional particle groups with the same characteristics. Canvas uses the same drawing context configuration to draw the same group of particles at one time. This reduces the number of style switching and path creation times, and speeds up the rendering speed and quality of particle animation.

[0169] Furthermore, the system uses a pre-configured intelligent rendering strategy to redraw only the changed areas rather than the entire canvas during rendering, which speeds up rendering and reduces resource usage to optimize the user experience.

[0170] Furthermore, in step S303 , the virtual three-dimensional coordinate system is rotated so that the three-dimensional area is tilted.

[0171] In a particle animation generation method disclosed in one implementation of the present application, a three-dimensional coordinate system takes the center of a two-dimensional canvas as its origin, the X-axis and the Y-axis are located on the two-dimensional canvas, the Z-axis is perpendicular to the two-dimensional canvas and is directed toward the side of the two-dimensional canvas facing the user, and the rotation processing is to rotate the three-dimensional coordinate system 45 degrees in a clockwise direction.

[0172] Furthermore, the system translates the drawing origin of the Canvas to the center of the canvas according to the first configuration information, which simplifies the rotation and scaling calculations and makes the special effects visually present a centrally symmetrical aesthetic. When creating the coordinate axes according to the first configuration information, the X-axis points to the right, the Y-axis points downward, and the Z-axis is perpendicular to the screen and points outward. At the same time, to create a sense of three-dimensionality, the system rotates the standard coordinate system 45 degrees, so that the square originally in the XY plane visually appears as a diamond, thereby creating the illusion of a three-dimensional cube. For any point (x, y) on the plane, after rotating by an angle of θ, in the new coordinates (x', y'), x' = x·cos(θ) - y·sin(θ), y' = x·sin(θ) + y·cos(θ). When θ is 45 degrees, that is, π / 4, the rotation transformation is relatively simple, and can visually create the illusion of three-dimensional space, and make the special effects present the beauty of central symmetry. The centralized processing method does not require a complex 3D rendering library, and only the basic Canvas 2D API can be used to create a convincing three-dimensional effect, which greatly reduces the requirements for display device performance for three-dimensional particle animation generation while ensuring wide compatibility.

[0173] In this way, the three-dimensional sense of the generated particle animation is enhanced by rotating the coordinate system. A rotation angle of 45 degrees is used to rotate the square originally on the XY plane into a diamond, creating the illusion of a three-dimensional cube. At the same time, the 45-degree rotation angle makes the rotation simpler and can also visually create the illusion of three-dimensional space.

[0174] Furthermore, when generating three-dimensional particles, the particle Z-axis coordinate is used to affect the particle's visual properties, including: size scaling: the smaller the particle's Z value (i.e., the farther away from the observer), the smaller the particle's drawing size; transparency adjustment: the smaller the particle's Z value, the higher the transparency; movement speed: the Z value affects the particle's projection speed in the XY plane.

[0175] In this way, the size scaling of three-dimensional particles conforms to the visual phenomenon of showing larger objects when they are closer and smaller when they are farther away. The adjustment of transparency creates a sense of spatial hierarchy in the particle animation, which conforms to the visual differences caused by the distance between objects in reality. The difference in movement speed simulates the perspective effect of particles.

[0176] At the same time, the Canvas drawing origin is translated to the center of the canvas, which simplifies the calculation of particle rotation and scaling, making the particle animation visually present a centrally symmetrical beauty.

[0177] The advantage of using the above-mentioned virtual three-dimensional space construction technology is that it does not require a complex 3D rendering library, and can create convincing three-dimensional effects using only the basic Canvas 2D API. This greatly reduces the particle system's requirements for display device performance, while also ensuring the particle system's wide compatibility.

[0178] In a particle animation generation method disclosed in another implementation of the present application, the two-dimensional area is in a diamond shape.

[0179] Specifically, the three-dimensional stereoscopic area is created by the three-dimensional space simulation system based on the attribute information of the three-dimensional stereoscopic area in the first configuration information. After undergoing a 45-degree rotation of the coordinate axis and projecting the three-dimensional stereoscopic area onto a two-dimensional plane, it appears as a rhombus.

[0180] Next, step S304 is executed to project the rotated virtual 3D coordinate system onto the 2D canvas corresponding to the particle animation, so that the 3D area corresponds to a 2D area on the 2D canvas, and the 3D particles are displayed in the 2D area to form the particle animation.

[0181] Exemplarily, the three-dimensional region in the rotated virtual three-dimensional coordinate system and the three-dimensional particles in the three-dimensional region are projected onto a two-dimensional canvas to form a particle animation.

[0182] Furthermore, in scenarios with low display device performance and / or a small number of particles, the particle lifecycle management system uses Canvas 2D context rendering technology. When the number of particles is on the order of 1,000-2,000, Canvas 2D can provide sufficient performance support and is supported by almost all modern browsers without the need for additional plug-ins or special hardware acceleration. This greatly reduces the technical threshold and performance requirements for creating three-dimensional interactive web effects, allowing high-quality spatial interactive experiences to be deployed on various websites without worrying about compatibility and performance issues. This is especially suitable for scenarios such as corporate websites and product displays that need to attract user attention while ensuring wide access and compatibility.

[0183] Further, Figure 3 Another implementation of this application discloses a particle animation generation method, such as Figure 3 As shown, when the particle animation is updated, the generation method includes the following steps.

[0184] Step S401, determining second configuration information corresponding to the particle animation;

[0185] Step S402: creating updated three-dimensional particles according to the second configuration information to update the particle animation.

[0186] Specifically, regarding the second configuration information in step S401, the second configuration information includes attribute information of the three-dimensional particles and rendering information of the three-dimensional particles.

[0187] Specifically, the attribute information of the three-dimensional particles of the second configuration information corresponding to the particle animation includes but is not limited to the number, movement and color of the particles; frequency data can be obtained through an audio analyzer, and audio features can be mapped to particle size, speed, color and other features; the color, size and activity of the particles can also be used to represent the emotional tendency, influence and effectiveness of the data.

[0188] The rendering information of the three-dimensional particles includes, for example, the rendering technology, rendering method, and rendering cycle selection adopted by the rendering core system.

[0189] In a particle animation generation method disclosed in another implementation of the present application, the particle animation generation method also includes: determining second configuration information of the particle animation through at least one of the following information: user interaction information corresponding to the three-dimensional particles; movement information of the three-dimensional particles in the three-dimensional stereoscopic area; data source information of the data corresponding to the three-dimensional particles; performance information of the display environment corresponding to the particle animation, and the display environment includes a display device.

[0190] Specifically, the user interaction information corresponding to the three-dimensional particles may be interaction information such as the user clicking a mouse, touching a screen, etc., or other interaction means such as user voice may be used.

[0191] For example, when the display device is a touch device, it supports multi-touch interaction, can track the positions of multiple touch points at the same time, and superimpose the force field effects generated by each touch point, and also realize the recognition of operation gestures, such as adjusting the force field strength through pinch gestures.

[0192] Specifically, the movement information of the three-dimensional particles in the three-dimensional region includes collisions between the three-dimensional particles and the boundaries.

[0193] Specifically, the data source information of the data corresponding to the three-dimensional particles includes but is not limited to sound, data volume, etc.

[0194] In the implementation of the present application, based on user interaction, a force field model is designed, a force field range is calculated, and a velocity component is calculated so that particle motion is updated when a user clicks or touches the screen.

[0195] Specifically, the influence radius of the force field (mouse Repulsion Radius) and the strength parameter of the force field (mouse Repulsion Force) are defined, and a mathematical relationship is established in which the force attenuates with distance, usually using an inverse proportional relationship.

[0196] When the user moves the mouse or touches the screen, the user interaction processing system determines the mapping position of the touch point in the three-dimensional coordinate space (as an example of the second configuration information), determines the force field range, and sends the second configuration information to the adaptive force field interaction system. The adaptive stance interaction system calculates the distance and direction for each particle within the force field range: calculates the Euclidean distance from the particle to the center of the force field, calculates the force attenuation coefficient based on the Euclidean distance, and determines the direction vector of the force by calculating the angle through the inverse tangent function.

[0197] After obtaining the direction and magnitude of the force, the system decomposes the force field into velocity component increments in each direction through adaptive force component calculation: trigonometric functions (cosine and sine) are used to decompose the force into horizontal and vertical components, and then the magnitude of the force is calculated based on the distance and the preset attenuation curve. The global adjustment factor (speed factor) is then applied to control the response sensitivity.

[0198] Furthermore, when the force field affects the particles, to avoid sudden changes at the edge of the force field, the system adopts a smooth transition mechanism: gradual attenuation is used at the edge of the force field, that is, easing functions are used to make the force changes more natural, and small random perturbations are added to avoid the overall mechanical movement of the particle animation.

[0199] In a particle animation generation method disclosed in another implementation of the present application, when the number of particles is large, the system will use space partitioning technology (grid partitioning or quadtree) to optimize collision detection and force field calculation.

[0200] Furthermore, the system uses space partitioning technology based on the three-dimensional space simulation system to divide the three-dimensional space into multiple areas, and records the particles in each area. When performing collision detection and force field calculation on particles, only the interactions between particles in adjacent areas are calculated, and no pairwise calculations are performed on global particles, thus reducing the running occupancy of particle animation.

[0201] For example, when generating a large number of particles, the system uses spatial partitioning techniques to optimize collision testing and force field calculations. For example, grid partitioning or quadtrees divide the three-dimensional volume into multiple regions and record the particles within each region. When generating animations, the system only calculates the interactions between particles in adjacent regions, rather than performing pairwise calculations on all particles globally. This reduces the computational effort required to generate animations, eases animation rendering pressure, and speeds up updates in local regions, avoiding main thread blocking.

[0202] Furthermore, when the display device is a touch device, the particle system performs multi-touch interaction expansion: it can track the positions of multiple touch points at the same time and superimpose the force field effects generated by multiple touch points. In this way, by tracking the positions of multiple touch points, gesture recognition can be achieved, such as by pinching the gesture bar force field strength.

[0203] To achieve the diversity of particle group motion, the system assigns slightly different reaction coefficients to different particles: the reaction sensitivity is adjusted according to the size of the particle, making large particles react more slowly, and the force effect is adjusted according to the current speed of the particle to simulate different motion inertias. At the same time, tiny random particles are applied in the particle animation to make the group behavior more flexible.

[0204] This system makes user interaction with particles extremely intuitive and engaging. Whether hovering, moving, or clicking, particles react naturally and intuitively, greatly enhancing the interactive experience of the webpage.

[0205] In a particle animation generation method disclosed in another implementation of the present application, the motion information also includes: information about the area where the three-dimensional particles are located in the three-dimensional region; and collision information between the three-dimensional particles and the boundary of the three-dimensional region.

[0206] Specifically, when the number of particles is large, the adaptive stance interaction system will use spatial partitioning technology to divide the three-dimensional area into multiple parts, and only calculate the mutual influence between particles in adjacent areas.

[0207] For example, in each frame of particle animation update, boundary detection is performed on each particle, and based on the information of the area where the three-dimensional particle is located in the three-dimensional stereo area, it is determined whether the particle exceeds the boundary in any of the X, Y, and Z directions, the distance and normal direction of the particle to the nearest boundary are calculated, and it is detected whether a collision response needs to be triggered to obtain collision information between the three-dimensional particle and the boundary of the three-dimensional stereo area.

[0208] In a particle animation generation method disclosed in another implementation of the present application, the method also includes: rendering the boundary of a two-dimensional area on a two-dimensional canvas; and adjusting the visibility of the boundary of the two-dimensional area on the two-dimensional canvas according to the density of three-dimensional particles around the boundary of the three-dimensional stereoscopic area; and rendering the collision visual effect of the three-dimensional particles and the boundary of the three-dimensional stereoscopic area on the two-dimensional canvas.

[0209] Specifically, the boundary of the two-dimensional area is the boundary of the projection of the three-dimensional coordinate system established by the three-dimensional space simulation system on the two-dimensional canvas. The edges of the cube in the three-dimensional area are represented by translucent lines in the two-dimensional canvas; the visibility of the boundary is adjusted according to the particle density, and a short visual feedback effect is drawn at the collision point of the boundary.

[0210] This selective rendering of boundary contours or corners enhances the user's perception of spatial range. The boundary collision simulation effect gives the particle special effects a clear sense of spatial structure, while also providing users with a clear perception of interactive boundaries.

[0211] In a particle animation generation method disclosed in another implementation of the present application, rendering the boundary collision effect of three-dimensional particles and a three-dimensional solid area on a two-dimensional canvas includes: determining the rebound velocity component and rebound angle of the three-dimensional particles in the collision direction; and simulating the non-completely elastic collision of the three-dimensional particles according to the energy loss function to achieve the collision effect.

[0212] Specifically, the rebound velocity component and rebound angle of three-dimensional particles in the collision direction must conform to the laws of physics in reality. The calculation of the rebound velocity component is based on the principles of vector projection and reflection. First, the projection of the velocity vector on the normal vector is calculated to obtain the vector projection. Then, the rebound velocity vector is calculated based on the vector projection and the reflection principle. In an elastic collision, the velocity component normal to the collision surface will reverse, while the tangential velocity component remains unchanged. Secondly, the rebound angle is calculated based on the rebound velocity vector and the normal vector of the collision surface. An energy loss function is used to control the direction and speed of movement of the particles according to the rebound angle to more realistically describe the collision process and simulate the energy conversion caused by factors such as friction and deformation in actual non-perfectly elastic collisions, making the simulation results closer to real physical phenomena.

[0213] In another particle animation generation method disclosed in another implementation of the present application, the method further includes: when detecting that a three-dimensional particle passes through a boundary of a three-dimensional stereoscopic area, correcting the position of the three-dimensional particle so that the three-dimensional particle is within the three-dimensional stereoscopic area.

[0214] Specifically, in order to prevent particles from crossing the boundary due to floating-point calculation errors or high-speed movement, a boundary correction mechanism is executed after detecting that the particle has crossed the boundary. By modifying the particle's attribute information (such as the particle's position information), it is immediately corrected to the inside of the boundary. During the correction process, a small random displacement is applied to prevent the particle from getting stuck on the boundary. In extreme cases, emergency processing is initiated to reset the particle to the center of the space. In this way, particles are prevented from crossing the boundary due to floating-point calculation errors or high-speed movement, ensuring the stability and smoothness of the particle animation.

[0215] In a particle animation generation method disclosed in another implementation of the present application, the method also includes: managing the movement of three-dimensional particles through at least one of the following strategies: speed upper limit control strategy; nonlinear damping simulation control strategy; motion inertia simulation strategy; micro-disturbance simulation strategy; time-based physical integration simulation strategy.

[0216] Specifically, the speed upper limit control strategy uses a speed limiting algorithm to prevent the particle speed from increasing indefinitely. The modulus of the particle's current two-dimensional plane velocity is calculated and compared with the preset maximum speed threshold. If the modulus of the two-dimensional plane exceeds the threshold, the velocity components in each direction are scaled proportionally while keeping the direction of motion unchanged.

[0217] Specifically, the nonlinear damping simulation control strategy simulates the natural damping effect of nonlinear damping such as air resistance through the velocity attenuation coefficient. The velocity attenuation coefficient is usually set to a value slightly less than 1, so that the greater the speed, the more obvious the damping effect, which conforms to the quadratic resistance law in physics. When the speed is extremely low, a minimum speed threshold is applied to prevent the particles from being completely still and affecting the stability and integrity of the particle animation.

[0218] Specifically, the motion inertia simulation strategy simulates the motion inertia of an object, that is, determining the current motion speed of the particle, and controlling the particle's response to external forces (such as the force of touching the screen or clicking the screen) based on the particle's current motion speed. The greater the motion speed, the slower the direction change, to simulate the particle's sense of mass, and apply smooth transitions to make the particle speed change more natural, avoid sudden changes in particle speed, and ensure the authenticity of the particle animation.

[0219] Specifically, in order to prevent the particle system from falling into a completely static or mechanized periodic motion, a micro-perturbation simulation strategy is introduced into the particle motion. The micro-perturbation simulation strategy is to periodically apply small random forces during the particle motion to simulate the interference caused by natural factors such as Brownian motion or air flow, and the disturbance intensity can be dynamically adjusted according to the overall activity of the particle system.

[0220] Specifically, the time-based physical integration simulation strategy uses a time-based physical integration method when calculating the position of three-dimensional particles. The displacement is calculated by recording the time difference between the previous frame and the current frame, ensuring that the particle animation can maintain consistent physical behavior under different display devices and different frame rates.

[0221] This speed control and logistics simulation system ensures that particle motion conforms to physical laws while also possessing visual beauty, preventing particles from moving in ways that violate user intuition, and allowing the particle system as a whole to exhibit an elegant dynamic balance.

[0222] Furthermore, some current conventional simple Canvas animations are purely two-dimensional, while complex 3D effects typically rely on Web GL. In summary, the particle animation generation method provided by the present application, based on the various processing systems included in the particle animation generation system, achieves a technique for simulating three-dimensional space and particle behavior on a two-dimensional Canvas. In other words, without using Web GL, the standard Canvas 2D API can be used, combining the aforementioned specific mathematical transformations (such as tilted coordinate transformations, perspective projection calculations) and visual encoding (Z-axis effects, transparency, and even projection speed on a two-dimensional plane) to create and simulate a three-dimensional space and the movement of particles within it. This enables convincing three-dimensional interactive effects without the need for a heavyweight 3D rendering library. Through carefully designed mathematical transformations and visual processing, the sense of depth and space of three-dimensional particles is successfully created, while maintaining extremely low technical barriers and broad device compatibility. This lowers the technical barriers and performance requirements for creating three-dimensional interactive effects for the web, enabling high-quality spatial interactive experiences to be deployed on various websites without compatibility or performance concerns. This is particularly suitable for scenarios such as corporate websites and product showcases that require user attention while ensuring broad accessibility.

[0223] The core of this technology includes the aforementioned establishment of a virtual three-dimensional coordinate system, and projecting the three-dimensional coordinate points onto a two-dimensional canvas through mathematical formulas (such as rotation matrix and perspective division). The Z coordinate is not only used for sorting and visual size and transparency adjustment, but can also affect the movement speed of particles on the X and Y plane projections to enhance the perspective effect.

[0224] Furthermore, current traditional particle interaction methods are mostly simple mouse-following or preset animation triggering. In summary, the particle animation generation method provided by the implementation of this application designs a force field centered on user input (e.g., mouse position) to simulate and generate physical properties (e.g., strength, radius of influence, and attenuation with distance). This force field applies a calculated force, decomposed into three-dimensional coordinate axes, to particles within the field, thereby driving particle motion. Thus, by designing a highly natural force field interaction model, this breaks through the simple "hover-and-change" model of traditional web page interaction. Based on the principles of physics, it implements distance-dependent nonlinear force feedback, making the particle response to user input more natural, smooth, and intuitive. In three-dimensional particle motion, not only the magnitude and direction of the force are taken into account, but also real-world physical properties such as inertia and damping are simulated, creating a highly realistic interactive experience. This can significantly enhance the depth of user interaction and emotional connection with the webpage, significantly extending user dwell time. This natural force field interaction management is particularly suitable for scenarios requiring deep user connections, such as brand promotion, user onboarding, and product demonstrations, and has significant application value.

[0225] The core of this technology implementation includes the aforementioned real-time capture of user input and mapping it to the source point of the force field, calculating the three-dimensional spatial distance between each particle and the force field source point, calculating the magnitude and direction of the force according to a preset force model (such as inverse decay), applying the calculated three-dimensional force vector to the particle's acceleration (or directly changing the speed), simulating the physical force effect, and including smooth transition processing to avoid sudden force changes.

[0226] Furthermore, many current particle systems either move in unbounded spaces or have boundaries defined by simple two-dimensional rectangles. In summary, the particle animation generation method provided by the present application differs from traditional particle motion in unbounded or simply bounded spaces by creatively designing a particle constraint and physical collision simulation technology based on a specific geometric space (e.g., a tilted cube simulated via a 2D canvas, i.e., a constrained geometric space). Within this clearly defined three-dimensional space, a tilted cube is defined as a precise geometric boundary. Particles move and collide according to complex physical rules, enabling collision detection and physical rebound between particles and this complex three-dimensional boundary. This creates a visual effect that is both orderly and random, while also enabling precise boundary collision detection and rebound calculation, ensuring visual coherence and physical realism. This particle animation design with clear geometric boundaries provides a new visual structural element for web design, transforming particle effects from a disordered background embellishment into a visual entity with clear morphology and behavioral characteristics. This structured particle system is particularly suitable for applications such as data visualization, dynamic brand logo display, and interactive navigation.

[0227] The core of this technology implementation includes the aforementioned mathematical model that defines the tilted cube (such as through vertices, plane equations or transformed axis-aligned bounding boxes), developing a collision detection algorithm for the boundary of this specific three-dimensional geometric body, and determining whether the three-dimensional coordinates of the particle "penetrate" the boundary. When a collision is detected, the rebound velocity vector in three-dimensional space is calculated based on the normal of the collision point and the incident velocity, and energy loss is taken into account.

[0228] Furthermore, current simple particle systems may only have uniform linear motion or simple acceleration / deceleration. In summary, the particle animation generation method provided by the implementation of this application achieves motion control that is closer to real physical laws in a Canvas 2D simulation 3D environment, such as speed limit control, nonlinear damping (simulating air resistance, which may be related to the square of speed), motion inertia simulation, and micro-perturbation system (avoiding complete stillness or mechanical repetition), thus realizing a refined particle motion physics simulation technology.

[0229] The core of this technology includes the aforementioned application of the velocity attenuation coefficient (damping) each time the particle state is updated, checking the particle's three-dimensional velocity vector modulus, and normalizing and scaling it if it exceeds the upper limit. When calculating the force, the particle's "mass" or the influence of the current velocity on the acceleration (inertia) is considered, and small random forces or displacements (micro-perturbations) are introduced to ensure the consistency of physical behavior at different frame rates, rather than updating based on a fixed number of frames.

[0230] Furthermore, although object pooling and request animation frames are relatively common optimization methods, in summary, the particle animation generation method provided by the implementation of this application includes specific optimizations for "pseudo-3D" rendering and calculations, such as space partitioning technology (such as octrees or quadtrees / grids for projected 2D space) to accelerate neighbor searches in simulated 3D space (for collision or force field influence judgment), thus realizing performance optimization technology for simulated 3D systems.

[0231] The core of this technology includes the aforementioned method of dividing the simulated three-dimensional space into several areas when the number of particles is large, and only performing interactive calculations on particles in adjacent areas. When rendering batches, grouping optimization can be combined with Z-axis sorting. The frame rate adaptive mechanism will dynamically adjust the calculation accuracy or number of particles in the simulated three-dimensional space based on performance.

[0232] Furthermore, with the diversification of access devices, ensuring the consistency of interactive experience on various devices has become an important challenge. In this application, the performance of the display device is also taken into consideration when generating particle animation, and a complete set of performance adaptation mechanisms is implemented, which can dynamically adjust the complexity of particle display according to the performance of the display device, network conditions, and user interaction density, so that the number of particles can be adaptively adjusted, the calculation accuracy can be dynamically adjusted, the rendering strategy can be intelligently switched, etc., which can ensure that three-dimensional particle animation can provide the best performance-experience balance on various display devices. In this way, through intelligent performance adjustment, the same set of particle systems can provide a good particle animation generation experience on both high-performance desktop devices and low-power mobile devices, greatly reducing development and maintenance costs and improving the practical value of the system.

[0233] Furthermore, as digital products increasingly focus on user experience, it is crucial to provide intuitive and meaningful interactive feedback. The particle system provided by this application enables a close connection between particle behavior and visual performance, realizing a behavior-triggered visual feedback mechanism. The particle's motion state, force conditions, and degree of interaction directly affect its visual attributes such as color, size, and transparency, creating an intuitive experience of "what you see is what you do." This visual-behavior synergy mechanism enables users to intuitively understand the system state through visual changes, greatly enhancing the comprehensibility and satisfaction of the interaction. In this way, abstract data and behavior are converted into intuitive visual language, which is particularly suitable for scenarios that require clear expression of information, such as brand display, data visualization, and educational demonstrations, and has broad application prospects.

[0234] Furthermore, taking the implementation of user interaction as an example, the implementation process of particle animation in this application is as follows:

[0235] First, prepare the environment for generating particle animation. Start by setting up the HTML structure and creating an HTML skeleton with a full-screen Canvas element. Set appropriate CSS styles to ensure that the Canvas fills the page viewport and is located at the bottom layer. Also, configure the necessary meta tags to optimize the page display on the display device.

[0236] Furthermore, the Canvas context is obtained and initialized. First, the 2D drawing context of the Canvas is obtained, and the initial drawing properties such as line width and connection method are set, and the adjustment mechanism of the Canvas size adaptive viewport is implemented.

[0237] Furthermore, performance monitoring is deployed, where a frame rate monitor records the timing rendering performance, and a performance threshold is set to trigger adaptive optimization, and a performance data recording mechanism is established for subsequent analysis.

[0238] Furthermore, the particle system is initialized and the parameters are configured first, including setting basic configurations such as the number of particles, the size of the three-dimensional area, and force field parameters. The first configuration information of the three-dimensional particles is automatically adjusted according to the performance information of the display device, and multiple groups of configuration schemes are pre-set to adapt to different application scenarios.

[0239] Furthermore, a virtual three-dimensional space is constructed. The three-dimensional space simulation system defines a three-dimensional coordinate system with the center of the canvas as the origin, with the X axis pointing right, the Y axis pointing downward, and the Z axis perpendicular to the screen and pointing outward.

[0240] Furthermore, particles are generated in the virtual three-dimensional space, including creating a particle object pool, randomly distributing initial positions of particles in the virtual three-dimensional space, and assigning initial movement directions and speeds of the particles.

[0241] Furthermore, a three-dimensional region is established in the virtual three-dimensional space: the position and size of a virtual cube (as an example of a three-dimensional region) are defined, a three-dimensional region space partition data structure is established, and a spatial index required for collision detection is prepared.

[0242] Secondly, in terms of the number of three-dimensional particles generated, update frequency and rendering complexity, this application adopts a series of optimization techniques to ensure that the particle system has high performance while maintaining visual effects.

[0243] Furthermore, user interaction events are bound, such as monitoring mouse movement and click events, monitoring screen touch, sliding, and multi-touch events, and monitoring window size change time.

[0244] And perform coordinate conversion processing: realize the conversion of screen coordinates to Canvas coordinates, and then realize the coordinate mapping of Canvas coordinates to virtual three-dimensional coordinate space, and handle the coordinate scaling problem of high DPI devices.

[0245] Furthermore, in the implementation of this application, in order to improve the response speed of particle animation, event throttling and performance optimization are also performed: the event throttling mechanism is triggered to perform event fusion processing to avoid too frequent calculations, event processor optimization processing is performed to reduce computational complexity, and an event buffer is set to receive batch events to realize event batch processing.

[0246] Furthermore, particle animation rendering is performed upon receiving user interaction. First, the main rendering loop is established, for example, using request Animation Frame to create an efficient animation loop. Further time difference calculation is performed to ensure the consistency of physical updates, and a pause and resume mechanism for loop rendering is established.

[0247] Secondly, perform state updates, such as clearing the previous frame rendering content to prepare for a new frame rendering, calculating the influence of external force fields on all particles, applying physical rules to update particle positions and velocities, processing collision detection and rebound effects, and updating particle visual properties such as color and size.

[0248] Furthermore, a layered rendering strategy can be implemented during rendering: particles are sorted by depth according to the Z-axis coordinate, and each layer of particles is rendered sequentially from far to near, with transparency and size changes applied to enhance the sense of depth.

[0249] Furthermore, in the implementation of the present application, an optimization and expansion mechanism can be used when rendering and updating particle animation: adaptively adjust the rendering according to the performance of the display device, monitor the rendering performance indicators, dynamically adjust the number of particles according to the performance indicator status, and simplify the physical calculations or visual effects when the performance indicators are insufficient.

[0250] Design external interfaces, provide configuration APIs to allow external modification of relevant parameters of the particle system, design event callback mechanisms to support integration with external systems, and implement theme customization interfaces to facilitate branding customization.

[0251] For accessibility reasons, set the reduced animation mode to adapt to light-sensitive users, set the high contrast mode to enhance visual clarity, and set keyboard navigation and screen reading functions without affecting page display.

[0252] In summary, the particle animation generation method and system provided by the implementation of this application can be considered as a web page interactive user experience enhancement method and system for producing three-dimensional particle special effects based on canvas.

[0253] In this way, the present application adopts lightweight three-dimensional space simulation technology to create a lightweight three-dimensional particle system that can run in an ordinary web browser without the need for additional plug-in support, and can achieve three-dimensional space effects through simple mathematical transformations, so that particles can move in a virtual three-dimensional space, enhancing the visual sense of depth. Therefore, it breaks through traditional cognition and proves that convincing three-dimensional interactive effects can be achieved using only the standard Canvas 2D API without the need for a heavyweight 3D rendering library. Moreover, through carefully designed mathematical transformations and visual processing, the system successfully creates a sense of three-dimensional depth and space while maintaining an extremely low technical threshold and wide device compatibility. Therefore, this technology lowers the technical threshold and performance requirements for creating web three-dimensional interactive effects, allowing high-quality spatial interactive experiences to be deployed on various websites without worrying about compatibility and performance issues. It is especially suitable for scenarios such as corporate official websites and product displays that need to attract user attention but also ensure wide access compatibility.

[0254] Furthermore, the present application designs a physics-based interactive force field system, which breaks through the simple "hover-change" mode in traditional web page interaction. The force field model is based on the principles of physics and realizes distance-related nonlinear force feedback, making the particles' response to user input more natural, smooth and intuitive. The system not only takes into account the magnitude and direction of the force, but also simulates real physical properties such as inertia and damping to create a very realistic interactive experience. Therefore, this interaction model can greatly enhance the depth of interaction and emotional connection between users and web pages, and significantly extend the time users stay on the page. Moreover, this natural force field interaction system is particularly suitable for scenarios such as user guidance and product display that require deep user connections, and has a wide range of application scenarios.

[0255] Furthermore, the present application has a constrained geometric space particle behavior system that can realize the constrained movement of particles within a limited geometric space (such as a tilted cube) and simulate real physical collision and rebound effects. Unlike traditional particle systems that move in boundless or simple boundary spaces, the present application is based on the constrained geometric space of the tilted cube. In this clearly defined three-dimensional space, particles follow complex physical rules to move and collide, forming a visual effect that has both a sense of order and randomness. The system also implements precise boundary collision detection and rebound calculation to ensure the consistency and physical realism of the visual effects. Moreover, this particle system with clear geometric boundaries provides a new visual structural element for web design, making the particle special effects no longer a disordered background embellishment, but a visual subject with clear morphology and behavioral characteristics. This structured particle system is particularly suitable for application scenarios such as data visualization, dynamic display of logos, and interactive navigation.

[0256] Furthermore, this application implements an adaptive performance optimization particle system that can dynamically adjust the complexity of the particle system according to the performance of the display device, network conditions, and user interaction intensity. This mechanism includes multiple aspects such as particle number adaptation, dynamic adjustment of calculation accuracy, and intelligent switching of rendering strategies to ensure that the particle system can provide the best performance-experience balance on various display devices. Moreover, with the diversification of access devices, ensuring the consistency of interactive experience on various devices has become an important challenge. Through intelligent performance adjustment, this technology enables the same system to provide a good experience on both high-performance desktop devices and low-power mobile devices, greatly reducing development and maintenance costs and improving the practical value of the system.

[0257] Furthermore, the present application establishes a visual-behavioral collaborative feedback system, establishes a close connection between particle behavior and visual performance, realizes a behavior-triggered visual feedback mechanism, and greatly enhances the comprehensibility and satisfaction of the interaction. The motion state, force conditions, and degree of interaction of the particles will directly affect their visual attributes such as color, size, and transparency, creating an intuitive experience of "what you see is what you do." This visual-behavioral collaborative system enables users to intuitively understand the system status through visual changes, greatly enhancing the comprehensibility and satisfaction of the interaction. In addition, in today's digital products that increasingly focus on user experience, it is crucial to provide intuitive and meaningful interactive feedback. This technology converts abstract data and behavior into intuitive visual language, which is particularly suitable for scenarios such as data visualization and educational demonstrations that require clear expression of information, and has broad application prospects.

[0258] Furthermore, this application designs a natural and smooth mouse interaction mechanism, enabling particles to produce realistic physical reactions to user operations, such as repulsive effects, enhancing the interactive experience. Furthermore, through physical simulation techniques such as speed limiting and attenuation, particle motion is made more consistent with natural laws, enhancing visual realism. Furthermore, by optimizing performance calculation methods, smooth operation on standard devices is ensured while maintaining visual quality.

[0259] In another implementation of the present application, in scenarios where more particles need to be rendered or more complex effects need to be achieved, the rendering engine core system can also use Web GL technology to create three-dimensional scenes. Most implementations rely on large JavaScript libraries such as Three.js, which results in slow loading and high performance requirements for user devices, but can achieve more complex three-dimensional visual effects. Therefore, in scenarios where more particles need to be rendered or more complex effects need to be achieved, Web GL shaders are used to process particle position and color calculations, and animation performance is improved through GPU parallel computing, which can achieve more realistic three-dimensional lighting effects and support more than 10,000 particles. For example, when displaying immersive digital art on a digital art exhibition website, a high-performance particle system based on Web GL rendering technology can be used to create an immersive art effect containing tens of thousands of particles. In addition to mouse interaction, users can also control the depth of view through the scroll wheel, and even support multi-touch on the touch screen to trigger a multi-center force field effect. High performance in terms of particle number, interactive effects, and animation effects is achieved.

[0260] In addition, the particle animation generation method and system provided by the implementation of this application can also be applied to other scenarios.

[0261] For example, by combining the Web Audio API, you can associate a particle system with an audio analysis effect to implement a responsive audio visualization particle system.

[0262] First, the audio frequency data is obtained through an audio analyzer, and the audio features are mapped to particle behavior (particle size, color, and speed). The basic interaction characteristics of the particles are retained, and an audio response layer is added to the particle interaction.

[0263] For example, when implementing the visualization effect of a music streaming website on its playback interface, particles not only respond to the user's mouse operations, but also change their movement patterns and visual characteristics according to the rhythm and frequency of the music. Particles move slowly when the music is at a low frequency, and become more active at a high frequency, thus creating a sound-visual fusion experience.

[0264] Furthermore, by introducing external data sources, particle behavior can be influenced by multidimensional data, enabling a multidimensional data-driven adaptive particle system. First, a mapping relationship between data and particle properties is established, enabling real-time particle updates and behavior changes while retaining user interaction features and adding a data-driven layer. For example, when visualizing media data on a social media analytics platform, particles can represent different social media posts or users, with their color, size, and activity representing sentiment, influence, and timeliness, respectively. Users can interactively explore the data and observe the distribution and correlation of different data categories.

[0265] Therefore, the present invention implements a complete set of performance adaptation mechanisms, which can dynamically adjust the system complexity according to the display device performance, network conditions and user interaction density.

[0266] For example, in practical applications, the above implementation based on Canvas 2D and JavaScript can be adopted, and the best effect can be achieved through the following parameter configuration:

[0267] Number of particles (const particleCount): 1000-2000 (adaptive according to the performance of the display device);

[0268] Cube size (const cubeSize): Proportional to the viewport size, typically set to 60% of the viewport width (window.innerWidth);

[0269] Mouse repulsion radius (const mouseRepulsionRadius): 150-200 pixels;

[0270] Mouse repulsion strength (onst mouseRepulsionForce): 400-600 units;

[0271] Speed reduction coefficient (const speedFactor): 0.99 (slight attenuation);

[0272] Maximum speed limit (const maxSpeed): 3 units / frame.

[0273] When the particle animation generation method provided by the implementation of this application is applied to the homepage of a company's official website, the particle system can be used as a full-screen background. When a user visits the website, for example, blue particles move slowly in three-dimensional space, and the user moves the mouse, which causes the surrounding particles to have an obvious repulsive effect, thereby enhancing the user's sense of participation. At the same time, the particle color can be adjusted by, for example, the color of the corporate logo, thereby enhancing recognition.

[0274] Among them, the relevant parameters of the particle system can be set as:

[0275] const particleCount = 1500;

[0276] Cube size (const cubeSize) = viewport width (window.innerWidth) * 0.6;

[0277] Mouse repulsion radius (const mouseRepulsionRadius) = 180;

[0278] onst mouseRepulsionForce = 500;

[0279] Speed reduction factor (const speedFactor) = 0.05;

[0280] Maximum speed limit (const maxSpeed) = 3.

[0281] In another embodiment of an implementation of the present application, the particle animation generation method of the present application can also be applied to product display pages. The system can be used as a visual display of product features. For example, when displaying the "flexibility" feature of a product, the particle system can be configured to be highly sensitive to user input, making the particles react more quickly.

[0282] Among them, the relevant parameters of the particle system can be set as:

[0283] const particleCount = 1000;

[0284] cubeSize(const cubeSize) = 400;

[0285] const mouseRepulsionRadius = 200;

[0286] onst mouseRepulsionForce = 800;

[0287] Speed reduction factor (const speedFactor) = 0.08;

[0288] Maximum speed limit (const maxSpeed) = 5.

[0289] In another embodiment of an implementation of the present application, the particle animation generation method of the present application can also be applied to data visualization scenarios. The number of particles can be associated with the amount of data, the particle color represents the data category, and the particle size represents the data weight. Users can use mouse interaction to "push" certain data particles to observe changes in data distribution.

[0290] Among them, the relevant parameters of the particle system can be set as:

[0291] The number of particles (const particleCount) = data point length (dataPoints.length); and the particle color and size are dynamically set according to the data characteristics;

[0292] cubeSize(const cubeSize) = 600;

[0293] const mouseRepulsionRadius = 150;

[0294] Mouse repulsion strength (onst mouseRepulsionForce) = 400.

[0295] Another implementation of this application also provides a page generation method, such as Figure 4 As shown, the method includes the following steps.

[0296] S601, determining particle animation, the particle animation is generated according to the above-mentioned particle generation method.

[0297] S602: Generate a page including particle animation according to the particle animation.

[0298] Thus, one can generate, for example, Figure 4 The internet webpage including the particle animation is shown. In addition, the user can perform corresponding operations on the webpage so that the particle animation changes accordingly according to the user operations.

[0299] Furthermore, the particle animation generation method provided by the implementation of the present application can be applied to particle animation generation in web pages, and can also be applied to particle animation generation in fields such as games, film and television special effects, virtual reality, and data visualization.

[0300] The present application also provides an electronic device, such as Figure 5 As shown, the electronic device includes a processor 101 and a memory 102 .

[0301] The processor 101 executes the program instructions stored in the memory 102, causing the processor 101 to execute the particle animation generation method in the above-mentioned implementation, so that the electronic device implements the technical solution of the particle animation generation method provided by the above-mentioned implementation. Alternatively, the processor 101 executes the program instructions stored in the memory 102, causing the processor 101 to execute the page generation method in the above-mentioned implementation, so that the electronic device implements the technical solution of the page generation method provided by the above-mentioned implementation. The processor 101 can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processing (DSP), an application-specific integrated circuit (ASIC), a field programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components.

[0302] The memory 102 may be used to store computer programs, where the computer programs include program instructions.

[0303] Of course, the electronic device may also include other components.

[0304] Furthermore, the electronic device may be a mobile phone, a computer, a wearable device, a server or other electronic device.

[0305] The implementation of the present application also provides a computer-readable storage medium, which stores a computer program. The computer program includes program instructions. The program instructions are executed by an electronic device to enable the electronic device to implement the particle animation generation method provided by the above implementation method, or to implement the page generation method provided by the above implementation method.

[0306] The implementation of the present application also provides a chip for running computer instructions / programs, which is used to execute computer instructions / programs to implement the particle animation generation method provided by the above implementation, or to implement the page generation method provided by the above implementation.

[0307] The implementation of the present application also provides a computer program product, which includes a computer program / instructions stored in a computer-readable storage medium. At least one processor can read the computer program / instructions from the computer-readable storage medium. When the at least one processor executes the computer program / instructions, it can implement the particle animation generation method provided by the above implementation method, or implement the page generation method provided by the above implementation method.

[0308] It should be noted that the terms "first", "second", etc. are only used for distinction and description, and cannot be understood as indicating or implying relative importance.

[0309] It should be noted that in the accompanying drawings, some structural or method features may be shown in a specific arrangement and / or order. However, it should be understood that such a specific arrangement and / or order may not be required. Rather, in some implementations, these features may be arranged in a manner and / or order different from that shown in the illustrative drawings. In addition, the inclusion of structural or method features in a particular figure does not imply that such features are required in all implementations, and in some implementations, these features may not be included or may be combined with other features.

[0310] Although the present application has been illustrated and described with reference to certain preferred implementations of the present application, those skilled in the art should understand that the above description is provided as a further detailed explanation of the present application in conjunction with specific implementations, and that the specific implementation of the present application should not be limited to these descriptions. Those skilled in the art may make various changes in form and detail, including simple deductions or substitutions, without departing from the spirit and scope of the present application.

Claims

1. A particle animation generation method, characterized in that: The method comprises: Determining first configuration information corresponding to the particle animation, where the first configuration information includes attribute information and rendering information of three-dimensional particles corresponding to the particle animation, and attribute information of a three-dimensional region corresponding to the particle animation; creating the three-dimensional region in a virtual three-dimensional coordinate system according to the first configuration information, and creating the three-dimensional particles within the three-dimensional region; Rotating the virtual three-dimensional coordinate system so that the three-dimensional area is tilted; The rotated virtual three-dimensional coordinate system is projected onto a two-dimensional canvas corresponding to a display window for presenting the particle animation, so that the three-dimensional stereoscopic area corresponds to a two-dimensional area on the two-dimensional canvas, and the three-dimensional particles are displayed correspondingly within the two-dimensional area to form the particle animation, wherein the origin of the virtual three-dimensional coordinate system overlaps with the center of the two-dimensional canvas, the X-axis and the Y-axis are located on the two-dimensional canvas, and the Z-axis is perpendicular to the two-dimensional canvas and faces the side of the display window facing the user toward the two-dimensional canvas.

2. The particle animation generation method according to claim 1, characterized in that: The method further includes determining the first configuration information corresponding to the particle animation using at least one of the following information: Basic configuration information corresponding to the particle animation; Particle attribute configuration logic information corresponding to the particle animation; The particle animation corresponds to performance information of a display environment, wherein the display environment includes a display device and / or a network in which the display device is located; The particle animation corresponds to scene information of the application scene.

3. The particle animation generation method according to claim 2, characterized in that: The particle attribute configuration logic information includes: The perspective relationship between the three-dimensional coordinate system and the three-dimensional space is simulated, and the attribute value of the target attribute of the three-dimensional particle is determined according to the rule that the coordinate value of the Z-axis coordinate of the three-dimensional particle is positively correlated with the attribute value of the target attribute of the three-dimensional particle.

4. The particle animation generation method according to claim 3, characterized in that: Creating the three-dimensional particles includes: Grouping the three-dimensional particles corresponding to the particle animation to obtain a plurality of three-dimensional particle groups; The three-dimensional particles in each of the three-dimensional particle groups are subjected to one-time rendering processing using the same rendering configuration information.

5. The particle animation generation method according to claim 4, characterized in that: The method further comprises: Determining second configuration information corresponding to the particle animation, where the second configuration information includes attribute information and rendering information of three-dimensional particles corresponding to the particle animation; The created three-dimensional particles are updated according to the second configuration information to update the particle animation.

6. The particle animation generation method according to claim 5, characterized in that: The method further includes determining the second configuration information of the particle animation by using at least one of the following information: User interaction information corresponding to the three-dimensional particles; Movement information of the three-dimensional particles within the three-dimensional area; Data source information of the data corresponding to the three-dimensional particles; The particle animation corresponds to performance information of a display environment, where the display environment includes a display device and / or a network where the display device is located.

7. The particle animation generation method according to claim 6, characterized in that: The method further comprises: Rendering a boundary of the two-dimensional area on the two-dimensional canvas; Adjusting visibility of a boundary of the two-dimensional region on the two-dimensional canvas according to a density of the three-dimensional particles around the boundary of the three-dimensional region; Rendering a collision visual effect of the three-dimensional particles and the boundary of the three-dimensional region on the two-dimensional canvas; When it is detected that the three-dimensional particle crosses the boundary of the three-dimensional region, the position of the three-dimensional particle is corrected so that the three-dimensional particle is within the three-dimensional region.

8. The particle animation generation method according to claim 7, characterized in that: Rendering a collision visual effect between the three-dimensional particles and the boundary of the three-dimensional region on the two-dimensional canvas includes: Determine the rebound velocity component and rebound angle of three-dimensional particles in the collision direction; According to the energy loss function, the non-perfectly elastic collision of the three-dimensional particles is simulated to achieve the collision visual effect.

9. The particle animation generation method according to claim 8, characterized in that: The method further includes managing the motion of the three-dimensional particles by at least one of the following strategies: Speed cap control strategy; Nonlinear damping simulation control strategy; Motion inertia simulation strategy; Perturbation simulation strategy; Time-based physics integration simulation strategy.

10. A particle animation generation system, characterized in that: include: A plurality of processing systems are used in combination to implement the particle animation generation method according to any one of claims 1 to 9.

11. An electronic device, characterized in that: include: a memory for storing a computer program, wherein the computer program includes program instructions; A processor is used to execute the program instructions so that the electronic device implements the particle animation generation method according to any one of claims 1 to 9.

Images