refactored variable names

src/app/components/graphs.component.ts

@@ -106,30 +106,25 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
   }
 
   private adjustGraph(curve) {
-    const expandedPoints = [];
+    return Object.assign(curve, {
-
-    for (let i = 0; i < this.config.nodes; i++) {
-      expandedPoints.push(this.randomPoint);
-    }
-
-    return {
       id: `start-to-end`,
-      start: {
-        coords: curve.start.point,
-        direction: curve.start.vector,
-        color: curve.start.color
-      }, end: {
-        coords: curve.end.point,
-        direction: curve.end.vector,
-        color: curve.end.color
-      },
       stroke: this.config.stroke,
       nodes: [
-        this.vectorPoint(curve.start.point, curve.start.vector),
+        this.genVectorPoint(curve.start.point, curve.start.vector),
-        ...expandedPoints,
+        ...this.genRandomPoints(this.config.nodes),
-        this.vectorPoint(curve.end.point, curve.end.vector)
+        this.genVectorPoint(curve.end.point, curve.end.vector)
       ]
-    };
+    });
+  }
+
+  private genRandomPoints(num: number) {
+    const generatedPoints = [];
+
+    for (let i = 0; i < this.config.nodes; i++) {
+      generatedPoints.push(this.randomPoint);
+    }
+
+    return generatedPoints;
   }
 
   private flipflop(x: string) {
@@ -173,12 +168,12 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
     };
   }
 
-  private vectorPoint(point: Point, direction: number) {
+  private genVectorPoint(point: Point, vector: number) {
     const range = this.Δ(this.matrix.start, this.matrix.end) * this.config.vectors.range;
 
     return {
-      x: range * Math.sin(Math.PI * direction) + point.x,
+      x: range * Math.sin(Math.PI * vector) + point.x,
-      y: range * Math.cos(Math.PI * direction) + point.y
+      y: range * Math.cos(Math.PI * vector) + point.y
     };
   }
 
@@ -212,7 +207,7 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
 
 
 
-  private *shiftPoint(point: Point, direction) {
+  private *shiftPoint(point: Point, vector) {
     const genShiftX = this.shiftNumber(this.config.space, point.x);
     const genShiftY = this.shiftNumber(this.config.space, point.y);
 

src/app/directives/guilloche.directive.ts

@@ -49,7 +49,7 @@ export class GuillocheDirective implements OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    const points = [this.graph.start.coords, ...this.graph.nodes, this.graph.end.coords];
+    const points = [this.graph.start.point, ...this.graph.nodes, this.graph.end.point];
 
     this.defineGradient();
     this.spreadLines(points);
@@ -149,16 +149,16 @@ export class GuillocheDirective implements OnChanges {
 
   private showGrid() {
     this.group.append('circle')
-      .attr('cx', this.graph.start.coords.x)
+      .attr('cx', this.graph.start.point.x)
-      .attr('cy', this.graph.start.coords.y)
+      .attr('cy', this.graph.start.point.y)
       .attr('r', 20)
       .attr('stroke-width', 1)
       .attr('fill-opacity', 0)
       .attr('stroke', this.graph.start.color);
 
     this.group.append('circle')
-      .attr('cx', this.graph.end.coords.x)
+      .attr('cx', this.graph.end.point.x)
-      .attr('cy', this.graph.end.coords.y)
+      .attr('cy', this.graph.end.point.y)
       .attr('r', 10)
       .attr('stroke-width', 1)
       .attr('fill-opacity', 0)

src/app/models/graph.model.ts

@@ -19,13 +19,13 @@ import { Point } from './point.model';
 export interface Graph {
   id: string;
   start: {
-    coords: Point;
+    point: Point;
-    direction: number; // degree between 0 and 360
+    vector: number; // degree between 0 and 360
     color: string // can be set in enviroment
   };
   end: {
-    coords: Point;
+    point: Point;
-    direction: number; // degree between 0 and 360
+    vector: number; // degree between 0 and 360
     color: string; // can be set in enviroment
   };
   stroke: number; // stroke width