GSoC 2019 Phase Two

The July comes to the end and the second phase of GSoC are going to be over. During this month, I continue doing my job of GSoC following what I’ve written in my proposal and suggestions from my mentor. Finally, I have made some things and learned many things.


Done Work

During this period, my work mainly includes two part: one is refactoring layer.js file of ccNetViz source code. The other is adding more animation effects for ccNetViz library. Besides, I also add some examples and fix some bugs about added features.

layer.js Refactor

I almost spent first two week of this month to do refactoring on layer.js file. It’s a 2000 line around long source file and is so complex that I as well as other developers could not understand each part of it. So according to suggestion of mentor Ales, I refactored this file in a relative shallow level. I split this file according to different shape or element into several folder respectively and in top level, index.js of layer folder, I import all these parts so it will realize the original functions.

More Animation Effects

In phase one of this program, I added several color animation effects, including basic binary color animation and little advanced gradient color animation. During this month, I continue add new animation features.

First I added a new color animation called double gradient, it looks like this:

-w570

It’s similar with previous color animation but with gradient color at both side of animation position.

This month I also implemented two shape animation, animation using some kind of shape movement. Till now I added bubble animation and wave animation.

The bubble animation looks like following:

-w554

At animation position, the bubble-like shape will be shown on edge and as time changes, the bubble will move from start to end. Through this, it looks like that there’s some liquid flow along the edge.

The wave animation looks like:

-w544

It shows some pulse move from source node to target node.

Bug-fix and Examples

During the implementation process, through I add more features, I also bring more bugs to our project. So I spend some time fixing these bugs.

It includes:

  • Old example not compatible with new library, including: SDF font example, circular example, multilevel example
  • animation cannot interact with pan&zoom problem
  • bubble animation, multi bubble after interaction bug

I also added several example on GitHub pages of our library:

-w1074

Implementation Detail

shape animation

Shape animation if quite different comparing to color animation. Color animation basically uses a different color at animation position and without draw things outside the edge or erase part of edge. But shape animation has to do so. For example, bubble animation need to draw extra part around animation position outside the bound of edge. Wave animation is even more complex. It needs not only draw extra part, the wave part outside edge, but also needs to not draw on edge where there’s a wave shift.

First I have two thoughts. One is to draw a customized shape instead of rectangle and realize certain shape animation. But it requires more complex structure because WebGL has to concat many small triangles and combine them to a free shape. It’s very inefficient for performance and hard to calculate shape with animation position changes over time.

So I choose to draw rectangle just like color animation. But I draw a wider one so it can include max width of animation shape like a wave. And I process this large rectangle in fragment shader and cut it to destination shape.

Faced Challenges

Refactoring

Actually the process of refactoring layer.js is not so successful. I got stuck at start and could not know how to find an entry point. I tried to simply split code related to different elements and finally the whole code was broken. Because there are many dependancies among all these parts. I should not split them directly.

At that time, my mentor gave me much help, he pointed out a clear architecture and I just followed his and did refactoring step by step and finally done this job.

Animation with Pan&Zoom

After I implemented bubble animation. There were many bugs in it. A vital bug is that the animation would be broken if I pan or zoom use mouse. I spent a lot of time finding where this bug happened. At the end, I figured out that my position of source node and target node were not updated after mouse interaction. The animation used old position but the canvas showed graph with new position.

After I found this problem. I made a transform at vertex shader, multiplied the position array with viewport transform matrix and got new position and passed new position to fragment shader. Now the animations can work well with pan&zoom.

Personal Feelings

This month is quite different from first month. First month I met a lot of novel things like working for open source group, contributing on GitHub, send PR and fix bug and so on. This month, I already familiar with these processes and I become a trained developer. So I think I become more efficient when developing. It’s really an satisfying thing.

This month I faced some problem and got stuck for some days. It felt no good for me. But thank to my mentor Ales, he gave me a lot of help and even instruct me writing code line by line. I learned a lot from him.

Plan&Thought for Phase #3

Looking back in my proposal, I found that I only left dotted shape animation not implemented. This will be my main job at next week.

image005

After I implemented this, I basically done all features. And then I will focus on demo and examples, as well as documentation.

But before that, an important work is to make all options of animation configurable. Currently many options are fixed with some magic number. Next step, I should make them all customizable for user. After that, I will add documentation for these options.