-
Notifications
You must be signed in to change notification settings - Fork 0
/
4_ToggleActivation.html
106 lines (93 loc) · 4.41 KB
/
4_ToggleActivation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="MasterStyle.css" />
<title>Large Graph Toggle - Example</title>
</head>
<body>
<h4>Toggle and activate some nodes <a href="https://github.com/range-et/PGL/blob/main/public/4_ToggleActivation.html">Code</a></h4>
<div id="toggle">Toggle Activation</div>
<canvas id="displayCanvas" class="displayCanvas"></canvas>
<script type="module">
// import the library
import * as PGL from "../Build/pgl_module.js";
// create an Erdos Reyni graph. Lets do 1000 Points for this example
const G = await PGL.Models.GenerateErdosReyni_n_p(1000, 0.02);
// since these graphs can be really large - they are not initialized
// so you must initialize them
G.initialize();
G.printData();
// now in this case we shall use the Kamada Kawai algorithm to initilaize all the positions
// this essentially spreads them out a little
const simulatedPosMap = await PGL.Drawing.SimulateKamadaKawai(G, 3, 500, 1, 1.5);
G.apply_position_map(simulatedPosMap);
// get the line map associated
const lmap = PGL.Drawing.DrawEdgeLinesDivisions(G, 1);
G.apply_edge_pos_maps(lmap)
// set the width and height
const width = 800;
const heigth = 700;
// pass in the graph and the canvas into the drawing object to draw it
// first get the canvas element
const canvas = document.getElementById("displayCanvas");
// then create a graph drawer object
// to do that first make a options object
const graphDrawerOptions = {
graph: G,
width: width,
height: heigth,
canvas: canvas
};
// then create the visualization window
// with those settings
const graph3d = new PGL.GraphDrawer.GraphDrawer3d(graphDrawerOptions);
// initialize this object before adding things to it
await graph3d.init();
// Create the 3d elements for the graph
// first describe a global scaling factor
const bounds = 0.1
// first create all the node elements
const nodeVisualElements = PGL.ThreeWrapper.DrawTHREEGraphVertices(G, bounds, 3, 0xffffff, 1);
// now in cases of edges - this is really what slows down the whole process
// A trick I use is to render sample about 10% of the lines and then draw them
// To do that collect all the edges (as an lmap)
const Edges = G.get_edge_map()
const EdgesToDraw = PGL.Utilities.getRandomSubset_map(Edges, 0.1);
const edgeVisualElements = PGL.ThreeWrapper.DrawThinEdgesFromEdgeMap(EdgesToDraw, bounds, 0x5fa8d3)
// add the node elements to the scene
graph3d.addVisElement(nodeVisualElements);
graph3d.addVisElement(edgeVisualElements);
// then there are two last steps for a 3d graph
// this is done so that other 3d objects can be added in later
// since the base library is three.js all standard three js things are possible
// now moving on to the two steps :
// make an animation function
function animate() {
requestAnimationFrame(animate);
graph3d.rendercall();
}
// append the graph renderer to the container
// and then drawing render calls
animate();
// lastly add a method so that everytime toggle activation is clicked the colors are randomized
function toggle_randomizer(){
// this need the child element - this probably would get fixed in a future update
PGL.ThreeWrapper.ResetVertexColors(nodeVisualElements.children[0]);
// in this case just randomly activate like 30% of the nodes
const activated = [];
for (let i = 0; i < G.nodes.size; i++) {
if(Math.random()<0.3){
activated.push(i)
}
}
// use this to change the activation thingy
PGL.ThreeWrapper.ChangeTheVertexColours(nodeVisualElements.children[0], activated, 0xff0000);
}
// assign this function to the toggle button
document.getElementById("toggle").onclick = toggle_randomizer;
</script>
</body>
</html>