The official secret! Your color is calculated like this...

Author: imyzf

Was your circle of friends like this last Wednesday?

At the same time, some netizens began to analyze the calculation logic of this event, and even decompiled all possible color results. As the core developer of this event, I will introduce the technical details of the color test event next.

Spoiler: This article will focus on the result calculation logic that everyone most wants to know at the end.

the whole frame

The H5 of this event is actually a single page application (SPA), which is routed through react-router. It contains 13 pages, including the homepage, question page, result page, etc., each of which is a page. react-transition-group is used between the pages to achieve the transition effect of fade in and fade out, and the canvas between the problem pages is used to achieve a switching animation similar to the screen movement.

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

• Optimize the experience, click on the next page immediately, no loading process
• There are videos in many pages, and the DOM nodes need to be loaded in advance to trigger video click event. At the same time, the preloading of the video is also realized

As shown in the figure, the next page will be loaded in advance and hidden under the current page.

Animation effect

This event page uses a lot of dynamic effects to enhance the user experience. The methods used are mainly divided into the following two categories:

• Pre-rendering: For complex animations without interactive logic, use the pre-rendered video by the animation designer to achieve the best performance and compatibility, such as most problematic background animations. The only disadvantage is the need to load larger resources, which can be solved by maximizing the compression of the video volume and the pre-loading mentioned above.
• Real-time rendering: For dynamic effects with interactive requirements, canvas, WebGL, physics engine and other methods are used for real-time rendering to provide higher playability.

Next, I will introduce a few cool animations.

Page turning animation

The switching between each question page will have a flexible curtain effect, which is realized by canvas and drawn based on the Bezier curve.

As shown in the figure, after the user triggers the click operation to jump to the next page, we use the gray mask closed area composed of five points P1-P5 to cover the current page. Among them, P4 and P5 are fixed points, which are used to determine the right boundary. By continuously moving the x-axis coordinates of P1, P2 and P3 to the left, and modifying the control point values of the Bezier curve, the pulling effect is achieved. The core canvas API used here is the bezierCurveTo method.

Cloud dynamics

In the fifth question, there are cloud dynamics in the background. This part is based on three.js , and WebGL is used for rendering. The clouds here use the shader material (ShaderMaterial) to load the vertex shader and the fragment shader, map for rendering, and then move the camera position to simulate the shuttle effect. The location of each cloud here is random, and different people see it differently.

Drop animation

In the seventh question, when entering the page, there will be the effect of buttons and items falling. Here, the physics engine Matter.js simulate the free fall motion and collision effects. The position after falling here is also random, with thousands of people, more real.

Result calculation

Next, I will reveal how the test results are calculated.

1. Each option has several colors corresponding to it, such as the first question:

• Option A: Gold, Green
• Option B: Purple, Silver, Orange
• Option C: pink, blue

2. We will record the choice of each topic, and count the corresponding colors in the final calculation. For example, the first question is selected from A, it will be King and green plus 1 each.

3. As for monochromatic or two-color, it is judged based on the choice of question 8. If you choose "sadness", the result will be monochromatic, and you will choose "romance" and the result will be two-color.

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

5. If it is a two-color, take the color with the highest sum of the two colors as the result. For example, if the orange + gold count is the highest, the result is orange + gold. Of course, there are restrictions on the combinations here. There are only 9 preset combinations, so the result is limited to these 9 when calculating.

6. If the color or combination of the same sum result is encountered during sorting, the result will be taken according to the priority given by the planning classmate. For example, in the case of a single color, assuming that the orange and gold are both 5, the priority of orange> gold orange will be taken as the result.

The overall process is shown in the figure below:

For example, the choice of a small partner is:

[B, C, A, C, C, C, C, A]

Then his color count is

{ '紫': 3, '银': 6, '橙': 3, '金': 3, '绿': 2, '粉': 2, '蓝': 3 }

Since "romance" was selected for the last question, the result is two-color, summed by priority, gold + orange is the largest (excluding non-existent result combinations), so the result is gold + orange.

This test has a total of 3^7*2=4374 selection paths, 7 single-color results and 9 double-color results, for a total of 16 results.

Monochrome result:

['绿', '橙', '银', '紫', '蓝', '金', '粉']

Two-color result:

['粉金', '金橙', '粉紫', '金蓝', '金紫', '橙粉', '蓝粉', '金绿', '橙绿']

Since the total number of results is relatively controllable and does not need to be combined with other back-end data (such as user personal data) for calculation, the calculation logic is completed on the front-end, and the built-in configuration display copy is read. There is no back-end students participating in the development of this event .

The calculation logic of the above results is based on the book "The Most Accurate Character Color Measurement Tool" by Tom Maddron, a well-known personality color trainer

Episode

It is also worth mentioning that in the calculation logic of this time, the color is not mapped to the corresponding English, but Chinese is used throughout. For example, the Chinese key is used directly in the result configuration file:

export default {
    蓝: {
        attracted: ['橙粉', '粉金'],
        keepAway: ['金', '银'],
        ......
    }
}

At present, JS supports Unicode well enough, and even supports Unicode variable name . After the development is completed, we conducted a compatibility test with the minimum version of Android 5.0, and no problems were found. In fact, we did not encounter this after the line. Aspects of the problem.

Even the Chinese class name is used in the less code:

.金 {
    background: rgb(228, 198, 114);
}

According to related data , starting from HTML 4.01, Unicode characters are supported as class attribute names. Of course, since the CSS Module is enabled in this project, the Chinese class name here will be converted to a pure English hash string, regardless of compatibility issues.

Although we do not recommend using Chinese in a large scale during the programming process, in this scenario, there are more color enumerations in the result. Using Chinese as the unique identification of each color is more intuitive, which can increase the readability of the code and reduce the number of changes. The workload of translating colors into English and mapping is also very worthwhile.

Concluding remarks

The technical details of the development of this event are introduced here, hoping to bring you some gains. Some friends may also ask, why do the same answer path produce different results? I won’t go into details here, keep a little bit of mystery and wait for everyone to dig!

This article was published from NetEase Cloud Music Front-end Team . Any form of reprinting of the article is prohibited without authorization. We recruit front-end, iOS, and Android all year round. If you are ready to change jobs and you happen to like cloud music, then join us at grp.music-fe(at)corp.netease.com!