little animation improvements

projects/nls-guilloche/src/nls/components/graphs.component.ts

@@ -182,6 +182,7 @@ export class NlsGraphsComponent implements OnChanges {
     );
 
     if (this.config.autoHeight) {
+      // Snap bottom and top to window limits
       return {
         start: {
           x: totalCenter.x - baseCenter.x,
@@ -196,7 +197,7 @@ export class NlsGraphsComponent implements OnChanges {
         center: totalCenter
       };
     } else {
-
+      // Adjust matrix relatively to window size
       return {
         start: {
           x: totalCenter.x - baseCenter.x,

projects/nls-guilloche/src/nls/directives/guilloche.directive.ts

@@ -28,7 +28,7 @@ import { NlsCanvasService } from './../services/canvas.service';
 import { NlsMathService } from './../services/math.service';
 import { NlsGraphService } from '../services/graph.service';
 
-const ANIMATION_INTERVAL = 60;
+const ANIMATION_INTERVAL = 30;
 
 @Directive({
   selector: '[nlsGuilloche]'

src/environments/environment.prod.ts

@@ -22,7 +22,8 @@ export const environment = {
     colors: {
       secondary: '#F8485E',
       primary: '#5CC0C7'
-    }
+    },
+    autoHeight: false
   },
   formDefaults: {
     width: 10,

src/environments/environment.ts

@@ -23,24 +23,24 @@ export const environment = {
       primary: '#129490',
       secondary: '#CE1483'
     },
-    autoSize: true
+    autoHeight: true
   },
   formDefaults: {
-    width: 1,
+    width: 1e-10,
     height: 1,
     scale: 0.4,
-    overlap: 0.6,
+    overlap: 0.3,
     vectors: {
       start: 1,
       end: 0,
       range: 0.6,
       spacing: 7
     },
-    nodes: 5,
+    nodes: 3,
     stroke: 0.7,
     spread: {
       amount: 30,
-      spacing: 10
+      spacing: 20
     }
   }
 };