added some rotational sidekicks

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="4" max="10">
+        <input type="number" class="form-control" formControlName="nodes" min="1" max="20">
       </div>
 
       <ng-container formGroupName="vectors">
@@ -97,7 +97,7 @@
           <label class="form-control-label">
             Linienanzahl
           </label>
-          <input type="number" class="form-control" formControlName="amount">
+          <input type="number" class="form-control" min="1" formControlName="amount">
         </div>
         <div class="form-group mb-4">
           <label class="form-control-label">

src/app/components/graphs.component.scss

@@ -14,6 +14,10 @@
  * Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
  */
 
+svg {
+  // opacity: 0.4;
+}
+
 // svg {
 //   stroke-dasharray: 1000px;
 //   stroke-dashoffset: 0px;

src/app/directives/guilloche.directive.ts

@@ -32,6 +32,8 @@ import { MathService } from './../services/math.service';
 import { GraphService } from '../services/graph.service';
 import { AnimationService } from './../services/animation.service';
 
+const ANIMATION_INTERVAL = 60;
+
 @Directive({
   selector: '[guilloche]'
 })
@@ -81,7 +83,7 @@ export class GuillocheDirective implements OnChanges, OnDestroy {
       this.graph.end.point
     ];
     this.medianPoint = this.math.medianOfCurve(this.initialCurve);
-    this.medianIndex = this.math.medianIndex(this.initialNodes);
+    this.medianIndex = this.math.medianIndex(this.initialCurve);
 
     if (this.graphService.isAnimated) {
       this.graph.nodes = this.graph.nodes.slice().map((node, i) => {
@@ -96,7 +98,11 @@ export class GuillocheDirective implements OnChanges, OnDestroy {
         const bounceAmplitude = Math.round(Math.random() * 150);
         return this.math.bounce(bounceAmplitude, 3);
       });
-      this.animationInterval = setInterval(() => this.animateGraph(), 40);
+      let i = 0;
+      this.animationInterval = setInterval(() => {
+        // this.animateGraph();
+        this.animateGraph(i++ % 1000 / 10000);
+      }, ANIMATION_INTERVAL);
     } else {
       if (this.animationInterval) {
         this.bounce = null;
@@ -118,12 +124,13 @@ export class GuillocheDirective implements OnChanges, OnDestroy {
     this.guillocheChanged();
   }
 
-  private animateGraph() {
+  private animateGraph(x) {
     const graphs = this.spreadLines([
       this.graph.start.point,
       this.graph.start.direction,
       ...this.graph.nodes.map((point, i) => {
-        return this.graphService.shiftPoint(point, point.ascent, this.bounces[i].next().value);
+        const ascent = point.ascent * Math.sin(Math.PI * x);
+        return this.graphService.shiftPoint(point, ascent, this.bounces[i].next().value);
       }),
       this.graph.end.direction,
       this.graph.end.point,

src/app/forms/config.form.ts

@@ -40,8 +40,8 @@ export let ConfigForm: FormGroup = fb.group({
     ])),
   }),
   nodes: fb.control('', Validators.compose([
-    Validators.min(4),
+    Validators.min(1),
-    Validators.max(10)
+    Validators.max(20)
   ])),
   scale: fb.control('', Validators.compose([
     Validators.min(0),
@@ -53,7 +53,7 @@ export let ConfigForm: FormGroup = fb.group({
   ])),
   overlap: fb.control('', Validators.min(0.1)),
   spread: fb.group({
-    amount: fb.control('', Validators.min(0)),
+    amount: fb.control('', Validators.min(1)),
     spacing: fb.control('', Validators.compose([
       Validators.min(0),
       Validators.max(50)

src/app/services/math.service.ts

@@ -94,6 +94,7 @@ export class MathService {
     const p2 = genMedian.next().value;
     const p3 = genMedian.next().value;
     const radians = this.angleRadians(p2, p3);
+    // const radians = Math.round(Math.random() * 10000) / 1000;
     // @todo if nodes are less than 5 error occures
     return Object.assign(p1, { ascent: radians });
   }

src/environments/environment.ts

@@ -24,9 +24,9 @@ export const environment = {
     }
   },
   formDefaults: {
-    width: 10,
+    width: 1,
-    height: 16,
+    height: 1,
-    scale: 0.3,
+    scale: 0.4,
     overlap: 0.6,
     vectors: {
       start: 1,