diff options
author | emkael <emkael@tlen.pl> | 2015-11-19 17:07:31 +0100 |
---|---|---|
committer | emkael <emkael@tlen.pl> | 2015-11-19 17:07:31 +0100 |
commit | 100c4bac8636aa112596b5b2afe49164f1782625 (patch) | |
tree | 61fcaf30e3672440ff006d3a1aeae373d6291bcc | |
parent | 1bdb251c78f09be4e2c840375a6c44fe15f42e0e (diff) |
* fancy graph, ó
-rw-r--r-- | _img/circle.png | bin | 22650 -> 0 bytes | |||
-rw-r--r-- | graph.json | 2 | ||||
-rw-r--r-- | index.html | 2 | ||||
-rw-r--r-- | main.js | 104 | ||||
-rw-r--r-- | style.css | 4 |
5 files changed, 47 insertions, 65 deletions
diff --git a/_img/circle.png b/_img/circle.png Binary files differdeleted file mode 100644 index 172d8e0..0000000 --- a/_img/circle.png +++ /dev/null @@ -1 +1 @@ -{"nodes": {"Star Mazda": {"width": 11, "image": "circle.png", "height": 11}, "DTM": {"width": 14, "image": "circle.png", "height": 14}, "Formula One (non-RB)": {"width": 15, "image": "circle.png", "height": 15}, "FR2.0": {"width": 11, "image": "circle.png", "height": 11}, "Formula Atlantic": {"width": 11, "image": "circle.png", "height": 11}, "Formula E": {"width": 17, "image": "circle.png", "height": 17}, "IndyCar": {"width": 13, "image": "circle.png", "height": 13}, "Formula Two": {"width": 13, "image": "circle.png", "height": 13}, "Indy Lights": {"width": 12, "image": "circle.png", "height": 12}, "Champ Car": {"width": 11, "image": "circle.png", "height": 11}, "Lotus Junior Team": {"width": 12, "image": "circle.png", "height": 12}, "Red Bull Racing": {"width": 16, "image": "circle.png", "height": 16}, "GP2": {"width": 17, "image": "circle.png", "height": 17}, "GP3": {"width": 15, "image": "circle.png", "height": 15}, "WEC": {"width": 16, "image": "circle.png", "height": 16}, "Auto GP": {"width": 11, "image": "circle.png", "height": 11}, "FR3.5": {"width": 19, "image": "circle.png", "height": 19}, "Formula BMW": {"width": 12, "image": "circle.png", "height": 12}, "NASCAR": {"width": 11, "image": "circle.png", "height": 11}, "RBJT": {"width": 55, "image": "circle.png", "height": 55}, "Formula 3": {"width": 18, "image": "circle.png", "height": 18}, "AutoGP": {"width": 11, "image": "circle.png", "height": 11}, "A1GP": {"width": 20, "image": "circle.png", "height": 20}, "Karting": {"width": 11, "image": "circle.png", "height": 11}, "Toro Rosso": {"width": 20, "image": "circle.png", "height": 20}, "Superleague Formula": {"width": 12, "image": "circle.png", "height": 12}, "Formula One (pre-RB)": {"width": 15, "image": "circle.png", "height": 15}, "sports cars": {"width": 25, "image": "circle.png", "height": 25}, "Stock Car Brasil": {"width": 11, "image": "circle.png", "height": 11}}, "edges": {"DTM": {"WEC": {"width": 1, "arrow": 10}, "Formula E": {"width": 1, "arrow": 10}}, "Formula One (non-RB)": {"WEC": {"width": 1, "arrow": 10}, "Auto GP": {"width": 1, "arrow": 10}, "sports cars": {"width": 2, "arrow": 10}}, "FR2.0": {"sports cars": {"width": 1, "arrow": 10}}, "Formula Atlantic": {"sports cars": {"width": 1, "arrow": 10}}, "IndyCar": {"Superleague Formula": {"width": 1, "arrow": 10}, "sports cars": {"width": 1, "arrow": 10}}, "Formula Two": {"sports cars": {"width": 1, "arrow": 10}, "GP2": {"width": 1, "arrow": 10}}, "Champ Car": {"sports cars": {"width": 1, "arrow": 10}}, "Red Bull Racing": {"Toro Rosso": {"width": 1, "arrow": 10}, "Formula One (non-RB)": {"width": 1, "arrow": 10}, "Champ Car": {"width": 1, "arrow": 10}, "sports cars": {"width": 1, "arrow": 10}}, "GP2": {"sports cars": {"width": 1, "arrow": 10}, "Formula Two": {"width": 1, "arrow": 10}, "FR3.5": {"width": 1, "arrow": 10}, "AutoGP": {"width": 1, "arrow": 10}, "Formula One (non-RB)": {"width": 1, "arrow": 10}}, "Formula One (pre-RB)": {"A1GP": {"width": 2, "arrow": 10}, "Red Bull Racing": {"width": 2, "arrow": 10}, "Stock Car Brasil": {"width": 1, "arrow": 10}}, "WEC": {"Formula E": {"width": 2, "arrow": 10}, "sports cars": {"width": 1, "arrow": 10}}, "FR3.5": {"WEC": {"width": 1, "arrow": 10}, "IndyCar": {"width": 1, "arrow": 10}, "DTM": {"width": 1, "arrow": 10}, "RBJT": {"width": 1, "arrow": 10}, "sports cars": {"width": 1, "arrow": 10}, "GP2": {"width": 2, "arrow": 10}}, "Formula BMW": {"A1GP": {"width": 1, "arrow": 10}}, "GP3": {"Indy Lights": {"width": 1, "arrow": 10}, "FR3.5": {"width": 1, "arrow": 10}, "Formula Two": {"width": 1, "arrow": 10}}, "NASCAR": {"Formula E": {"width": 1, "arrow": 10}}, "RBJT": {"DTM": {"width": 1, "arrow": 10}, "Formula BMW": {"width": 2, "arrow": 10}, "Formula One (pre-RB)": {"width": 5, "arrow": 10}, "Toro Rosso": {"width": 9, "arrow": 10}, "A1GP": {"width": 5, "arrow": 10}, "Red Bull Racing": {"width": 1, "arrow": 10}, "Formula Two": {"width": 1, "arrow": 10}, "Formula 3": {"width": 7, "arrow": 10}, "FR3.5": {"width": 5, "arrow": 10}, "Lotus Junior Team": {"width": 2, "arrow": 10}, "Star Mazda": {"width": 1, "arrow": 10}, "FR2.0": {"width": 1, "arrow": 10}, "GP2": {"width": 2, "arrow": 10}, "GP3": {"width": 3, "arrow": 10}}, "Formula 3": {"WEC": {"width": 1, "arrow": 10}, "Indy Lights": {"width": 1, "arrow": 10}, "DTM": {"width": 1, "arrow": 10}, "GP2": {"width": 2, "arrow": 10}, "GP3": {"width": 1, "arrow": 10}}, "AutoGP": {"sports cars": {"width": 1, "arrow": 10}}, "A1GP": {"WEC": {"width": 1, "arrow": 10}, "IndyCar": {"width": 1, "arrow": 10}, "Karting": {"width": 1, "arrow": 10}, "Formula 3": {"width": 1, "arrow": 10}, "FR3.5": {"width": 2, "arrow": 10}, "sports cars": {"width": 3, "arrow": 10}, "Formula One (non-RB)": {"width": 1, "arrow": 10}}, "Karting": {"GP3": {"width": 1, "arrow": 10}}, "Toro Rosso": {"WEC": {"width": 1, "arrow": 10}, "Formula E": {"width": 2, "arrow": 10}, "Red Bull Racing": {"width": 3, "arrow": 10}, "NASCAR": {"width": 1, "arrow": 10}, "A1GP": {"width": 1, "arrow": 10}}, "Superleague Formula": {"Formula One (non-RB)": {"width": 1, "arrow": 10}}, "Star Mazda": {"Formula Atlantic": {"width": 1, "arrow": 10}}, "sports cars": {"Formula E": {"width": 1, "arrow": 10}, "Superleague Formula": {"width": 1, "arrow": 10}, "Formula One (non-RB)": {"width": 1, "arrow": 10}, "DTM": {"width": 1, "arrow": 10}, "A1GP": {"width": 1, "arrow": 10}}, "Stock Car Brasil": {"IndyCar": {"width": 1, "arrow": 10}}}} +{"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} @@ -8,7 +8,7 @@ <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> - <canvas id="viewport" width="800" height="600"></canvas> + <canvas id="viewport"></canvas> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> @@ -41,7 +41,7 @@ // which allow you to step through the actual node objects but also pass an // x,y point in the screen's coordinate system // - ctx.fillStyle = "white" + ctx.fillStyle = "black" ctx.fillRect(0,0, canvas.width, canvas.height) // JESTEM BOGIEM PRZEKSZTAŁCEŃ 2D :O @@ -66,8 +66,8 @@ // pt1: {x:#, y:#} source position in screen coords // pt2: {x:#, y:#} target position in screen coords - ctx.strokeStyle = edge.data.style || "rgba(0,0,0, .333)" - ctx.lineWidth = edge.data.width || 1 + ctx.strokeStyle = edge.data.style || "rgba(255,255,255,.333)" + ctx.lineWidth = edge.data.width || 3 ctx.setLineDash(edge.data.dash || []) // draw a line from pt1 to pt2 @@ -177,85 +177,67 @@ // node: {mass:#, p:{x,y}, name:"", data:{}} // pt: {x:#, y:#} node position in screen coords - - if (node.data.imageObject) { - drawImage(node.data.imageObject, pt); + if (node.data.image) { + if (node.data.imageObject) { + drawImage(node.data.imageObject, pt); + } + else { + var img = new Image(node.data.width, node.data.height); + img.onload = function() { + node.data.imageObject = img; + drawImage(node.data.imageObject, pt); + }; + img.src = '_img/' + node.data.image; + } } else { - var img = new Image(node.data.width, node.data.height); - img.onload = function() { - node.data.imageObject = img; - drawImage(node.data.imageObject, pt); - }; - img.src = '_img/' + node.data.image; + var color = node.data.color || 'black'; + ctx.fillStyle = color; + ctx.lineWidth = 5; + ctx.strokeStyle = 'rgba(255,255,255,0.33)'; + ctx.beginPath(); + ctx.arc(pt.x, pt.y, node.data.width / 2, 0, Math.PI*2); + ctx.stroke(); + ctx.fill(); } }) }, initMouseHandling:function(){ - // no-nonsense drag and drop (thanks springy.js) - var dragged = null; - - // set up a handler object that will initially listen for mousedowns then - // for moves and mouseups while dragging - var handler = { - clicked:function(e){ - var pos = $(canvas).offset(); - _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top) - dragged = particleSystem.nearest(_mouseP); - - if (dragged && dragged.node !== null){ - // while we're dragging, don't let physics move the node - dragged.node.fixed = true - } - - $(canvas).bind('mousemove', handler.dragged) - $(window).bind('mouseup', handler.dropped) - - return false - }, - dragged:function(e){ - var pos = $(canvas).offset(); - var s = arbor.Point(e.pageX-pos.left, e.pageY-pos.top) - - if (dragged && dragged.node !== null){ - var p = particleSystem.fromScreen(s) - dragged.node.p = p - } - - return false - }, - - dropped:function(e){ - if (dragged===null || dragged.node===undefined) return - if (dragged.node !== null) dragged.node.fixed = false - dragged.node.tempMass = 1000 - dragged = null - $(canvas).unbind('mousemove', handler.dragged) - $(window).unbind('mouseup', handler.dropped) - _mouseP = null - return false - } - } - // start listening - $(canvas).mousedown(handler.clicked); - + $(canvas).click(function(e) { + var pos = $(canvas).offset(); + _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top) + dragged = particleSystem.nearest(_mouseP); + console.log(dragged.node); + }); }, } return that } + var sys; $(document).ready(function() { $.getJSON('graph.json', function(graph) { graph.repulsion = graph.repulsion || 1000; graph.stiffness = graph.stiffness || 600; graph.friction = graph.friction || 0.5; - var sys = arbor.ParticleSystem(graph.repulsion, graph.stiffness, graph.friction); // create the system with sensible repulsion/stiffness/friction - sys.parameters({gravity:true}); // use center-gravity to make the graph settle nicely (ymmv) + graph.gravity = graph.gravity || false; + graph.fps = graph.fps || 55; + graph.precision = graph.precision || 0.6; + graph.dt = graph.dt || 0.02; + sys = arbor.ParticleSystem(graph.repulsion, graph.stiffness, graph.friction, graph.gravity, graph.fps, graph.dt, graph.precision); sys.renderer = Renderer("#viewport"); // our newly created renderer will have its .init() method called shortly by sys... sys.graft(graph); + $(window).trigger('resize'); + }); + $(window).resize(function() { + var width = $(window).width() - 5; + var height = $(window).height() - 5; + $('#viewport').attr({'width': width, + 'height': height}); + sys.screenSize(width, height); }); }) @@ -1,6 +1,6 @@ body{ margin:0; - padding:20px; + padding:0; font:12px/17px Arial, sans-serif; - background:#f9f9f9; + background:black; } |