summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authoremkael <emkael@tlen.pl>2015-11-20 15:01:15 +0100
committeremkael <emkael@tlen.pl>2015-11-20 15:01:15 +0100
commit35c11872829a0ba24301a6e324e2b4958cd3e3ec (patch)
tree896a75dec4ece978dd9591dcf21c92e144847840
parent2149b9150157c59685d7cf0b888a437ebacf9bae (diff)
:O :O :O :O :O
* image with circle clipping * click detection * cool starry background * tooltips and expansion on click
-rw-r--r--_img/photo1.jpgbin0 -> 42961 bytes
-rw-r--r--_img/photo2.jpgbin0 -> 39625 bytes
-rw-r--r--_img/photo3.jpgbin0 -> 56407 bytes
-rw-r--r--_img/photo4.jpgbin0 -> 41621 bytes
-rw-r--r--_img/photo5.jpgbin0 -> 57660 bytes
-rw-r--r--generate_graph.py43
-rw-r--r--graph.json2
-rw-r--r--main.js123
8 files changed, 136 insertions, 32 deletions
diff --git a/_img/photo1.jpg b/_img/photo1.jpg
new file mode 100644
index 0000000..f01641b
--- /dev/null
+++ b/_img/photo1.jpg
Binary files differ
diff --git a/_img/photo2.jpg b/_img/photo2.jpg
new file mode 100644
index 0000000..f230d41
--- /dev/null
+++ b/_img/photo2.jpg
Binary files differ
diff --git a/_img/photo3.jpg b/_img/photo3.jpg
new file mode 100644
index 0000000..94ebe82
--- /dev/null
+++ b/_img/photo3.jpg
Binary files differ
diff --git a/_img/photo4.jpg b/_img/photo4.jpg
new file mode 100644
index 0000000..7035b6b
--- /dev/null
+++ b/_img/photo4.jpg
Binary files differ
diff --git a/_img/photo5.jpg b/_img/photo5.jpg
new file mode 100644
index 0000000..5757123
--- /dev/null
+++ b/_img/photo5.jpg
Binary files differ
diff --git a/generate_graph.py b/generate_graph.py
index 7fb44f9..d47e345 100644
--- a/generate_graph.py
+++ b/generate_graph.py
@@ -11,28 +11,19 @@ subnode_threshold = float(sys.argv[10])
nodes = {}
-nodes['n0'] = {'width': base_size, 'height': base_size, 'color': 'white', 'mass': base_size, 'fixed': True, 'x': 0, 'y': 0}
+nodes['n0'] = {'width': base_size, 'height': base_size, 'color': 'rgba(255,255,255,0.01)', 'mass': base_size, 'fixed': True, 'x': 0, 'y': 0, 'image': 'photo' + str(random.randint(1, 5)) + '.jpg'}
node_count = 1
node_sizes = []
for i in counts:
node_sizes = node_sizes + [sizes.pop(0)] * int(i)
-node_images = {
- 1.0: 'blue.png',
- 0.9: 'blue.png',
- 0.8: 'blue.png',
- 0.7: 'blue.png',
- 0.3: 'red.png',
- 0.2: 'yellow.png',
- 0.1: 'black.png'
-}
node_colors = {
- 1.0: '#3495FF',
- 0.9: '#3495FF',
- 0.8: '#3495FF',
- 0.7: '#3495FF',
- 0.3: 'red',
+ 1.0: 'rgba(52,149,255,0.33)',
+ 0.9: 'rgba(52,149,255,0.33)',
+ 0.8: 'rgba(52,149,255,0.33)',
+ 0.7: 'rgba(52,149,255,0.33)',
+ 0.3: 'rgba(255,0,0,0.33)',
0.2: 'yellow',
0.1: 'white'
}
@@ -47,9 +38,11 @@ for node_size in node_sizes:
node_dimension = max(10, int(ceil(base_size * node_size * size_quotient)))
node_mass = int(ceil(base_size * mass_quotient))
node_angular_position = angular_positions[node_count-1]
- node_position = { 'x': 0.05 * cos(node_angular_position),
- 'y': 0.05 * sin(node_angular_position) }
+ node_position = { 'x': 0.8 * cos(node_angular_position),
+ 'y': 0.8 * sin(node_angular_position) }
nodes[node_id] = {'width': node_dimension, 'height': node_dimension, 'mass': node_mass, 'color': node_colors[node_size], 'fixed': True, 'x': node_position['x'], 'y': node_position['y']}
+ if node_size > 0.2:
+ nodes[node_id]['image'] = 'photo' + str(random.randint(1, 5)) + '.jpg'
edges['n0'][node_id] = {}
edges[node_id] = {}
node_count += 1
@@ -59,18 +52,20 @@ for node_size in node_sizes:
subnode_id = node_id + '_' + str(subnode_count)
subnode_dimension = max(5, int(ceil(base_size * node_size * subnode_size * size_quotient * size_quotient)))
subnode_mass = int(ceil(base_size * mass_quotient))
- nodes[subnode_id] = {'width': subnode_dimension, 'height': subnode_dimension, 'mass': subnode_mass, 'color': node_colors[subnode_size], 'fixed': True, 'x': node_position['x'], 'y': node_position['y']}
+ nodes[subnode_id] = {'width': subnode_dimension, 'height': subnode_dimension, 'mass': subnode_mass, 'color': node_colors[subnode_size], 'fixed': True, 'x': node_position['x'] * (0.995 + random.random() / 100), 'y': node_position['y'] * (0.995 + random.random() / 100)}
+ if subnode_size > 0.2:
+ nodes[subnode_id]['image'] = 'photo' + str(random.randint(1, 5)) + '.jpg'
edges[node_id][subnode_id] = {}
subnode_count += 1
print json.dumps(
{
- 'repulsion': 1000,
- 'stiffness': 100,
- 'friction': 100,
- 'precision': 0.99,
- 'fps': 40,
- 'dt': 0.05,
+ 'repulsion': 2200,
+ 'stiffness': 900,
+ 'friction': 0,
+ 'precision': 0.1,
+ 'fps': 15,
+ 'dt': 0.005,
'gravity': True,
'nodes': nodes,
'edges': edges
diff --git a/graph.json b/graph.json
index 108ffb7..c04e3e6 100644
--- a/graph.json
+++ b/graph.json
@@ -1 +1 @@
-{"nodes": {"n7_4": {"color": "yellow", "height": 9, "width": 9, "mass": 10, "y": -0.04990133642141358, "x": -0.0031395259764656607, "fixed": true}, "n7_5": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -0.04990133642141358, "x": -0.0031395259764656607, "fixed": true}, "n7_6": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -0.04990133642141358, "x": -0.0031395259764656607, "fixed": true}, "n7_1": {"color": "red", "height": 14, "width": 14, "mass": 10, "y": -0.04990133642141358, "x": -0.0031395259764656607, "fixed": true}, "n7_2": {"color": "red", "height": 14, "width": 14, "mass": 10, "y": -0.04990133642141358, "x": -0.0031395259764656607, "fixed": true}, "n7_3": {"color": "yellow", "height": 9, "width": 9, "mass": 10, "y": -0.04990133642141358, "x": -0.0031395259764656607, "fixed": true}, "n5_2": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.04221639627510076, "x": 0.02679133974894983, "fixed": true}, "n39": {"color": "yellow", "height": 20, "width": 20, "mass": 10, "y": 0.04221639627510075, "x": -0.026791339748949844, "fixed": true}, "n5_1": {"color": "red", "height": 15, "width": 15, "mass": 10, "y": 0.04221639627510076, "x": 0.02679133974894983, "fixed": true}, "n30": {"color": "red", "height": 30, "width": 30, "mass": 10, "y": -0.02408768370508577, "x": -0.043815334002193174, "fixed": true}, "n31": {"color": "yellow", "height": 20, "width": 20, "mass": 10, "y": 0.04990133642141358, "x": -0.0031395259764656703, "fixed": true}, "n32": {"color": "yellow", "height": 20, "width": 20, "mass": 10, "y": -0.0062666616782151895, "x": 0.0496057350657239, "fixed": true}, "n25_2": {"color": "yellow", "height": 5, "width": 5, "mass": 10, "y": 0.04990133642141358, "x": 0.0031395259764656655, "fixed": true}, "n34": {"color": "yellow", "height": 20, "width": 20, "mass": 10, "y": -0.02938926261462367, "x": -0.040450849718747364, "fixed": true}, "n35": {"color": "yellow", "height": 20, "width": 20, "mass": 10, "y": -0.042216396275100765, "x": -0.026791339748949816, "fixed": true}, "n36": {"color": "yellow", "height": 20, "width": 20, "mass": 10, "y": -0.04755282581475768, "x": -0.015450849718747378, "fixed": true}, "n37": {"color": "yellow", "height": 20, "width": 20, "mass": 10, "y": 0.029389262614623657, "x": 0.04045084971874738, "fixed": true}, "n27_9": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.04755282581475768, "x": 0.015450849718747373, "fixed": true}, "n3_8": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -0.04911436253643443, "x": 0.009369065729286257, "fixed": true}, "n24_4": {"color": "red", "height": 5, "width": 5, "mass": 10, "y": -0.018406227634233895, "x": 0.046488824294412576, "fixed": true}, "n27_8": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.04755282581475768, "x": 0.015450849718747373, "fixed": true}, "n24_5": {"color": "yellow", "height": 5, "width": 5, "mass": 10, "y": -0.018406227634233895, "x": 0.046488824294412576, "fixed": true}, "n3_1": {"color": "#3495FF", "height": 45, "width": 45, "mass": 10, "y": -0.04911436253643443, "x": 0.009369065729286257, "fixed": true}, "n8_5": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -1.6081226496766367e-17, "x": -0.05, "fixed": true}, "n8_4": {"color": "yellow", "height": 9, "width": 9, "mass": 10, "y": -1.6081226496766367e-17, "x": -0.05, "fixed": true}, "n8_3": {"color": "yellow", "height": 9, "width": 9, "mass": 10, "y": -1.6081226496766367e-17, "x": -0.05, "fixed": true}, "n8_2": {"color": "yellow", "height": 9, "width": 9, "mass": 10, "y": -1.6081226496766367e-17, "x": -0.05, "fixed": true}, "n8_1": {"color": "#3495FF", "height": 45, "width": 45, "mass": 10, "y": -1.6081226496766367e-17, "x": -0.05, "fixed": true}, "n3_7": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -0.04911436253643443, "x": 0.009369065729286257, "fixed": true}, "n1_4": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -0.018406227634233916, "x": -0.04648882429441256, "fixed": true}, "n1_2": {"color": "red", "height": 15, "width": 15, "mass": 10, "y": -0.018406227634233916, "x": -0.04648882429441256, "fixed": true}, "n3_2": {"color": "#3495FF", "height": 45, "width": 45, "mass": 10, "y": -0.04911436253643443, "x": 0.009369065729286257, "fixed": true}, "n3_3": {"color": "#3495FF", "height": 40, "width": 40, "mass": 10, "y": -0.04911436253643443, "x": 0.009369065729286257, "fixed": true}, "n12": {"color": "#3495FF", "height": 90, "width": 90, "mass": 10, "y": 0.04524135262330098, "x": 0.021288964578253633, "fixed": true}, "n13": {"color": "#3495FF", "height": 90, "width": 90, "mass": 10, "y": -0.02938926261462363, "x": 0.04045084971874739, "fixed": true}, "n10": {"color": "#3495FF", "height": 90, "width": 90, "mass": 10, "y": -0.012434494358242752, "x": -0.048429158056431554, "fixed": true}, "n11": {"color": "#3495FF", "height": 90, "width": 90, "mass": 10, "y": -0.03422735529643444, "x": -0.03644843137107058, "fixed": true}, "n16": {"color": "#3495FF", "height": 80, "width": 80, "mass": 10, "y": 0.03852566213878947, "x": -0.03187119948743449, "fixed": true}, "n17": {"color": "#3495FF", "height": 80, "width": 80, "mass": 10, "y": 0.0184062276342339, "x": 0.04648882429441257, "fixed": true}, "n14": {"color": "#3495FF", "height": 90, "width": 90, "mass": 10, "y": 0.012434494358242742, "x": -0.048429158056431554, "fixed": true}, "n15": {"color": "#3495FF", "height": 90, "width": 90, "mass": 10, "y": -0.024087683705085766, "x": 0.04381533400219318, "fixed": true}, "n3_4": {"color": "red", "height": 15, "width": 15, "mass": 10, "y": -0.04911436253643443, "x": 0.009369065729286257, "fixed": true}, "n18": {"color": "#3495FF", "height": 80, "width": 80, "mass": 10, "y": 0.024087683705085763, "x": -0.04381533400219318, "fixed": true}, "n19": {"color": "#3495FF", "height": 70, "width": 70, "mass": 10, "y": 0.006266661678215205, "x": -0.0496057350657239, "fixed": true}, "n3_5": {"color": "red", "height": 15, "width": 15, "mass": 10, "y": -0.04911436253643443, "x": 0.009369065729286257, "fixed": true}, "n3_6": {"color": "yellow", "height": 10, "width": 10, "mass": 10, "y": -0.04911436253643443, "x": 0.009369065729286257, "fixed": true}, "n4_3": {"color": "yellow", "height": 10, "width": 10, "mass": 10, "y": -0.012434494358242724, "x": 0.04842915805643156, "fixed": true}, "n4_2": {"color": "red", "height": 15, "width": 15, "mass": 10, "y": -0.012434494358242724, "x": 0.04842915805643156, "fixed": true}, "n4_1": {"color": "#3495FF", "height": 50, "width": 50, "mass": 10, "y": -0.012434494358242724, "x": 0.04842915805643156, "fixed": true}, "n4_6": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -0.012434494358242724, "x": 0.04842915805643156, "fixed": true}, "n4_5": {"color": "yellow", "height": 10, "width": 10, "mass": 10, "y": -0.012434494358242724, "x": 0.04842915805643156, "fixed": true}, "n4_4": {"color": "yellow", "height": 10, "width": 10, "mass": 10, "y": -0.012434494358242724, "x": 0.04842915805643156, "fixed": true}, "n33": {"color": "yellow", "height": 20, "width": 20, "mass": 10, "y": -0.047552825814757685, "x": 0.015450849718747363, "fixed": true}, "n24_2": {"color": "#3495FF", "height": 14, "width": 14, "mass": 10, "y": -0.018406227634233895, "x": 0.046488824294412576, "fixed": true}, "n38": {"color": "yellow", "height": 20, "width": 20, "mass": 10, "y": 0.0, "x": 0.05, "fixed": true}, "n2_1": {"color": "#3495FF", "height": 50, "width": 50, "mass": 10, "y": 0.03852566213878947, "x": 0.031871199487434484, "fixed": true}, "n2_3": {"color": "#3495FF", "height": 45, "width": 45, "mass": 10, "y": 0.03852566213878947, "x": 0.031871199487434484, "fixed": true}, "n2_2": {"color": "#3495FF", "height": 45, "width": 45, "mass": 10, "y": 0.03852566213878947, "x": 0.031871199487434484, "fixed": true}, "n2_4": {"color": "#3495FF", "height": 35, "width": 35, "mass": 10, "y": 0.03852566213878947, "x": 0.031871199487434484, "fixed": true}, "n28_2": {"color": "red", "height": 5, "width": 5, "mass": 10, "y": 0.04911436253643444, "x": 0.009369065729286226, "fixed": true}, "n25_1": {"color": "#3495FF", "height": 14, "width": 14, "mass": 10, "y": 0.04990133642141358, "x": 0.0031395259764656655, "fixed": true}, "n1_3": {"color": "red", "height": 15, "width": 15, "mass": 10, "y": -0.018406227634233916, "x": -0.04648882429441256, "fixed": true}, "n29_1": {"color": "#3495FF", "height": 14, "width": 14, "mass": 10, "y": -0.038525662138789454, "x": 0.0318711994874345, "fixed": true}, "n29_3": {"color": "red", "height": 5, "width": 5, "mass": 10, "y": -0.038525662138789454, "x": 0.0318711994874345, "fixed": true}, "n29_2": {"color": "red", "height": 5, "width": 5, "mass": 10, "y": -0.038525662138789454, "x": 0.0318711994874345, "fixed": true}, "n6_1": {"color": "red", "height": 14, "width": 14, "mass": 10, "y": 0.029389262614623664, "x": -0.04045084971874737, "fixed": true}, "n29_4": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -0.038525662138789454, "x": 0.0318711994874345, "fixed": true}, "n6_3": {"color": "yellow", "height": 9, "width": 9, "mass": 10, "y": 0.029389262614623664, "x": -0.04045084971874737, "fixed": true}, "n6_2": {"color": "yellow", "height": 9, "width": 9, "mass": 10, "y": 0.029389262614623664, "x": -0.04045084971874737, "fixed": true}, "n1_1": {"color": "#3495FF", "height": 45, "width": 45, "mass": 10, "y": -0.018406227634233916, "x": -0.04648882429441256, "fixed": true}, "n22_6": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.01243449435824274, "x": 0.048429158056431554, "fixed": true}, "n22_7": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.01243449435824274, "x": 0.048429158056431554, "fixed": true}, "n22_4": {"color": "yellow", "height": 5, "width": 5, "mass": 10, "y": 0.01243449435824274, "x": 0.048429158056431554, "fixed": true}, "n22_5": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.01243449435824274, "x": 0.048429158056431554, "fixed": true}, "n22_2": {"color": "red", "height": 5, "width": 5, "mass": 10, "y": 0.01243449435824274, "x": 0.048429158056431554, "fixed": true}, "n22_3": {"color": "red", "height": 5, "width": 5, "mass": 10, "y": 0.01243449435824274, "x": 0.048429158056431554, "fixed": true}, "n22_1": {"color": "#3495FF", "height": 14, "width": 14, "mass": 10, "y": 0.01243449435824274, "x": 0.048429158056431554, "fixed": true}, "n15_4": {"color": "yellow", "height": 9, "width": 9, "mass": 10, "y": -0.024087683705085766, "x": 0.04381533400219318, "fixed": true}, "n15_5": {"color": "yellow", "height": 9, "width": 9, "mass": 10, "y": -0.024087683705085766, "x": 0.04381533400219318, "fixed": true}, "n15_1": {"color": "#3495FF", "height": 45, "width": 45, "mass": 10, "y": -0.024087683705085766, "x": 0.04381533400219318, "fixed": true}, "n15_2": {"color": "red", "height": 14, "width": 14, "mass": 10, "y": -0.024087683705085766, "x": 0.04381533400219318, "fixed": true}, "n15_3": {"color": "red", "height": 14, "width": 14, "mass": 10, "y": -0.024087683705085766, "x": 0.04381533400219318, "fixed": true}, "n17_2": {"color": "#3495FF", "height": 32, "width": 32, "mass": 10, "y": 0.0184062276342339, "x": 0.04648882429441257, "fixed": true}, "n17_3": {"color": "#3495FF", "height": 28, "width": 28, "mass": 10, "y": 0.0184062276342339, "x": 0.04648882429441257, "fixed": true}, "n24_6": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -0.018406227634233895, "x": 0.046488824294412576, "fixed": true}, "n17_1": {"color": "#3495FF", "height": 32, "width": 32, "mass": 10, "y": 0.0184062276342339, "x": 0.04648882429441257, "fixed": true}, "n17_6": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.0184062276342339, "x": 0.04648882429441257, "fixed": true}, "n24_1": {"color": "#3495FF", "height": 14, "width": 14, "mass": 10, "y": -0.018406227634233895, "x": 0.046488824294412576, "fixed": true}, "n17_4": {"color": "yellow", "height": 8, "width": 8, "mass": 10, "y": 0.0184062276342339, "x": 0.04648882429441257, "fixed": true}, "n17_5": {"color": "yellow", "height": 8, "width": 8, "mass": 10, "y": 0.0184062276342339, "x": 0.04648882429441257, "fixed": true}, "n19_1": {"color": "#3495FF", "height": 35, "width": 35, "mass": 10, "y": 0.006266661678215205, "x": -0.0496057350657239, "fixed": true}, "n19_2": {"color": "#3495FF", "height": 32, "width": 32, "mass": 10, "y": 0.006266661678215205, "x": -0.0496057350657239, "fixed": true}, "n19_3": {"color": "#3495FF", "height": 28, "width": 28, "mass": 10, "y": 0.006266661678215205, "x": -0.0496057350657239, "fixed": true}, "n19_4": {"color": "red", "height": 11, "width": 11, "mass": 10, "y": 0.006266661678215205, "x": -0.0496057350657239, "fixed": true}, "n19_5": {"color": "red", "height": 11, "width": 11, "mass": 10, "y": 0.006266661678215205, "x": -0.0496057350657239, "fixed": true}, "n19_6": {"color": "yellow", "height": 7, "width": 7, "mass": 10, "y": 0.006266661678215205, "x": -0.0496057350657239, "fixed": true}, "n19_7": {"color": "yellow", "height": 7, "width": 7, "mass": 10, "y": 0.006266661678215205, "x": -0.0496057350657239, "fixed": true}, "n19_8": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.006266661678215205, "x": -0.0496057350657239, "fixed": true}, "n19_9": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.006266661678215205, "x": -0.0496057350657239, "fixed": true}, "n26_2": {"color": "red", "height": 5, "width": 5, "mass": 10, "y": 0.03422735529643443, "x": -0.03644843137107059, "fixed": true}, "n26_3": {"color": "red", "height": 5, "width": 5, "mass": 10, "y": 0.03422735529643443, "x": -0.03644843137107059, "fixed": true}, "n26_1": {"color": "#3495FF", "height": 14, "width": 14, "mass": 10, "y": 0.03422735529643443, "x": -0.03644843137107059, "fixed": true}, "n26_6": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.03422735529643443, "x": -0.03644843137107059, "fixed": true}, "n26_4": {"color": "yellow", "height": 5, "width": 5, "mass": 10, "y": 0.03422735529643443, "x": -0.03644843137107059, "fixed": true}, "n26_5": {"color": "yellow", "height": 5, "width": 5, "mass": 10, "y": 0.03422735529643443, "x": -0.03644843137107059, "fixed": true}, "n49": {"color": "white", "height": 10, "width": 10, "mass": 10, "y": 0.03422735529643444, "x": 0.03644843137107058, "fixed": true}, "n48": {"color": "white", "height": 10, "width": 10, "mass": 10, "y": 0.006266661678215213, "x": 0.0496057350657239, "fixed": true}, "n41": {"color": "white", "height": 10, "width": 10, "mass": 10, "y": -0.04990133642141358, "x": 0.0031395259764656863, "fixed": true}, "n40": {"color": "yellow", "height": 20, "width": 20, "mass": 10, "y": -0.006266661678215215, "x": -0.0496057350657239, "fixed": true}, "n43": {"color": "white", "height": 10, "width": 10, "mass": 10, "y": -0.03852566213878947, "x": -0.03187119948743448, "fixed": true}, "n24_3": {"color": "#3495FF", "height": 14, "width": 14, "mass": 10, "y": -0.018406227634233895, "x": 0.046488824294412576, "fixed": true}, "n45": {"color": "white", "height": 10, "width": 10, "mass": 10, "y": 0.04524135262330098, "x": -0.021288964578253636, "fixed": true}, "n9_4": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -0.04221639627510075, "x": 0.02679133974894984, "fixed": true}, "n47": {"color": "white", "height": 10, "width": 10, "mass": 10, "y": -0.04524135262330099, "x": -0.02128896457825361, "fixed": true}, "n46": {"color": "white", "height": 10, "width": 10, "mass": 10, "y": -0.04911436253643444, "x": -0.009369065729286231, "fixed": true}, "n50": {"color": "white", "height": 10, "width": 10, "mass": 10, "y": 0.04755282581475768, "x": -0.015450849718747378, "fixed": true}, "n9_2": {"color": "#3495FF", "height": 36, "width": 36, "mass": 10, "y": -0.04221639627510075, "x": 0.02679133974894984, "fixed": true}, "n30_1": {"color": "#3495FF", "height": 12, "width": 12, "mass": 10, "y": -0.02408768370508577, "x": -0.043815334002193174, "fixed": true}, "n9_3": {"color": "yellow", "height": 9, "width": 9, "mass": 10, "y": -0.04221639627510075, "x": 0.02679133974894984, "fixed": true}, "n11_1": {"color": "#3495FF", "height": 45, "width": 45, "mass": 10, "y": -0.03422735529643444, "x": -0.03644843137107058, "fixed": true}, "n11_2": {"color": "#3495FF", "height": 41, "width": 41, "mass": 10, "y": -0.03422735529643444, "x": -0.03644843137107058, "fixed": true}, "n9_1": {"color": "#3495FF", "height": 45, "width": 45, "mass": 10, "y": -0.04221639627510075, "x": 0.02679133974894984, "fixed": true}, "n20_1": {"color": "#3495FF", "height": 35, "width": 35, "mass": 10, "y": 0.024087683705085766, "x": 0.04381533400219318, "fixed": true}, "n20_2": {"color": "#3495FF", "height": 32, "width": 32, "mass": 10, "y": 0.024087683705085766, "x": 0.04381533400219318, "fixed": true}, "n20_3": {"color": "#3495FF", "height": 32, "width": 32, "mass": 10, "y": 0.024087683705085766, "x": 0.04381533400219318, "fixed": true}, "n13_6": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -0.02938926261462363, "x": 0.04045084971874739, "fixed": true}, "n28_1": {"color": "red", "height": 5, "width": 5, "mass": 10, "y": 0.04911436253643444, "x": 0.009369065729286226, "fixed": true}, "n13_4": {"color": "red", "height": 14, "width": 14, "mass": 10, "y": -0.02938926261462363, "x": 0.04045084971874739, "fixed": true}, "n13_5": {"color": "yellow", "height": 9, "width": 9, "mass": 10, "y": -0.02938926261462363, "x": 0.04045084971874739, "fixed": true}, "n13_2": {"color": "#3495FF", "height": 41, "width": 41, "mass": 10, "y": -0.02938926261462363, "x": 0.04045084971874739, "fixed": true}, "n13_3": {"color": "red", "height": 14, "width": 14, "mass": 10, "y": -0.02938926261462363, "x": 0.04045084971874739, "fixed": true}, "n13_1": {"color": "#3495FF", "height": 41, "width": 41, "mass": 10, "y": -0.02938926261462363, "x": 0.04045084971874739, "fixed": true}, "n14_4": {"color": "yellow", "height": 9, "width": 9, "mass": 10, "y": 0.012434494358242742, "x": -0.048429158056431554, "fixed": true}, "n14_1": {"color": "#3495FF", "height": 45, "width": 45, "mass": 10, "y": 0.012434494358242742, "x": -0.048429158056431554, "fixed": true}, "n14_3": {"color": "yellow", "height": 9, "width": 9, "mass": 10, "y": 0.012434494358242742, "x": -0.048429158056431554, "fixed": true}, "n14_2": {"color": "#3495FF", "height": 45, "width": 45, "mass": 10, "y": 0.012434494358242742, "x": -0.048429158056431554, "fixed": true}, "n21_1": {"color": "#3495FF", "height": 14, "width": 14, "mass": 10, "y": -0.03422735529643441, "x": 0.036448431371070594, "fixed": true}, "n21_3": {"color": "#3495FF", "height": 14, "width": 14, "mass": 10, "y": -0.03422735529643441, "x": 0.036448431371070594, "fixed": true}, "n21_2": {"color": "#3495FF", "height": 14, "width": 14, "mass": 10, "y": -0.03422735529643441, "x": 0.036448431371070594, "fixed": true}, "n21_5": {"color": "red", "height": 5, "width": 5, "mass": 10, "y": -0.03422735529643441, "x": 0.036448431371070594, "fixed": true}, "n21_4": {"color": "#3495FF", "height": 12, "width": 12, "mass": 10, "y": -0.03422735529643441, "x": 0.036448431371070594, "fixed": true}, "n21_7": {"color": "yellow", "height": 5, "width": 5, "mass": 10, "y": -0.03422735529643441, "x": 0.036448431371070594, "fixed": true}, "n21_6": {"color": "yellow", "height": 5, "width": 5, "mass": 10, "y": -0.03422735529643441, "x": 0.036448431371070594, "fixed": true}, "n23_7": {"color": "yellow", "height": 5, "width": 5, "mass": 10, "y": 0.01840622763423389, "x": -0.046488824294412576, "fixed": true}, "n23_6": {"color": "yellow", "height": 5, "width": 5, "mass": 10, "y": 0.01840622763423389, "x": -0.046488824294412576, "fixed": true}, "n23_5": {"color": "red", "height": 5, "width": 5, "mass": 10, "y": 0.01840622763423389, "x": -0.046488824294412576, "fixed": true}, "n23_4": {"color": "#3495FF", "height": 11, "width": 11, "mass": 10, "y": 0.01840622763423389, "x": -0.046488824294412576, "fixed": true}, "n23_3": {"color": "#3495FF", "height": 14, "width": 14, "mass": 10, "y": 0.01840622763423389, "x": -0.046488824294412576, "fixed": true}, "n23_2": {"color": "#3495FF", "height": 14, "width": 14, "mass": 10, "y": 0.01840622763423389, "x": -0.046488824294412576, "fixed": true}, "n23_1": {"color": "#3495FF", "height": 14, "width": 14, "mass": 10, "y": 0.01840622763423389, "x": -0.046488824294412576, "fixed": true}, "n16_9": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.03852566213878947, "x": -0.03187119948743449, "fixed": true}, "n16_8": {"color": "yellow", "height": 8, "width": 8, "mass": 10, "y": 0.03852566213878947, "x": -0.03187119948743449, "fixed": true}, "n16_3": {"color": "#3495FF", "height": 36, "width": 36, "mass": 10, "y": 0.03852566213878947, "x": -0.03187119948743449, "fixed": true}, "n16_2": {"color": "#3495FF", "height": 36, "width": 36, "mass": 10, "y": 0.03852566213878947, "x": -0.03187119948743449, "fixed": true}, "n16_1": {"color": "#3495FF", "height": 40, "width": 40, "mass": 10, "y": 0.03852566213878947, "x": -0.03187119948743449, "fixed": true}, "n16_7": {"color": "red", "height": 12, "width": 12, "mass": 10, "y": 0.03852566213878947, "x": -0.03187119948743449, "fixed": true}, "n16_6": {"color": "red", "height": 12, "width": 12, "mass": 10, "y": 0.03852566213878947, "x": -0.03187119948743449, "fixed": true}, "n16_5": {"color": "#3495FF", "height": 32, "width": 32, "mass": 10, "y": 0.03852566213878947, "x": -0.03187119948743449, "fixed": true}, "n16_4": {"color": "#3495FF", "height": 32, "width": 32, "mass": 10, "y": 0.03852566213878947, "x": -0.03187119948743449, "fixed": true}, "n27_3": {"color": "red", "height": 5, "width": 5, "mass": 10, "y": 0.04755282581475768, "x": 0.015450849718747373, "fixed": true}, "n27_2": {"color": "#3495FF", "height": 12, "width": 12, "mass": 10, "y": 0.04755282581475768, "x": 0.015450849718747373, "fixed": true}, "n27_1": {"color": "#3495FF", "height": 14, "width": 14, "mass": 10, "y": 0.04755282581475768, "x": 0.015450849718747373, "fixed": true}, "n27_7": {"color": "yellow", "height": 5, "width": 5, "mass": 10, "y": 0.04755282581475768, "x": 0.015450849718747373, "fixed": true}, "n27_6": {"color": "yellow", "height": 5, "width": 5, "mass": 10, "y": 0.04755282581475768, "x": 0.015450849718747373, "fixed": true}, "n27_5": {"color": "red", "height": 5, "width": 5, "mass": 10, "y": 0.04755282581475768, "x": 0.015450849718747373, "fixed": true}, "n27_4": {"color": "red", "height": 5, "width": 5, "mass": 10, "y": 0.04755282581475768, "x": 0.015450849718747373, "fixed": true}, "n18_1": {"color": "#3495FF", "height": 36, "width": 36, "mass": 10, "y": 0.024087683705085763, "x": -0.04381533400219318, "fixed": true}, "n29_5": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -0.038525662138789454, "x": 0.0318711994874345, "fixed": true}, "n18_3": {"color": "yellow", "height": 8, "width": 8, "mass": 10, "y": 0.024087683705085763, "x": -0.04381533400219318, "fixed": true}, "n18_2": {"color": "red", "height": 12, "width": 12, "mass": 10, "y": 0.024087683705085763, "x": -0.04381533400219318, "fixed": true}, "n18_5": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.024087683705085763, "x": -0.04381533400219318, "fixed": true}, "n18_4": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.024087683705085763, "x": -0.04381533400219318, "fixed": true}, "n42": {"color": "white", "height": 10, "width": 10, "mass": 10, "y": 0.04911436253643443, "x": -0.009369065729286242, "fixed": true}, "n29_7": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -0.038525662138789454, "x": 0.0318711994874345, "fixed": true}, "n29_6": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -0.038525662138789454, "x": 0.0318711994874345, "fixed": true}, "n44": {"color": "white", "height": 10, "width": 10, "mass": 10, "y": -0.04524135262330098, "x": 0.021288964578253633, "fixed": true}, "n29": {"color": "red", "height": 30, "width": 30, "mass": 10, "y": -0.038525662138789454, "x": 0.0318711994874345, "fixed": true}, "n28": {"color": "red", "height": 30, "width": 30, "mass": 10, "y": 0.04911436253643444, "x": 0.009369065729286226, "fixed": true}, "n23": {"color": "red", "height": 30, "width": 30, "mass": 10, "y": 0.01840622763423389, "x": -0.046488824294412576, "fixed": true}, "n22": {"color": "red", "height": 30, "width": 30, "mass": 10, "y": 0.01243449435824274, "x": 0.048429158056431554, "fixed": true}, "n21": {"color": "red", "height": 30, "width": 30, "mass": 10, "y": -0.03422735529643441, "x": 0.036448431371070594, "fixed": true}, "n20": {"color": "#3495FF", "height": 70, "width": 70, "mass": 10, "y": 0.024087683705085766, "x": 0.04381533400219318, "fixed": true}, "n27": {"color": "red", "height": 30, "width": 30, "mass": 10, "y": 0.04755282581475768, "x": 0.015450849718747373, "fixed": true}, "n26": {"color": "red", "height": 30, "width": 30, "mass": 10, "y": 0.03422735529643443, "x": -0.03644843137107059, "fixed": true}, "n25": {"color": "red", "height": 30, "width": 30, "mass": 10, "y": 0.04990133642141358, "x": 0.0031395259764656655, "fixed": true}, "n24": {"color": "red", "height": 30, "width": 30, "mass": 10, "y": -0.018406227634233895, "x": 0.046488824294412576, "fixed": true}, "n10_1": {"color": "#3495FF", "height": 45, "width": 45, "mass": 10, "y": -0.012434494358242752, "x": -0.048429158056431554, "fixed": true}, "n10_3": {"color": "#3495FF", "height": 41, "width": 41, "mass": 10, "y": -0.012434494358242752, "x": -0.048429158056431554, "fixed": true}, "n10_2": {"color": "#3495FF", "height": 41, "width": 41, "mass": 10, "y": -0.012434494358242752, "x": -0.048429158056431554, "fixed": true}, "n10_5": {"color": "red", "height": 14, "width": 14, "mass": 10, "y": -0.012434494358242752, "x": -0.048429158056431554, "fixed": true}, "n10_4": {"color": "#3495FF", "height": 41, "width": 41, "mass": 10, "y": -0.012434494358242752, "x": -0.048429158056431554, "fixed": true}, "n10_6": {"color": "yellow", "height": 9, "width": 9, "mass": 10, "y": -0.012434494358242752, "x": -0.048429158056431554, "fixed": true}, "n8": {"color": "#3495FF", "height": 90, "width": 90, "mass": 10, "y": -1.6081226496766367e-17, "x": -0.05, "fixed": true}, "n9": {"color": "#3495FF", "height": 90, "width": 90, "mass": 10, "y": -0.04221639627510075, "x": 0.02679133974894984, "fixed": true}, "n12_5": {"color": "yellow", "height": 9, "width": 9, "mass": 10, "y": 0.04524135262330098, "x": 0.021288964578253633, "fixed": true}, "n12_4": {"color": "yellow", "height": 9, "width": 9, "mass": 10, "y": 0.04524135262330098, "x": 0.021288964578253633, "fixed": true}, "n12_3": {"color": "red", "height": 14, "width": 14, "mass": 10, "y": 0.04524135262330098, "x": 0.021288964578253633, "fixed": true}, "n12_2": {"color": "#3495FF", "height": 32, "width": 32, "mass": 10, "y": 0.04524135262330098, "x": 0.021288964578253633, "fixed": true}, "n12_1": {"color": "#3495FF", "height": 45, "width": 45, "mass": 10, "y": 0.04524135262330098, "x": 0.021288964578253633, "fixed": true}, "n0": {"color": "white", "height": 200, "width": 200, "mass": 200, "y": 0, "x": 0, "fixed": true}, "n1": {"color": "#3495FF", "height": 100, "width": 100, "mass": 10, "y": -0.018406227634233916, "x": -0.04648882429441256, "fixed": true}, "n2": {"color": "#3495FF", "height": 100, "width": 100, "mass": 10, "y": 0.03852566213878947, "x": 0.031871199487434484, "fixed": true}, "n3": {"color": "#3495FF", "height": 100, "width": 100, "mass": 10, "y": -0.04911436253643443, "x": 0.009369065729286257, "fixed": true}, "n4": {"color": "#3495FF", "height": 100, "width": 100, "mass": 10, "y": -0.012434494358242724, "x": 0.04842915805643156, "fixed": true}, "n5": {"color": "#3495FF", "height": 100, "width": 100, "mass": 10, "y": 0.04221639627510076, "x": 0.02679133974894983, "fixed": true}, "n6": {"color": "#3495FF", "height": 90, "width": 90, "mass": 10, "y": 0.029389262614623664, "x": -0.04045084971874737, "fixed": true}, "n7": {"color": "#3495FF", "height": 90, "width": 90, "mass": 10, "y": -0.04990133642141358, "x": -0.0031395259764656607, "fixed": true}}, "repulsion": 1000, "fps": 40, "stiffness": 100, "edges": {"n12": {"n12_5": {}, "n12_4": {}, "n12_3": {}, "n12_2": {}, "n12_1": {}}, "n13": {"n13_6": {}, "n13_4": {}, "n13_5": {}, "n13_2": {}, "n13_3": {}, "n13_1": {}}, "n10": {"n10_1": {}, "n10_3": {}, "n10_2": {}, "n10_5": {}, "n10_4": {}, "n10_6": {}}, "n11": {"n11_1": {}, "n11_2": {}}, "n16": {"n16_9": {}, "n16_8": {}, "n16_3": {}, "n16_2": {}, "n16_1": {}, "n16_7": {}, "n16_6": {}, "n16_5": {}, "n16_4": {}}, "n17": {"n17_2": {}, "n17_3": {}, "n17_1": {}, "n17_6": {}, "n17_4": {}, "n17_5": {}}, "n14": {"n14_4": {}, "n14_1": {}, "n14_3": {}, "n14_2": {}}, "n15": {"n15_4": {}, "n15_5": {}, "n15_1": {}, "n15_2": {}, "n15_3": {}}, "n18": {"n18_1": {}, "n18_3": {}, "n18_2": {}, "n18_5": {}, "n18_4": {}}, "n19": {"n19_1": {}, "n19_2": {}, "n19_3": {}, "n19_4": {}, "n19_5": {}, "n19_6": {}, "n19_7": {}, "n19_8": {}, "n19_9": {}}, "n50": {}, "n38": {}, "n39": {}, "n30": {"n30_1": {}}, "n31": {}, "n32": {}, "n33": {}, "n34": {}, "n35": {}, "n36": {}, "n37": {}, "n49": {}, "n48": {}, "n41": {}, "n40": {}, "n43": {}, "n42": {}, "n45": {}, "n44": {}, "n47": {}, "n46": {}, "n29": {"n29_1": {}, "n29_3": {}, "n29_2": {}, "n29_5": {}, "n29_4": {}, "n29_7": {}, "n29_6": {}}, "n28": {"n28_1": {}, "n28_2": {}}, "n23": {"n23_7": {}, "n23_6": {}, "n23_5": {}, "n23_4": {}, "n23_3": {}, "n23_2": {}, "n23_1": {}}, "n22": {"n22_6": {}, "n22_7": {}, "n22_4": {}, "n22_5": {}, "n22_2": {}, "n22_3": {}, "n22_1": {}}, "n21": {"n21_1": {}, "n21_3": {}, "n21_2": {}, "n21_5": {}, "n21_4": {}, "n21_7": {}, "n21_6": {}}, "n20": {"n20_1": {}, "n20_2": {}, "n20_3": {}}, "n27": {"n27_3": {}, "n27_2": {}, "n27_1": {}, "n27_7": {}, "n27_6": {}, "n27_5": {}, "n27_4": {}, "n27_9": {}, "n27_8": {}}, "n26": {"n26_2": {}, "n26_3": {}, "n26_1": {}, "n26_6": {}, "n26_4": {}, "n26_5": {}}, "n25": {"n25_1": {}, "n25_2": {}}, "n24": {"n24_4": {}, "n24_5": {}, "n24_6": {}, "n24_1": {}, "n24_2": {}, "n24_3": {}}, "n8": {"n8_5": {}, "n8_4": {}, "n8_3": {}, "n8_2": {}, "n8_1": {}}, "n9": {"n9_4": {}, "n9_2": {}, "n9_3": {}, "n9_1": {}}, "n0": {"n12": {}, "n13": {}, "n10": {}, "n11": {}, "n16": {}, "n17": {}, "n14": {}, "n15": {}, "n18": {}, "n19": {}, "n50": {}, "n38": {}, "n39": {}, "n30": {}, "n31": {}, "n32": {}, "n33": {}, "n34": {}, "n35": {}, "n36": {}, "n37": {}, "n49": {}, "n48": {}, "n41": {}, "n40": {}, "n43": {}, "n42": {}, "n45": {}, "n44": {}, "n47": {}, "n46": {}, "n29": {}, "n28": {}, "n23": {}, "n22": {}, "n21": {}, "n20": {}, "n27": {}, "n26": {}, "n25": {}, "n24": {}, "n8": {}, "n9": {}, "n1": {}, "n2": {}, "n3": {}, "n4": {}, "n5": {}, "n6": {}, "n7": {}}, "n1": {"n1_4": {}, "n1_2": {}, "n1_3": {}, "n1_1": {}}, "n2": {"n2_1": {}, "n2_3": {}, "n2_2": {}, "n2_4": {}}, "n3": {"n3_8": {}, "n3_1": {}, "n3_2": {}, "n3_3": {}, "n3_4": {}, "n3_5": {}, "n3_6": {}, "n3_7": {}}, "n4": {"n4_3": {}, "n4_2": {}, "n4_1": {}, "n4_6": {}, "n4_5": {}, "n4_4": {}}, "n5": {"n5_2": {}, "n5_1": {}}, "n6": {"n6_1": {}, "n6_3": {}, "n6_2": {}}, "n7": {"n7_4": {}, "n7_5": {}, "n7_6": {}, "n7_1": {}, "n7_2": {}, "n7_3": {}}}, "dt": 0.05, "precision": 0.99, "friction": 100, "gravity": true}
+{"nodes": {"n7_8": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.47067718119711, "x": 0.6499656759303052, "fixed": true}, "n7_4": {"color": "rgba(255,0,0,0.33)", "image": "photo5.jpg", "height": 14, "width": 14, "mass": 10, "y": 0.4699391941836866, "x": 0.6472009837989573, "fixed": true}, "n7_5": {"color": "rgba(255,0,0,0.33)", "image": "photo5.jpg", "height": 14, "width": 14, "mass": 10, "y": 0.47094288568682546, "x": 0.649020776220796, "fixed": true}, "n7_6": {"color": "yellow", "height": 9, "width": 9, "mass": 10, "y": 0.4707281469290535, "x": 0.6460470428585983, "fixed": true}, "n7_7": {"color": "yellow", "height": 9, "width": 9, "mass": 10, "y": 0.4718060146119481, "x": 0.6495352500876849, "fixed": true}, "n7_1": {"color": "rgba(52,149,255,0.33)", "image": "photo3.jpg", "height": 45, "width": 45, "mass": 10, "y": 0.47241042049496096, "x": 0.6503554055694857, "fixed": true}, "n7_2": {"color": "rgba(52,149,255,0.33)", "image": "photo2.jpg", "height": 36, "width": 36, "mass": 10, "y": 0.47128260215734263, "x": 0.6455662641260381, "fixed": true}, "n7_3": {"color": "rgba(255,0,0,0.33)", "image": "photo2.jpg", "height": 14, "width": 14, "mass": 10, "y": 0.46914413446458236, "x": 0.6475249512766832, "fixed": true}, "n5_2": {"color": "rgba(255,0,0,0.33)", "image": "photo3.jpg", "height": 15, "width": 15, "mass": 10, "y": 0.29469710089556084, "x": -0.7440680081722543, "fixed": true}, "n5_3": {"color": "rgba(255,0,0,0.33)", "image": "photo5.jpg", "height": 15, "width": 15, "mass": 10, "y": 0.29491959273718155, "x": -0.7401384839122067, "fixed": true}, "n5_1": {"color": "rgba(52,149,255,0.33)", "image": "photo3.jpg", "height": 35, "width": 35, "mass": 10, "y": 0.29592775917062736, "x": -0.7404147470340549, "fixed": true}, "n5_6": {"color": "yellow", "height": 10, "width": 10, "mass": 10, "y": 0.2950996018755881, "x": -0.7462066083472896, "fixed": true}, "n5_7": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.29356604422867594, "x": -0.7426225730335434, "fixed": true}, "n5_4": {"color": "rgba(255,0,0,0.33)", "image": "photo3.jpg", "height": 15, "width": 15, "mass": 10, "y": 0.29459696817064773, "x": -0.7422295225367798, "fixed": true}, "n5_5": {"color": "rgba(255,0,0,0.33)", "image": "photo1.jpg", "height": 15, "width": 15, "mass": 10, "y": 0.29360327547911447, "x": -0.7409597469506806, "fixed": true}, "n30": {"color": "rgba(255,0,0,0.33)", "image": "photo5.jpg", "height": 30, "width": 30, "mass": 10, "y": 0.1002665868514434, "x": 0.7936917610515823, "fixed": true}, "n31": {"color": "yellow", "height": 20, "width": 20, "mass": 10, "y": -0.47022820183397873, "x": -0.6472135954999578, "fixed": true}, "n32": {"color": "yellow", "height": 20, "width": 20, "mass": 10, "y": 0.3854029392813722, "x": -0.7010453440350909, "fixed": true}, "n25_2": {"color": "rgba(52,149,255,0.33)", "image": "photo3.jpg", "height": 14, "width": 14, "mass": 10, "y": 0.7994478367242747, "x": -0.04998133457779231, "fixed": true}, "n34": {"color": "yellow", "height": 20, "width": 20, "mass": 10, "y": -0.7608452130361228, "x": -0.24721359549995806, "fixed": true}, "n35": {"color": "yellow", "height": 20, "width": 20, "mass": 10, "y": -0.3854029392813723, "x": -0.7010453440350908, "fixed": true}, "n25_5": {"color": "yellow", "height": 5, "width": 5, "mass": 10, "y": 0.7950337996199864, "x": -0.05044501035070123, "fixed": true}, "n37": {"color": "yellow", "height": 20, "width": 20, "mass": 10, "y": 0.4702282018339786, "x": -0.6472135954999579, "fixed": true}, "n38": {"color": "yellow", "height": 20, "width": 20, "mass": 10, "y": -0.19895190973188404, "x": -0.7748665289029049, "fixed": true}, "n39": {"color": "yellow", "height": 20, "width": 20, "mass": 10, "y": 0.10026658685144328, "x": -0.7936917610515823, "fixed": true}, "n3_1": {"color": "rgba(52,149,255,0.33)", "image": "photo3.jpg", "height": 50, "width": 50, "mass": 10, "y": -0.10075602956982901, "x": -0.7970415273336862, "fixed": true}, "n3_2": {"color": "yellow", "height": 10, "width": 10, "mass": 10, "y": -0.09994258829610071, "x": -0.7917904220414633, "fixed": true}, "n3_3": {"color": "yellow", "height": 10, "width": 10, "mass": 10, "y": -0.10012785201365171, "x": -0.7903138262909633, "fixed": true}, "n8_3": {"color": "rgba(255,0,0,0.33)", "image": "photo1.jpg", "height": 14, "width": 14, "mass": 10, "y": -0.783381004658459, "x": 0.14939450773071347, "fixed": true}, "n8_2": {"color": "rgba(255,0,0,0.33)", "image": "photo4.jpg", "height": 14, "width": 14, "mass": 10, "y": -0.7826939101903494, "x": 0.15057758256250323, "fixed": true}, "n8_1": {"color": "rgba(52,149,255,0.33)", "image": "photo4.jpg", "height": 45, "width": 45, "mass": 10, "y": -0.7827709543433563, "x": 0.14964138717427, "fixed": true}, "n1_6": {"color": "yellow", "height": 10, "width": 10, "mass": 10, "y": 0.6768955963080234, "x": 0.4278323741278408, "fixed": true}, "n1_4": {"color": "rgba(255,0,0,0.33)", "image": "photo5.jpg", "height": 15, "width": 15, "mass": 10, "y": 0.6759377708057329, "x": 0.430627639523772, "fixed": true}, "n1_5": {"color": "yellow", "height": 10, "width": 10, "mass": 10, "y": 0.6740857395808431, "x": 0.4279921200789879, "fixed": true}, "n1_2": {"color": "rgba(52,149,255,0.33)", "image": "photo5.jpg", "height": 45, "width": 45, "mass": 10, "y": 0.6754775886042603, "x": 0.4287875685885402, "fixed": true}, "n1_3": {"color": "rgba(255,0,0,0.33)", "image": "photo3.jpg", "height": 15, "width": 15, "mass": 10, "y": 0.6723830127244091, "x": 0.4278558073207485, "fixed": true}, "n1_1": {"color": "rgba(52,149,255,0.33)", "image": "photo1.jpg", "height": 50, "width": 50, "mass": 10, "y": 0.6721370040924634, "x": 0.42729084057277056, "fixed": true}, "n12": {"color": "rgba(52,149,255,0.33)", "image": "photo3.jpg", "height": 90, "width": 90, "mass": 10, "y": 0.7608452130361228, "x": -0.24721359549995806, "fixed": true}, "n13": {"color": "rgba(52,149,255,0.33)", "image": "photo3.jpg", "height": 90, "width": 90, "mass": 10, "y": 0.6164105942206315, "x": 0.5099391917989518, "fixed": true}, "n10": {"color": "rgba(52,149,255,0.33)", "image": "photo4.jpg", "height": 90, "width": 90, "mass": 10, "y": -0.7238616419728159, "x": -0.34062343325205774, "fixed": true}, "n11": {"color": "rgba(52,149,255,0.33)", "image": "photo3.jpg", "height": 90, "width": 90, "mass": 10, "y": -0.38540293928137226, "x": 0.7010453440350909, "fixed": true}, "n16": {"color": "rgba(52,149,255,0.33)", "image": "photo1.jpg", "height": 80, "width": 80, "mass": 10, "y": -0.6754623404016122, "x": -0.42866143598319706, "fixed": true}, "n17": {"color": "rgba(52,149,255,0.33)", "image": "photo3.jpg", "height": 80, "width": 80, "mass": 10, "y": 0.5476376847429508, "x": -0.5831749019371294, "fixed": true}, "n14": {"color": "rgba(52,149,255,0.33)", "image": "photo2.jpg", "height": 90, "width": 90, "mass": 10, "y": -0.760845213036123, "x": 0.2472135954999578, "fixed": true}, "n15": {"color": "rgba(52,149,255,0.33)", "image": "photo2.jpg", "height": 90, "width": 90, "mass": 10, "y": 0.675462340401612, "x": -0.4286614359831975, "fixed": true}, "n3_4": {"color": "yellow", "height": 10, "width": 10, "mass": 10, "y": -0.09976541246918436, "x": -0.7901041788621811, "fixed": true}, "n18": {"color": "rgba(52,149,255,0.33)", "image": "photo3.jpg", "height": 80, "width": 80, "mass": 10, "y": 0.7238616419728157, "x": -0.3406234332520582, "fixed": true}, "n19": {"color": "rgba(52,149,255,0.33)", "image": "photo2.jpg", "height": 70, "width": 70, "mass": 10, "y": 0.785829800582951, "x": 0.14990505166857962, "fixed": true}, "n3_5": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -0.10033448586087677, "x": -0.7905186338049698, "fixed": true}, "n4_8": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -0.8000780576727367, "x": -0.05024435315178556, "fixed": true}, "n4_3": {"color": "rgba(52,149,255,0.33)", "image": "photo1.jpg", "height": 40, "width": 40, "mass": 10, "y": -0.7951388042730414, "x": -0.05019833471123481, "fixed": true}, "n4_2": {"color": "rgba(52,149,255,0.33)", "image": "photo1.jpg", "height": 40, "width": 40, "mass": 10, "y": -0.7973837705524047, "x": -0.05024973967785655, "fixed": true}, "n4_1": {"color": "rgba(52,149,255,0.33)", "image": "photo2.jpg", "height": 45, "width": 45, "mass": 10, "y": -0.7959743029238526, "x": -0.050014845091079355, "fixed": true}, "n4_7": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -0.8002415736432474, "x": -0.05006888653707851, "fixed": true}, "n4_6": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -0.7983810039677018, "x": -0.05027244884299702, "fixed": true}, "n4_5": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -0.8001610387542626, "x": -0.05012364247003241, "fixed": true}, "n4_4": {"color": "yellow", "height": 10, "width": 10, "mass": 10, "y": -0.7954559111009277, "x": -0.050040321126610984, "fixed": true}, "n33": {"color": "yellow", "height": 20, "width": 20, "mass": 10, "y": -0.6164105942206315, "x": -0.5099391917989516, "fixed": true}, "n36": {"color": "yellow", "height": 20, "width": 20, "mass": 10, "y": -0.7984213827426173, "x": 0.05023241562345098, "fixed": true}, "n2_1": {"color": "rgba(52,149,255,0.33)", "image": "photo4.jpg", "height": 45, "width": 45, "mass": 10, "y": -0.5486942331734604, "x": 0.5830794693730875, "fixed": true}, "n2_3": {"color": "yellow", "height": 10, "width": 10, "mass": 10, "y": -0.5493148430630673, "x": 0.5810036137343629, "fixed": true}, "n2_2": {"color": "rgba(255,0,0,0.33)", "image": "photo1.jpg", "height": 15, "width": 15, "mass": 10, "y": -0.5452139764988674, "x": 0.5826181336721712, "fixed": true}, "n2_5": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -0.5458340928677875, "x": 0.580675222009302, "fixed": true}, "n2_4": {"color": "yellow", "height": 10, "width": 10, "mass": 10, "y": -0.5455192103182154, "x": 0.5828114942064134, "fixed": true}, "n2_7": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -0.5456446241047354, "x": 0.5835206292640702, "fixed": true}, "n2_6": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -0.5462765746312843, "x": 0.5848278697077831, "fixed": true}, "n28_2": {"color": "rgba(255,0,0,0.33)", "image": "photo3.jpg", "height": 5, "width": 5, "mass": 10, "y": -0.47071517943005403, "x": 0.6445906968873014, "fixed": true}, "n28_3": {"color": "yellow", "height": 5, "width": 5, "mass": 10, "y": -0.4691702707952998, "x": 0.6487248866366403, "fixed": true}, "n28_4": {"color": "yellow", "height": 5, "width": 5, "mass": 10, "y": -0.46957340091621275, "x": 0.6479889278175615, "fixed": true}, "n28_5": {"color": "yellow", "height": 5, "width": 5, "mass": 10, "y": -0.47208815652588004, "x": 0.6485931947650088, "fixed": true}, "n6_5": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.3844231876313806, "x": 0.700560063827298, "fixed": true}, "n6_4": {"color": "yellow", "height": 9, "width": 9, "mass": 10, "y": 0.3854219262787882, "x": 0.7036118404795527, "fixed": true}, "n29_3": {"color": "rgba(52,149,255,0.33)", "image": "photo2.jpg", "height": 14, "width": 14, "mass": 10, "y": 0.1985516760851855, "x": -0.772588347105185, "fixed": true}, "n29_2": {"color": "rgba(52,149,255,0.33)", "image": "photo4.jpg", "height": 14, "width": 14, "mass": 10, "y": 0.19857209477551424, "x": -0.7784326864556351, "fixed": true}, "n6_1": {"color": "rgba(52,149,255,0.33)", "image": "photo2.jpg", "height": 45, "width": 45, "mass": 10, "y": 0.38513660103665726, "x": 0.7002643109325484, "fixed": true}, "n29_4": {"color": "rgba(52,149,255,0.33)", "image": "photo2.jpg", "height": 11, "width": 11, "mass": 10, "y": 0.19878394847371034, "x": -0.7774566053310069, "fixed": true}, "n6_3": {"color": "rgba(52,149,255,0.33)", "image": "photo4.jpg", "height": 32, "width": 32, "mass": 10, "y": 0.38478482025698796, "x": 0.7020288033671186, "fixed": true}, "n6_2": {"color": "rgba(52,149,255,0.33)", "image": "photo4.jpg", "height": 41, "width": 41, "mass": 10, "y": 0.3858524152897949, "x": 0.6982692382454059, "fixed": true}, "n29_9": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.1995994601900456, "x": -0.778324914144648, "fixed": true}, "n29_8": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.1986597573514416, "x": -0.7715913506112191, "fixed": true}, "n28_7": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -0.4686104870562901, "x": 0.6473033853717821, "fixed": true}, "n22_4": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.29566974554046027, "x": 0.7445942998381102, "fixed": true}, "n22_2": {"color": "rgba(255,0,0,0.33)", "image": "photo3.jpg", "height": 5, "width": 5, "mass": 10, "y": 0.2935385074852545, "x": 0.742156643204965, "fixed": true}, "n22_3": {"color": "yellow", "height": 5, "width": 5, "mass": 10, "y": 0.2936930102347662, "x": 0.7450019361533936, "fixed": true}, "n22_1": {"color": "rgba(52,149,255,0.33)", "image": "photo5.jpg", "height": 14, "width": 14, "mass": 10, "y": 0.293234857769945, "x": 0.7420017822629454, "fixed": true}, "n15_1": {"color": "rgba(52,149,255,0.33)", "image": "photo5.jpg", "height": 45, "width": 45, "mass": 10, "y": 0.6730851488742589, "x": -0.4278626194455169, "fixed": true}, "n15_2": {"color": "rgba(52,149,255,0.33)", "image": "photo3.jpg", "height": 41, "width": 41, "mass": 10, "y": 0.6777376134710421, "x": -0.4306980903808832, "fixed": true}, "n15_3": {"color": "rgba(52,149,255,0.33)", "image": "photo4.jpg", "height": 41, "width": 41, "mass": 10, "y": 0.6729708394252135, "x": -0.42903267856606747, "fixed": true}, "n17_2": {"color": "rgba(52,149,255,0.33)", "image": "photo4.jpg", "height": 36, "width": 36, "mass": 10, "y": 0.5489170313243269, "x": -0.5809038864583442, "fixed": true}, "n17_3": {"color": "rgba(52,149,255,0.33)", "image": "photo1.jpg", "height": 36, "width": 36, "mass": 10, "y": 0.5453475420628987, "x": -0.5825991770728641, "fixed": true}, "n17_1": {"color": "rgba(52,149,255,0.33)", "image": "photo5.jpg", "height": 40, "width": 40, "mass": 10, "y": 0.5485336214127234, "x": -0.580776634680051, "fixed": true}, "n17_6": {"color": "yellow", "height": 8, "width": 8, "mass": 10, "y": 0.5485067750843886, "x": -0.5842746299556832, "fixed": true}, "n17_7": {"color": "yellow", "height": 8, "width": 8, "mass": 10, "y": 0.5492749273490618, "x": -0.5833456270065104, "fixed": true}, "n17_4": {"color": "rgba(52,149,255,0.33)", "image": "photo1.jpg", "height": 32, "width": 32, "mass": 10, "y": 0.5492532153475622, "x": -0.5826447970512549, "fixed": true}, "n17_5": {"color": "rgba(52,149,255,0.33)", "image": "photo3.jpg", "height": 28, "width": 28, "mass": 10, "y": 0.5478119598529362, "x": -0.5858685109420222, "fixed": true}, "n19_1": {"color": "rgba(52,149,255,0.33)", "image": "photo4.jpg", "height": 35, "width": 35, "mass": 10, "y": 0.7836299855248199, "x": 0.1491882639343399, "fixed": true}, "n19_2": {"color": "rgba(52,149,255,0.33)", "image": "photo2.jpg", "height": 32, "width": 32, "mass": 10, "y": 0.7884465202405296, "x": 0.1506109522170776, "fixed": true}, "n19_3": {"color": "rgba(52,149,255,0.33)", "image": "photo5.jpg", "height": 32, "width": 32, "mass": 10, "y": 0.7836918827528051, "x": 0.14957129092487625, "fixed": true}, "n19_4": {"color": "rgba(52,149,255,0.33)", "image": "photo5.jpg", "height": 32, "width": 32, "mass": 10, "y": 0.7829951310730505, "x": 0.14987368472416748, "fixed": true}, "n19_5": {"color": "rgba(52,149,255,0.33)", "image": "photo4.jpg", "height": 28, "width": 28, "mass": 10, "y": 0.7893079176746515, "x": 0.14931377588700442, "fixed": true}, "n19_6": {"color": "rgba(52,149,255,0.33)", "image": "photo4.jpg", "height": 28, "width": 28, "mass": 10, "y": 0.7896389400814494, "x": 0.14973970483239327, "fixed": true}, "n19_7": {"color": "yellow", "height": 7, "width": 7, "mass": 10, "y": 0.7856787844637992, "x": 0.1503902460298548, "fixed": true}, "n25_3": {"color": "rgba(52,149,255,0.33)", "image": "photo4.jpg", "height": 12, "width": 12, "mass": 10, "y": 0.7995590000670421, "x": -0.05021827360214054, "fixed": true}, "n26_2": {"color": "rgba(52,149,255,0.33)", "image": "photo3.jpg", "height": 14, "width": 14, "mass": 10, "y": -0.6187562997512985, "x": 0.5081475406866758, "fixed": true}, "n26_3": {"color": "rgba(255,0,0,0.33)", "image": "photo2.jpg", "height": 5, "width": 5, "mass": 10, "y": -0.6183765886201662, "x": 0.5102558816378029, "fixed": true}, "n26_1": {"color": "rgba(52,149,255,0.33)", "image": "photo1.jpg", "height": 14, "width": 14, "mass": 10, "y": -0.6175317392303712, "x": 0.5082038746417112, "fixed": true}, "n26_6": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -0.6173216807449313, "x": 0.5097471414257093, "fixed": true}, "n26_4": {"color": "yellow", "height": 5, "width": 5, "mass": 10, "y": -0.6143970814983685, "x": 0.5078232207086613, "fixed": true}, "n26_5": {"color": "yellow", "height": 5, "width": 5, "mass": 10, "y": -0.6191021781137145, "x": 0.5100419358500254, "fixed": true}, "n49": {"color": "white", "height": 10, "width": 10, "mass": 10, "y": 0.7238616419728157, "x": 0.3406234332520581, "fixed": true}, "n48": {"color": "white", "height": 10, "width": 10, "mass": 10, "y": 0.7858298005829509, "x": -0.14990505166857987, "fixed": true}, "n41": {"color": "white", "height": 10, "width": 10, "mass": 10, "y": -0.547637684742951, "x": -0.5831749019371293, "fixed": true}, "n40": {"color": "yellow", "height": 20, "width": 20, "mass": 10, "y": 0.7608452130361228, "x": 0.24721359549995797, "fixed": true}, "n43": {"color": "white", "height": 10, "width": 10, "mass": 10, "y": 0.7984213827426173, "x": 0.05023241562345065, "fixed": true}, "n24_3": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.19829127130599034, "x": 0.7736727059107382, "fixed": true}, "n45": {"color": "white", "height": 10, "width": 10, "mass": 10, "y": -0.675462340401612, "x": 0.42866143598319745, "fixed": true}, "n44": {"color": "white", "height": 10, "width": 10, "mass": 10, "y": -0.7238616419728157, "x": 0.3406234332520581, "fixed": true}, "n47": {"color": "white", "height": 10, "width": 10, "mass": 10, "y": -0.10026658685144303, "x": 0.7936917610515823, "fixed": true}, "n46": {"color": "white", "height": 10, "width": 10, "mass": 10, "y": -0.29449964214774266, "x": -0.743821188710601, "fixed": true}, "n30_5": {"color": "yellow", "height": 5, "width": 5, "mass": 10, "y": 0.0999408925242096, "x": 0.7963283536557391, "fixed": true}, "n30_4": {"color": "yellow", "height": 5, "width": 5, "mass": 10, "y": 0.0998357495582858, "x": 0.7925736244022124, "fixed": true}, "n30_3": {"color": "rgba(255,0,0,0.33)", "image": "photo2.jpg", "height": 5, "width": 5, "mass": 10, "y": 0.10020129315688532, "x": 0.7943886170454824, "fixed": true}, "n30_2": {"color": "rgba(52,149,255,0.33)", "image": "photo3.jpg", "height": 14, "width": 14, "mass": 10, "y": 0.10031475340269372, "x": 0.7914798741427597, "fixed": true}, "n30_1": {"color": "rgba(52,149,255,0.33)", "image": "photo4.jpg", "height": 15, "width": 15, "mass": 10, "y": 0.1004814115624187, "x": 0.7970000450415579, "fixed": true}, "n11_1": {"color": "rgba(52,149,255,0.33)", "image": "photo2.jpg", "height": 41, "width": 41, "mass": 10, "y": -0.3871018147934204, "x": 0.7032214489984691, "fixed": true}, "n11_2": {"color": "rgba(255,0,0,0.33)", "image": "photo1.jpg", "height": 14, "width": 14, "mass": 10, "y": -0.38567514112200957, "x": 0.7044061130287178, "fixed": true}, "n20_1": {"color": "rgba(52,149,255,0.33)", "image": "photo4.jpg", "height": 32, "width": 32, "mass": 10, "y": 0.6167414470277169, "x": -0.5080911994163313, "fixed": true}, "n20_2": {"color": "yellow", "height": 7, "width": 7, "mass": 10, "y": 0.6152379392532505, "x": -0.5090086489240767, "fixed": true}, "n20_3": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.6137507543631333, "x": -0.5106933346168645, "fixed": true}, "n20_4": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.6136730705096926, "x": -0.5086564467210327, "fixed": true}, "n13_6": {"color": "rgba(255,0,0,0.33)", "image": "photo1.jpg", "height": 14, "width": 14, "mass": 10, "y": 0.6158507362405491, "x": 0.5097601112257722, "fixed": true}, "n28_1": {"color": "rgba(52,149,255,0.33)", "image": "photo5.jpg", "height": 15, "width": 15, "mass": 10, "y": -0.47041531020502075, "x": 0.6482066829625965, "fixed": true}, "n13_4": {"color": "rgba(52,149,255,0.33)", "image": "photo5.jpg", "height": 41, "width": 41, "mass": 10, "y": 0.6170413882632084, "x": 0.5117798373394994, "fixed": true}, "n13_5": {"color": "rgba(255,0,0,0.33)", "image": "photo5.jpg", "height": 14, "width": 14, "mass": 10, "y": 0.6138255029790757, "x": 0.5122828709170619, "fixed": true}, "n13_2": {"color": "rgba(52,149,255,0.33)", "image": "photo5.jpg", "height": 45, "width": 45, "mass": 10, "y": 0.6176594793908764, "x": 0.5074248234424878, "fixed": true}, "n13_3": {"color": "rgba(52,149,255,0.33)", "image": "photo2.jpg", "height": 41, "width": 41, "mass": 10, "y": 0.61781679667954, "x": 0.5092312142670442, "fixed": true}, "n28_6": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -0.4712993224605197, "x": 0.6463432328696729, "fixed": true}, "n13_1": {"color": "rgba(52,149,255,0.33)", "image": "photo5.jpg", "height": 45, "width": 45, "mass": 10, "y": 0.6163135600636098, "x": 0.5081522954776093, "fixed": true}, "n14_5": {"color": "yellow", "height": 9, "width": 9, "mass": 10, "y": -0.7614026427006391, "x": 0.2466050807921045, "fixed": true}, "n14_4": {"color": "rgba(255,0,0,0.33)", "image": "photo5.jpg", "height": 14, "width": 14, "mass": 10, "y": -0.757454941675338, "x": 0.2480817773291594, "fixed": true}, "n14_1": {"color": "rgba(52,149,255,0.33)", "image": "photo4.jpg", "height": 45, "width": 45, "mass": 10, "y": -0.7593781474125715, "x": 0.24674095965602505, "fixed": true}, "n14_3": {"color": "rgba(52,149,255,0.33)", "image": "photo2.jpg", "height": 41, "width": 41, "mass": 10, "y": -0.761922098434847, "x": 0.24729078254553266, "fixed": true}, "n14_2": {"color": "rgba(52,149,255,0.33)", "image": "photo2.jpg", "height": 41, "width": 41, "mass": 10, "y": -0.7574643505151212, "x": 0.2460321267329389, "fixed": true}, "n21_1": {"color": "rgba(52,149,255,0.33)", "image": "photo3.jpg", "height": 15, "width": 15, "mass": 10, "y": 0.5449781475964978, "x": 0.5839250147921414, "fixed": true}, "n21_3": {"color": "rgba(52,149,255,0.33)", "image": "photo2.jpg", "height": 12, "width": 12, "mass": 10, "y": 0.545941580148333, "x": 0.5853465063123692, "fixed": true}, "n21_2": {"color": "rgba(52,149,255,0.33)", "image": "photo3.jpg", "height": 14, "width": 14, "mass": 10, "y": 0.5472811636849855, "x": 0.5824630197315076, "fixed": true}, "n21_5": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.5464374413013275, "x": 0.581003465203625, "fixed": true}, "n21_4": {"color": "yellow", "height": 5, "width": 5, "mass": 10, "y": 0.5474386472779819, "x": 0.5859369781400524, "fixed": true}, "n50": {"color": "white", "height": 10, "width": 10, "mass": 10, "y": -0.785829800582951, "x": -0.1499050516685797, "fixed": true}, "n23_4": {"color": "yellow", "height": 5, "width": 5, "mass": 10, "y": -0.1996210178774835, "x": 0.7764595411633568, "fixed": true}, "n23_3": {"color": "rgba(255,0,0,0.33)", "image": "photo2.jpg", "height": 5, "width": 5, "mass": 10, "y": -0.19882058288741677, "x": 0.7781852995614014, "fixed": true}, "n23_2": {"color": "rgba(255,0,0,0.33)", "image": "photo1.jpg", "height": 5, "width": 5, "mass": 10, "y": -0.19898379576783867, "x": 0.7782467713531775, "fixed": true}, "n23_1": {"color": "rgba(52,149,255,0.33)", "image": "photo3.jpg", "height": 12, "width": 12, "mass": 10, "y": -0.19959021626677184, "x": 0.7785024026506377, "fixed": true}, "n29_1": {"color": "rgba(52,149,255,0.33)", "image": "photo3.jpg", "height": 15, "width": 15, "mass": 10, "y": 0.199399183798943, "x": -0.7747441819630747, "fixed": true}, "n16_3": {"color": "rgba(52,149,255,0.33)", "image": "photo5.jpg", "height": 40, "width": 40, "mass": 10, "y": -0.6782458968209568, "x": -0.4300968966913019, "fixed": true}, "n16_2": {"color": "rgba(52,149,255,0.33)", "image": "photo3.jpg", "height": 40, "width": 40, "mass": 10, "y": -0.6781913014333827, "x": -0.4275307993465763, "fixed": true}, "n16_1": {"color": "rgba(52,149,255,0.33)", "image": "photo1.jpg", "height": 40, "width": 40, "mass": 10, "y": -0.6775631406659045, "x": -0.42870865762303684, "fixed": true}, "n25_6": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.8015576578269854, "x": -0.05046140508454178, "fixed": true}, "n25_1": {"color": "rgba(52,149,255,0.33)", "image": "photo2.jpg", "height": 15, "width": 15, "mass": 10, "y": 0.7959891800848251, "x": -0.05039746437170698, "fixed": true}, "n16_6": {"color": "yellow", "height": 8, "width": 8, "mass": 10, "y": -0.6727916592745684, "x": -0.42688035208543723, "fixed": true}, "n16_5": {"color": "rgba(255,0,0,0.33)", "image": "photo3.jpg", "height": 12, "width": 12, "mass": 10, "y": -0.6776807931078418, "x": -0.42690342916969937, "fixed": true}, "n16_4": {"color": "rgba(52,149,255,0.33)", "image": "photo3.jpg", "height": 36, "width": 36, "mass": 10, "y": -0.6740521011159454, "x": -0.42684526693125485, "fixed": true}, "n27_3": {"color": "rgba(52,149,255,0.33)", "image": "photo5.jpg", "height": 14, "width": 14, "mass": 10, "y": -0.2945337653907568, "x": 0.7419817354975717, "fixed": true}, "n27_2": {"color": "rgba(52,149,255,0.33)", "image": "photo5.jpg", "height": 14, "width": 14, "mass": 10, "y": -0.2933849505866539, "x": 0.7461293468494088, "fixed": true}, "n27_1": {"color": "rgba(52,149,255,0.33)", "image": "photo2.jpg", "height": 14, "width": 14, "mass": 10, "y": -0.29496894719526884, "x": 0.7456219280117944, "fixed": true}, "n27_7": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -0.29307633123052435, "x": 0.7408746531357605, "fixed": true}, "n27_6": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -0.29327185939823264, "x": 0.7426692421427428, "fixed": true}, "n27_5": {"color": "yellow", "height": 5, "width": 5, "mass": 10, "y": -0.29402880799830433, "x": 0.7448257777945867, "fixed": true}, "n27_4": {"color": "yellow", "height": 5, "width": 5, "mass": 10, "y": -0.29311956539989614, "x": 0.7440253836216589, "fixed": true}, "n18_1": {"color": "rgba(52,149,255,0.33)", "image": "photo2.jpg", "height": 36, "width": 36, "mass": 10, "y": 0.727185817888441, "x": -0.3409288892758087, "fixed": true}, "n29_5": {"color": "rgba(255,0,0,0.33)", "image": "photo3.jpg", "height": 5, "width": 5, "mass": 10, "y": 0.19911204214464645, "x": -0.7723535850043676, "fixed": true}, "n18_3": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.7258579266738453, "x": -0.3404884492486002, "fixed": true}, "n18_2": {"color": "rgba(255,0,0,0.33)", "image": "photo4.jpg", "height": 12, "width": 12, "mass": 10, "y": 0.7253180162885154, "x": -0.3391202884142035, "fixed": true}, "n18_4": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.7269262236706641, "x": -0.3403351778298603, "fixed": true}, "n42": {"color": "white", "height": 10, "width": 10, "mass": 10, "y": 0.0, "x": 0.8, "fixed": true}, "n29_7": {"color": "yellow", "height": 5, "width": 5, "mass": 10, "y": 0.19961966761481223, "x": -0.7723383748195778, "fixed": true}, "n29_6": {"color": "yellow", "height": 5, "width": 5, "mass": 10, "y": 0.1996322132750394, "x": -0.778550896656694, "fixed": true}, "n29": {"color": "rgba(255,0,0,0.33)", "image": "photo5.jpg", "height": 30, "width": 30, "mass": 10, "y": 0.19895190973188387, "x": -0.7748665289029049, "fixed": true}, "n28": {"color": "rgba(255,0,0,0.33)", "image": "photo3.jpg", "height": 30, "width": 30, "mass": 10, "y": -0.47022820183397807, "x": 0.6472135954999583, "fixed": true}, "n24_1": {"color": "rgba(255,0,0,0.33)", "image": "photo2.jpg", "height": 5, "width": 5, "mass": 10, "y": 0.1991665400734973, "x": 0.7714994215103353, "fixed": true}, "n23": {"color": "rgba(255,0,0,0.33)", "image": "photo4.jpg", "height": 30, "width": 30, "mass": 10, "y": -0.1989519097318836, "x": 0.774866528902905, "fixed": true}, "n22": {"color": "rgba(255,0,0,0.33)", "image": "photo2.jpg", "height": 30, "width": 30, "mass": 10, "y": 0.2944996421477424, "x": 0.7438211887106011, "fixed": true}, "n21": {"color": "rgba(255,0,0,0.33)", "image": "photo1.jpg", "height": 30, "width": 30, "mass": 10, "y": 0.547637684742951, "x": 0.5831749019371293, "fixed": true}, "n20": {"color": "rgba(52,149,255,0.33)", "image": "photo4.jpg", "height": 70, "width": 70, "mass": 10, "y": 0.6164105942206315, "x": -0.5099391917989519, "fixed": true}, "n27": {"color": "rgba(255,0,0,0.33)", "image": "photo4.jpg", "height": 30, "width": 30, "mass": 10, "y": -0.2944996421477423, "x": 0.7438211887106012, "fixed": true}, "n26": {"color": "rgba(255,0,0,0.33)", "image": "photo4.jpg", "height": 30, "width": 30, "mass": 10, "y": -0.6164105942206313, "x": 0.509939191798952, "fixed": true}, "n25": {"color": "rgba(255,0,0,0.33)", "image": "photo4.jpg", "height": 30, "width": 30, "mass": 10, "y": 0.7984213827426173, "x": -0.050232415623450724, "fixed": true}, "n24": {"color": "rgba(255,0,0,0.33)", "image": "photo3.jpg", "height": 30, "width": 30, "mass": 10, "y": 0.19895190973188384, "x": 0.7748665289029049, "fixed": true}, "n10_1": {"color": "rgba(52,149,255,0.33)", "image": "photo4.jpg", "height": 41, "width": 41, "mass": 10, "y": -0.7227771683037595, "x": -0.3398082685608284, "fixed": true}, "n10_2": {"color": "rgba(255,0,0,0.33)", "image": "photo1.jpg", "height": 14, "width": 14, "mass": 10, "y": -0.7208889354102254, "x": -0.338993018840841, "fixed": true}, "n9_2": {"color": "yellow", "height": 9, "width": 9, "mass": 10, "y": -2.57803239222217e-16, "x": -0.8016765764502483, "fixed": true}, "n9_3": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": -2.5618952565822057e-16, "x": -0.7992231842858051, "fixed": true}, "n9_1": {"color": "rgba(52,149,255,0.33)", "image": "photo5.jpg", "height": 36, "width": 36, "mass": 10, "y": -2.576053255869123e-16, "x": -0.8010183546987726, "fixed": true}, "n8": {"color": "rgba(52,149,255,0.33)", "image": "photo4.jpg", "height": 90, "width": 90, "mass": 10, "y": -0.7858298005829509, "x": 0.14990505166858012, "fixed": true}, "n9": {"color": "rgba(52,149,255,0.33)", "image": "photo4.jpg", "height": 90, "width": 90, "mass": 10, "y": -2.572996239482619e-16, "x": -0.8, "fixed": true}, "n24_2": {"color": "yellow", "height": 5, "width": 5, "mass": 10, "y": 0.19977046113534389, "x": 0.7766302549549643, "fixed": true}, "n12_4": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.7635160346135146, "x": -0.24774983478117998, "fixed": true}, "n12_3": {"color": "white", "height": 5, "width": 5, "mass": 10, "y": 0.7638025219475083, "x": -0.24657952198967245, "fixed": true}, "n12_2": {"color": "rgba(52,149,255,0.33)", "image": "photo4.jpg", "height": 41, "width": 41, "mass": 10, "y": 0.7595275574716617, "x": -0.24791019066301315, "fixed": true}, "n12_1": {"color": "rgba(52,149,255,0.33)", "image": "photo1.jpg", "height": 45, "width": 45, "mass": 10, "y": 0.7592985826302802, "x": -0.24759013220478393, "fixed": true}, "n25_4": {"color": "rgba(255,0,0,0.33)", "image": "photo1.jpg", "height": 5, "width": 5, "mass": 10, "y": 0.7964635697895904, "x": -0.05005676078724839, "fixed": true}, "n0": {"width": 200, "mass": 200, "y": 0, "color": "rgba(255,255,255,0.01)", "x": 0, "image": "photo2.jpg", "fixed": true, "height": 200}, "n1": {"color": "rgba(52,149,255,0.33)", "image": "photo3.jpg", "height": 100, "width": 100, "mass": 10, "y": 0.6754623404016121, "x": 0.4286614359831973, "fixed": true}, "n2": {"color": "rgba(52,149,255,0.33)", "image": "photo3.jpg", "height": 100, "width": 100, "mass": 10, "y": -0.5476376847429506, "x": 0.5831749019371295, "fixed": true}, "n3": {"color": "rgba(52,149,255,0.33)", "image": "photo4.jpg", "height": 100, "width": 100, "mass": 10, "y": -0.10026658685144343, "x": -0.7936917610515823, "fixed": true}, "n4": {"color": "rgba(52,149,255,0.33)", "image": "photo4.jpg", "height": 100, "width": 100, "mass": 10, "y": -0.7984213827426173, "x": -0.05023241562345057, "fixed": true}, "n5": {"color": "rgba(52,149,255,0.33)", "image": "photo2.jpg", "height": 100, "width": 100, "mass": 10, "y": 0.2944996421477422, "x": -0.7438211887106012, "fixed": true}, "n6": {"color": "rgba(52,149,255,0.33)", "image": "photo4.jpg", "height": 90, "width": 90, "mass": 10, "y": 0.38540293928137226, "x": 0.7010453440350909, "fixed": true}, "n7": {"color": "rgba(52,149,255,0.33)", "image": "photo3.jpg", "height": 90, "width": 90, "mass": 10, "y": 0.4702282018339785, "x": 0.647213595499958, "fixed": true}}, "repulsion": 2200, "fps": 15, "stiffness": 900, "edges": {"n12": {"n12_4": {}, "n12_3": {}, "n12_2": {}, "n12_1": {}}, "n13": {"n13_6": {}, "n13_4": {}, "n13_5": {}, "n13_2": {}, "n13_3": {}, "n13_1": {}}, "n10": {"n10_1": {}, "n10_2": {}}, "n11": {"n11_1": {}, "n11_2": {}}, "n16": {"n16_3": {}, "n16_2": {}, "n16_1": {}, "n16_6": {}, "n16_5": {}, "n16_4": {}}, "n17": {"n17_2": {}, "n17_3": {}, "n17_1": {}, "n17_6": {}, "n17_7": {}, "n17_4": {}, "n17_5": {}}, "n14": {"n14_5": {}, "n14_4": {}, "n14_1": {}, "n14_3": {}, "n14_2": {}}, "n15": {"n15_1": {}, "n15_2": {}, "n15_3": {}}, "n18": {"n18_1": {}, "n18_3": {}, "n18_2": {}, "n18_4": {}}, "n19": {"n19_1": {}, "n19_2": {}, "n19_3": {}, "n19_4": {}, "n19_5": {}, "n19_6": {}, "n19_7": {}}, "n50": {}, "n38": {}, "n39": {}, "n30": {"n30_5": {}, "n30_4": {}, "n30_3": {}, "n30_2": {}, "n30_1": {}}, "n31": {}, "n32": {}, "n33": {}, "n34": {}, "n35": {}, "n36": {}, "n37": {}, "n49": {}, "n48": {}, "n41": {}, "n40": {}, "n43": {}, "n42": {}, "n45": {}, "n44": {}, "n47": {}, "n46": {}, "n29": {"n29_1": {}, "n29_3": {}, "n29_2": {}, "n29_5": {}, "n29_4": {}, "n29_7": {}, "n29_6": {}, "n29_9": {}, "n29_8": {}}, "n28": {"n28_1": {}, "n28_2": {}, "n28_3": {}, "n28_4": {}, "n28_5": {}, "n28_6": {}, "n28_7": {}}, "n23": {"n23_4": {}, "n23_3": {}, "n23_2": {}, "n23_1": {}}, "n22": {"n22_4": {}, "n22_2": {}, "n22_3": {}, "n22_1": {}}, "n21": {"n21_1": {}, "n21_3": {}, "n21_2": {}, "n21_5": {}, "n21_4": {}}, "n20": {"n20_1": {}, "n20_2": {}, "n20_3": {}, "n20_4": {}}, "n27": {"n27_3": {}, "n27_2": {}, "n27_1": {}, "n27_7": {}, "n27_6": {}, "n27_5": {}, "n27_4": {}}, "n26": {"n26_2": {}, "n26_3": {}, "n26_1": {}, "n26_6": {}, "n26_4": {}, "n26_5": {}}, "n25": {"n25_5": {}, "n25_4": {}, "n25_6": {}, "n25_1": {}, "n25_3": {}, "n25_2": {}}, "n24": {"n24_1": {}, "n24_2": {}, "n24_3": {}}, "n8": {"n8_3": {}, "n8_2": {}, "n8_1": {}}, "n9": {"n9_2": {}, "n9_3": {}, "n9_1": {}}, "n0": {"n12": {}, "n13": {}, "n10": {}, "n11": {}, "n16": {}, "n17": {}, "n14": {}, "n15": {}, "n18": {}, "n19": {}, "n50": {}, "n38": {}, "n39": {}, "n30": {}, "n31": {}, "n32": {}, "n33": {}, "n34": {}, "n35": {}, "n36": {}, "n37": {}, "n49": {}, "n48": {}, "n41": {}, "n40": {}, "n43": {}, "n42": {}, "n45": {}, "n44": {}, "n47": {}, "n46": {}, "n29": {}, "n28": {}, "n23": {}, "n22": {}, "n21": {}, "n20": {}, "n27": {}, "n26": {}, "n25": {}, "n24": {}, "n8": {}, "n9": {}, "n1": {}, "n2": {}, "n3": {}, "n4": {}, "n5": {}, "n6": {}, "n7": {}}, "n1": {"n1_6": {}, "n1_4": {}, "n1_5": {}, "n1_2": {}, "n1_3": {}, "n1_1": {}}, "n2": {"n2_1": {}, "n2_3": {}, "n2_2": {}, "n2_5": {}, "n2_4": {}, "n2_7": {}, "n2_6": {}}, "n3": {"n3_1": {}, "n3_2": {}, "n3_3": {}, "n3_4": {}, "n3_5": {}}, "n4": {"n4_8": {}, "n4_3": {}, "n4_2": {}, "n4_1": {}, "n4_7": {}, "n4_6": {}, "n4_5": {}, "n4_4": {}}, "n5": {"n5_2": {}, "n5_3": {}, "n5_1": {}, "n5_6": {}, "n5_7": {}, "n5_4": {}, "n5_5": {}}, "n6": {"n6_5": {}, "n6_4": {}, "n6_1": {}, "n6_3": {}, "n6_2": {}}, "n7": {"n7_8": {}, "n7_4": {}, "n7_5": {}, "n7_6": {}, "n7_7": {}, "n7_1": {}, "n7_2": {}, "n7_3": {}}}, "dt": 0.005, "precision": 0.1, "friction": 0, "gravity": true}
diff --git a/main.js b/main.js
index bd80a92..0eb433c 100644
--- a/main.js
+++ b/main.js
@@ -11,6 +11,8 @@
var ctx = canvas.getContext("2d");
var particleSystem
+ var canvasBackground;
+
var that = {
init:function(system){
//
@@ -43,6 +45,29 @@
//
ctx.fillStyle = "black"
ctx.fillRect(0,0, canvas.width, canvas.height)
+ ctx.imageSmoothingEnabled = true;
+
+ var drawBackground = function(densityOfPoints, maxSize, minSize) {
+ if (canvasBackground) {
+ ctx.putImageData(canvasBackground, 0, 0);
+ } else {
+ minSize = minSize || 1;
+ maxSize = maxSize || 3;
+ densityOfPoints = densityOfPoints || 0.01;
+ var numberOfPoints = densityOfPoints * canvas.width * canvas.height;
+ for (var i = 0; i < numberOfPoints; i++) {
+ var size = Math.random() * (maxSize - minSize) + minSize;
+ var opacity = Math.random() * 0.2 + 0.4;
+ ctx.fillStyle = 'rgba(220, 220, 255, ' + opacity + ')';
+ ctx.beginPath();
+ ctx.arc(Math.random() * canvas.width, Math.random() * canvas.height, size / 2, 0, 2 * Math.PI);
+ ctx.fill();
+ }
+ canvasBackground = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ }
+ }
+
+ drawBackground(0.02);
// JESTEM BOGIEM PRZEKSZTAŁCEŃ 2D :O
var drawArrow = function(pt1, pt2, length, style) {
@@ -158,34 +183,67 @@
}
})
- var drawImage = function(image, coords) {
+ var drawImage = function(image, coords, color) {
if (!image.height) {
image.height = image.width ? image.width * image.naturalHeight / image.naturalWidth : image.naturalHeight;
}
if (!image.width) {
image.width = image.height ? image.height * image.naturalWidth / image.naturalHeight : image.naturalWidth;
}
+ ctx.save();
+ var color = color || 'black';
+ ctx.fillStyle = color;
+ ctx.lineWidth = 5;
+ ctx.beginPath();
+ ctx.arc(coords.x, coords.y, image.width / 2, 0, Math.PI * 2);
+ ctx.clip();
ctx.drawImage(image,
coords.x - image.width / 2,
coords.y - image.height / 2,
image.width,
image.height);
+ ctx.fill();
+ ctx.restore();
+ ctx.lineWidth = 3;
+ ctx.strokeStyle = 'rgba(255,255,255,0.7)';
+ ctx.beginPath();
+ ctx.arc(coords.x, coords.y, image.width / 2, 0, Math.PI * 2);
+ ctx.stroke();
};
+ var repositionBalloon = function(div, node) {
+ var topOffset = node.data.p.y - node.data.height / 2;
+ if (topOffset + div.outerHeight() > $(window).height()) {
+ topOffset = $(window).height() - div.outerHeight();
+ }
+ var leftOffset = node.data.p.x + node.data.width / 2 + 2;
+ if (leftOffset + div.outerWidth() > $(window).width()) {
+ leftOffset -= div.outerWidth() + node.data.width + 4;
+ }
+ div.css('top', topOffset);
+ div.css('left', leftOffset);
+ div.show();
+ }
- particleSystem.eachNode(function(node, pt){
+ var currentZIndex = 0;
+ var balloonNode = undefined;
+ var drawNode = function(node, pt){
// node: {mass:#, p:{x,y}, name:"", data:{}}
// pt: {x:#, y:#} node position in screen coords
+ node.data.zindex = currentZIndex++;
+
if (node.data.image) {
if (node.data.imageObject) {
- drawImage(node.data.imageObject, pt);
+ node.data.imageObject.width = node.data.width;
+ node.data.imageObject.height = node.data.height;
+ drawImage(node.data.imageObject, pt, node.data.color);
}
else {
var img = new Image(node.data.width, node.data.height);
img.onload = function() {
node.data.imageObject = img;
- drawImage(node.data.imageObject, pt);
+ drawImage(node.data.imageObject, pt, node.data.color);
};
img.src = '_img/' + node.data.image;
}
@@ -200,16 +258,67 @@
ctx.stroke();
ctx.fill();
}
- })
+
+ if (node.data.balloon) {
+ node.data.p = pt;
+ repositionBalloon(node.data.balloon, node);
+ if (node.data.oldWidth) {
+ node.data.width = node.data.oldWidth;
+ }
+ if (node.data.oldHeight) {
+ node.data.height = node.data.oldHeight;
+ }
+ balloonNode = node;
+ }
+ };
+
+ particleSystem.eachNode(drawNode);
+ if (balloonNode) {
+ var selectedDimension = Math.max((balloonNode.data.image) ? 150 : 50, balloonNode.data.width);
+ balloonNode.data.oldWidth = balloonNode.data.width;
+ balloonNode.data.width = selectedDimension;
+ balloonNode.data.oldHeight = balloonNode.data.height;
+ balloonNode.data.height = selectedDimension;
+ drawNode(balloonNode, balloonNode.data.p);
+ }
},
initMouseHandling:function(){
+ var balloon;
// start listening
$(canvas).click(function(e) {
+ if (balloon) {
+ balloon.data('node').data.balloon = undefined;
+ balloon.remove();
+ balloon = undefined;
+ }
var pos = $(canvas).offset();
_mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
- dragged = particleSystem.nearest(_mouseP);
- console.log(dragged.node);
+ var candidateNode = undefined;
+ particleSystem.eachNode(function(node) {
+ var distance = _mouseP.subtract(particleSystem.toScreen(node.p));
+ if (Math.sqrt(distance.x*distance.x + distance.y*distance.y) <= node.data.width / 2 + 3) {
+ if (!candidateNode || candidateNode.data.zindex < node.data.zindex) {
+ candidateNode = node;
+ }
+ }
+ });
+ if (candidateNode) {
+ balloon = $('<div>');
+ balloon.css({
+ 'position': 'absolute',
+ 'background': 'rgba(0,0,0,0.8)', 'color': 'red',
+ 'max-width': '250px',
+ 'padding': '5px',
+ 'border': 'solid 2px white',
+ 'border-radius': '5px'
+ });
+ balloon.append(JSON.stringify(candidateNode).replace(/,/g, ',<br />'));
+ balloon.hide();
+ $('body').append(balloon);
+ balloon.data('node', candidateNode);
+ candidateNode.data.balloon = balloon;
+ }
});
},