diff --git a/src/app/app.component.html b/src/app/app.component.html index 89169df..59a0d03 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -87,7 +87,13 @@ - + + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 4c27f7d..2a071ba 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -16,27 +16,29 @@ export class AppComponent implements OnInit { public canvasParam: Param; public config: any | null; public configForm: FormGroup; + public scaleOnWheel: boolean; @HostListener('mousewheel', ['$event']) private onMousewheel(event) { - const delta = Math.sign(event.deltaY); - const step = env.controls.wheelStep; - this.config = {...this.configForm.value}; - if (delta > 0) { - if (this.config.scale === 1 - step) { - return; - } - this.config.scale += step; - } else { - if (this.config.scale === step) { - return; - } - this.config.scale -= step; - } + if (this.scaleOnWheel) { + const delta = Math.sign(event.deltaY); + const step = env.controls.wheelStep; - this.config.scale = Math.round(this.config.scale / step) * step; + if (delta > 0) { + if (this.config.scale === 1 - step) { + return; + } + this.config.scale += step; + } else { + if (this.config.scale === step) { + return; + } + this.config.scale -= step; + } + this.config.scale = Math.round(this.config.scale / step) * step; + } this.configForm.reset({...this.config}); this.updateGraphs(); } diff --git a/src/app/components/graphs.component.ts b/src/app/components/graphs.component.ts index 834bfa8..d129e23 100644 --- a/src/app/components/graphs.component.ts +++ b/src/app/components/graphs.component.ts @@ -65,23 +65,27 @@ export class GraphsComponent implements AfterViewInit, OnChanges { const to = this.flipflop(from); const startPoint = { x: this.matrix[from].x, y: this.matrix[from].y }; const endPoint = { x: this.matrix[to].x, y: this.matrix[to].y }; + const expandedPoints = []; - console.error(from, '->', to); + for (let i = 0; i < this.config.nodes; i++) { + expandedPoints.push(this.randomPoint); + } return { id: `${from}-to-${to}`, start: { coords: startPoint, direction: this.config.vectors[from], - color: env.guilloche.colors.start + color: env.guilloche.colors[from] }, end: { coords: endPoint, direction: this.config.vectors[to], - color: env.guilloche.colors.end + color: env.guilloche.colors[to] }, stroke: this.config.stroke, nodes: [ this.vectorPoint(startPoint, this.config.vectors[from]), + ...expandedPoints, this.vectorPoint(endPoint, this.config.vectors[to]) ] }; @@ -123,21 +127,39 @@ export class GraphsComponent implements AfterViewInit, OnChanges { y: totalCenter.y - baseCenter.y }, width: baseWidthScaled, - height: baseHeightScaled + height: baseHeightScaled, + center: totalCenter }; } private vectorPoint(point: Point, direction: number) { const range = this.Δ(this.matrix.start, this.matrix.end) * this.config.vectors.range; - console.log('graphs component(vectorPoint)', point, direction); - return { x: range * Math.sin(Math.PI * direction) + point.x, y: range * Math.cos(Math.PI * direction) + point.y }; } + private get randomPoint() { + const overlap = env.guilloche.overlap; + const x = { + min: this.matrix.center.x - this.matrix.width * overlap, + max: this.matrix.center.x + this.matrix.width * overlap + }; + const y = { + min: this.matrix.center.y - this.matrix.height * overlap, + max: this.matrix.center.y + this.matrix.height * overlap + }; + + console.log(this.matrix.center); + + return { + x: Random.randomUniform(x.min, x.max)(), + y: Random.randomUniform(y.min, y.max)() + }; + } + /** * Calculate distance between to points with coordinates. * @param a diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index 565552a..701e2f1 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -4,7 +4,8 @@ export const environment = { colors: { start: '#f16363', end: '#5eb1bd' - } + }, + overlap: 3 }, controls: { wheelStep: 0.01 diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 4613e31..aa38d2f 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -8,7 +8,8 @@ export const environment = { colors: { start: '#cc0045', end: '#0067cc' - } + }, + overlap: 1.4 }, controls: { wheelStep: 0.01 diff --git a/src/index.html b/src/index.html index 86ceb2b..17b106b 100644 --- a/src/index.html +++ b/src/index.html @@ -2,7 +2,7 @@ - NlsNg6D3jsGuilloche + Random Guilloche Generator