muliple adjustments

src/app/app.component.html

@@ -76,24 +76,36 @@
         </label>
         <input type="number" class="form-control" formControlName="nodes" min="1" max="10">
       </div>
+
+      <ng-container formGroupName="vectors">
+        <div class="form-group mb-4">
+          <label class="form-control-label">
+            Anfangsabstand
+          </label>
+          <input type="number" class="form-control" formControlName="spacing" min="0" max="10" step="0.1">
+        </div>
+      </ng-container>
       <div class="form-group">
         <label class="form-control-label">
           Linienstärke
         </label>
         <input type="number" class="form-control" formControlName="stroke" min="0.1" max="10" step="0.1">
       </div>
+
+      <ng-container formGroupName="spread">
         <div class="form-group mb-4">
           <label class="form-control-label">
-          Linienabstand
+            Linienanzahl
           </label>
-        <input type="number" class="form-control" formControlName="space" min="0" max="10" step="0.1">
+          <input type="number" class="form-control" formControlName="amount">
         </div>
         <div class="form-group mb-4">
           <label class="form-control-label">
-          Lienienanzahl
+            Lienienabstand
           </label>
-        <input type="number" class="form-control" formControlName="spread" min="0" max="40">
+          <input type="number" class="form-control" formControlName="spacing">
         </div>
+      </ng-container>
       <div class="form-group d-flex flex-colmn justify-content-between align-items-center mb-4">
         <label class="form-control-label">
           Animation

src/app/app.component.ts

@@ -64,7 +64,6 @@ export class AppComponent implements OnInit {
   ngOnInit() {
     this.configForm.reset({...this.config});
     this.list = this.historyService.list();
-    // console.log(this.graphs);
   }
 
   public updateGraphs() {
@@ -82,11 +81,6 @@ export class AppComponent implements OnInit {
 
   public exportSvg() {
     const link = document.createElement('a');
-    // const blob = new Blob(
-    //   [this.canvasService.get],
-    //   {type: 'image/svg+xml;charset=utf-8'}
-    // );
-    // link.href = URL.createObjectURL(blob);
     link.href = this.url;
     link.download = 'guilloche.svg';
     document.body.appendChild(link);

src/app/components/graphs.component.ts

@@ -191,8 +191,8 @@ export class GraphsComponent implements OnChanges, OnInit {
   }
 
   private *shiftPoint(point: Point, vector) {
-    const genShiftX = this.shiftNumber(this.config.space, vector);
+    const genShiftX = this.shiftNumber(this.config.vectors.spacing, vector);
-    const genShiftY = this.shiftNumber(this.config.space, vector);
+    const genShiftY = this.shiftNumber(this.config.vectors.spacing, vector);
 
     while (true) {
       yield {

src/app/directives/guilloche.directive.ts

@@ -31,7 +31,7 @@ import { CanvasService } from './../services/canvas.service';
 import { MathService } from './../services/math.service';
 import { GraphService } from '../services/graph.service';
 import { AnimationService } from './../services/animation.service';
-import { spread } from 'q';
+// import { spread } from 'q';
 
 @Directive({
   selector: '[guilloche]'
@@ -88,7 +88,7 @@ export class GuillocheDirective implements OnChanges, OnInit {
     if (this.graphService.isAnimated) {
       console.log('is animated');
       // this.graphService.startAnimation();
-      this.animationInterval = setInterval(() => this.animateGraph(), 60);
+      this.animationInterval = setInterval(() => this.animateGraph(), this.config.spread.spacing);
     } else {
       if (this.animationInterval) {
         console.log('not animated');
@@ -109,7 +109,6 @@ export class GuillocheDirective implements OnChanges, OnInit {
   private animateGraph() {
     this.group.selectAll('*').remove();
     this.graph = this.animationService.animate(this.graph);
-    // this.saveGraph();
     const points = [
       this.graph.start.point,
       ...this.graph.nodes,
@@ -141,40 +140,12 @@ export class GuillocheDirective implements OnChanges, OnInit {
     const shiftedMedians = [];
     const medianPoint = this.math.centerOfCurve(points);
     const medianIndex = this.math.medianIndex(points);
-    const genshiftedMedians = this.graphService.spreadOrthogonal(medianPoint, 20);
+    const genshiftedMedians = this.graphService.spreadOrthogonal(medianPoint, this.config.spread.spacing);
 
-    for (let i = 0; i < this.config.spread; i++) {
+    for (let i = 0; i < this.config.spread.amount; i++) {
       shiftedMedians.push(genshiftedMedians.next().value);
     }
 
-    // const indexMiddle = Math.floor(points.length * 0.5);
-    // const pointMiddle = points[indexMiddle];
-    // const closestCenter = this.math.getClosestCenter(pointMiddle, this.matrix);
-    // const radius = this.math.Δ(pointMiddle, closestCenter);
-    // const shiftedMedians = [];
-    // const pies = 200;
-
-    // for (let i = 0; i < pies; i++) {
-      //   shiftedMedians.push({
-        //     x: radius * Math.cos(2 * i * Math.PI / pies) + closestCenter.x,
-        //     y: radius * Math.sin(2 * i * Math.PI / pies) + closestCenter.y,
-        //   });
-        // }
-
-        // shiftedMedians.sort((a, b) => {
-          //   // Good possibility to align orientation points outsite
-          //   return this.math.Δ(b, pointMiddle) - this.math.Δ(a, pointMiddle);
-          // });
-
-          // console.log(shiftedMedians);
-
-          // shiftedMedians.some((point, index) => {
-            //   points[indexMiddle] = point;
-
-            //   this.drawGraph(points);
-
-            //   return index === this.config.spread - 1;
-            // });
     if (env.grid) {
       [medianPoint, ...shiftedMedians].forEach((point, index) => {
         this.group.append('circle')
@@ -191,19 +162,11 @@ export class GuillocheDirective implements OnChanges, OnInit {
       shiftedGraph.splice(medianIndex, 1, median);
       this.drawGraph(shiftedGraph);
     });
-
-    // this.drawGraph(points);
   }
 
-  // private animateRange(n: number) {
-  //   return Ease.scaleLinear().range([n, n + 100]);
-  // }
-
   private showGrid() {
     this.graph.nodes.forEach((point, index) => {
       const circle = this.group.append('g');
-      // const xRange = this.animateRange(point.x);
-      // const yRange = this.animateRange(point.y);
 
       circle.append('circle')
         .attr('cx', point.x)

src/app/forms/config.form.ts

@@ -33,7 +33,11 @@ export let ConfigForm: FormGroup = fb.group({
     range: fb.control('', Validators.compose([
       Validators.min(0),
       Validators.max(1)
-    ]))
+    ])),
+    spacing: fb.control('', Validators.compose([
+      Validators.min(0),
+      Validators.max(20)
+    ])),
   }),
   nodes: fb.control('', Validators.compose([
     Validators.min(1),
@@ -47,10 +51,12 @@ export let ConfigForm: FormGroup = fb.group({
     Validators.min(0.1),
     Validators.max(10)
   ])),
-  space: fb.control('', Validators.compose([
-    Validators.min(0),
-    Validators.max(10)
-  ])),
   overlap: fb.control('', Validators.min(0.1)),
-  spread: fb.control('', Validators.min(0)),
+  spread: fb.group({
+    amount: fb.control('', Validators.min(0)),
+    spacing: fb.control('', Validators.compose([
+      Validators.min(0),
+      Validators.max(50)
+    ])),
+  })
 });

src/app/models/config.model.ts

@@ -27,5 +27,11 @@ export interface Config {
     y: number;
     color: string;
   };
-  space: number;
+  vectors: {
+    spacing: number
+  };
+  spread: {
+    amount: number;
+    spacing: number
+  };
 }

src/app/services/graph.service.ts

@@ -36,7 +36,6 @@ export class GraphService {
   }
 
   public set(newGraphs: Graph[]) {
-    // console.log('GraphService:set', newGraphs);
     this.graphs = newGraphs;
   }
 

src/environments/environment.ts

@@ -16,26 +16,29 @@
 
 export const environment = {
   production: false,
-  grid: false,
+  grid: true,
   guilloche: {
     colors: {
-      primary: '#cb0c4d',
+      primary: '#950952',
-      secondary: '#10c1e8'
+      secondary: '#189B8E'
     }
   },
   formDefaults: {
     width: 10,
     height: 16,
-    scale: 0.1,
+    scale: 0.4,
-    overlap: 1.2,
+    overlap: 0.6,
     vectors: {
       start: 1,
       end: 0,
-      range: 0.4
+      range: 0.4,
+      spacing: 7
     },
-    nodes: 4,
+    nodes: 5,
-    stroke: 1,
+    stroke: 0.7,
-    spread: 12,
+    spread: {
-    space: 10
+      amount: 36,
+      spacing: 32
+    }
   }
 };