About
These two websites are independently completed homework projects. Through these projects, I learned how to use JavaScript to realize the visual and interactive functions of web pages.
INK
I wanted to develop a virtual space composed of lines with Chinese ink style. First, I collected some Chinese ink paintings to get some ideas. I replaced the round skybox with some painting, but the sphere stretched and distorted the painting. Then I found a tutorial of creating a square skybox, in which the environment looks more realistic than a sphere skybox. After that, I searched how to create a skybox with photoshop and tried to attach materials I found together. After testing this skybox, it came to the question of how to show the contrast between the microscope and the landscape sceneries. “Round sky and flat ground” is a philosophical thought in ancient China, and it is a manifestation of the theory of yin and yang. The sky and the circle symbolize movement; the earth and the square symbolize stillness; the combination of the two is the balance of yin and yang, and the complementarity of movement and static. In this case, I added another sphere skybox outside of the square box. I used some flower patterns and put them on the black bottom that symbolizes the ground. In addition, I added a particle system to guide the audience’s sight. For further improvement, I want the particles to change with the music, rather than just moving on a fixed trajectory. In addition, I also found that sometimes the particles in the middle of the screen will not disappear. In addition, I also hope to add some ink-and-wash style models. Although I did not find the relevant material on the Internet, maybe I can try to modify the model material myself to achieve the same effect. Creating this project gave me a better understanding of some of the complex functions of Three.js.
Steam Users and their Library
In recent years, the world of video games has undergone tremendous changes. Its diversification has greatly increased the number of users in the online community of the entertainment area, and therefore, the number and types of games that can be provided have also increased. The Steam game platform (Steam Platform) is a digital distribution platform launched by the American video game company Valve on September 12, 2003, providing functions such as digital rights management, multiplayer games, streaming media, and social network services. With Steam, users can install and automatically update games, and can also use community functions including friend lists and groups, as well as cloud storage, in-game voice, and chat functions. Steam is considered to be the world's largest digital distribution platform in the computer game industry. In 2020, Steam has 120.4 million monthly active users and 62.6 million daily active users. Steam is open to all game producers, no matter if it is a game company or an independent producer. Although steam is still the largest player community with rich mod support, many emerging game platforms have gradually entered the market in recent years, such as Uplay, Tencent games, etc., and there are also promotional activities like Epic games to give away free games. All these factors affect the player's choice.
Instead of doing some common and business analysis of the profit or selling amount of games, in this project, I want to visualize the behavior of Steam users and try to explore their game preference and how does the recommendation system work (Steam recommends games to users in the store page). The project will show the content of individuals’ Steam libraries and the time they spent on each game. The viewer can see the data classified by game name, genres, or game tags. Since some of the gameplay is repeating while others have a storyline, so the users’ interests in the game should refer to both data.
Painting Prototype
The core code of reading data from the local database and data to visual elements.
