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

feat(graohsComponent): added vector configuration

Browse Source
This commit is contained in:
Michael Czechowski
2018-05-23 21:55:52 +02:00
parent b1e6faab99
commit 2d635148b8
9 changed files with 186 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,87 +10,68 @@
<app-graphs [config]="config"></app-graphs>
<ul *ngIf="false">
<li>
<label>
<div>Points</div>
<input type="number" name="points" [(ngModel)]="canvasParam.points" max="10" min="0" step="1">
</label>
</li>
<li>
<label>
<div>Margin X</div>
<input type="number" name="marginX" [(ngModel)]="canvasParam.margin.x" max="1" min="0" step="0.1">
</label>
</li>
<li>
<label>
<div>Margin Y</div>
<input type="number" name="marginY" [(ngModel)]="canvasParam.margin.y" max="1" min="0" step="0.1">
</label>
</li>
<li>
<label>
<div>Stroke Width</div>
<input type="number" name="strokeWidth" [(ngModel)]="canvasParam.stroke.width" max="10" min="0" step="0.1">
</label>
</li>
<li>
<label>
<div>Spread lines</div>
<input type="number" name="spread" [(ngModel)]="canvasParam.spread" max="20" min="5" step="1">
</label>
</li>
<li>
<label>
<div>Show Grid?</div>
<input type="checkbox" name="showGrid" [(ngModel)]="canvasParam.showGrid">
</label>
</li>
</ul>
<aside>
<aside class="col-sm-4 col-lg-3 col-xl-3">
<form [formGroup]="configForm" (ngSubmit)="updateGraphs()" novalidate>
<div class="form-group">
<label class="form-control-label">
Breite <small>(bspw. 42, -12, 3.2)</small>
</label>
<input type="number" class="form-control" formControlName="width">
<div class="pb-5">
<h5>Seitenverhältnis</h5>
<hr>
<div class="form-group">
<label class="form-control-label">
Breite
</label>
<input type="number" class="form-control" formControlName="width">
</div>
<div class="form-group">
<label class="form-control-label">
Höhe
</label>
<input type="number" class="form-control" formControlName="height">
</div>
<div class="form-group">
<label class="form-control-label">
Linienstärke
</label>
<input type="number" class="form-control" formControlName="stroke" min="0.1" max="10" step="0.1">
</div>
</div>
<div class="form-group">
<label class="form-control-label">
Höhe <small>(bspw. 42, -12, 3.2)</small>
</label>
<input type="number" class="form-control" formControlName="height">
</div>
<div class="form-group">
<label class="form-control-label">
Duktus <small>(Strichstärke)</small>
</label>
<input type="number" class="form-control" formControlName="stroke" min="0.1" max="10" step="0.1">
</div>
<div class="form-group">
<label class="form-control-label">
Anfangsvektor
</label>
<select class="form-control" formControlName="directionStart">
<option value="0">Oben</option>
<option value="90">Rechts</option>
<option value="180">Unten</option>
<option value="270">Links</option>
</select>
</div>
<div class="form-group">
<label class="form-control-label">
Endvektor
</label>
<select class="form-control" formControlName="directionEnd">
<option value="0">Oben</option>
<option value="90">Rechts</option>
<option value="180">Unten</option>
<option value="270">Links</option>
</select>
<div class="pb-5">
<h5>Vektoren</h5>
<hr>
<ng-container formGroupName="vectors">
<div class="form-group">
<label class="form-control-label">
Anfangsvektor
</label>
<select class="form-control" formControlName="start">
<option value="1">Oben</option>
<option value="0.5">Rechts</option>
<option value="0">Unten</option>
<option value="1.5">Links</option>
</select>
</div>
<div class="form-group">
<label class="form-control-label">
Endvektor
</label>
<select class="form-control" formControlName="end">
<option value="1">Oben</option>
<option value="0.5">Rechts</option>
<option value="0">Unten</option>
<option value="1.5">Links</option>
</select>
</div>
<div class="form-group">
<label class="form-control-label">
Vektordehnung
</label>
<input type="number" class="form-control" formControlName="range" min="0" max="1" step="0.1">
</div>
</ng-container>
</div>
<h5 class="mt-2">Ausdehnung</h5>
<!-- <hr>
<small>Anzahl der Schwingungen mittels Knotenpunkten bestimmen und die Skalierung auf der Leinwand einstellen.</small> -->
<hr>
<div class="form-group">
<label class="form-control-label">
Skalierung

3
src/app/app.component.scss
View File

@@ -5,6 +5,7 @@
top: 0;
left: 0;
overflow: hidden;
opacity: 0.2;
}
ul {
@@ -44,5 +45,5 @@ aside {
justify-content: center;
margin: 0;
padding: 3rem;
background: rgba(251, 252, 253, 0.8);
background: rgba(251, 252, 253, 0.9);
}

12
src/app/app.component.ts
View File

@@ -18,9 +18,9 @@ export class AppComponent implements OnInit {
public configForm: FormGroup;
@HostListener('mousewheel', ['$event'])
private onWheelUp(event) {
private onMousewheel(event) {
const delta = Math.sign(event.deltaY);
const step = 0.01;
const step = env.controls.wheelStep;
this.config = {...this.configForm.value};
@@ -36,13 +36,11 @@ export class AppComponent implements OnInit {
this.config.scale -= step;
}
this.config.scale = Math.round(this.config.scale * 100) / 100;
this.config.scale = Math.round(this.config.scale / step) * step;
this.configForm.reset({...this.config});
this.updateGraphs();
}
constructor() {
this.canvasParam = {
colors: {
@@ -67,6 +65,10 @@ export class AppComponent implements OnInit {
ngOnInit() {
this.configForm.reset({...this.config});
// this.configForm.valueChanges.subscribe(val => {
// console.log('form changes(appComponent)', this.config);
// });
}
public updateGraphs() {

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

@@ -20,6 +20,7 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
public graphs: Graph[];
public canvas: any | null;
public matrix: any | null;
@Input() config: any;
@@ -51,50 +52,43 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
private init() {
this.updateCanvas();
this.updateMatrix();
this.updateGraphs();
}
private updateGraphs(): void {
const matrix = this.matrix;
this.graphs = [...[this.adjustGraph('start'), this.adjustGraph('end')]];
this.graphs = [this.adjustGraph('start'), this.adjustGraph('end')];
console.log('graphs component (updateGraphs):', this.graphs);
}
private adjustGraph(from: string) {
const matrix = this.matrix;
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 };
console.error(from, '->', to);
return {
id: `${from}-to-${to}`,
start: {
coords: { x: matrix[from].x, y: matrix[from].y },
direction: this.config.directionStart,
color: env.guilloche.colors[from]
coords: startPoint,
direction: this.config.vectors[from],
color: env.guilloche.colors.start
}, end: {
coords: { x: matrix[to].x, y: matrix[to].y },
direction: this.config.directionEnd,
color: env.guilloche.colors[to]
coords: endPoint,
direction: this.config.vectors[to],
color: env.guilloche.colors.end
},
stroke: this.config.stroke,
nodes: []
nodes: [
this.vectorPoint(startPoint, this.config.vectors[from]),
this.vectorPoint(endPoint, this.config.vectors[to])
]
};
// {
// start: {
// coords: { x: matrix.end.x, y: matrix.end.y },
// direction: this.config.directionEnd,
// color: env.guilloche.colors.start
// }, end: {
// coords: { x: matrix.start.x, y: matrix.start.y },
// direction: this.config.directionStart,
// color: env.guilloche.colors.end
// },
// stroke: this.config.stroke,
// nodes: []
// }
}
private flipflop(direction: string) {
return (direction === 'start') ? 'end' : 'start';
private flipflop(x: string) {
return (x === 'start') ? 'end' : 'start';
}
private updateCanvas(): void {
@@ -109,15 +103,17 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
};
}
private get matrix() {
private updateMatrix() {
const totalArea = Math.abs(this.canvas.clientWidth * this.canvas.clientHeight);
const totalCenter = this.centerPoint(this.canvas.clientWidth, this.canvas.clientHeight);
const baseArea = Math.abs(this.config.width * this.config.height);
const baseScale = Math.pow(totalArea / baseArea * this.config.scale, 0.5);
const baseCenter = this.centerPoint( baseScale * this.config.width, baseScale * this.config.height);
const baseWidthScaled = baseScale * this.config.width;
const baseHeightScaled = baseScale * this.config.height;
const baseCenter = this.centerPoint(baseWidthScaled, baseHeightScaled);
return {
this.matrix = {
start: {
x: totalCenter.x - baseCenter.x,
y: totalCenter.y + baseCenter.y
@@ -125,7 +121,29 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
end: {
x: totalCenter.x + baseCenter.x,
y: totalCenter.y - baseCenter.y
}
},
width: baseWidthScaled,
height: baseHeightScaled
};
}
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
};
}
/**
* Calculate distance between to points with coordinates.
* @param a
* @param b
*/
private Δ(a: Point, b: Point) {
return Math.pow(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2), 0.5);
}
}

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

@@ -5,6 +5,7 @@ import * as Shape from 'd3-shape';
import * as Random from 'd3-random';
import * as Drag from 'd3-drag';
import { environment as env } from './../../environments/environment';
import { Config } from './../models/config.model';
import { Point } from './../models/point.model';
import { Param } from './../models/param.model';
@@ -27,16 +28,16 @@ export class GuillocheDirective implements OnChanges {
) {
this.group = Selection.select(el.nativeElement);
this.canvas = Selection.select(this.canvasService.get);
this.gradientId = 'linear';
}
ngOnChanges(changes: SimpleChanges) {
console.log('guilloche directive (changes)', changes.graph.currentValue);
this.defineGradient();
this.drawGraph();
}
private drawGraph(): void {
console.log('guilloche directive(drawGraph)', this.graph);
private defineGradient(): void {
this.gradientId = `gradient-${this.graph.id}`;
const defs = this.group.append('defs');
const grad = defs.append('linearGradient')
@@ -47,33 +48,48 @@ export class GuillocheDirective implements OnChanges {
grad.append('stop')
.attr('stop-color', this.graph.end.color)
.attr('offset', '100%');
}
private drawGraph(): void {
const points = [this.graph.start.coords, ...this.graph.nodes, this.graph.end.coords];
this.group.append('path')
.attr('d', Shape.line()
.x(p => p.x)
.y(p => p.y)
.curve(Shape.curveBasis)([
this.graph.start.coords,
this.graph.end.coords
]))
.curve(Shape.curveBasis)(points))
.attr('stroke', `url(#${this.gradientId})`)
.attr('stroke-width', this.graph.stroke)
.attr('fill', 'none');
this.group.append('circle')
.attr('cx', this.graph.start.coords.x)
.attr('cy', this.graph.start.coords.y)
.attr('r', 20)
.attr('stroke-width', 1)
.attr('fill-opacity', 0)
.attr('stroke', this.graph.start.color);
if (!env.production) {
this.group.append('circle')
.attr('cx', this.graph.start.coords.x)
.attr('cy', this.graph.start.coords.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('cy', this.graph.end.coords.y)
.attr('r', 10)
.attr('stroke-width', 1)
.attr('fill-opacity', 0)
.attr('stroke', this.graph.end.color);
this.group.append('circle')
.attr('cx', this.graph.end.coords.x)
.attr('cy', this.graph.end.coords.y)
.attr('r', 10)
.attr('stroke-width', 1)
.attr('fill-opacity', 0)
.attr('stroke', this.graph.end.color);
this.graph.nodes.forEach(point => {
this.group.append('circle')
.attr('cx', point.x)
.attr('cy', point.y)
.attr('r', 5)
.attr('stroke-width', 1)
.attr('fill-opacity', 0)
.attr('stroke', 'darkgray');
});
}
console.log('guilloche directive(drawGraph)', this.graph);
}
}

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

@@ -5,14 +5,20 @@ const fb = new FormBuilder();
export let ConfigForm: FormGroup = fb.group({
width: fb.control('', Validators.required),
height: fb.control('', Validators.required),
directionStart: fb.control('', Validators.compose([
Validators.min(0),
Validators.max(360)
])),
directionEnd: fb.control('', Validators.compose([
Validators.min(0),
Validators.max(360)
])),
vectors: fb.group({
start: fb.control('', Validators.compose([
Validators.min(0),
Validators.max(2)
])),
end: fb.control('', Validators.compose([
Validators.min(0),
Validators.max(2)
])),
range: fb.control('', Validators.compose([
Validators.min(0),
Validators.max(1)
]))
}),
nodes: fb.control('', Validators.compose([
Validators.min(1),
Validators.max(10)

1
src/app/models/graph.model.ts
View File

@@ -1,6 +1,7 @@
import { Point } from './point.model';
export interface Graph {
id: string;
start: {
coords: Point;
direction: number; // degree between 0 and 360

10
src/environments/environment.prod.ts
View File

@@ -6,11 +6,17 @@ export const environment = {
end: '#5eb1bd'
}
},
controls: {
wheelStep: 0.01
},
formDefaults: {
width: 9,
height: 16,
directionStart: 0,
directionEnd: 180,
vectors: {
start: 1,
end: 0,
range: 0.3
},
nodes: 3,
stroke: 1,
scale: 0.3

12
src/environments/environment.ts
View File

@@ -10,14 +10,20 @@ export const environment = {
end: '#0067cc'
}
},
controls: {
wheelStep: 0.01
},
formDefaults: {
width: 9,
height: 16,
directionStart: 0,
directionEnd: 180,
vectors: {
start: 1,
end: 0,
range: 0.3
},
nodes: 3,
stroke: 1,
scale: 0.3
scale: 0.1
}
};