fixed animation bugs

src/app/app.component.html

@@ -116,7 +116,7 @@
         </div>
       </div>
       <div class="dropdown-divider mb-4"></div>
-      <button type="submit" class="btn btn-lg btn-primary btn-block" [disabled]="configForm.invalid">Aktualisieren</button>
+      <button type="submit" class="btn btn-lg btn-primary btn-block" [disabled]="configForm.invalid || animationActive">Aktualisieren</button>
       <div class="dropdown-divider mt-4"></div>
     </form>
 

src/app/directives/guilloche.directive.ts

@@ -86,11 +86,11 @@ export class GuillocheDirective implements OnChanges, OnDestroy {
         };
       });
       this.bounces = this.initialNodes.map(node => {
-        const bounceStart = Math.round(Math.random() * 10) / 10;
+        const bounceStart = Math.round(Math.random() * 100) / 100;
-        const bounceAmplitude = Math.round(Math.random() * 100);
+        const bounceAmplitude = Math.round(Math.random() * 150);
-        return this.math.bounce(bounceStart, bounceAmplitude, 2);
+        return this.math.bounce(bounceStart, bounceAmplitude, 3);
       });
-      this.animationInterval = setInterval(() => this.animateGraph(), 60);
+      this.animationInterval = setInterval(() => this.animateGraph(), 40);
     } else {
       if (this.animationInterval) {
         this.bounce = null;

src/app/forms/config.form.ts

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

src/environments/environment.prod.ts

@@ -16,7 +16,7 @@
 
 export const environment = {
   production: true,
-  grid: false,
+  debug: false,
   guilloche: {
     colors: {
       primary: '#F8485E',
@@ -34,7 +34,7 @@ export const environment = {
       range: 0.4,
       spacing: 10
     },
-    nodes: 4,
+    nodes: 5,
     stroke: 1,
     spread: {
       amount: 10,