all nodes animated

src/app/components/graphs.component.html

@@ -1,5 +1,5 @@
 <svg #svg width="100%" height="100%">
   <g guilloche [graph]="graphs[0]" [matrix]="matrix" [config]="config" [animate]="true" (guillocheChange)="prepareGuillocheExport($event)"></g>
-  <g guilloche [graph]="graphs[1]" [matrix]="matrix" [config]="config" [animate]="true" (guillocheChange)="prepareGuillocheExport($event)"></g>
+  <!-- <g guilloche [graph]="graphs[1]" [matrix]="matrix" [config]="config" [animate]="true" (guillocheChange)="prepareGuillocheExport($event)"></g> -->
   <!-- <g guilloche *ngFor="let graph of graphs" [graph]="graph" [matrix]="matrix" [config]="config" [animate]="true" (guillocheChange)="prepareGuillocheExport($event)"></g> -->
 </svg>

src/app/components/graphs.component.ts

@@ -128,11 +128,13 @@ export class GraphsComponent implements OnChanges, OnInit {
   private adjustGraph(curve) {
     return Object.assign(curve, {
       stroke: this.config.stroke,
-      nodes: [
+      start: Object.assign(curve.start, {
-        this.genVectorPoint(curve.start.point, curve.start.vector),
+        direction: this.genVectorPoint(curve.start.point, curve.start.vector)
-        ...this.genRandomPoints(this.config.nodes),
+      }),
-        this.genVectorPoint(curve.end.point, curve.end.vector)
+      end: Object.assign(curve.end, {
-      ]
+        direction: this.genVectorPoint(curve.end.point, curve.end.vector)
+      }),
+      nodes: this.genRandomPoints(this.config.nodes)
     });
   }
 

src/app/directives/guilloche.directive.ts

@@ -41,8 +41,11 @@ export class GuillocheDirective implements OnChanges {
   private canvas: any;
   private group: any;
   private bounce: any | null;
+  private bounces: any | null;
   private initialNodes: any;
   private animationInterval: any;
+  private medianPoint: Point;
+  private medianIndex: number;
 
   @Input() graph: Graph;
   @Input() matrix: any;
@@ -66,12 +69,26 @@ export class GuillocheDirective implements OnChanges {
     // @todo modify graph here instead of in graphs.component.ts
     this.group.selectAll('*').remove();
 
+    this.initialNodes = this.graph.nodes.slice();
+    this.medianPoint = this.math.medianOfCurve(this.initialNodes);
+    this.medianIndex = this.math.medianIndex(this.initialNodes);
+
     if (this.graphService.isAnimated) {
-      const bounceStart = Math.round(Math.random() * 10) / 10;
+
-      const bounceAmplitude = Math.round(Math.random() * 500);
+      this.graph.nodes = this.graph.nodes.slice().map((node, i) => {
-      this.bounce = this.math.bounce(bounceStart, bounceAmplitude, 2);
+        return {
-      this.initialNodes = this.graph.nodes.slice();
+          x: node.x,
-      this.animationInterval = setInterval(() => this.animateGraph(), 80);
+          y: node.y,
+          // ascent: Math.round(Math.random() * 100) / 100
+          ascent: this.medianPoint.ascent + i * 0.5
+        };
+      });
+      this.bounces = this.initialNodes.map(node => {
+        const bounceStart = Math.round(Math.random() * 10) / 10;
+        const bounceAmplitude = Math.round(Math.random() * 100);
+        return this.math.bounce(bounceStart, bounceAmplitude, 2);
+      });
+      this.animationInterval = setInterval(() => this.animateGraph(), 120);
     } else {
       if (this.animationInterval) {
         this.bounce = null;
@@ -82,52 +99,59 @@ export class GuillocheDirective implements OnChanges {
     this.guillocheChanged();
     this.spreadLines([
       this.graph.start.point,
+      this.graph.start.direction,
       ...this.graph.nodes,
-      this.graph.end.point
+      this.graph.end.point,
+      this.graph.end.direction,
     ]);
   }
 
   private animateGraph() {
-    const medianIndex = this.math.medianIndex(this.initialNodes);
+    // const medianIndex = this.math.medianIndex(this.initialNodes);
-    const medianPoint = this.math.medianOfCurve(this.initialNodes);
+    // const bouncedMedian = this.graphService.shiftPoint(medianPoint, medianPoint.ascent, this.bounce.next().value);
-    const bouncedMedian = this.graphService.shiftPoint(medianPoint, medianPoint.ascent, this.bounce.next().value);
+
+    // this.graph.nodes.splice(medianIndex, 1, bouncedMedian);
 
-    this.graph.nodes.splice(medianIndex, 1, bouncedMedian);
     this.group.selectAll('*').remove();
+
     this.spreadLines([
       this.graph.start.point,
-      ...this.graph.nodes,
+      this.graph.start.direction,
+      ...this.graph.nodes.map((point, i) => {
+        return this.graphService.shiftPoint(point, point.ascent, this.bounces[i].next().value);
+      }),
+      this.graph.end.direction,
       this.graph.end.point,
     ]);
-    this.debugBounce(bouncedMedian);
+    // this.debugBounce(bouncedMedian);
   }
 
   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 medianPoint = this.math.centerOfCurve(points);
-    const medianIndex = this.math.medianIndex(points);
+    // const medianIndex = this.math.medianIndex(points);
-    const genshiftedMedians = this.graphService.spreadOrthogonal(medianPoint, this.config.spread.spacing);
+    const genshiftedMedians = this.graphService.spreadOrthogonal(this.medianPoint, this.config.spread.spacing);
 
     for (let i = 0; i < this.config.spread.amount; i++) {
       shiftedMedians.push(genshiftedMedians.next().value);
     }
 
-    if (env.debug) {
+    // if (env.debug) {
-      [medianPoint, ...shiftedMedians].forEach((point, index) => {
+    //   [medianPoint, ...shiftedMedians].forEach((point, index) => {
-        this.group.append('circle')
+    //     this.group.append('circle')
-          .attr('cx', point.x)
+    //       .attr('cx', point.x)
-          .attr('cy', point.y)
+    //       .attr('cy', point.y)
-          .attr('r', 10 / index)
+    //       .attr('r', 10 / index)
-          .attr('fill-opacity', 0.6)
+    //       .attr('fill-opacity', 0.6)
-          .attr('fill', 'darkgray');
+    //       .attr('fill', 'darkgray');
-      });
+    //   });
-    }
+    // }
 
     shiftedMedians.forEach(median => {
       const shiftedGraph = points.slice();
-      shiftedGraph.splice(medianIndex, 1, median);
+      shiftedGraph.splice(this.medianIndex, 1, median);
       this.drawGraph(shiftedGraph);
     });
   }
@@ -143,7 +167,7 @@ export class GuillocheDirective implements OnChanges {
       .attr('fill', 'none');
 
     if (env.debug) {
-      this.debugGraph();
+      this.debugGraph(points);
     }
   }
 
@@ -151,8 +175,8 @@ export class GuillocheDirective implements OnChanges {
     this.guillocheChange.emit(this.el.nativeElement);
   }
 
-  private debugGraph() {
+  private debugGraph(points: Point[]) {
-    this.graph.nodes.forEach((point, index) => {
+    points.forEach((point, index) => {
       const circle = this.group.append('g');
 
       circle.append('circle')

src/app/models/graph.model.ts

@@ -21,10 +21,12 @@ export interface Graph {
   color: string; // can be set in enviroment
   start: {
     point: Point;
+    direction?: Point;
     vector: number; // degree between 0 and 360
   };
   end: {
     point: Point;
+    direction?: Point;
     vector: number; // degree between 0 and 360
   };
   stroke: number; // stroke width

src/app/services/graph.service.ts

@@ -66,7 +66,7 @@ export class GraphService {
     }
   }
 
-  public shiftPoint(point: Point, radians: number, spacing: number) {
+  public shiftPoint(point: Point, radians: number, spacing: number): Point {
     return {
       x: Math.sin(radians * Math.PI) * spacing + point.x,
       y: Math.cos(radians * Math.PI) * spacing + point.y

src/environments/environment.ts

@@ -16,11 +16,11 @@
 
 export const environment = {
   production: false,
-  debug: false,
+  debug: true,
   guilloche: {
     colors: {
-      primary: '#950952',
+      primary: '#129490',
-      secondary: '#189B8E'
+      secondary: '#004FFF'
     }
   },
   formDefaults: {
@@ -31,14 +31,14 @@ export const environment = {
     vectors: {
       start: 1,
       end: 0,
-      range: 0.4,
+      range: 0.6,
       spacing: 7
     },
     nodes: 5,
     stroke: 0.7,
     spread: {
-      amount: 10,
+      amount: 8,
-      spacing: 32
+      spacing: 10
     }
   }
 };