Web Space - FA2022

– PROJECT GUIDELINE –

In this final project, students will develop an imaginary virtual space that enables users to interact with others, in the context of Virtual Presence or Telepresence. The goal is to create a unique and meaningful experience in which the user takes a participatory role.

Here are some thought-provoking questions:

• How do we express ourselves in-person?

• How have you had conversations with others recently?

• What do you want the user to feel in your virtual environment?

• How do we interact with others virtually?

• What does it mean to have a virtual interaction?

• What do you want the experiences to be centered on? 

• How will your virtual world change the way we define connectivity, interactivity and/or intimacy?

Students are strongly encouraged to explore all possibilities and to not be limited to concepts addressed throughout the course. Successful student outcomes can be created in various forms. The project can be anything from a narrative being told based on user participation to an immersive dynamic visualization manipulated by user interaction.

 

 

– LINK –

• Presentation: https://docs.google.com/presentation/d/1BvQKzi-H60yLRyChqZQSHaVlblCzPBFHn8yanMmFOOs/edit?usp=sharing
• Sketch: https://final1212-archive.glitch.me/

 

 

 

– DEVELOPMENT –

Based on the development of Project II., I made further polishment in the following aspects:

• BUILDING DEVELOPMENT

Besides box only, I further manipulated with meshes of other shapes like spheres. I therefore succeeded in varying the building structures and making the entire environment diverse in: height, position, structure combination, etc. 

• WORLD DECORATION

In terms of the visuals of this virtual space, I intended to follow the inspiration of “Atlantis”, that is, an underwater world with ocean-like elements. However, after experimenting with blue-ish colors as the background, I found it difficult to realize the ideal visuals. Therefore, I turned the entire color tone into grey and set the light corresponding to the general tone. Besides, I applied the effect of Fog in order to blur the visible range of the camera view. Users thus cannot directly see structures far away from the current location, but need to move around and explore further. In this sense, such design indeed adds to the sense of immersiveness of user experience.

• USER INTERACTION

During the second half of the semester, I experimented with some algorithms and techniques from ml5 like KNN, which detects users’ head interaction through webcam and classifies each as different instructions. Therefore users could control the avatar, i.e., the light, to move forward, backward, left and right. However after a round of user tests on the prototype, I found it hard to instruct all types of movement and rotation at the same time only through head interaction — considering the limited interaction forms of the head. Therefore, I eventually applied conventional keyboard interaction with WASDEZ controlling movement and arrows controlling rotation. 

• MULTI-USER EXPERIENCE

Socket.io is the central technique that supports the multi-user experience in my project. Each user is randomly assigned a color as light, and wherever they travel, they see their reflections. As they can join the space simultaneously, they will see each other’s colors when they are virtually close. Moreover, their color would be integrated as they come close enough, therefore serving the purpose of lighting and coloring the pale grey environment.

• FUTURE WORK

For future development, some collaborative work might be introduced for this experience motivation. Because this project also serves as my capstone project prototype, the relationship between such “co-presence” and user behavior is worth exploring through various designs. Moreover, I’d like to turn the world into a crystal ball-like overview. Hopefully a sense of stratification could be developed for each part, thus better contributing a whole world of “Atlantis”. Small particles and creatures would be further generated to serve this sense of whole-world. Details such as lighting and shadow will also make a difference.

– PROJECT GUIDELINE –

• Unconventional Interaction with KNN Classification: Create a unique, unconventional, artistic and/or practical interaction by developing a classification process with the KNN algorithm.

• • Read the instructions in the script carefully and train the computer based on your idea by pressing the key “0”, “1”, and “2”.
  • Different scene(s) or animation(s) can be triggered and/or manipulated by the “resultLabel” variable from the KNN classifier.

• Requirements
  • Utilize at least one ML model. 
    • It is recommended to use only one model considering the performance.
  • Having user interaction is mandatory.
  • Optimize the performance (i.e. Attempt to keep the frame rate Ideally above 29fps.)

 

–  MY SKETCH –

• Sketch

 

–  REFERENCE –

• KNN Classifier on ml5.js from Example Codes | Uses of Machine Learning Models

 

–  DEVELOPMENT –

Greatly inspired by Prof. Moon’s in-class example, I’m thinking of using machine learning-based techniques to realize user interaction. In particular, the KNN classification from the ml5 library seems to serve the purpose well. 

Because the KNN algorithm supports a classification process, it is feasible to develop different classes to trigger different kinds of interaction among users. Because I intended to consider the lighting ball as main avatar for users, the general interaction design idea of detecting user physical gestures to control the avatar was gradually shaped. 

Therefore, after careful consideration and in reference to the above inspiring sample codes, I determined to apply KNN classification based on Webcam, through which users’ body movement would be captured and classified. I was thinking of moving the avatar mainly through head interaction, because I would like to avoid normal hand interaction with other computer devices like a mouse or keyboard.  Moreover, I considered head interaction as more intuitive and convenient in terms of moving around in front of the camera meanwhile being able to observe the avatar on screen.

 

As the codes indicate above, I set five classes in total, each representing a different head movement: head upward to move forward, head downward to move backward, head toward the left to move left, head toward right to move right, and head keeping unmoved as default. Upon realization, users would be able to control the avatar by moving heads around and stay still without moving, pretty much similar to “WASD” control on keyboard while not directly touching it using hand.

Although successfully realizing the movement, there were two problems left: 

• Every time I open the project, I need to set the classification before interacting with the avatar.  –> After the final decision, such classification could be saved into a JSON file and automatically read.
• Because head movement is limited in terms of 360 degrees of movement in a virtual space, I might need to polish the design of interaction system.

 

– PROJECT GUIDELINE –

Develop a sketch with navigating interactive experience manipulating camera and/or controls in three.js.

• Develop a navigation method for your final project.
  • Feel free to use your midterm project as an environment that users navigate.
  • Or utilize random(), sin(), cos(), noise() and/or recursive functions to generate environmental structures. Don’t be too ambitious with creating the environmental generative structure.
• Focus on exploring the camera and controls.

Requirements:

• Manipulate the properties of the Controls, or manually update the camera position, rotation and lookAt position.
• Utilize dat.gui.js to manipulate key values of the camera.
• Optimize the performance (i.e. Attempt to keep the frame rate Ideally above 29fps.)

 

– MY SKETCH –

https://glitch.com/~project-update-control

 

– REFERENCE –

11 camera-third-pov from Prof. Moon.

 

– DEVELOPMENT –

Following my project idea of having a first-person perspective through camera while navigating the main character through ml5 KNN, I found Prof. Moon’s “camera_third_pov” sample very much inspiring — it allows keyboard interaction to control character movement while having the camera following all the time (despite certain dynamic lagging). Based on that, further development of the neviation system for my project are as follows:

• Interaction design

Given the nature of 3D space, the character should be able to move from all directions. Adding that what I intend to create is a relatively immersive experience with first-person perspective, the rules for user interaction should be designed properly. After careful consideration, I now determine to combine the hand (through keyboard) and head (through camera detection) interaction to guarantee movements naturally:

In brief, interactions with keys of “W”, “A”, “S”, “D”, “E”, “Z” would control the character to move forward, left, backward, right, upward, downward respectively while parallel to the according axis in the 3D space. Meanwhile, head interactions based on KNN models from ml5 are expected to allow the character to rotate left and right, up and down — whenever users move their heads in front of the camera.

I managed to realize the keyboard interaction by integrating and modifying the Character() class from the sample code. On one hand, the specific interactions on keys should be assigned as I designed. On the other hand, as my character is a sphere geometry with lighting effect (point light), the according movements and changes in position should be synchronized to the pointlight as well.

However, I failed to apply KNN and the head interactions to charatcer rotations so far, as I didn’t know how to intervene in the logic behind Three.Quaternion. This would be the first challenge that I have to overcome later.

• Camera following

Another indispensable element contributing to the first-person perspective and the immersiveness of my project lies in the camera following. Since the character is neviagted through user interaction, it will make more sense to present the view of the character through camera. Therefore, I referred to the ThirdPersonCamera() class and enabled the camera to follow the character all the time. By manipulating the parameters on GUI, I further determined to set the default parameters to (0,0,0) to make the camera position overlapping with the character. In this sense, the character won’t exist in front of the camera all the time, while users could still observe the light and shadow effect through the first-perspective camera to be indicated his/her character of lighting sphere in such space. Beyond my expectation, as I originally had reflective mirrors above the ruins, users could even see themselves, i.e. the lighting sphere, through camera. However they might not be able to directly realize the mirror effect, which makes users hard to tell the differences between real and reflection. This, therefore, opens more possibilities for me to manipulate with the reflection and even the conceptual development in a greater sense. 

One current problem, however, lies in the lagging effect: when moving backward through keyboard, the sphere will exist for a while because the speed of movement is greater than the one of the camera. I haven’t come up with an ideal solution to it, yet it might also highly related to the design of the appearance of this lighting ball.

 

– PROBLEMS TO SOLVE –

1. apply KNN and the head interactions to charatcer rotations through Three.Quaternion
2. solve the problem of the character existing for a while due to the difference in speed between the sphere and the camera
3. downsize the scale of parameters for camera rotation on GUI to make the camera view changing more naturally

– Links –

• Presentation
• Case Study

 

– Reading Response –

Reading through the materials and thinking through the thought-provoking prompts, I understand a complete virtual experience containing three indispensable aspects: a virtual reality environment (setting), a virtual self (embodiment), and perceptions/interactions that the virtual self has with this environment (experience). Based on this, I intend to further develop in two main aspects conceptually: nonhuman avatar and copresence.

A virtual reality environment, according to David J. Chalmers, is defined of three central characteristics despite a lack of universal definition: immersion, interaction, and computer-generation [1]. These three altogether contribute to a virtual while akin to ordinary reality. Yet in a looser sense, Chalmers also claims that a more inclusive idea of virtual reality also makes sense even if one of the three is missing. The virtual world we are constructing in this project, therefore, legitimately falls into the category of Nonimmersive computer-generated interactive environments – we display our worlds on computer screens rather than through VR headsets.

A virtual self is one key type of “virtual objects” programmed into data structures and bringing about users’ perceptions based on computation [1]. In a traditional 2D setting, as users stay away from the screen which demonstrates everything from a flat, unchanged dimension, the viewing perspective itself overlaps with natural sight and thus lacks separation. A boundary between reality and virtual is therefore clearly set. In comparison, virtual reality blurs the boundary by introducing a third dimension and allowing interactions with the environment itself. As the adjustable camera view remarkably features our project of virtual world from the first perspective, the notion of virtual self thus raises possibilities while discussions as well on the relationship with the real self: what’re the differences between virtual self and real self? How will these two influence each other differently, given different designs of the world and the virtual body?

Different forms of virtual self in different VR environments by nature embody different interactive experiences: the rule of controlling avatars, the game view, etc. Such differences, according to Bailey et. al, spontaneously reflect back on how users think in ordinary reality: “situated action, how that body interacts with the environment in specific ways, also shapes thinking” [2]. To put it simply, in ABZÛ, the case study I found for my project [3], having a diver as the first-perspective avatar very much emphasizes a storytelling of exploring the underwater world. By contrast, controlling a fish swimming back and forth would indicate a nonhuman, immersive underwater journey. Without game narrative before playing, the virtual self very much plays a decisive role in shaping how users interact with the virtual reality, therefore shaping how they perceive and interpret the experiences. 

 

– Conceptual Development –

In this sense, I intend to further develop my project mainly in two aspects: 

(1) to have a nonhuman avatar as the virtual self exploring the underwater ruins.

The appearance of the virtual self would be a lighting ball at the current stage. Having the lighting effect, the surroundings of the virtual self would be lit up while the rest remains dark. The application of ml5 and webcam allows sensory-motor contingency, which according to Mel Slater refers to the continuity of using body to perceive the virtual world in a similar way to in reality [4]. Therefore, how users interact in front of the screen (left/right) would direct the lighting ball to travel through the virtual world.

(2) to allow co-presence in this virtual world to arouse a shared journey experience. 

By allowing different users to co-exist in the same environment, a sense of community and shared journey is created. Although a nonhuman avatar might not allow direct interaction with each other thus arousing empathy or projecting emotions according to Thomas Fuchs [5], ideally I would like to create some special effects whenever two users collide with each other when traveling through the ruins, such as sparking or greater lighting.

 

– References –

• [1] The Virtual and The Real
• [2] When Does Virtual Embodiment Change Our Minds?
• [3] ABZÛ: https://abzugame.com/
• [4] “When you see yourself in a virtual body, you adopt some of its features.”
• [5] The Virtual Other –  Empathy in the Age of Virtuality

 

– Presentation Feedback –

• first-person perspective: not seeing the lighting ball itself
• head interaction: intuitive, conceptually similar to some creatures
• co-existence: traveling through the dark to find other light (users) as well, not seeing itself but seeing other light

– PROJECT GUIDELINE –

The Virtual Environment project is to develop your own imaginary 3D space that delivers fictional narratives and unconventional experiences for users. The project is a form of Generative Art that focuses on creating 3D environments with creatures and objects.

What is your own imaginary space like? The Universe, galaxy, black hole, Mars (or other planet), Quantum realm, the Antarctic, volcano mountain, submerged city, forest, the other world (the world of the dead), the Heaven or Hell, gummy bear land, hamburger world, future Shanghai, museum, gallery, school, or a room? What elements, objects, and/or creatures are in the environment? And what happens in the world?

Students are encouraged to be as experimental as possible with what they have learned in this course. Demonstrate a coherent understanding of technical proficiency with three.js and Object-Oriented Programming. Use this assignment as a preparation for the final project, My Virtual World –  you will be adding Virtual Self and Virtual Other to this virtual environment project (optional).

 

– MY SKETCH –

https://glitch.com/edit/#!/project2-structure

 

 

– INSPIRATION–

• “Fata Morgana”
• “Atlantis” (visualizations from Pinterest)
• Ruins
• Reflection (Prof. Moon’s in-class demonstration)
• …

See the full presentation of the project idea with references here.

 

– DEVELOPMENT –

• Overall Structure

In general, I intend to construct an underwater world with ruins and reflection effects. This project serves as a blueprint for final project with general structure of the space and includes some applicable elements. The main body of building structures is set at the lower part of the world, while the above space leaves for further reflection effect. A plane-like structure with special textures is considered to serve as a separation in the middle.

• Basic Geometries & Movement

At first, I constructed basic boxes representing the buildings of the ruins with for() Loops. Each single box is of certain size and of certain distance from each other utilizing random() function and pre-set ranges, and they are set to further vibrate up and down. 

• Single Building Development using Grouping

Thanks to Prof. Moon’s help, I was able to expand each single box into groups with Three.Group() and define some random generative functions. In a straightforward way, functions generating various shapes of buildings could be called by randomly assigning values, and thus contributing to random “underwater ruins” every time.

• Lighting

– AmbientLight: light up each single structure to change the general visual effects, without outside projection/shadow.

– SpotLight: one is set on the above-middle to light up the general body of ruins on the bottom in order to generate shadow on each single building. Another several are introduced as shining creatures swinging back and forth around the ruins, contributing to further light-and-shadow variations.

• Reflection

So far two planes of reflection are constructed on the above part of the space, reflecting the entire ruins from two different directions. One is fluctuating itself, thus further manipulates the reflection. In future development, I might think of having a giant sphere outside the ruins, therefore making it a crystal ball-like effect and reflecting everything inside the sphere from all directions.

 

– NEXT STEP –

• Further Building Development

Other than towering up the boxes to generate complex building structures, I plan to further manipulate with meshes of other shapes and thus generate more varied building structures. The differences between each building could also be adjusted according to the building sizes. 

• World Construction

As mentioned above, I’d like to turn the world into a crystal ball-like overview. Hopefully a sense of stratification could be developed for each part, thus better contributing a whole world of “Atlantis”. Small particles and creatures would be further generated to serve this sense of whole-world. Details such as lighting and shadow will also make a difference.

• Texture

So far the blueprint of “Atlantis” hasn’t applied many modifications to each single structure, especially the texture. The general sphere would possibly apply crystal ball-like materials for the outer side, while reflective materials for the inner side. A plane of special texture would also be introduced for the purpose of separation around the middle of the space. For each single building, I’m now considering ancient-column like textures to generate the sense of “ruins”.

• Further Interaction

While remaining undecided, more interactions would be applied to the space for the final demonstration.

– PROJECT GUIDELINE –

This is a mini project to develop 3D scenes with generative visuals utilizing 3D objects in three.js and the OOP concept. Choose a subject / concept that interests you, investigate it closely, and analyze its appearance, sentiment, movement and behaviors. Visualize and imitate the analyzed aspects of the subject / concept you have chosen.

 

– MY SKETCH –

https://wk4proj1.glitch.me/

 

– DEVELOPMENT –

The conceptual development of this project was very much inspired by the visuals of particles transforming from one certain shape to another in general. In p5.js, Prof. Moon once showed us a project demonstrating such dynamic transition realized by a group of points and a button interaction. Therefore, I was intrigued by the potential of realizing such effects in a 3-dimensional space. 

Therefore, in this project, I generated a group of particles using OOP, and initially set them to constitute a cylindrical shape with large width. The Point-of-View shows its side by default at first, and by dragging the mouse left and right, up and down, users are able to see it from various directions (see screenshots below).

   

Because I would like to achieve the purpose of ending the particle movement in a cube shape, I preset the boundary of cube and assigned each particle a random speed for dispersing. After the particles reach the boundary, they would stick onto it and therefore shift into the shape of cube.

Apart from that, by experimenting with different lighting effect, I was able to achieve the visual of a bubble-like appearance for each particle. I applied a directional light as the backlight, therefore each particle has a strong comparison between the back (shadow) and the front (light). If taking a closer look, the light and shadow effect further contributes to a sense of the planet, which becomes even inspiring for future development.

 

 

 

– PROJECT GUIDELINE –

• Develop the generative visuals sketch further in 3D with three.js library.
  • Utilize the Object-Oriented Programming (OOP), Vectors and Forces concepts.
  • Please focus on exploring the three.js, OOP and the Forces concept and Vector math functions.

 

– MY SKETCH –

https://wk3-force-particle.glitch.me/

 

 

– REFERENCE –

https://github.com/MOQN/IMA-Web-Page-To-Web-Space/tree/main/w04_interaction_dynamicArrays/12_points_texture_blending

 

– DEVELOPMENT –

I utilized this exercise as an opportunity to experiment with the following visual effects:

• Particle (attractor, texture): I include two systems of particles in this project that demonstrate different movement patterns and characteristics.
  • Grey, square particles: the first system of movement is a group of particles following an attractor. In order to make the attractor moving around the axes therefore leading the particles accordingly, I mainly applied the technique of sin(frameCount). By properly setting the parameters, the particles as well as the attractor become able to perform a well-regulated movement around the axes.
  • White, sphere particles: for this moving system, each particle is assigned to move toward different directions, rather than following any pre-determined rules. For the appearance of each particle, I imported a texture from the above reference, which blurs the edge of each particle. By manipulating a variety of properties such as opacity, blending, etc, I finally achieved a sense of dust-like texture, therefore might be helpful for my future development as a space decoration.

• Reflector
  • A reflector is applied at the side of the central space. I intentionally made it fluctuate, therefore the reflections of particles will also become fluctuate and users could see special visual effects. Because the background color is also set black, the boundary between real particles and reflections become vague, therefore better inspiring my final project.

 

– Assignment requirement –

This assignment requires us to develop sketches to visualize and imitate a subject/object/concept (in its appearance, sentiment, movement and behaviors, etc.), focusing on Object Oriented Programming, the Forces concept and Vector math functions in p5.js.

 

– My Sketch –

https://editor.p5js.org/tj1059/sketches/a1soaE92o

 

 

– Inspiration –

Several in-class examples from Prof. Moon that inspire me a lot are as follows:

• sin() / cos(): sin() / cos() functions are not only useful for realizing rotating effects, but also work well in changing colors at a regular pace.
• Bounce: By applying physics-related ideas including but not limited to force, mass, velocity and acceleration, we are able to mimic natural motions of objects such as moving, bouncing, etc.
• Attraction: By setting a target and assigning a vector between the target and the objects, a force is applicable to the objects to realize a dynamic process of gradually aiming towards the target. A lot of fancy effects are thus foreseeable through further development of this fundamental logic.

 

– Idea –

Particles → Snow/Sand → Crystal ball/Hourglass → Star as background

In terms of particles, a lot of real-life objects are mimicable through such idea. Sand, snow, water drops, shining stars, etc. I finally decided to mimic the crystal ball, which normally has numerous particles inside while dynamically moving as we swing the ball. The idea of shining stars applying sin() / cos() is also considered to further add to the background.

 

– Development –

• Basics

The framework of the crystal ball is constructed basically through push() and pop() functions, which allow the translations and filling/stroke colors to be set for different parts of the structure. 

• Application of particles

Two systems of particles are applied in this project. One is of great scale to decorate the background with shining “stars”. The shining effect is realized mainly through setting the size of each star as random within a certain range, while at the same time applying the sin() function to keep the changes in the size visually dynamic. In this sense, each star is of different starting sizes, while keeping changing to be bigger and then smaller back and forth, therefore seemingly shining over time. 

Another system is for the purpose of mimicking the falling snow inside the crystal ball. The original idea is to duplicate the slowly falling effect of the snow. However, as such one-time motion is not visually appealing enough, I changed my mind a little bit and instead experimented with a bouncing effect inside the ball. Other than the normal gravity, the seemingly random bouncing is in fact intentionally realized by applying another shift force that controls the left-or-right shifts of each small particle. The distance between the crystal ball center and each particle is calculated to make judgments and prevent small particles from bouncing outside the ball structure. As gravity functions, particles gradually slow down and gather at the bottom inside the crystal ball.

• Reflections

One main problem that I encountered is how to slow down the particles when they gradually gather at the bottom while at the same time keeping them inside the crystal ball rather than falling off. I initially attempted to make such judgment also through the velocity, in a hope of bouncing back whenever touches upon the edge of the ball framework. A broken example, though, is like this: 

With Prof. Moon’s help, instead of manipulating the velocity, what I should do is to re-place the particles whenever they cross the edge and locate them wherever they ought to appear by intuition (code attached below). Though not downright accurate, the idea is quite practical and could be used in other similar situations. Other helpful takeaways include the idea of collision check, potential user interactions, etc.

– Assignment requirement –

This assignment requires us to develop sketches utilizing vectors and transformation functions in p5.js, experimenting with diverse functions in p5.js and various types of motion.

– My Sketch –

https://editor.p5js.org/tj1059/sketches/RHiemSY3d  

– Inspiration –

In class, Prof. Moon showed us a variety of sketches with simple code yet fancy visual effects, therefore I intended to do something similar, i.e., to explore different visual effects by manipulating lines of codes and parameters, while at the same time including some mouse interactions if possible.

When browsing online about vector/transformation-related effects, I found this site a great reviewing material for what we’ve learned about p5.js transformations. It demonstrates an interesting result in the end, which I found quite inspiring and could think of several tricks that I’d like to manipulate and add on almost at the first glance. Therefore, I took this as a starting point for my project.

– Basic Understanding –

In general, the original code applies the translate() function and for loop to construct an effect of multiple (8) squares swinging along a circle track, where each square allows a similar construction of multiple (6) squares following a similar effect. The entire sketch, therefore, shows a pattern of multiple (8) square clusters demonstrating dynamic motion. The size of each square (no matter the big ones or the small ones) varies as the clusters swing, so does the distance between each small square and between each cluster as well. Other tricks that contribute to the final effect include frameCount(), a system variable effectively facilitating dynamic motions, and Perlin noise, an effective function that produces “a more naturally ordered, harmonic succession of numbers” compared to the random() function.

– Further Development –

Based on an understanding the basic logic of the original code, several further manipulations that I could think of include but are not limited to:

• Motion pattern: 

I first utilized rotate() function on frameCount() variable and the for loop index without applying the noise() function, therefore making each cluster rotate following a clockwise circle track instead of swinging back and forth. Similarly, each small square is also set to rotate in circles yet anticlockwise by setting the parameter negative for rotate() function. Fm = frameCount()/100 was examined to be the proper speed of squares rotating visually and aesthetically. 

• Interaction

The most intuitive idea that came to my mind when seeing this project was to add mouse interactions to control the transformation in some sense. After several trials, I decided to change the extent of each cluster gathering together using mouseX(), in other words, the further the mouse is away from the center, the further the clusters are away from each other. The closer, the closer. In this sense, I utilized the map() function to map the mouseX() variable to the distance between the center to the furthest that each cluster could go (within the canvas). I constructed an updateP() function to update the parameters every time the mouse is moving in order to pass to the draw() function. I experimented several times and set r = 30 * noise(fm) in the end. The noise() function was applied to maintain the effect of each square dynamically varying sizes. 

• Color

Amazed at Prof. Moon’s example of transformation applications, I was especially impressed by the color effect of blendMode(ADD) where the most overlapping parts demonstrate the brightest colors instead of all lines showing the exact same color. Therefore I experimented with several blendMode() effects, finding the ADD effect the most attractive in my project. 

Besides, as I already applied mouse interactions, I intended to slightly change the color to make the visual effect in general more smoothly and dynamically. The map() function was again utilized to map the filling color from transparent (when away from the center) to bright (when close to the center where clusters gather together), while the stroke color from transparent (when close to the left) to bright (when close to the right). A gradual transition is therefore operable when users move the mouse around.