hitman change

assets/js/common/base_vis.js

@@ -21,7 +21,7 @@ base_canvas_namespace.BaseCanvasController = class {
   initializeCanvas(base_name) {
     console.log(base_name);
     this.width = document.getElementById(base_name + '_base_id').clientWidth;
-    this.height = 300;
+    this.height = document.getElementById(base_name + '_base_id').clientHeight;
     this.canvas = document.getElementById(base_name + '_canvas_id');
     this.pause_button = document.getElementById(base_name + '_stop_button_id');
 

assets/js/common/point.js

@@ -9,6 +9,19 @@ point_namespace.Point = class {
     this.ay = ay;
   }
 };
+point_namespace.VerletPoint = class {
+  constructor(x, y, vx, vy, ax, ay) {
+    this.x = x;
+    this.y = y;
+    this.prev_x = x;
+    this.prev_y = y;
+    this.vx = vx;
+    this.vy = vy;
+    this.ax = ax;
+    this.ay = ay;
+  }
+};
+
 point_namespace.SpringConstraint = class {
   constructor(point1, point2, distance) {
     this.point1 = point1;
@@ -29,7 +42,7 @@ point_namespace.pointCircle = function(points, p_0, num_points, radius) {
     let vy = p_0.vy;
     let ax = p_0.ax;
     let ay = p_0.ay;
-    points.push(new point_namespace.Point(x, y, vx, vy, ax, ay));
+    points.push(new point_namespace.VerletPoint(x, y, vx, vy, ax, ay));
   }
 };
 

assets/js/common/ui.js

@@ -0,0 +1,54 @@
+let ui_namespace = {};
+
+ui_namespace.createDiv = function(parent_id, name, class_attr) {
+  let div = document.createElement('div');
+  div.setAttribute('class', class_attr);
+  let div_name = name;
+  div.id = div_name;
+  document.getElementById(parent_id).appendChild(div);
+  return div;
+};
+
+ui_namespace.createSlider = function(div, min, max, steps = 100) {
+  let slider = document.createElement('input');
+  slider.setAttribute('type', 'range');
+  slider.setAttribute('min', min);
+  slider.setAttribute('max', max);
+  slider.setAttribute('class', 'align-middle');
+  slider.setAttribute('style', 'width:100%');
+  slider.value = (max - min) / 2;
+  slider.step = (max - min) / steps;
+  slider.id = div.id + 'slider';
+  document.getElementById(div.id).appendChild(slider);
+  return slider;
+};
+ui_namespace.createBoolButton = function(div, name) {
+  let button = document.createElement('button');
+  button.setAttribute('class', 'hx-border hx-rounded-lg hx-m-2');
+  button.innerHTML = name;
+  button.id = div.id + 'button';
+  document.getElementById(div.id).appendChild(button);
+  return button;
+};
+
+ui_namespace.createOutput = function(div) {
+  let output = document.createElement('output');
+  output.id = div.id + 'output';
+  document.getElementById(div.id).appendChild(output);
+  return output;
+};
+
+ui_namespace.createDivsForSlider = function(base_name, additional, inner) {
+  let parent_name = base_name + '_add_space';
+  let div_c_1 =
+      ui_namespace.createDiv(parent_name, parent_name + additional, 'col-12');
+  let div_r_1 = ui_namespace.createDiv(div_c_1.id, div_c_1.id + '1', 'row');
+  let div_m_0 =
+      ui_namespace.createDiv(div_r_1.id, div_r_1.id + '0', 'col-sm-auto');
+  div_m_0.innerHTML = inner;
+  let div_m_1 = ui_namespace.createDiv(div_r_1.id, div_r_1.id + '1', 'col-7');
+  let div_m_2 = ui_namespace.createDiv(div_r_1.id, div_r_1.id + '2', '');
+  return [div_m_1, div_m_2];
+};
+
+export default ui_namespace;

assets/js/constraints/hard_ball.js

@@ -1,6 +1,7 @@
 import color_scheme from '../../js/common/color_scheme.min.js';
 import point_namespace from '../../js/common/point.min.js';
 import sinusoidal_namespace from '../../js/common/sinusoidal_vis.min.js';
+import ui_namespace from '../../js/common/ui.min.js';
 
 var hard_ball_namespace = {};
 hard_ball_namespace.Parameters = class {
@@ -150,35 +151,6 @@ hard_ball_namespace.Visializer = class {
     }
   }
 };
-function createDiv(parent_id, name, class_attr) {
-  let div = document.createElement('div');
-  div.setAttribute('class', class_attr);
-  let div_name = name;
-  div.id = div_name;
-  document.getElementById(parent_id).appendChild(div);
-  return div;
-}
-
-function createSlider(div, min, max) {
-  let slider = document.createElement('input');
-  slider.setAttribute('type', 'range');
-  slider.setAttribute('min', min);
-  slider.setAttribute('max', max);
-  slider.setAttribute('class', 'form-range align-middle');
-  slider.value = (max - min) / 2;
-  slider.step = (max - min) / 100;
-  slider.id = div.id + 'slider';
-  document.getElementById(div.id).appendChild(slider);
-  return slider;
-}
-function createOutput(div) {
-  let output = document.createElement('output');
-  // output.setAttribute('class', '');
-  output.id = div.id + 'output';
-  output.innerHTML = '50.5';
-  document.getElementById(div.id).appendChild(output);
-  return output;
-}
 
 hard_ball_namespace.HardBallInterface = class {
   constructor() {
@@ -194,29 +166,20 @@ hard_ball_namespace.HardBallInterface = class {
     this.hard_ball.parameters.x_0 = p5.width / 2;
     this.hard_ball.initialyzeSystem();
     {
-      let parent_name = base_name + '_add_space';
-      let div_c_1 = createDiv(parent_name, parent_name + '1', 'col-sm');
-      let div_r_1 = createDiv(div_c_1.id, div_c_1.id + '1', 'row');
-      let div_m_0 = createDiv(div_r_1.id, div_r_1.id + '0', 'col-1');
-      div_m_0.innerHTML = 'K';
-      let div_m_1 = createDiv(div_r_1.id, div_r_1.id + '1', 'col-8');
-      let div_m_2 = createDiv(div_r_1.id, div_r_1.id + '2', '');
-      this.slider1 = createSlider(div_m_1, 0, 150);
-      this.output1 = createOutput(div_m_2);
+      let [div_m_1, div_m_2] = ui_namespace.createDivsForSlider(base_name, '1', "K");
+      this.slider1 = ui_namespace.createSlider(div_m_1, 0, 150);
+      this.output1 = ui_namespace.createOutput(div_m_2);
+      this.output1.innerHTML = this.slider1.value;
     }
     this.slider1.oninput = function() {
       this.output1.innerHTML = this.slider1.value;
     }.bind(this);
+
     {
-      let parent_name = base_name + '_add_space';
-      let div_c_1 = createDiv(parent_name, parent_name + '2', 'col-sm');
-      let div_r_1 = createDiv(div_c_1.id, div_c_1.id + '1', 'row');
-      let div_m_0 = createDiv(div_r_1.id, div_r_1.id + '0', 'col-1');
-      let div_m_1 = createDiv(div_r_1.id, div_r_1.id + '1', 'col-8');
-      let div_m_2 = createDiv(div_r_1.id, div_r_1.id + '2', '');
-      this.slider2 = createSlider(div_m_1, 0, 10);
-      this.output2 = createOutput(div_m_2);
-      div_m_0.innerHTML = 'D';
+      let [div_m_1, div_m_2] = ui_namespace.createDivsForSlider(base_name, '2', "D");
+      this.slider2 = ui_namespace.createSlider(div_m_1, 0, 10);
+      this.output2 = ui_namespace.createOutput(div_m_2);
+      this.output2.innerHTML = this.slider2.value;
     }
     this.slider2.oninput = function() {
       this.output2.innerHTML = this.slider2.value;