fixed minimum nodes a little bit

src/app/app.component.html

@@ -74,7 +74,7 @@
         <label class="form-control-label">
           Knotenpunkte
         </label>
-        <input type="number" class="form-control" formControlName="nodes" min="1" max="10">
+        <input type="number" class="form-control" formControlName="nodes" min="4" max="10">
       </div>
 
       <ng-container formGroupName="vectors">

src/app/components/graphs.component.ts

@@ -74,7 +74,6 @@ export class GraphsComponent implements OnChanges, OnInit {
   }
 
   ngOnInit() {
-    console.log(this.svgElementRef);
     this.updateGraphs();
   }
 

src/app/directives/guilloche.directive.ts

@@ -42,6 +42,7 @@ export class GuillocheDirective implements OnChanges, OnDestroy {
   private bounce: any | null;
   private bounces: any | null;
   private initialNodes: any;
+  private initialCurve: any;
   private animationInterval: any;
   private medianPoint: Point;
   private medianIndex: number;
@@ -72,7 +73,14 @@ export class GuillocheDirective implements OnChanges, OnDestroy {
     this.canvas = Selection.select(this.canvasService.get);
     // @todo modify graph here instead of in graphs.component.ts
     this.initialNodes = this.graph.nodes.slice();
-    this.medianPoint = this.math.medianOfCurve(this.initialNodes);
+    this.initialCurve = [
+      this.graph.start.point,
+      this.graph.start.direction,
+      ...this.graph.nodes.slice(),
+      this.graph.end.direction,
+      this.graph.end.point
+    ];
+    this.medianPoint = this.math.medianOfCurve(this.initialCurve);
     this.medianIndex = this.math.medianIndex(this.initialNodes);
 
     if (this.graphService.isAnimated) {
@@ -85,9 +93,8 @@ export class GuillocheDirective implements OnChanges, OnDestroy {
         };
       });
       this.bounces = this.initialNodes.map(node => {
-        // const bounceStart = Math.round(Math.random() * 100) / 100;
         const bounceAmplitude = Math.round(Math.random() * 150);
-        return this.math.bounce(0, bounceAmplitude, 3);
+        return this.math.bounce(bounceAmplitude, 3);
       });
       this.animationInterval = setInterval(() => this.animateGraph(), 40);
     } else {

src/app/forms/config.form.ts

@@ -40,7 +40,7 @@ export let ConfigForm: FormGroup = fb.group({
     ])),
   }),
   nodes: fb.control('', Validators.compose([
-    Validators.min(5),
+    Validators.min(4),
     Validators.max(10)
   ])),
   scale: fb.control('', Validators.compose([

src/app/services/math.service.ts

@@ -133,9 +133,9 @@ export class MathService {
    */
 
   public *bounce(
-    start: number = 0,
     amplitude: number = 1,
-    decimals: number = 1
+    decimals: number = 1,
+    start: number = 0
   ) {
     const power = Math.pow(10, decimals);
     const step = 2 / (power);