diff --git a/src/app/app.component.html b/src/app/app.component.html index 58006b2..23ddeea 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -74,7 +74,7 @@ Knotenpunkte - + @@ -97,7 +97,7 @@ Linienanzahl - + diff --git a/src/app/components/graphs.component.scss b/src/app/components/graphs.component.scss index f21eb42..7dec0f1 100644 --- a/src/app/components/graphs.component.scss +++ b/src/app/components/graphs.component.scss @@ -14,6 +14,10 @@ * Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +svg { + // opacity: 0.4; +} + // svg { // stroke-dasharray: 1000px; // stroke-dashoffset: 0px; diff --git a/src/app/directives/guilloche.directive.ts b/src/app/directives/guilloche.directive.ts index 7379440..5a1433a 100644 --- a/src/app/directives/guilloche.directive.ts +++ b/src/app/directives/guilloche.directive.ts @@ -32,6 +32,8 @@ import { MathService } from './../services/math.service'; import { GraphService } from '../services/graph.service'; import { AnimationService } from './../services/animation.service'; +const ANIMATION_INTERVAL = 60; + @Directive({ selector: '[guilloche]' }) @@ -81,7 +83,7 @@ export class GuillocheDirective implements OnChanges, OnDestroy { this.graph.end.point ]; this.medianPoint = this.math.medianOfCurve(this.initialCurve); - this.medianIndex = this.math.medianIndex(this.initialNodes); + this.medianIndex = this.math.medianIndex(this.initialCurve); if (this.graphService.isAnimated) { this.graph.nodes = this.graph.nodes.slice().map((node, i) => { @@ -96,7 +98,11 @@ export class GuillocheDirective implements OnChanges, OnDestroy { const bounceAmplitude = Math.round(Math.random() * 150); return this.math.bounce(bounceAmplitude, 3); }); - this.animationInterval = setInterval(() => this.animateGraph(), 40); + let i = 0; + this.animationInterval = setInterval(() => { + // this.animateGraph(); + this.animateGraph(i++ % 1000 / 10000); + }, ANIMATION_INTERVAL); } else { if (this.animationInterval) { this.bounce = null; @@ -118,12 +124,13 @@ export class GuillocheDirective implements OnChanges, OnDestroy { this.guillocheChanged(); } - private animateGraph() { + private animateGraph(x) { const graphs = this.spreadLines([ this.graph.start.point, this.graph.start.direction, ...this.graph.nodes.map((point, i) => { - return this.graphService.shiftPoint(point, point.ascent, this.bounces[i].next().value); + const ascent = point.ascent * Math.sin(Math.PI * x); + return this.graphService.shiftPoint(point, ascent, this.bounces[i].next().value); }), this.graph.end.direction, this.graph.end.point, diff --git a/src/app/forms/config.form.ts b/src/app/forms/config.form.ts index 2548301..461cd41 100644 --- a/src/app/forms/config.form.ts +++ b/src/app/forms/config.form.ts @@ -40,8 +40,8 @@ export let ConfigForm: FormGroup = fb.group({ ])), }), nodes: fb.control('', Validators.compose([ - Validators.min(4), - Validators.max(10) + Validators.min(1), + Validators.max(20) ])), scale: fb.control('', Validators.compose([ Validators.min(0), @@ -53,7 +53,7 @@ export let ConfigForm: FormGroup = fb.group({ ])), overlap: fb.control('', Validators.min(0.1)), spread: fb.group({ - amount: fb.control('', Validators.min(0)), + amount: fb.control('', Validators.min(1)), spacing: fb.control('', Validators.compose([ Validators.min(0), Validators.max(50) diff --git a/src/app/services/math.service.ts b/src/app/services/math.service.ts index 05b5c74..aa78182 100644 --- a/src/app/services/math.service.ts +++ b/src/app/services/math.service.ts @@ -94,6 +94,7 @@ export class MathService { const p2 = genMedian.next().value; const p3 = genMedian.next().value; const radians = this.angleRadians(p2, p3); + // const radians = Math.round(Math.random() * 10000) / 1000; // @todo if nodes are less than 5 error occures return Object.assign(p1, { ascent: radians }); } diff --git a/src/environments/environment.ts b/src/environments/environment.ts index f79a156..cad4a4a 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -24,9 +24,9 @@ export const environment = { } }, formDefaults: { - width: 10, - height: 16, - scale: 0.3, + width: 1, + height: 1, + scale: 0.4, overlap: 0.6, vectors: { start: 1,