refined animation

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);

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++;

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,