public/guilloche-generator
2
0
Fork 0
Code Pull Requests Activity

fixed minimum nodes a little bit

Browse Source
This commit is contained in:
Michael Czechowski
2018-08-28 15:56:28 +02:00
parent 93c5165650
commit c3afe0c4e9
5 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.component.html
View File

@@ -74,7 +74,7 @@
<label class="form-control-label"> <label class="form-control-label">
Knotenpunkte Knotenpunkte
</label> </label>
<input type="number" class="form-control" formControlName="nodes" min="1" max="10"> <input type="number" class="form-control" formControlName="nodes" min="4" max="10">
</div> </div>
<ng-container formGroupName="vectors"> <ng-container formGroupName="vectors">

1
src/app/components/graphs.component.ts
View File

@@ -74,7 +74,6 @@ export class GraphsComponent implements OnChanges, OnInit {
} }
ngOnInit() { ngOnInit() {
console.log(this.svgElementRef);
this.updateGraphs(); this.updateGraphs();
} }

13
src/app/directives/guilloche.directive.ts
View File

@@ -42,6 +42,7 @@ export class GuillocheDirective implements OnChanges, OnDestroy {
private bounce: any | null; private bounce: any | null;
private bounces: any | null; private bounces: any | null;
private initialNodes: any; private initialNodes: any;
private initialCurve: any;
private animationInterval: any; private animationInterval: any;
private medianPoint: Point; private medianPoint: Point;
private medianIndex: number; private medianIndex: number;
@@ -72,7 +73,14 @@ export class GuillocheDirective implements OnChanges, OnDestroy {
this.canvas = Selection.select(this.canvasService.get); this.canvas = Selection.select(this.canvasService.get);
// @todo modify graph here instead of in graphs.component.ts // @todo modify graph here instead of in graphs.component.ts
this.initialNodes = this.graph.nodes.slice(); this.initialNodes = this.graph.nodes.slice();
this.medianPoint = this.math.medianOfCurve(this.initialNodes); this.initialCurve = [
this.graph.start.point,
this.graph.start.direction,
...this.graph.nodes.slice(),
this.graph.end.direction,
this.graph.end.point
];
this.medianPoint = this.math.medianOfCurve(this.initialCurve);
this.medianIndex = this.math.medianIndex(this.initialNodes); this.medianIndex = this.math.medianIndex(this.initialNodes);
if (this.graphService.isAnimated) { if (this.graphService.isAnimated) {
@@ -85,9 +93,8 @@ export class GuillocheDirective implements OnChanges, OnDestroy {
}; };
}); });
this.bounces = this.initialNodes.map(node => { this.bounces = this.initialNodes.map(node => {
// const bounceStart = Math.round(Math.random() * 100) / 100;
const bounceAmplitude = Math.round(Math.random() * 150); const bounceAmplitude = Math.round(Math.random() * 150);
return this.math.bounce(0, bounceAmplitude, 3); return this.math.bounce(bounceAmplitude, 3);
}); });
this.animationInterval = setInterval(() => this.animateGraph(), 40); this.animationInterval = setInterval(() => this.animateGraph(), 40);
} else { } else {

2
src/app/forms/config.form.ts
View File

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

4
src/app/services/math.service.ts
View File

@@ -133,9 +133,9 @@ export class MathService {
*/ */
public *bounce( public *bounce(
start: number = 0,
amplitude: number = 1, amplitude: number = 1,
decimals: number = 1 decimals: number = 1,
start: number = 0
) { ) {
const power = Math.pow(10, decimals); const power = Math.pow(10, decimals);
const step = 2 / (power); const step = 2 / (power);