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

muliple adjustments

Browse Source
This commit is contained in:
Michael Czechowski
2018-08-13 15:20:24 +02:00
parent 09786be1d7
commit 64b4d47daf
8 changed files with 62 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -76,24 +76,36 @@
</label>
<input type="number" class="form-control" formControlName="nodes" min="1" max="10">
</div>
<ng-container formGroupName="vectors">
<div class="form-group mb-4">
<label class="form-control-label">
Anfangsabstand
</label>
<input type="number" class="form-control" formControlName="spacing" min="0" max="10" step="0.1">
</div>
</ng-container>
<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 class="form-group mb-4">
<label class="form-control-label">
Linienabstand
</label>
<input type="number" class="form-control" formControlName="space" min="0" max="10" step="0.1">
</div>
<div class="form-group mb-4">
<label class="form-control-label">
Lienienanzahl
</label>
<input type="number" class="form-control" formControlName="spread" min="0" max="40">
</div>
<ng-container formGroupName="spread">
<div class="form-group mb-4">
<label class="form-control-label">
Linienanzahl
</label>
<input type="number" class="form-control" formControlName="amount">
</div>
<div class="form-group mb-4">
<label class="form-control-label">
Lienienabstand
</label>
<input type="number" class="form-control" formControlName="spacing">
</div>
</ng-container>
<div class="form-group d-flex flex-colmn justify-content-between align-items-center mb-4">
<label class="form-control-label">
Animation

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

@@ -64,7 +64,6 @@ export class AppComponent implements OnInit {
ngOnInit() {
this.configForm.reset({...this.config});
this.list = this.historyService.list();
// console.log(this.graphs);
}
public updateGraphs() {
@@ -82,11 +81,6 @@ export class AppComponent implements OnInit {
public exportSvg() {
const link = document.createElement('a');
// const blob = new Blob(
// [this.canvasService.get],
// {type: 'image/svg+xml;charset=utf-8'}
// );
// link.href = URL.createObjectURL(blob);
link.href = this.url;
link.download = 'guilloche.svg';
document.body.appendChild(link);

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

@@ -191,8 +191,8 @@ export class GraphsComponent implements OnChanges, OnInit {
}
private *shiftPoint(point: Point, vector) {
const genShiftX = this.shiftNumber(this.config.space, vector);
const genShiftY = this.shiftNumber(this.config.space, vector);
const genShiftX = this.shiftNumber(this.config.vectors.spacing, vector);
const genShiftY = this.shiftNumber(this.config.vectors.spacing, vector);
while (true) {
yield {

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

@@ -31,7 +31,7 @@ import { CanvasService } from './../services/canvas.service';
import { MathService } from './../services/math.service';
import { GraphService } from '../services/graph.service';
import { AnimationService } from './../services/animation.service';
import { spread } from 'q';
// import { spread } from 'q';
@Directive({
selector: '[guilloche]'
@@ -88,7 +88,7 @@ export class GuillocheDirective implements OnChanges, OnInit {
if (this.graphService.isAnimated) {
console.log('is animated');
// this.graphService.startAnimation();
this.animationInterval = setInterval(() => this.animateGraph(), 60);
this.animationInterval = setInterval(() => this.animateGraph(), this.config.spread.spacing);
} else {
if (this.animationInterval) {
console.log('not animated');
@@ -109,7 +109,6 @@ export class GuillocheDirective implements OnChanges, OnInit {
private animateGraph() {
this.group.selectAll('*').remove();
this.graph = this.animationService.animate(this.graph);
// this.saveGraph();
const points = [
this.graph.start.point,
...this.graph.nodes,
@@ -141,40 +140,12 @@ export class GuillocheDirective implements OnChanges, OnInit {
const shiftedMedians = [];
const medianPoint = this.math.centerOfCurve(points);
const medianIndex = this.math.medianIndex(points);
const genshiftedMedians = this.graphService.spreadOrthogonal(medianPoint, 20);
const genshiftedMedians = this.graphService.spreadOrthogonal(medianPoint, this.config.spread.spacing);
for (let i = 0; i < this.config.spread; i++) {
for (let i = 0; i < this.config.spread.amount; i++) {
shiftedMedians.push(genshiftedMedians.next().value);
}
// const indexMiddle = Math.floor(points.length * 0.5);
// const pointMiddle = points[indexMiddle];
// const closestCenter = this.math.getClosestCenter(pointMiddle, this.matrix);
// const radius = this.math.Δ(pointMiddle, closestCenter);
// const shiftedMedians = [];
// const pies = 200;
// for (let i = 0; i < pies; i++) {
// shiftedMedians.push({
// x: radius * Math.cos(2 * i * Math.PI / pies) + closestCenter.x,
// y: radius * Math.sin(2 * i * Math.PI / pies) + closestCenter.y,
// });
// }
// shiftedMedians.sort((a, b) => {
// // Good possibility to align orientation points outsite
// return this.math.Δ(b, pointMiddle) - this.math.Δ(a, pointMiddle);
// });
// console.log(shiftedMedians);
// shiftedMedians.some((point, index) => {
// points[indexMiddle] = point;
// this.drawGraph(points);
// return index === this.config.spread - 1;
// });
if (env.grid) {
[medianPoint, ...shiftedMedians].forEach((point, index) => {
this.group.append('circle')
@@ -191,19 +162,11 @@ export class GuillocheDirective implements OnChanges, OnInit {
shiftedGraph.splice(medianIndex, 1, median);
this.drawGraph(shiftedGraph);
});
// this.drawGraph(points);
}
// private animateRange(n: number) {
// return Ease.scaleLinear().range([n, n + 100]);
// }
private showGrid() {
this.graph.nodes.forEach((point, index) => {
const circle = this.group.append('g');
// const xRange = this.animateRange(point.x);
// const yRange = this.animateRange(point.y);
circle.append('circle')
.attr('cx', point.x)

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

@@ -33,7 +33,11 @@ export let ConfigForm: FormGroup = fb.group({
range: fb.control('', Validators.compose([
Validators.min(0),
Validators.max(1)
]))
])),
spacing: fb.control('', Validators.compose([
Validators.min(0),
Validators.max(20)
])),
}),
nodes: fb.control('', Validators.compose([
Validators.min(1),
@@ -47,10 +51,12 @@ export let ConfigForm: FormGroup = fb.group({
Validators.min(0.1),
Validators.max(10)
])),
space: fb.control('', Validators.compose([
Validators.min(0),
Validators.max(10)
])),
overlap: fb.control('', Validators.min(0.1)),
spread: fb.control('', Validators.min(0)),
spread: fb.group({
amount: fb.control('', Validators.min(0)),
spacing: fb.control('', Validators.compose([
Validators.min(0),
Validators.max(50)
])),
})
});

8
src/app/models/config.model.ts
View File

@@ -27,5 +27,11 @@ export interface Config {
y: number;
color: string;
};
space: number;
vectors: {
spacing: number
};
spread: {
amount: number;
spacing: number
};
}

1
src/app/services/graph.service.ts
View File

@@ -36,7 +36,6 @@ export class GraphService {
}
public set(newGraphs: Graph[]) {
// console.log('GraphService:set', newGraphs);
this.graphs = newGraphs;
}

23
src/environments/environment.ts
View File

@@ -16,26 +16,29 @@
export const environment = {
production: false,
grid: false,
grid: true,
guilloche: {
colors: {
primary: '#cb0c4d',
secondary: '#10c1e8'
primary: '#950952',
secondary: '#189B8E'
}
},
formDefaults: {
width: 10,
height: 16,
scale: 0.1,
overlap: 1.2,
scale: 0.4,
overlap: 0.6,
vectors: {
start: 1,
end: 0,
range: 0.4
range: 0.4,
spacing: 7
},
nodes: 4,
stroke: 1,
spread: 12,
space: 10
nodes: 5,
stroke: 0.7,
spread: {
amount: 36,
spacing: 32
}
}
};