3D "ELASTIC" layout based on HTML5 WebGL

3D "ELASTIC" layout based on HTML5 WebGL

Molecular force (molecular force), also known as the Inter-molecular force and Van devis force, refers to the interaction between molecules. When the two molecules are far apart, they are mainly attractive. This force is mainly derived from the interaction of one molecule due to the polarization of the polar moment of the other molecule that rapidly changes over time; when the molecules are very close, the exclusion force is the main factor, because the outer electron clouds of each molecule begin to overlap.

HT for Web provides the force-directed layout (also known as force-directed layout) function, that is, based on the mutual mutex between nodes, there is gravity between nodes connected to each other, after the elastic layout runs for a period of time, the overall topology network structure will gradually reach a stable and balanced state of convergence. This feature is very interesting. Today we will show its charm.

This example address: http://www.hightopo.com/demo/pipeline/index.html

The use of stretch layout function requires the introduction of ht. js core library, and then introduce a ht-forcelayout.js of stretch layout plug-in library, because the form is also used, so the introduction of ht-form.js form plug-in Library:

1. 
   
2. 
   

The ht. layout. Force3dLayout class provides a 3D elastic layout. The constructor can input two parameters: DataModel and Graph3dView. By default, only unselected elements are laid out. If the constructor parameter is Graph3dView, The isMovable and isVisible functions of the view component will affect the layout of elements, the layoutable attribute on the element style can also be set to false to prevent elements from participating in the layout.

After introducing the background of the HT package's elastic layout, the next step is to help you easily achieve this effect.

First, we define a color array variable to store the color of each elastic ball. We also define a random function to generate a random number of colors in the array:

1. Var colorList = ['# FFAFA4', '# B887C5', '# b9ea9c',' # CFD9E7 ',' #4590B8 ',' # ff9c30'],
   
2. ColorLen = colorList. length;
   
3. Var randomColor = function (){
   
4. Var ran = Math. random () * colorLen;
   
5. Return colorList [Math. floor (ran)]; // random 6 colors
   
6. };

Create an elastic ball and generate a 3D node. Set the style attribute of the node to control the display mode of the node. Set "shape3d" to "sphere" to ht. node into a 3D sphere model, and then set the "shape3d" attribute to the previously defined random color. s3 is short for the setSize3d function in HT encapsulation that sets the 3D Node size, finally, add the node to the data model dataModel:

1. Var createNode = function (dm) {// create a node circle
   
2. Var node = new ht. Node ();
   
3. Node. s ({// set the style to the abbreviation of setStyle
   
4. 'Shape3d ': 'sphere ',
   
5. 'Shape3d. color': randomColor () // set random color });
   
6. Node. s3 (40, 40, 40 );
   
7. Dm. add (node); return node;
   
8. };

Now there is a line between various stretch balls, which we think is very unusual at first glance. It is also through the construction of a node, this node is customized through the HT for Web modeling manual setShape3dModel function. default. based on the curve of the xy plane, the createRingModel wraps around the 3D Ring Model formed in a week and name it 'custom ':

1. Ht. Default. setShape3dModel (// create a model based on the xy plane curve, forming a 3D model around a week. 'Custom ',
   
2. Ht. Default. createRingModel ([0.5, 0.5,-0.2, 0, 0.5,-0.5], [1, 3])
   
3. )

HT divides user-defined attributes and the default calling method of HT attributes into node. a and node. in this way, the two effective regions can be separated (for details, refer to the HT for Web getting started manual style). We used this method when creating pipelines:

1. Var updatePipeline = function (edge) {// reset the edge style
   
2. Var pipeline = edge. a ('pipeline ');
   
3. Pipeline. s3 (1, 1, 1); // set the size of pipeline. p3 (0, 0, 0); // set the coordinates
   
4. Var node1 = edge. getSourceAgent (), // obtain the starting node connected to the graph
   
5. Node2 = edge. getTargetAgent (); // obtain the target node connected to the graph
   
6. Pipeline. s ('Mat ', createMatrix (node1.p3 (), node2.p3 (), 20); // 3d overall graphic matrix change
   
7. };

The most mysterious thing is how can we achieve the "instant transfer" effect for two nodes?

We know that a matrix can describe any linear transformation. Linear transformation retains the straight lines and parallel lines. While linear transformation retains the straight lines, other geometric properties such as length, angle, area, and volume may be changed. In short, linear transformation may "stretch" the coordinate system, but it will not "bend" or "roll" the coordinate system. This function is mainly used to operate the "change matrix" of the dropped connection line after dragging the elastic ball. The change matrix is also HT encapsulated. default. the createMatrix function sets the style attribute mat of a node as a custom function to multiply the coordinates of the node by the value corresponding to the mat attribute, that is to say, if the Rotation Angle of the current pipeline is [Math. PI/6, 0, 0]. Suppose we set r3 to [Math. PI/3, 0, 0], then the node will rotate 90 degrees. It is very easy to create a change matrix:

1. Var createMatrix = function (p1, p2, width) {// createMatrix (array, matrix) converts scaling, moving, and rotating operations of a set of JSON descriptions into corresponding change matrices.
   
2. Var vec = [p2 [0]-p1 [0], p2 [1]-p1 [1], p2 [2]-p1 [2],
   
3. Dist = ht. Default. getDistance (p1, p2); // gets the distance between two points, or returns the vector length.
   
4. Ht. Default. createMatrix ({
   
5. S3: [width, dist, width],
   
6. R3: [Math. PI/2-Math. asin (vec [1]/dist), Math. atan2 (vec [0], vec [2]), 0],
   
7. RotationMode: 'xyz ',
   
8. T3: [(p1 [0] + p2 [0])/2, (p1 [1] + p2 [1])/2, (p1 [2] + p2 [2])/2]
   
9. });
   
10. };

After all the basic accessories are defined, set the "shape3d" attribute to the custom 3D model "custom" and set the "layoutable" attribute to "false" to prevent elements from participating in the layout, and connect the points through edge. a ('pipeline', node) refresh and add it to the data model dataModel:

1. Var createEdge = function (dm, node1, node2) {// create the edge of the 'custom' Model
   
2. Var node = new ht. Node ();
   
3. Node. s ({'shape3d ': 'custom ',
   
4. 'Shape3d. color': '# ECE0D4', 'layoutable': false
   
5. });
   
6. Dm. add (node );
   
7. Var edge = new ht. Edge (node1, node2 );
   
8. Edge. a ('pipeline', node );
   
9. Edge. s ('edge. color', 'rgba (0, 0, 0, 0 )');
   
10. Dm. add (edge); return edge;
    
11. };

Plug: We can also in the industry with HeatMap hot map on the article, the effect is still very dazzling, the specific address http://hightopo.com/guide/guide/plugin/forcelayout/examples/example_heatmap3d.html

After drawing all the images on the interface, only the form is left. First, add the form to the HTML page, using the HT. widget. FormPane function encapsulated by ht:

1. Var formPane = new ht. widget. FormPane ();
   
2. FormPane. setWidth (230 );
   
3. FormPane. setHeight (125 );
   
4. FormPane. addToDOM ();

Remember to set the width and height of the form, otherwise it will not be displayed.

To Add rows to a form, use the addRow function. We will focus on the following lines in the form: Color, Range, and Intensity. These three names are mainly used to control the "headlight. In HT, you can use the setHeadlightColor/setHeadlightRange/setHeadlightIntensity functions to control the color, range, and lamp intensity of the "headlight". The onValueChanged attribute triggers the event after the attribute value changes:

1. ['Color', 'range', 'intensity ']. forEach (function (name ){
   
2. Var obj = {id: name },
   
3. Func = function (oV, nV ){
   
4. G3d ['setheadlight' + name] (nV); // === g3d. setHeadlightColor (nV)/g3d. setHeadlightRange (nV)/g3d. setHeadlightIntensity (nV)
   
5. };
   
6. If (name = 'color ')
   
7. Obj. colorPicker = {// ht. widget. ColorPicker: Color Selection box
   
8. Instant: true,
   
9. Value: g3d ['getheadlight' + name] (), // === g3d. getHeadlightColor ()
   
10. OnValueChanged: func
    
11. };
    
12. Else
    
13. Obj. slider = {// slider min: 0,
    
14. Max: name = 'range '? 20000: 3,
    
15. Step: 0.1,
    
16. Value: g3d ['getheadlight' + name] (),
    
17. OnValueChanged: func
    
18. };
    
19. FormPane. addRow ([name, obj], [70, 0.1]);
    
20. });

Slider and colorPicker are HT-defined slide and color selector. for more information, see the HT for Web form manual.

If you still do not understand, please consult me, or you can go to the HT for Web official website to check the manual.