From 35c11872829a0ba24301a6e324e2b4958cd3e3ec Mon Sep 17 00:00:00 2001 From: emkael Date: Fri, 20 Nov 2015 15:01:15 +0100 Subject: :O :O :O :O :O * image with circle clipping * click detection * cool starry background * tooltips and expansion on click --- _img/photo1.jpg | Bin 0 -> 42961 bytes _img/photo2.jpg | Bin 0 -> 39625 bytes _img/photo3.jpg | Bin 0 -> 56407 bytes _img/photo4.jpg | Bin 0 -> 41621 bytes _img/photo5.jpg | Bin 0 -> 57660 bytes generate_graph.py | 43 +++++++++---------- graph.json | 2 +- main.js | 123 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 8 files changed, 136 insertions(+), 32 deletions(-) create mode 100644 _img/photo1.jpg create mode 100644 _img/photo2.jpg create mode 100644 _img/photo3.jpg create mode 100644 _img/photo4.jpg create mode 100644 _img/photo5.jpg diff --git a/_img/photo1.jpg b/_img/photo1.jpg new file mode 100644 index 0000000..f01641b Binary files /dev/null and b/_img/photo1.jpg differ diff --git a/_img/photo2.jpg b/_img/photo2.jpg new file mode 100644 index 0000000..f230d41 Binary files /dev/null and b/_img/photo2.jpg differ diff --git a/_img/photo3.jpg b/_img/photo3.jpg new file mode 100644 index 0000000..94ebe82 Binary files /dev/null and b/_img/photo3.jpg differ diff --git a/_img/photo4.jpg b/_img/photo4.jpg new file mode 100644 index 0000000..7035b6b Binary files /dev/null and b/_img/photo4.jpg differ diff --git a/_img/photo5.jpg b/_img/photo5.jpg new file mode 100644 index 0000000..5757123 Binary files /dev/null and b/_img/photo5.jpg 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 = $('
'); + 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, ',
')); + balloon.hide(); + $('body').append(balloon); + balloon.data('node', candidateNode); + candidateNode.data.balloon = balloon; + } }); }, -- cgit v1.2.3