GSoC 2019 Phase One

Unconsciously, the timeline for GSoC 2019 program has passed its first phase of coding period. Looking back in this period of time, I find that I’ve walked far from the starting point on the road of GSoC.

In this article, I’ll summarize what I’ve done, what I’ve learned and what my feelings are.

---

About the Project

Basic Information

My project for this program is Edge Animations for Large-Scale Network Graphs from Computational Biology @ University of Nebraska-Lincoln, or simpler, Helikar Lab. My mentor is Ales Saska, a very nice person!

Main Job

My main job is to add some features for ccNetViz, a library for rendering and operating with large-scale network graphs. As I written in my proposal, these features including:

1. Edge animation effects:
   1. show animation effects with color or shape change
   2. with speed control options and including some advanced ease effects
2. Demos to show animation effects, with options so that user can configurate
3. Documentation for edge animation to tell people how to use it

Technique Stack

• JavaScript: This is a JavaScript library and mainly written in JavaScript
  • Webpack: We use webpack to pack up JS files and arrange JS codes
  • Babel: To transcompile JS code so they can be used in old browser
• WebGL: The main function for rendering is implemented using WebGL to accomplish high efficiency
  • GLSL Shader: We use GLSL shaders to do complex calculation, including edge animation
• Others: Use some other library or tool to assist development
  • ESLint: lint and regulate our code
  • prettier: format code and keep the consistency among all developers
  • commit-lint: restrict commit message to certain standard

Why this one?

During the period of choosing project to participate in. I’ve spend a lot of time knowing about all kinds of organizations and projects. But I found that It was very hard to find a project with technique stack of WebGL and Graph Visualization, until I got this one. I will continue study for a master degree in Computer Science, specifically, Data Visualization. So I think this project is very suitable for me. One reason is that I have similar skills like WebGL and JavaScript which are compatible with this project so I can get start soon and contribute more on it. Another is that through this project, I’ll also experience a lot and learn a lot.

Done Work

After the community bound period, I’ve been familiar with my organization and mentor. Besides, I also done a few contribution to get me involved quickly. In the first phase of coding period. I followed what I have written in my proposal and suggestion from my mentor and got a reasonable result.

In one word, what I’ve done in this phase is adding edge color animation with a few configuration options to ccNetViz library.

Color Animation

As the picture shows, with edge animation, the color of certain part of edge will change to red and will move from source node to target node with time. With this effect, it may indicate that something flow in edges.

Configuration Options

Like other options for node or arrow. I also added some options to control the effects of edge animation. It includes:

1. Animation type: control the color change shape on edge, has three options:
   1. None: without animation
   2. Basic: pure color between start point and reached location
   3. Gradient: gradient color at reached location
2. Animation speed: specify the speed of movement.
3. Animation ease effects: It’s little boring if the animation speed is linear, which means the speed keeps same all the time. So I added some easing effects on animation speed following this site: https://easings.net/en. The options including most of easing functions in it.

Benchmark

The ccNetViz library mainly focuses on visualizing and operating on large-scale graph data. So the efficiency is very important. If edge animation is two slow to render or interact smoothly, it will be unbearable.

So I use real dataset to test animation efficiency as the figure shows:

I added FPS calculation function for ccNetViz so it can live update the render loop times. The benchmark results show that with animation, the quality of graph is worse that one without animation. But the FPS of animation keeps at around 60 regardless of how large dataset we use. Maybe because I put all animation function into shaders and GPU is faster for this kind of computation.

Implementation Detail

Animation position calculation

Every frame we need to update the color change position. So we have to draw graph with new parameters. Here we pass the render time since start.

const drawLoop = () => {
  context.renderTime = (Date.now() - startTime) / 1000.0;
  drawOnce();
  requestAnimationFrame(drawLoop);
};

Then we can set uniform in shader and fragment shader will handle where animation color should be drawn according to time. For example:

float pos = fract(v_time) * edgeLen;

Color animation effects

Simplest method to show animation through color, is to draw part of edge from start position to animation position by animation color, and the other part with original color. It can be simple written as:

float draw = 1. - step(pos, edgeLen);

But if we want some advanced animation effects, like gradient color at animation position, we have to write more complex mask function. For example:

float draw = fract(smoothstep(pos - gradLen, pos, edgeLen));

It will show a gradient color block of length gradLen right after pos.

Easing effects of animation

This page: https://easings.net/en, gives an intuitive presentation of different easing function. It’s cool if I can add them to color animation. Finally, I found an open source implementation of them on GitHub: https://github.com/glslify/glsl-easings. All I want to do is import them and add ease function before fract function like this:

float pos = ease(fract(v_time)) * edgeLen;

Faced Challenges

Existing code structures and functions

My first job of this program is to read existing code of project. This library already has many complex features so there are lots of modules in it. At first I have no idea of its structure and relation between different files. I asked Ales for help and he instructed me to focus on layer.js file and read its code and shaders. Then I started understanding ccNetViz’s mechanisms and added my code into it.

Animation speed control

For the first time, I basically fract time to range between 0 and 1 and used this factor to multiply totalLen and got animation position. But there was a problem. When coming edges with different length, the speed of animation will not be same. Longer edge will have higher speed. To make animation of all edges with same speed. I tried to use maxLen(window’s diagnal length) as base Length and for each edge, I use length of edge divides maxLen. After that, I get animation speed relate to its length. Longer edge will have longer cycle time and thus guarantee consistent speed.

Shader file loading

The original method to add shader code into project is using array of strings and concat them into a long string. It did work and simple in some extent. But It was very unfriendly for developer because we had to carefully watch on typo during coding and multiple arrays are also somewhat messy.

At beginning, I also wrote shader code in this way, but finally It got more difficult for me. Then mentor Ales suggested me to use webpack and raw-loader to loader text file. So I can split all shader code into individual files and import them. And with some pulgins of IDE, It even has code highlight.

Personal Feelings

This is my first time to do real contribution on open source project, so it’s really an amazing experience. Prior to this, I only open some issue for some projects on GitHub but never commit to them. But during this month, I even contributed tens of commits on ccNetViz. When I saw the project manager merged my pull request, I just thought that there will be thousands of people that can use features that I’ve written!

This month, I learned a lot from my mentor, Ales. He’s a very nice and patient person. I remembered that my first PR actually did some damage to the project. Thanks to Ales that point out my problem and let me fix it. Sometimes I found that I have no idea how to continue in a certain direction and Ales always could give me some very useful tips which help me out of woods.

I also learned a lot during this month. I learned some tools for team collaboration development, including ESLint and Prettier that help us normalize code, git-cz to do semantic git commits and Pull Request mechanism to deal with multiple contribution. Besides, I got a deeper understanding of WebGL and shaders. Basically I implemented all vital features using shaders. It’s faster and more powerful than I thought before.

Plan&Thought for Phase #2

I think for animation there are two factors. One is the speed of animation over time. The other is animation effects, or animation type. For speed factor, I’ve done it in phase #1. We can control the speed and ease effects of animation. I think that’s enough. So, at next phase, my biggest problem will be the animation type.

I’ve implemented two animation type, both about color change on edge. They show below:

Besides, I also mentioned double gradient color effect in my proposal, it looks like this:

So my first job is to add this color effect into ccNetViz.

After that, I’ll focus on the animation with edge’s shape deformation. It’s much more difficult than color change on edge. Currently, I propose three types of animation effect show below:

The first and the second are similar. They both have edge shape deformation at certain position on edge. The last one may be more troublesome, it includes whole change of edge.

These three types of animation, will be my main job during the following three or four weeks. Because I don’t know how to implement it yet, I have to research on them or learn some tricky skills of WebGL shaders. I thinks with the power of fragment shaders, I’ll finally find the right way to do it.