diff --git a/src/App.vue b/src/App.vue index 8d4ec03..88b4519 100644 --- a/src/App.vue +++ b/src/App.vue @@ -53,13 +53,6 @@ {{ animation_speed }} ms -
-
- -
-
@@ -70,15 +63,15 @@
{{ this.bezeichnung_aktueller_datenpunkt }}: - +  {{ aktueller_datenpunkt }}  -
- {{ this.bezeichnung_aktueller_prototyp }}: + {{ this.r }}: {{ aktueller_prototyp }} @@ -175,7 +168,7 @@ -
+
>
@@ -244,12 +237,6 @@ export default { { x: 120, y: 150, color: "blue" }, ], - prototypen_original: [ - { x: 540, y: 50, color: "blue" }, - { x: 380, y: 370, color: "blue" }, - { x: 120, y: 150, color: "blue" }, - ], - canvas: null, vueCanvas: null, aktueller_datenpunkt: 0, @@ -422,8 +409,6 @@ export default { } }, update_anzahl_prototypen(new_value) { - // Original Prototypen laden - this.prototypen = JSON.parse(JSON.stringify(this.prototypen_original)) if (new_value >= 0) { console.log("angekommen." + new_value); this.anzahl_prototypen = new_value; @@ -433,20 +418,15 @@ export default { } while (this.prototypen.length < this.anzahl_prototypen) { - let neuer_prototyp = this.generiere_prototyp_zufaellig(); - this.prototypen.push(neuer_prototyp); + let neue_prototyp = this.generiere_prototyp_zufaellig(); + this.prototypen.push(neue_prototyp); } //this.update_zeichnung_child_component(); // this.datensatz_2_textarea(); this.refresh(); } else { this.anzahl_prototypen = 0; - while (this.prototypen.length > this.anzahl_prototypen) { - this.prototypen.pop(); - } } - // Original Prototypen merken - this.prototypen_original = JSON.parse(JSON.stringify(this.prototypen)) }, /* update_zeichnung_child_component() { @@ -503,7 +483,7 @@ export default { } }, - faerbe_datenpunkte(alle) { + farben_anpassen(alle) { for (let i = 0; i < this.datenpunkte.length; i++) { if (alle || i < this.aktueller_datenpunkt) { let next_prototyp = this.gib_naechstgelegener_prototyp(this.datenpunkte[i]); @@ -580,7 +560,7 @@ export default { this.vueCanvas.stroke(); }, - zeichne_linie_datenpunkt_naechstgelegener_prototyp(datenpunkt) { + zeichne_linie_datenpunkt_naechstgelegene_prototyp(datenpunkt) { let farbe = "red"; let staerke = 2; let prototyp = this.gib_naechstgelegener_prototyp(datenpunkt); @@ -683,14 +663,14 @@ export default { i++; }); }, - naechster_datenpunkt() { + naechstes_datenpunkt() { if (this.aktueller_datenpunkt < this.datenpunkte.length - 1) { this.aktueller_datenpunkt++; this.refresh(); this.zeichne_datenpunkte(true, true); } }, - voriger_datenpunkt() { + voriges_datenpunkt() { if (this.aktueller_datenpunkt > 0) { this.aktueller_datenpunkt--; this.refresh(); @@ -781,7 +761,7 @@ export default { } }, - kurz_zeichne_linie_datenpunkt_naechstgelegener_prototyp() { + kurz_zeichne_linie_datenpunkt_naechstgelegene_prototyp() { this.zeichne_linie_datenpunkt_prototyp( this.akt_datenpunkt, this.naechstgelegener_prototyp, @@ -798,7 +778,7 @@ export default { await this.starte_animation(); } - this.faerbe_datenpunkte(true); + this.farben_anpassen(true); this.loesche_zeichenflaeche(); this.zeichne_hintergrund(); @@ -823,7 +803,7 @@ export default { let alle_prototypen_verarbeitet = false; while (!alle_prototypen_verarbeitet) { this.zeichne_hintergrund(); - this.faerbe_datenpunkte(false); + this.farben_anpassen(false); if (this.aktueller_prototyp == 0) { this.zeichne_datenpunkte(false, true); @@ -852,7 +832,7 @@ export default { // Schlussbild this.loesche_zeichenflaeche(); - this.faerbe_datenpunkte(false); + this.farben_anpassen(false); this.zeichne_datenpunkte(false, true); this.zeichne_prototypen(false); @@ -869,7 +849,7 @@ export default { // Simulate some delay (you can replace this with actual animation code) setTimeout(() => { resolve(); // Resolve the promise when the animation is done - }, zeitspanne); // delay for zeitspanne + }, zeitspanne); // 1-second delay }); }, @@ -894,7 +874,7 @@ export default { return new Promise((resolve) => { // Your animation code here if (this.naechstgelegener_prototyp != null && this.akt_datenpunkt != null) { - this.kurz_zeichne_linie_datenpunkt_naechstgelegener_prototyp(); + this.kurz_zeichne_linie_datenpunkt_naechstgelegene_prototyp(); this.zeichne_datenpunkte(true, true); this.zeichne_prototypen(true); } @@ -908,7 +888,7 @@ export default { aktualisiere_pos_prototyp() { return new Promise((resolve) => { - this.faerbe_datenpunkte(false); + this.farben_anpassen(false); this.animieren(); setTimeout(() => { @@ -941,7 +921,7 @@ export default { this.loesche_zeichenflaeche(); this.zeichne_hintergrund(); - this.kurz_zeichne_linie_datenpunkt_naechstgelegener_prototyp(); + this.kurz_zeichne_linie_datenpunkt_naechstgelegene_prototyp(); this.zeichne_datenpunkte(true, true); this.zeichne_prototypen(true); @@ -966,25 +946,6 @@ export default { // Zeichnen aufrufen draw(); }, - - szenario_zuruecksetzen() { - this.update_anzahl_datenpunkte(this.anzahl_datenpunkte); - this.update_anzahl_prototypen(this.anzahl_prototypen); - - this.aktueller_datenpunkt = 0; - - for (let i = 0; i < this.datenpunkte.length; i++) { - let next_prototyp = this.gib_naechstgelegener_prototyp(this.datenpunkte[i]); - this.datenpunkte[i].color = "#000000"; - } - - this.loesche_zeichenflaeche(); - this.refresh(); - this.zeichne_hintergrund(); - this.zeichne_prototypen(false); - this.zeichne_datenpunkte(false, true); - console.log("Page completed with image and files!"); - }, }, mounted() {