From 6f21849c85067a06d4039edc01037ec7de83b8d0 Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Tue, 14 Aug 2018 12:13:55 +0200
Subject: [PATCH] refined animation

---
 src/app/directives/guilloche.directive.ts | 8 ++++++--
 src/app/services/math.service.ts          | 4 ++--
 src/environments/environment.ts           | 2 +-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/app/directives/guilloche.directive.ts b/src/app/directives/guilloche.directive.ts
index 2a52d76..6d15be1 100644
--- a/src/app/directives/guilloche.directive.ts
+++ b/src/app/directives/guilloche.directive.ts
@@ -67,9 +67,11 @@ export class GuillocheDirective implements OnChanges {
     this.group.selectAll('*').remove();
 
     if (this.graphService.isAnimated) {
-      this.bounce = this.math.bounce(0, 600, 3);
+      const bounceStart = Math.round(Math.random() * 10) / 10;
+      const bounceAmplitude = Math.round(Math.random() * 500);
+      this.bounce = this.math.bounce(bounceStart, bounceAmplitude, 2);
       this.initialNodes = this.graph.nodes.slice();
-      this.animationInterval = setInterval(() => this.animateGraph(), 100);
+      this.animationInterval = setInterval(() => this.animateGraph(), 80);
     } else {
       if (this.animationInterval) {
         this.bounce = null;
@@ -102,6 +104,8 @@ export class GuillocheDirective implements OnChanges {
 
   private spreadLines(points: Point[]) {
     const shiftedMedians = [];
+    // Alternatively use median of curve instead of center
+    // const medianPoint = this.math.medianOfCurve(points);
     const medianPoint = this.math.centerOfCurve(points);
     const medianIndex = this.math.medianIndex(points);
     const genshiftedMedians = this.graphService.spreadOrthogonal(medianPoint, this.config.spread.spacing);
diff --git a/src/app/services/math.service.ts b/src/app/services/math.service.ts
index 6ef0dad..177b441 100644
--- a/src/app/services/math.service.ts
+++ b/src/app/services/math.service.ts
@@ -139,10 +139,10 @@ export class MathService {
   ) {
     const power = Math.pow(10, decimals);
     const step = 1 / (power);
-    let index = start;
+    let index = 0;
 
     while (true) {
-      const radians = Math.PI * step * index;
+      const radians = Math.PI * step * index + start;
       yield Math.round((Math.sin(radians) * amplitude) * power) / power;
 
       index++;
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 49acbc3..5deef47 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -26,7 +26,7 @@ export const environment = {
   formDefaults: {
     width: 10,
     height: 16,
-    scale: 0.4,
+    scale: 0.3,
     overlap: 0.6,
     vectors: {
       start: 1,