Skip to content

Commit a6e46fe

Browse files
wassfilawassfila
committed
persistant configurable stats and renderer view
1 parent a0ed249 commit a6e46fe

File tree

6 files changed

+110
-56
lines changed

6 files changed

+110
-56
lines changed

‎config.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export default
1919
"enabled":true
2020
},
2121
"dat_gui":{
22-
"enabled":true
22+
"enabled":true,
23+
"closed":true
2324
}
2425
}

‎index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</head>
88

99
<body style="margin:0px">
10-
<script src="src/main.js?v=fd5dab8e" type="module"></script>
10+
<script src="src/main.js?v=a0ed249079" type="module"></script>
1111

1212
</body>
1313
</html>

‎src/gui_app.js

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,42 @@ import * as utils from "./../src/utils.js";
44

55
let params;
66

7-
function init(){
7+
function init(render_physics){
88
if(!config.dat_gui.enabled) {
99
return
1010
}
1111

1212

13-
params = { stiffness: 0.01, damping:0.05, frictionAir:0.3};
13+
params = {
14+
"show physics":true,
15+
"show stats":true,
16+
stiffness: 0.01,
17+
damping:0.05,
18+
frictionAir:0.3
19+
};
1420
var gui = new GUI( { width: 300 } );
21+
gui.add( params, 'show physics').listen().onChange( value => {utils.send("engine",{render_physics:value})} );
22+
gui.add( params, 'show stats').listen().onChange( value => {
23+
utils.send("stats",{show:value});
24+
localStorage.setItem("show_stats",value);
25+
} );
1526
gui.add( params, 'stiffness', 0.0001, 1.0 ).onChange( value => {utils.send("engine",{stiffness:value})} );
1627
gui.add( params, 'damping', 0.001, 1.0 ).onChange( value => {utils.send("engine",{damping:value})} );
1728
gui.add( params, 'frictionAir', 0.0001, 1.0 ).onChange( value => {utils.send("engine",{frictionAir:value})} ).listen();
1829

1930
let frictionAir = localStorage.getItem("frictionAir");
2031
frictionAir = parseFloat(frictionAir).toFixed(4);
21-
if(frictionAir === null){frictionAir=0.3}
22-
params.frictionAir = frictionAir;
32+
params.frictionAir = (frictionAir === null)?0.3:frictionAir;
33+
34+
params["show physics"] = render_physics;
35+
36+
let show_stats = localStorage.getItem("show_stats");
37+
params["show stats"] = (show_stats === "true")?true:false;
2338

2439
//GUI.toggleHide();//TODO with keypress on pc and another way on touch devices
25-
gui.close();
40+
if(config.dat_gui.closed){
41+
gui.close();
42+
}
2643

2744
}
2845

‎src/main.js

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,27 @@ document.body.appendChild(pyh_render_div);
1212
let main_view_div = document.createElement('div');
1313
document.body.appendChild(main_view_div);
1414

15-
if(config.physics.renderer.enabled){
15+
let render_physics = localStorage.getItem("render_physics");
16+
if(render_physics === null){
17+
render_physics = config.physics.renderer.enabled;
18+
}
19+
else{
20+
render_physics = (render_physics === "true")?true:false;
21+
}
22+
console.log(`main> render physics = ${render_physics}`);
23+
if(render_physics){
1624
pyh_render_div.style.cssText = "height:50%";
1725
main_view_div.style.cssText = "height:50%";
1826
}
1927
else{
2028
main_view_div.style.cssText = "height:100%";
2129
}
2230

23-
graph.init();
31+
graph.init(render_physics);
2432
view.init(main_view_div);
25-
physics.init(main_view_div,pyh_render_div);
33+
physics.init(main_view_div,render_physics,pyh_render_div);
2634
stats.init();
27-
gui.init();
35+
gui.init(render_physics);
2836

2937
function animate(){
3038

‎src/physics_matter.js

Lines changed: 65 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,11 @@ let renderer;
2727
//lineto renderer objects
2828
let canvas,context;
2929
let physics_element;
30+
let render_physics;
3031

31-
function init(phy_el,render_element){
32+
function init(phy_el,rend_phy,render_element){
3233
physics_element = phy_el;
34+
render_physics = rend_phy;
3335
const start = Date.now();
3436
engine = Matter.Engine.create({enableSleeping:true});
3537
engine.world.gravity.y = config.physics.gravity;
@@ -44,36 +46,38 @@ function init(phy_el,render_element){
4446
window.addEventListener( 'graph_edge', onMatterEdge, false );
4547
window.addEventListener( 'engine', onEngine, false );
4648

47-
if(config.physics.renderer.type_lineto){
48-
canvas = document.createElement('canvas');
49-
context = canvas.getContext('2d');
50-
canvas.width = physics_element.offsetWidth;
51-
canvas.height = physics_element.offsetHeight;
52-
render_element.appendChild(canvas);
53-
}
54-
if(config.physics.renderer.type_native){
55-
renderer = Matter.Render.create({
56-
element: render_element,
57-
engine: engine,
58-
options: {
59-
width: render_element.offsetWidth,
60-
height: render_element.offsetHeight,
61-
showAngleIndicator: false,
62-
showVelocity: true,
63-
showBounds: true,
64-
showBroadphase: true,
65-
showAxes: true,
66-
showIds: true,
67-
showCollisions: true,
68-
showSleeping:true,
69-
showDebug:false,
70-
wireframes: true,
71-
constraintIterations:config.physics.simulation.constraintIterations
72-
//constraintIterations default = 2
73-
//positionIterations default = 6
74-
//velocityIterations default = 4
75-
}
76-
});
49+
if(render_physics){
50+
if(config.physics.renderer.type_lineto){
51+
canvas = document.createElement('canvas');
52+
context = canvas.getContext('2d');
53+
canvas.width = physics_element.offsetWidth;
54+
canvas.height = physics_element.offsetHeight;
55+
render_element.appendChild(canvas);
56+
}
57+
if(config.physics.renderer.type_native){
58+
renderer = Matter.Render.create({
59+
element: render_element,
60+
engine: engine,
61+
options: {
62+
width: render_element.offsetWidth,
63+
height: render_element.offsetHeight,
64+
showAngleIndicator: false,
65+
showVelocity: true,
66+
showBounds: true,
67+
showBroadphase: true,
68+
showAxes: true,
69+
showIds: true,
70+
showCollisions: true,
71+
showSleeping:true,
72+
showDebug:false,
73+
wireframes: true,
74+
constraintIterations:config.physics.simulation.constraintIterations
75+
//constraintIterations default = 2
76+
//positionIterations default = 6
77+
//velocityIterations default = 4
78+
}
79+
});
80+
}
7781
}
7882

7983
if(config.physics.move_objects_with_mouse){
@@ -180,11 +184,13 @@ function run(){
180184
if(any_vertex_to_move){
181185
utils.send('graph_edge',{type:'refresh_all'});
182186
}
183-
if(config.physics.renderer.type_lineto){
184-
render_lineto(engine,context);
185-
}
186-
if(config.physics.renderer.type_native){
187-
Matter.Render.world(renderer);
187+
if(render_physics){
188+
if(config.physics.renderer.type_lineto){
189+
render_lineto(engine,context);
190+
}
191+
if(config.physics.renderer.type_native){
192+
Matter.Render.world(renderer);
193+
}
188194
}
189195
}
190196

@@ -212,14 +218,21 @@ function edge_add(params){
212218
let b_2 = engine.world.bodies.find(body => (body.id == params.dest));
213219
console.log(`phy> added edge from '${b_1.name}' to '${b_2.name}' with weight (${params.weight.toFixed(2)})`);
214220

215-
var constraint = Matter.Constraint.create({
216-
bodyA: b_1,
217-
bodyB: b_2,
218-
length:100/params.weight,
219-
stiffness: 0.01,
220-
damping: 0.05
221-
});
222-
Matter.World.addConstraint(engine.world,constraint);
221+
let length = 200;
222+
if(params.weight != 0){//weight of 0 means no edge constraint
223+
length = 100/params.weight;
224+
if(length > 500){
225+
length = 500;
226+
}
227+
var constraint = Matter.Constraint.create({
228+
bodyA: b_1,
229+
bodyB: b_2,
230+
length:length,
231+
stiffness: 0.01,
232+
damping: 0.05
233+
});
234+
Matter.World.addConstraint(engine.world,constraint);
235+
}
223236
}
224237

225238
function onMatterEdge(e){
@@ -229,7 +242,9 @@ function onMatterEdge(e){
229242
}
230243

231244
function onResize(e){
232-
if(config.physics.renderer.type_native){
245+
if(render_physics){
246+
if(config.physics.renderer.type_native){
247+
}
233248
}
234249
}
235250

@@ -244,6 +259,11 @@ function onEngine(e){
244259
engine.world.bodies.forEach(body => {body.frictionAir = e.detail.frictionAir;});
245260
localStorage.setItem("frictionAir",e.detail.frictionAir);
246261
}
262+
if(typeof(e.detail.render_physics) != "undefined"){
263+
console.log(`phy> render physics = ${e.detail.render_physics}`);
264+
localStorage.setItem("render_physics",e.detail.render_physics);
265+
266+
}
247267
}
248268

249269
export{init,run};

‎src/stats_app.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ function init(){
1818
console.log(`stats> init()`);
1919
is_stats = (localStorage.getItem("stats") === "true");
2020
set_view(is_stats);
21+
22+
window.addEventListener( 'stats', onStats, false );
2123
}
2224

2325
function set_view(l_view){
@@ -52,4 +54,10 @@ function end(){
5254
stats2.end();
5355
}
5456

57+
function onStats(e){
58+
if(typeof(e.detail.show) != "undefined"){
59+
set_view(e.detail.show);
60+
}
61+
}
62+
5563
export{init, set_view, begin, end};

0 commit comments

Comments
 (0)