current flow animation

This commit is contained in:
Patrick Haßel 2025-01-31 15:03:30 +01:00
parent a119ebf0d2
commit 8418a3f1c8
2 changed files with 11 additions and 7 deletions

View File

@ -17,7 +17,11 @@
[attr.y1]="wire.start.pixelY + 'px'" [attr.y1]="wire.start.pixelY + 'px'"
[attr.x2]="wire.end.pixelX + 'px'" [attr.x2]="wire.end.pixelX + 'px'"
[attr.y2]="wire.end.pixelY + 'px'" [attr.y2]="wire.end.pixelY + 'px'"
></line> stroke-dasharray="1, 15"
>
<animate *ngIf="wire.current < 0" attributeName="stroke-dashoffset" from="0" to="16" [attr.dur]="(1 / wire.absCurrent) / 200" repeatCount="indefinite"/>
<animate *ngIf="wire.current > 0" attributeName="stroke-dashoffset" from="16" to="0" [attr.dur]="(1 / wire.absCurrent) / 200" repeatCount="indefinite"/>
</line>
</ng-container> </ng-container>
<ng-container *ngIf="wires.dragStart && wires.dragCursor && wires.dragStartJunction"> <ng-container *ngIf="wires.dragStart && wires.dragCursor && wires.dragStartJunction">

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -30,11 +30,11 @@ export class CircuitComponent {
this.parts = new Parts(); this.parts = new Parts();
this.wires = new Wires(messageService, () => this.recalculate()); this.wires = new Wires(messageService, () => this.recalculate());
const battery0 = this.parts.newBattery(1, 6, 1.5); const battery0 = this.parts.newBattery(2, 7, 1.5);
const battery1 = this.parts.newBattery(5, 6, 1.5); const battery1 = this.parts.newBattery(6, 7, 1.5);
const light0 = this.parts.newLight(1, 1); const light0 = this.parts.newLight(2, 2);
const light1 = this.parts.newLight(5, 1); const light1 = this.parts.newLight(6, 2);
const light2 = this.parts.newLight(3, 11); const light2 = this.parts.newLight(4, 14);
this.wires.connect(light0.a, battery0.minus); this.wires.connect(light0.a, battery0.minus);
this.wires.connect(light0.b, light1.a); this.wires.connect(light0.b, light1.a);
@ -66,7 +66,7 @@ export class CircuitComponent {
} }
const ratio = (wire.start.voltage - wire.start.minCircuitVoltage) / (wire.start.maxCircuitVoltage - wire.start.minCircuitVoltage); const ratio = (wire.start.voltage - wire.start.minCircuitVoltage) / (wire.start.maxCircuitVoltage - wire.start.minCircuitVoltage);
if (ratio < 0.5) { if (ratio < 0.5) {
return fadeColor(ratio * 2, 'blue', 'magenta'); return fadeColor(ratio * 2, '#008cff', 'magenta');
} }
return fadeColor((ratio - 0.5) * 2, 'magenta', 'red'); return fadeColor((ratio - 0.5) * 2, 'magenta', 'red');
} }