Author: imyzf

Did your circle of friends look like this last Wednesday?

At the same time, some netizens began to analyze the computational logic of the campaign and even decompiled all the possible color results. As the core developer of this activity, I will introduce the technical details of the color testing activity.

In the end of this article, we will focus on the calculation logic of the results that you want to know most

The overall structure

H5 of this activity is actually a single page application (SPA), which is routed through react-Router. It contains 13 pages, including home page, question page, result page and other parts, among which each question is a page. React-transition-group is used to achieve the switching effect of fading in and out between pages, and canvas is used to achieve the switching animation similar to curtain pulling between pages.

The difference between the answer page and the general H5 page is that the user’s operation path is determined, that is, the route to the next page of each page is fixed. Therefore, the router level is optimized and the next page is preloaded in advance. The purpose of this is as follows:

  • Optimize the experience, click on the next page immediately, no loading process
  • Many pages have videos, and you need to load the DOM node in advance to get throughclickEvents triggervideoTag play, but also to achieve the video preloading

As you can see, the next page loads ahead of time and is hidden at the bottom of the current page.

Animation effects

This activity page uses a lot of dynamic effects to improve the user experience. The methods of use are divided into the following two categories:

  • Pre-render: For complex animations with no interactive logic, use motionists to pre-render the video for best performance and compatibility, such as background animations for most issues. The only downside is the need to load more resources, which is addressed by minimizing the video volume and preloading mentioned above.
  • Real-time rendering: For dynamic effects that require interaction, canvas, WebGL, physics engine and other methods are used for real-time rendering to provide higher playability.

Here are a few cool kinetic effects.

Page dynamic effect

The switch between each question page will have an elastic curtain pulling effect, which is realized by using canvas and drawn based on Bezier curve.

As shown in the figure, after the user triggers the click operation to jump to the next page, we use the grey mask closed area composed of five points P1-P5 to block the current page. Where P4 and P5 are fixed points used to determine the right boundary. The pull effect is achieved by constantly moving the X-axis coordinates of P1, P2 and P3 to the left and modifying the control point values of the Bezier curve. The core Canvas API used here is the bezierCurveTo method.

The clouds move effect

In question 5, cloud dynamic effect appears in the background. This part is implemented based on three.js and WebGL is adopted for rendering. The cloud is loaded with the vertex shader and the chip shader using the ShaderMaterial, the map is rendered, and then the camera position is moved to simulate the shuttle effect. Here each cloud appears at random, and different people see it differently.

Drop dynamic effect

In question 7, entering the page will have the effect of button and item drop. Here, the physics engine matter. js is used to simulate the free fall movement and collision effect. Here, the position of the fall is also random, thousands of faces, which is more realistic.

The results calculated

Here’s how the results are calculated.

1, each option has several corresponding colors, such as the first question:

  • Choice A: gold and green
  • Choice B: purple, silver or orange
  • Choice C: pink and blue

2. We will record the choice of each question, and in the final calculation, we will make a cumulative count of the corresponding colors. For example, if you choose A in the first question, you add 1 to the gold and 1 to the green.

3, as for monochrome or two-color, is based on the choice of the eighth question to judge, if the choice of “sad”, the result is monochrome, chose “romantic”, the result is two-color.

4. If it is monochrome, take the color with the highest monochrome count as the result.

5. In the case of two colors, take the color that has the highest sum of the combined colors as the result. For example, suppose the orange + gold count has the highest sum, and the result is orange + gold. Of course, there’s a limit to the number of combinations, there’s only nine preset combinations, so I’m going to limit the result to those nine.

6. If the same color or combination is encountered in the sorting process, the result will be selected according to the priority given by the planner. For example, in the monochrome case, assuming that the counts of both orange and gold are 5, orange will be chosen according to the priority of orange > gold.

The overall process is shown in the figure below:

For example, someone’s choice is:

[B, C, A, C, C, C, C, A]
Copy the code

So his color count is zero

{ 'purple': 3.'silver': 6.'orange': 3.'king': 3.'green': 2.'powder': 2.'blue': 3 }
Copy the code

Since the last question chose “romantic”, the result is two-color, sum by priority, gold + orange is the largest (excluding non-existent result combinations), so the result is gold + orange.

There were a total of 3^7*2=4374 paths to choose from in this test, with 7 monochromatic results and 9 bicolor results, for a total of 16 results.

Monochrome results:

['green'.'orange'.'silver'.'purple'.'blue'.'king'.'powder']
Copy the code

Bicolor results:

['pink gold'.'golden orange'.'pink purple'.'gold blue'.'gold purple'.'orange powder.'blue powder.'green'.'orange green']
Copy the code

Since the total number of results is relatively controllable, and there is no need to combine other background data (such as user personal data) for calculation, the calculation logic is completed in the front end, and the built-in configuration display copy is read. No back-end students participate in the development of this activity.

The calculation logic of these results is based on the most Accurate Personality Color Measurement Tool by Tom Maddron, a well-known personality color trainer

episode

In addition, it is worth mentioning that in the calculation logic of this result, the color and the corresponding English are not mapped, but Chinese is used throughout. For example, the resulting configuration file directly uses Chinese key:

export default{blue: {attracted: ['orange powder.'pink gold'].keepAway: ['king'.'silver'],... }}Copy the code

At present, JS supports Unicode well enough, even Unicode variable names. After the development, we conducted compatibility tests for the lowest version of Android 5.0, and did not find any problems. In fact, we have not encountered any problems in this regard.

We even use Chinese class names in the less code:

{the goldbackground: rgb(228.198.114);
}
Copy the code

According to the source, Unicode characters as class attribute names have been supported since HTML 4.01. Of course, since the CSS Module is enabled in this project, the Chinese class name will be converted to a pure English hash string, no compatibility concerns.

Although we do not recommend the programming process in a big range in the Chinese language, but in this scenario, the result of color enumeration quantity is more, the Chinese language as a unique identifier of each color, more intuitive, can increase the code readability, reduce color will be translated into English and mapping work, is also very worth it.

conclusion

The technical details of the development of this activity will be introduced here, hoping to bring you some harvest. Some of you may also ask, why does the same answer path produce different results? I will not go into detail here, to keep a little mystery, waiting for everyone to dig!

This article is published by netease Cloud Music front end team. Any unauthorized reprint of the article is prohibited. We hire front end, iOS, Android all the year around. If you’re ready for a career change and you love cloud music, join us GRP. Music-fe (at) Corp.netease.com!