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

all nodes animated

Browse Source
This commit is contained in:
Michael Czechowski
2018-08-14 13:56:32 +02:00
parent 6f21849c85
commit 2e15897b8b
6 changed files with 70 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
<svg #svg width="100%" height="100%"> <svg #svg width="100%" height="100%">
<g guilloche [graph]="graphs[0]" [matrix]="matrix" [config]="config" [animate]="true" (guillocheChange)="prepareGuillocheExport($event)"></g> <g guilloche [graph]="graphs[0]" [matrix]="matrix" [config]="config" [animate]="true" (guillocheChange)="prepareGuillocheExport($event)"></g>
<g guilloche [graph]="graphs[1]" [matrix]="matrix" [config]="config" [animate]="true" (guillocheChange)="prepareGuillocheExport($event)"></g> <!-- <g guilloche [graph]="graphs[1]" [matrix]="matrix" [config]="config" [animate]="true" (guillocheChange)="prepareGuillocheExport($event)"></g> -->
<!-- <g guilloche *ngFor="let graph of graphs" [graph]="graph" [matrix]="matrix" [config]="config" [animate]="true" (guillocheChange)="prepareGuillocheExport($event)"></g> --> <!-- <g guilloche *ngFor="let graph of graphs" [graph]="graph" [matrix]="matrix" [config]="config" [animate]="true" (guillocheChange)="prepareGuillocheExport($event)"></g> -->
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 511 B

After

Width:  |  Height:  |  Size: 520 B

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

@@ -128,11 +128,13 @@ export class GraphsComponent implements OnChanges, OnInit {
private adjustGraph(curve) { private adjustGraph(curve) {
return Object.assign(curve, { return Object.assign(curve, {
stroke: this.config.stroke, stroke: this.config.stroke,
nodes: [ start: Object.assign(curve.start, {
this.genVectorPoint(curve.start.point, curve.start.vector), direction: this.genVectorPoint(curve.start.point, curve.start.vector)
...this.genRandomPoints(this.config.nodes), }),
this.genVectorPoint(curve.end.point, curve.end.vector) end: Object.assign(curve.end, {
] direction: this.genVectorPoint(curve.end.point, curve.end.vector)
}),
nodes: this.genRandomPoints(this.config.nodes)
}); });
} }

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

@@ -41,8 +41,11 @@ export class GuillocheDirective implements OnChanges {
private canvas: any; private canvas: any;
private group: any; private group: any;
private bounce: any | null; private bounce: any | null;
private bounces: any | null;
private initialNodes: any; private initialNodes: any;
private animationInterval: any; private animationInterval: any;
private medianPoint: Point;
private medianIndex: number;
@Input() graph: Graph; @Input() graph: Graph;
@Input() matrix: any; @Input() matrix: any;
@@ -66,12 +69,26 @@ export class GuillocheDirective implements OnChanges {
// @todo modify graph here instead of in graphs.component.ts // @todo modify graph here instead of in graphs.component.ts
this.group.selectAll('*').remove(); this.group.selectAll('*').remove();
if (this.graphService.isAnimated) {
const bounceStart = Math.round(Math.random() * 10) / 10;
const bounceAmplitude = Math.round(Math.random() * 500);
this.bounce = this.math.bounce(bounceStart, bounceAmplitude, 2);
this.initialNodes = this.graph.nodes.slice(); this.initialNodes = this.graph.nodes.slice();
this.animationInterval = setInterval(() => this.animateGraph(), 80); this.medianPoint = this.math.medianOfCurve(this.initialNodes);
this.medianIndex = this.math.medianIndex(this.initialNodes);
if (this.graphService.isAnimated) {
this.graph.nodes = this.graph.nodes.slice().map((node, i) => {
return {
x: node.x,
y: node.y,
// ascent: Math.round(Math.random() * 100) / 100
ascent: this.medianPoint.ascent + i * 0.5
};
});
this.bounces = this.initialNodes.map(node => {
const bounceStart = Math.round(Math.random() * 10) / 10;
const bounceAmplitude = Math.round(Math.random() * 100);
return this.math.bounce(bounceStart, bounceAmplitude, 2);
});
this.animationInterval = setInterval(() => this.animateGraph(), 120);
} else { } else {
if (this.animationInterval) { if (this.animationInterval) {
this.bounce = null; this.bounce = null;
@@ -82,52 +99,59 @@ export class GuillocheDirective implements OnChanges {
this.guillocheChanged(); this.guillocheChanged();
this.spreadLines([ this.spreadLines([
this.graph.start.point, this.graph.start.point,
this.graph.start.direction,
...this.graph.nodes, ...this.graph.nodes,
this.graph.end.point this.graph.end.point,
this.graph.end.direction,
]); ]);
} }
private animateGraph() { private animateGraph() {
const medianIndex = this.math.medianIndex(this.initialNodes); // const medianIndex = this.math.medianIndex(this.initialNodes);
const medianPoint = this.math.medianOfCurve(this.initialNodes); // const bouncedMedian = this.graphService.shiftPoint(medianPoint, medianPoint.ascent, this.bounce.next().value);
const bouncedMedian = this.graphService.shiftPoint(medianPoint, medianPoint.ascent, this.bounce.next().value);
// this.graph.nodes.splice(medianIndex, 1, bouncedMedian);
this.graph.nodes.splice(medianIndex, 1, bouncedMedian);
this.group.selectAll('*').remove(); this.group.selectAll('*').remove();
this.spreadLines([ this.spreadLines([
this.graph.start.point, this.graph.start.point,
...this.graph.nodes, this.graph.start.direction,
...this.graph.nodes.map((point, i) => {
return this.graphService.shiftPoint(point, point.ascent, this.bounces[i].next().value);
}),
this.graph.end.direction,
this.graph.end.point, this.graph.end.point,
]); ]);
this.debugBounce(bouncedMedian); // this.debugBounce(bouncedMedian);
} }
private spreadLines(points: Point[]) { private spreadLines(points: Point[]) {
const shiftedMedians = []; const shiftedMedians = [];
// Alternatively use median of curve instead of center // Alternatively use median of curve instead of center
// const medianPoint = this.math.medianOfCurve(points); // const medianPoint = this.math.medianOfCurve(points);
const medianPoint = this.math.centerOfCurve(points); // const medianPoint = this.math.centerOfCurve(points);
const medianIndex = this.math.medianIndex(points); // const medianIndex = this.math.medianIndex(points);
const genshiftedMedians = this.graphService.spreadOrthogonal(medianPoint, this.config.spread.spacing); const genshiftedMedians = this.graphService.spreadOrthogonal(this.medianPoint, this.config.spread.spacing);
for (let i = 0; i < this.config.spread.amount; i++) { for (let i = 0; i < this.config.spread.amount; i++) {
shiftedMedians.push(genshiftedMedians.next().value); shiftedMedians.push(genshiftedMedians.next().value);
} }
if (env.debug) { // if (env.debug) {
[medianPoint, ...shiftedMedians].forEach((point, index) => { // [medianPoint, ...shiftedMedians].forEach((point, index) => {
this.group.append('circle') // this.group.append('circle')
.attr('cx', point.x) // .attr('cx', point.x)
.attr('cy', point.y) // .attr('cy', point.y)
.attr('r', 10 / index) // .attr('r', 10 / index)
.attr('fill-opacity', 0.6) // .attr('fill-opacity', 0.6)
.attr('fill', 'darkgray'); // .attr('fill', 'darkgray');
}); // });
} // }
shiftedMedians.forEach(median => { shiftedMedians.forEach(median => {
const shiftedGraph = points.slice(); const shiftedGraph = points.slice();
shiftedGraph.splice(medianIndex, 1, median); shiftedGraph.splice(this.medianIndex, 1, median);
this.drawGraph(shiftedGraph); this.drawGraph(shiftedGraph);
}); });
} }
@@ -143,7 +167,7 @@ export class GuillocheDirective implements OnChanges {
.attr('fill', 'none'); .attr('fill', 'none');
if (env.debug) { if (env.debug) {
this.debugGraph(); this.debugGraph(points);
} }
} }
@@ -151,8 +175,8 @@ export class GuillocheDirective implements OnChanges {
this.guillocheChange.emit(this.el.nativeElement); this.guillocheChange.emit(this.el.nativeElement);
} }
private debugGraph() { private debugGraph(points: Point[]) {
this.graph.nodes.forEach((point, index) => { points.forEach((point, index) => {
const circle = this.group.append('g'); const circle = this.group.append('g');
circle.append('circle') circle.append('circle')

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

@@ -21,10 +21,12 @@ export interface Graph {
color: string; // can be set in enviroment color: string; // can be set in enviroment
start: { start: {
point: Point; point: Point;
direction?: Point;
vector: number; // degree between 0 and 360 vector: number; // degree between 0 and 360
}; };
end: { end: {
point: Point; point: Point;
direction?: Point;
vector: number; // degree between 0 and 360 vector: number; // degree between 0 and 360
}; };
stroke: number; // stroke width stroke: number; // stroke width

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

@@ -66,7 +66,7 @@ export class GraphService {
} }
} }
public shiftPoint(point: Point, radians: number, spacing: number) { public shiftPoint(point: Point, radians: number, spacing: number): Point {
return { return {
x: Math.sin(radians * Math.PI) * spacing + point.x, x: Math.sin(radians * Math.PI) * spacing + point.x,
y: Math.cos(radians * Math.PI) * spacing + point.y y: Math.cos(radians * Math.PI) * spacing + point.y

12
src/environments/environment.ts
View File

@@ -16,11 +16,11 @@
export const environment = { export const environment = {
production: false, production: false,
debug: false, debug: true,
guilloche: { guilloche: {
colors: { colors: {
primary: '#950952', primary: '#129490',
secondary: '#189B8E' secondary: '#004FFF'
} }
}, },
formDefaults: { formDefaults: {
@@ -31,14 +31,14 @@ export const environment = {
vectors: { vectors: {
start: 1, start: 1,
end: 0, end: 0,
range: 0.4, range: 0.6,
spacing: 7 spacing: 7
}, },
nodes: 5, nodes: 5,
stroke: 0.7, stroke: 0.7,
spread: { spread: {
amount: 10, amount: 8,
spacing: 32 spacing: 10
} }
} }
}; };