1095 lines
29 KiB
Vue
1095 lines
29 KiB
Vue
<template>
|
|
<div>
|
|
<img
|
|
id="kein_bild"
|
|
src="./assets/img/weiss_pixel.png"
|
|
style="width: 0px; height: 0px"
|
|
/>
|
|
<img
|
|
id="stadtplan"
|
|
src="./assets/img/stadtplan.png"
|
|
style="width: 0px; height: 0px"
|
|
/>
|
|
<img
|
|
id="gold_rush"
|
|
src="./assets/img/desert_landscape.png"
|
|
style="width: 0px; height: 0px"
|
|
/>
|
|
|
|
<h2>
|
|
Finde heraus, wie die Positionen der {{ this.bezeichnung_prototypen }} an
|
|
die {{ this.bezeichnung_datenpunkte }} angepasst werden.
|
|
</h2>
|
|
<br />
|
|
|
|
<canvas
|
|
id="c"
|
|
STYLE="border: 1px black solid;"
|
|
height="450"
|
|
width="800"
|
|
></canvas>
|
|
<br />
|
|
Die <b>Punkte</b> auf der Karte sind die
|
|
<b>{{ this.bezeichnung_datenpunkte }}</b
|
|
>.<br />
|
|
Die <b>x-Markierungen</b> auf der Karte entsprechen den
|
|
<b>{{ this.bezeichnung_prototypen }}</b
|
|
>
|
|
<br />
|
|
<br />
|
|
<div>
|
|
<button class="btn btn-primary" @click="starte_animation_alle">
|
|
starte Animation für alles
|
|
</button>
|
|
|
|
<input
|
|
type="range"
|
|
v-model="animation_speed_range"
|
|
min="0"
|
|
max="2000"
|
|
step="1"
|
|
/>
|
|
|
|
{{ animation_speed }} ms
|
|
</div>
|
|
|
|
<br />
|
|
|
|
<div style="width: 800px; margin: auto">
|
|
<button class="btn btn-primary collapsible" style="background: grey">
|
|
Hilfekarte: Animation im Einzelschritt
|
|
</button>
|
|
<div class="content" id="content2">
|
|
<div class="row">
|
|
<div class="column">
|
|
{{ this.bezeichnung_aktueller_datenpunkt }}:
|
|
<button class="btn btn-primary" @click="voriges_datenpunkt">-</button>
|
|
<b style="font-size: x-large">{{ aktueller_datenpunkt }}</b
|
|
>
|
|
<button class="btn btn-primary" @click="naechstes_datenpunkt">
|
|
+
|
|
</button>
|
|
</div>
|
|
<div class="column">
|
|
{{ this.r }}:
|
|
<!-- <button @click="voriger_prototyp">-</button> -->
|
|
<b style="font-size: x-large">{{ aktueller_prototyp }}</b>
|
|
<!-- <button @click="naechster_prototyp">+</button> -->
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn btn-primary" @click="starte_animation">
|
|
starte Animation nur für {{ this.bezeichnung_aktueller_datenpunkt }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
<div style="width: 800px; margin: auto">
|
|
<button class="btn btn-primary collapsible" style="background: grey">
|
|
Vertiefung: weitere Einstellungsmöglichkeiten
|
|
</button>
|
|
<div class="content" id="content0" style="text-align: center">
|
|
<br>
|
|
Verändere die Zahl der {{ this.bezeichnung_datenpunkte }} und {{ this.bezeichnung_prototypen }}.
|
|
<div class="row">
|
|
<div class="column" style="text-align: center">
|
|
<h3>{{ this.bezeichnung_datenpunkte }}</h3>
|
|
|
|
<button
|
|
class="btn btn-primary"
|
|
@click="update_anzahl_datenpunkte(--this.anzahl_datenpunkte)"
|
|
>
|
|
-
|
|
</button>
|
|
|
|
<b style="font-size: xx-large">{{ this.anzahl_datenpunkte }}</b
|
|
>
|
|
<button
|
|
class="btn btn-primary"
|
|
@click="update_anzahl_datenpunkte(++this.anzahl_datenpunkte)"
|
|
>
|
|
+
|
|
</button>
|
|
|
|
<br />
|
|
<br />
|
|
|
|
<button class="btn btn-primary collapsible" style="background: grey">
|
|
manuell verändern
|
|
</button>
|
|
<div class="content" id="content1" style="text-align: left">
|
|
In jeder Zeile wird ein Datenpunkt mit den zugehörigen Werten
|
|
dargestellt:<br /><br />
|
|
<b> x; y</b><br />
|
|
<textarea
|
|
v-model="txt_datensatz"
|
|
placeholder="add multiple lines"
|
|
rows="10"
|
|
></textarea>
|
|
<br />
|
|
<button class="btn btn-primary" @click="textarea_2_datensatz">
|
|
Datenpunkte verändern
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column" style="text-align: center">
|
|
<h3>{{ this.bezeichnung_prototypen }}</h3>
|
|
|
|
<button
|
|
class="btn btn-primary"
|
|
@click="update_anzahl_prototypen(--this.anzahl_prototypen)"
|
|
>
|
|
-
|
|
</button>
|
|
|
|
<b style="font-size: xx-large">{{ this.anzahl_prototypen }}</b>
|
|
|
|
<button
|
|
class="btn btn-primary"
|
|
@click="update_anzahl_prototypen(++this.anzahl_prototypen)"
|
|
>
|
|
+</button
|
|
><br />
|
|
<br />
|
|
</div>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<div style="text-align: center">
|
|
<h3>Szenario auswählen</h3>
|
|
<select v-model="szenario" @change="szenario_aendern">
|
|
<option value="gold_rush">
|
|
Karte Gold Rush (Goldstücke und Ausgrabungsteams)
|
|
</option>
|
|
<option value="stadtplan">
|
|
Stadtplan (Haushalte und U-Bahn-Stationen)
|
|
</option>
|
|
<option value="kein_bild">reine Datenansicht</option>
|
|
</select>
|
|
</div>>
|
|
<br />
|
|
</div>
|
|
</div>
|
|
<br />
|
|
<br />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
// Import the generateDifferentColors function from generateColors.js
|
|
import { generateDifferentColors } from './generateColors.js'
|
|
|
|
export default {
|
|
name: "App",
|
|
components: {
|
|
// Zeichnung,
|
|
//HelloWorld
|
|
},
|
|
data() {
|
|
return {
|
|
datenpunkte_zufall: false,
|
|
txt_datensatz: null,
|
|
|
|
anzahl_datenpunkte: 8,
|
|
anzahl_prototypen: 3,
|
|
szenario: "gold_rush",
|
|
|
|
gold_rush_datenpunkte: [
|
|
{ x: 2, y: 3, color: "black" },
|
|
{ x: 3, y: 6, color: "black" },
|
|
{ x: 4, y: 7, color: "black" },
|
|
{ x: 300, y: 300, color: "black" },
|
|
{ x: 300, y: 300, color: "black" },
|
|
{ x: 300, y: 300, color: "black" },
|
|
{ x: 300, y: 300, color: "black" },
|
|
{ x: 300, y: 300, color: "black" },
|
|
{ x: 300, y: 300, color: "black" },
|
|
{ x: 300, y: 300, color: "black" },
|
|
{ x: 300, y: 300, color: "black" },
|
|
{ x: 300, y: 300, color: "black" },
|
|
{ x: 300, y: 300, color: "black" },
|
|
{ x: 300, y: 300, color: "black" },
|
|
{ x: 300, y: 300, color: "black" },
|
|
{ x: 300, y: 300, color: "black" },
|
|
{ x: 300, y: 300, color: "black" },
|
|
{ x: 300, y: 300, color: "black" },
|
|
{ x: 300, y: 300, color: "black" },
|
|
{ x: 300, y: 300, color: "black" },
|
|
],
|
|
|
|
datenpunkte: [
|
|
{ x: 300, y: 300, color: "black" },
|
|
{ x: 202, y: 70, color: "black" },
|
|
{ x: 162, y: 250, color: "black" },
|
|
{ x: 82, y: 20, color: "black" },
|
|
{ x: 500, y: 350, color: "black" },
|
|
{ x: 630, y: 170, color: "black" },
|
|
{ x: 430, y: 270, color: "black" },
|
|
{ x: 570, y: 30, color: "black" },
|
|
],
|
|
|
|
prototypen: [
|
|
{ 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,
|
|
aktueller_prototyp: 0,
|
|
animation_speed_range: 750,
|
|
paused: false,
|
|
animationsphase: null,
|
|
naechstgelegener_prototyp: null,
|
|
letzte_prototyp: null,
|
|
naechstgelegener_prototyp_distanz: null,
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
aktuelles_hintergrundbild: function () {
|
|
return this.szenario;
|
|
},
|
|
bezeichnung_datenpunkte: function () {
|
|
switch (this.szenario) {
|
|
case "gold_rush":
|
|
return "Goldstücke";
|
|
case "stadtplan":
|
|
return "Haushalte";
|
|
}
|
|
return "Datenpunkte";
|
|
},
|
|
bezeichnung_prototypen: function () {
|
|
switch (this.szenario) {
|
|
case "gold_rush":
|
|
return "Grabungsteams";
|
|
case "stadtplan":
|
|
return "U-Bahn-Stationen";
|
|
}
|
|
return "Prototypen";
|
|
},
|
|
|
|
bezeichnung_aktueller_datenpunkt: function () {
|
|
switch (this.szenario) {
|
|
case "gold_rush":
|
|
return "aktuelles Goldstück";
|
|
case "stadtplan":
|
|
return "aktueller Haushalt";
|
|
}
|
|
return "aktueller Datenpunkt";
|
|
},
|
|
bezeichnung_aktueller_prototyp: function () {
|
|
switch (this.szenario) {
|
|
case "gold_rush":
|
|
return "aktuelles Grabungsteam";
|
|
case "stadtplan":
|
|
return "aktuelle U-Bahn-Station";
|
|
}
|
|
return "aktueller Prototyp";
|
|
},
|
|
|
|
animation_speed: function () {
|
|
return this.animation_speed_range * 1;
|
|
},
|
|
akt_datenpunkt: function () {
|
|
if (this.aktueller_datenpunkt < this.datenpunkte.length) {
|
|
return this.datenpunkte[this.aktueller_datenpunkt];
|
|
} else {
|
|
return null;
|
|
}
|
|
},
|
|
|
|
akt_prototyp: function () {
|
|
if (this.aktueller_prototyp < this.prototypen.length) {
|
|
return this.prototypen[this.aktueller_prototyp];
|
|
} else {
|
|
return null;
|
|
}
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
lade() {
|
|
this.datensatz_2_textarea();
|
|
/*
|
|
this.txt_datensatz =
|
|
"x;y\n\
|
|
2;3\n\
|
|
3;6\n\
|
|
4;7\n\
|
|
5;6\n\
|
|
6;5\n\
|
|
9;8\n\
|
|
2;15\n\
|
|
10;17\n\
|
|
11;16\n\
|
|
12;15\n\
|
|
13;18\n\
|
|
16;3\n\
|
|
21;1\n\
|
|
18;15\n\
|
|
19;12\n\
|
|
20;14\n\
|
|
22;13\n\
|
|
22;15\n\
|
|
23;12\n\
|
|
24;14";
|
|
*/
|
|
},
|
|
|
|
datensatz_2_textarea() {
|
|
let text_ausgabe = "";
|
|
|
|
for (let i = 0; i < this.datenpunkte.length; i++) {
|
|
text_ausgabe +=
|
|
this.datenpunkte[i].x + "; " + this.datenpunkte[i].y + "\n";
|
|
}
|
|
|
|
this.txt_datensatz = text_ausgabe;
|
|
},
|
|
|
|
textarea_2_datensatz() {
|
|
let text = this.txt_datensatz.replaceAll(" ", "");
|
|
text = text.replaceAll("\n", "#");
|
|
while (text.includes("##")) {
|
|
text = text.replaceAll("##", "#");
|
|
}
|
|
|
|
console.log(text);
|
|
let regex_korrekt = text.match("^((\\d)*;(\\d)*(#))*((\\d)*;(\\d)*)?$");
|
|
|
|
if (!regex_korrekt) {
|
|
console.log("regex nicht korrekt");
|
|
} else {
|
|
console.log("regex korrekt");
|
|
let zeilen = text.split("#");
|
|
let neuer_ds = [];
|
|
|
|
for (let i = 0; i < zeilen.length; i++) {
|
|
if (zeilen[i].includes(";")) {
|
|
let zeile = zeilen[i].split(";");
|
|
let ds = { x: zeile[0], y: zeile[1], color: "blue" };
|
|
|
|
neuer_ds.push(ds);
|
|
}
|
|
}
|
|
this.datenpunkte = neuer_ds;
|
|
this.anzahl_datenpunkte = this.datenpunkte.length;
|
|
this.update_anzahl_datenpunkte(this.anzahl_datenpunkte);
|
|
}
|
|
},
|
|
|
|
szenario_aendern() {
|
|
this.loesche_zeichenflaeche();
|
|
this.refresh();
|
|
},
|
|
|
|
update_anzahl_datenpunkte(new_value) {
|
|
if (new_value >= 0) {
|
|
console.log("angekommen." + new_value);
|
|
this.anzahl_datenpunkte = new_value;
|
|
|
|
while (this.datenpunkte.length > this.anzahl_datenpunkte) {
|
|
this.datenpunkte.pop();
|
|
}
|
|
|
|
while (this.datenpunkte.length < this.anzahl_datenpunkte) {
|
|
let neues_datenpunkt = this.generiere_datenpunkt_zufaellig();
|
|
this.datenpunkte.push(neues_datenpunkt);
|
|
}
|
|
//this.update_zeichnung_child_component();
|
|
this.datensatz_2_textarea();
|
|
this.refresh();
|
|
} else {
|
|
this.anzahl_datenpunkte = 0;
|
|
}
|
|
},
|
|
update_anzahl_prototypen(new_value) {
|
|
if (new_value >= 0) {
|
|
console.log("angekommen." + new_value);
|
|
this.anzahl_prototypen = new_value;
|
|
|
|
while (this.prototypen.length > this.anzahl_prototypen) {
|
|
this.prototypen.pop();
|
|
}
|
|
|
|
while (this.prototypen.length < this.anzahl_prototypen) {
|
|
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;
|
|
}
|
|
},
|
|
/*
|
|
update_zeichnung_child_component() {
|
|
//this.$refs.component_zeichnung.update_anzahlen(this.datenpunkte, this.prototypen)
|
|
this.$refs.component_zeichnung.refresh();
|
|
console.log("update child sent" + this.datenpunkte.length);
|
|
},
|
|
*/
|
|
generiere_datenpunkt_zufaellig() {
|
|
let max_x = 800;
|
|
let max_y = 450;
|
|
let datenpunkt = {};
|
|
|
|
datenpunkt.x = Math.floor(Math.random() * max_x);
|
|
datenpunkt.y = Math.floor(Math.random() * max_y);
|
|
datenpunkt.color = "black";
|
|
|
|
console.log(datenpunkt);
|
|
return datenpunkt;
|
|
},
|
|
generiere_prototyp_zufaellig() {
|
|
let max_x = 800;
|
|
let max_y = 450;
|
|
let prototyp = {};
|
|
|
|
prototyp.x = Math.floor(Math.random() * max_x);
|
|
prototyp.y = Math.floor(Math.random() * max_y);
|
|
prototyp.color = "blue";
|
|
|
|
console.log(prototyp);
|
|
return prototyp;
|
|
},
|
|
|
|
zeichne_hintergrund() {
|
|
const bild = document.getElementById(this.aktuelles_hintergrundbild);
|
|
console.log("background image: " + this.aktuelles_hintergrundbild);
|
|
|
|
let bildX = 0;
|
|
let bildY = 0;
|
|
let breite = 800;
|
|
let hoehe = 450;
|
|
this.vueCanvas.drawImage(bild, bildX, bildY, breite, hoehe);
|
|
},
|
|
|
|
faerbe_prototypen() {
|
|
let anzahl = this.prototypen.length;
|
|
let farben = generateDifferentColors(anzahl);
|
|
//colors_generation;
|
|
console.log(anzahl + farben);
|
|
|
|
for (let i = 0; i < this.prototypen.length; i++) {
|
|
this.prototypen[i].color = farben[i];
|
|
console.log(this.prototypen[i].color);
|
|
}
|
|
},
|
|
|
|
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]);
|
|
let farbe = next_prototyp.color;
|
|
this.datenpunkte[i].color = farbe;
|
|
console.log(farbe);
|
|
}
|
|
}
|
|
},
|
|
|
|
async refresh() {
|
|
return new Promise((resolve) => {
|
|
this.faerbe_prototypen();
|
|
this.loesche_zeichenflaeche();
|
|
this.zeichne_hintergrund();
|
|
this.zeichne_datenpunkte(false, true);
|
|
this.zeichne_prototypen(false);
|
|
|
|
setTimeout(() => {
|
|
resolve(); // Resolve the promise when the animation is done
|
|
}, this.animation_speed); // 1-second delay
|
|
});
|
|
},
|
|
|
|
loesche_zeichenflaeche() {
|
|
this.vueCanvas.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
},
|
|
zeichne_kreis(x, y, radius, fuellFarbe, randFarbe) {
|
|
let randDicke;
|
|
|
|
//randFarbe = 'black'
|
|
randDicke = Math.ceil(radius / 3);
|
|
|
|
this.vueCanvas.strokeStyle = randFarbe;
|
|
this.vueCanvas.beginPath();
|
|
this.vueCanvas.lineWidth = randDicke;
|
|
this.vueCanvas.arc(x, y, radius, 0, 2 * Math.PI);
|
|
this.vueCanvas.fillStyle = fuellFarbe;
|
|
this.vueCanvas.fill();
|
|
this.vueCanvas.stroke();
|
|
},
|
|
zeichne_x(x, y, color) {
|
|
let staerke = 4;
|
|
let groesse = 6;
|
|
|
|
//ctxBaum.fillStyle = color
|
|
this.vueCanvas.beginPath();
|
|
|
|
this.vueCanvas.moveTo(x + groesse, y + groesse);
|
|
this.vueCanvas.lineWidth = staerke;
|
|
// set line color
|
|
this.vueCanvas.strokeStyle = color;
|
|
this.vueCanvas.lineTo(x - groesse, y - groesse);
|
|
|
|
this.vueCanvas.moveTo(x - groesse, y + groesse);
|
|
this.vueCanvas.lineWidth = staerke;
|
|
// set line color
|
|
this.vueCanvas.strokeStyle = color;
|
|
this.vueCanvas.lineTo(x + groesse, y - groesse);
|
|
|
|
this.vueCanvas.stroke();
|
|
},
|
|
|
|
zeichne_linie(x1, y1, x2, y2, farbe, staerke) {
|
|
//ctxBaum.fillStyle = color
|
|
this.vueCanvas.beginPath();
|
|
|
|
this.vueCanvas.moveTo(x1, y1);
|
|
this.vueCanvas.lineWidth = staerke;
|
|
// set line color
|
|
this.vueCanvas.strokeStyle = farbe;
|
|
this.vueCanvas.lineTo(x2, y2);
|
|
|
|
this.vueCanvas.stroke();
|
|
},
|
|
|
|
zeichne_linie_datenpunkt_naechstgelegene_prototyp(datenpunkt) {
|
|
let farbe = "red";
|
|
let staerke = 2;
|
|
let prototyp = this.gib_naechstgelegener_prototyp(datenpunkt);
|
|
|
|
if (datenpunkt != null && prototyp != null) {
|
|
this.zeichne_linie(
|
|
datenpunkt.x,
|
|
datenpunkt.y,
|
|
prototyp.x,
|
|
prototyp.y,
|
|
farbe,
|
|
staerke
|
|
);
|
|
}
|
|
},
|
|
|
|
zeichne_linie_datenpunkt_prototyp(datenpunkt, prototyp, farbe, staerke) {
|
|
if (datenpunkt != null && prototyp != null) {
|
|
this.zeichne_linie(
|
|
datenpunkt.x,
|
|
datenpunkt.y,
|
|
prototyp.x,
|
|
prototyp.y,
|
|
farbe,
|
|
staerke
|
|
);
|
|
}
|
|
},
|
|
|
|
zeige_line_an() {
|
|
this.zeichne_linie_datenpunkt_prototyp(
|
|
this.datenpunkte[this.aktueller_datenpunkt],
|
|
this.prototypen[this.aktueller_prototyp]
|
|
);
|
|
},
|
|
|
|
zeichne_datenpunkte(markierung, zeichne_alle) {
|
|
let radius = 8;
|
|
let i = 0;
|
|
let hightlight_farbe = "lightgreen";
|
|
|
|
this.datenpunkte.forEach((element) => {
|
|
if (markierung && i == this.aktueller_datenpunkt) {
|
|
this.zeichne_kreis(
|
|
element.x,
|
|
element.y,
|
|
radius * 1.5,
|
|
hightlight_farbe,
|
|
hightlight_farbe
|
|
);
|
|
}
|
|
|
|
let kreis_farbe = element.color; //"black";
|
|
/*
|
|
if (i < this.aktueller_datenpunkt) {
|
|
kreis_farbe = element.color;
|
|
}
|
|
*/
|
|
|
|
if (zeichne_alle || i < this.aktueller_datenpunkt) {
|
|
this.zeichne_kreis(
|
|
element.x,
|
|
element.y,
|
|
radius,
|
|
kreis_farbe,
|
|
"white"
|
|
);
|
|
}
|
|
|
|
i++;
|
|
});
|
|
},
|
|
|
|
zeichne_prototypen(markierung) {
|
|
let i = 0;
|
|
let hightlight_farbe;
|
|
let radius;
|
|
|
|
this.prototypen.forEach((element) => {
|
|
hightlight_farbe = "white";
|
|
radius = 14;
|
|
|
|
if (markierung && i == this.aktueller_prototyp) {
|
|
hightlight_farbe = "lightgreen";
|
|
let radius_markierung = radius + 5;
|
|
this.zeichne_kreis(
|
|
element.x,
|
|
element.y,
|
|
radius_markierung,
|
|
"white",
|
|
hightlight_farbe
|
|
);
|
|
}
|
|
|
|
this.zeichne_kreis(element.x, element.y, radius, "white", element.color);
|
|
|
|
this.zeichne_x(element.x, element.y, element.color);
|
|
console.log(element.color);
|
|
|
|
i++;
|
|
});
|
|
},
|
|
naechstes_datenpunkt() {
|
|
if (this.aktueller_datenpunkt < this.datenpunkte.length - 1) {
|
|
this.aktueller_datenpunkt++;
|
|
this.refresh();
|
|
this.zeichne_datenpunkte(true, true);
|
|
}
|
|
},
|
|
voriges_datenpunkt() {
|
|
if (this.aktueller_datenpunkt > 0) {
|
|
this.aktueller_datenpunkt--;
|
|
this.refresh();
|
|
this.zeichne_datenpunkte(true, true);
|
|
}
|
|
},
|
|
naechster_prototyp() {
|
|
this.aktueller_prototyp++;
|
|
this.refresh();
|
|
this.zeichne_prototypen(true);
|
|
},
|
|
voriger_prototyp() {
|
|
this.aktueller_prototyp--;
|
|
this.refresh();
|
|
this.zeichne_prototypen(true);
|
|
},
|
|
gib_distanz(datenpunkt, prototyp) {
|
|
let x1 = datenpunkt.x;
|
|
let y1 = datenpunkt.y;
|
|
let x2 = prototyp.x;
|
|
let y2 = prototyp.y;
|
|
return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
|
|
},
|
|
gib_naechstgelegener_prototyp(datenpunkt) {
|
|
if (datenpunkt == null) {
|
|
return null;
|
|
}
|
|
let naechstgelegener_prototyp = null;
|
|
let min_distanz = null;
|
|
// pruefe alle prototypen und merke die naechste
|
|
for (let i = 0; i < this.prototypen.length; i++) {
|
|
let akt_prototyp = this.prototypen[i];
|
|
let akt_distanz = this.gib_distanz(datenpunkt, akt_prototyp);
|
|
if (naechstgelegener_prototyp == null || akt_distanz < min_distanz) {
|
|
naechstgelegener_prototyp = akt_prototyp;
|
|
min_distanz = akt_distanz;
|
|
}
|
|
}
|
|
return naechstgelegener_prototyp;
|
|
},
|
|
|
|
berechne_neue_pos_haelfte(x1, y1, x2, y2) {
|
|
|
|
let neue_pos = {
|
|
x: (x1 + x2) / 2,
|
|
y: (y1 + y2) / 2,
|
|
};
|
|
return neue_pos;
|
|
},
|
|
|
|
//////////////////////////////////////////
|
|
pausiere_animation() {
|
|
this.paused = true;
|
|
},
|
|
kurz_zeichne_linie_datenpunkt_prototyp() {
|
|
// pruefe_aktuelle
|
|
this.zeichne_linie_datenpunkt_prototyp(
|
|
this.akt_datenpunkt,
|
|
this.akt_prototyp,
|
|
"lightgreen",
|
|
4
|
|
);
|
|
},
|
|
|
|
existiert_kuerzere_Distanz() {
|
|
// bisher naechstgelegener Prototyp
|
|
let akt_distanz = this.gib_distanz(
|
|
this.akt_datenpunkt,
|
|
this.akt_prototyp
|
|
);
|
|
|
|
// naechsten aktualisieren
|
|
if (
|
|
this.naechstgelegener_prototyp == null ||
|
|
akt_distanz < this.naechstgelegener_prototyp_distanz
|
|
) {
|
|
this.naechstgelegener_prototyp = this.akt_prototyp;
|
|
this.naechstgelegener_prototyp_distanz = akt_distanz;
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
},
|
|
|
|
verarbeite_kuerzere_distanz() {
|
|
if (this.existiert_kuerzere_Distanz()) {
|
|
this.zeichne_kuerzeste_Distanz();
|
|
}
|
|
},
|
|
|
|
kurz_zeichne_linie_datenpunkt_naechstgelegene_prototyp() {
|
|
this.zeichne_linie_datenpunkt_prototyp(
|
|
this.akt_datenpunkt,
|
|
this.naechstgelegener_prototyp,
|
|
"red",
|
|
3
|
|
);
|
|
},
|
|
async starte_animation_alle() {
|
|
this.loesche_zeichenflaeche();
|
|
this.aktueller_datenpunkt = 0;
|
|
|
|
for (let i = 0; i < this.datenpunkte.length; i++) {
|
|
this.aktueller_datenpunkt = i;
|
|
await this.starte_animation();
|
|
}
|
|
|
|
this.farben_anpassen(true);
|
|
|
|
this.loesche_zeichenflaeche();
|
|
this.zeichne_hintergrund();
|
|
this.zeichne_datenpunkte(false, true);
|
|
this.zeichne_prototypen(false);
|
|
|
|
//this.zeige_naechsten_bekannten_prototyp();
|
|
},
|
|
|
|
async starte_animation() {
|
|
this.aktueller_prototyp = 0;
|
|
this.naechstgelegener_prototyp = null;
|
|
this.naechstgelegener_prototyp_distanz = null;
|
|
this.paused = false;
|
|
|
|
await this.mainAnimationLoop();
|
|
},
|
|
|
|
async mainAnimationLoop() {
|
|
// Call the first animation and wait for it to finish
|
|
|
|
let alle_prototypen_verarbeitet = false;
|
|
while (!alle_prototypen_verarbeitet) {
|
|
this.zeichne_hintergrund();
|
|
this.farben_anpassen(false);
|
|
|
|
if (this.aktueller_prototyp == 0) {
|
|
this.zeichne_datenpunkte(false, true);
|
|
await this.zeichne_prototypen(false);
|
|
}
|
|
|
|
await this.zeige_prototyp();
|
|
await this.zeige_naechsten_bekannten_prototyp();
|
|
|
|
if (this.existiert_kuerzere_Distanz()) {
|
|
this.loesche_zeichenflaeche();
|
|
this.zeichne_hintergrund();
|
|
this.zeichne_datenpunkte(false, true);
|
|
this.zeichne_prototypen(false);
|
|
await this.zeige_naechsten_bekannten_prototyp();
|
|
}
|
|
|
|
if (this.aktueller_prototyp < this.prototypen.length) {
|
|
if (this.aktueller_prototyp == this.prototypen.length - 1) {
|
|
alle_prototypen_verarbeitet = true;
|
|
} else {
|
|
this.aktueller_prototyp++;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Schlussbild
|
|
this.loesche_zeichenflaeche();
|
|
this.farben_anpassen(false);
|
|
this.zeichne_datenpunkte(false, true);
|
|
this.zeichne_prototypen(false);
|
|
|
|
this.zeige_naechsten_bekannten_prototyp();
|
|
|
|
// prototyp verschieben
|
|
await this.aktualisiere_pos_prototyp();
|
|
},
|
|
|
|
async pausiere(zeitspanne) {
|
|
return new Promise((resolve) => {
|
|
// nichts tun
|
|
|
|
// Simulate some delay (you can replace this with actual animation code)
|
|
setTimeout(() => {
|
|
resolve(); // Resolve the promise when the animation is done
|
|
}, zeitspanne); // 1-second delay
|
|
});
|
|
},
|
|
|
|
zeige_prototyp() {
|
|
return new Promise((resolve) => {
|
|
// Your animation code here
|
|
//this.loesche_zeichenflaeche();
|
|
|
|
this.kurz_zeichne_linie_datenpunkt_prototyp();
|
|
this.zeige_naechsten_bekannten_prototyp();
|
|
this.zeichne_datenpunkte(true, true);
|
|
this.zeichne_prototypen(true);
|
|
|
|
// Simulate some delay (you can replace this with actual animation code)
|
|
setTimeout(() => {
|
|
resolve(); // Resolve the promise when the animation is done
|
|
}, this.animation_speed); // 1-second delay
|
|
});
|
|
},
|
|
|
|
zeige_naechsten_bekannten_prototyp() {
|
|
return new Promise((resolve) => {
|
|
// Your animation code here
|
|
if (this.naechstgelegener_prototyp != null && this.akt_datenpunkt != null) {
|
|
this.kurz_zeichne_linie_datenpunkt_naechstgelegene_prototyp();
|
|
this.zeichne_datenpunkte(true, true);
|
|
this.zeichne_prototypen(true);
|
|
}
|
|
|
|
// Simulate some delay (you can replace this with actual animation code)
|
|
setTimeout(() => {
|
|
resolve(); // Resolve the promise when the animation is done
|
|
}, this.animation_speed); // 1-second delay
|
|
});
|
|
},
|
|
|
|
aktualisiere_pos_prototyp() {
|
|
return new Promise((resolve) => {
|
|
this.farben_anpassen(false);
|
|
this.animieren();
|
|
|
|
setTimeout(() => {
|
|
resolve(); // Resolve the promise when the animation is done
|
|
}, this.animation_speed * 2);
|
|
});
|
|
},
|
|
async animieren() {
|
|
this.letzte_prototyp = this.naechstgelegener_prototyp;
|
|
let schritte = 50;
|
|
if (this.animation_speed < 10) {
|
|
schritte = 1;
|
|
}
|
|
let i = 0;
|
|
|
|
let x_neu = (this.akt_datenpunkt.x + this.naechstgelegener_prototyp.x) / 2;
|
|
let y_neu = (this.akt_datenpunkt.y + this.naechstgelegener_prototyp.y) / 2;
|
|
|
|
let delta_x =
|
|
(this.akt_datenpunkt.x - this.naechstgelegener_prototyp.x) / 2 / schritte;
|
|
let delta_y =
|
|
(this.akt_datenpunkt.y - this.naechstgelegener_prototyp.y) / 2 / schritte;
|
|
|
|
// zeichnen definieren
|
|
var draw = () => {
|
|
try {
|
|
this.naechstgelegener_prototyp.x += delta_x;
|
|
this.naechstgelegener_prototyp.y += delta_y;
|
|
|
|
this.loesche_zeichenflaeche();
|
|
this.zeichne_hintergrund();
|
|
|
|
this.kurz_zeichne_linie_datenpunkt_naechstgelegene_prototyp();
|
|
|
|
this.zeichne_datenpunkte(true, true);
|
|
this.zeichne_prototypen(true);
|
|
|
|
i++;
|
|
|
|
if (i < schritte) {
|
|
//timestamp = Date.now();
|
|
requestAnimationFrame(draw);
|
|
} else {
|
|
this.naechstgelegener_prototyp.x = x_neu;
|
|
this.naechstgelegener_prototyp.y = y_neu;
|
|
this.refresh();
|
|
}
|
|
} catch (error) {
|
|
//console.error("Caught custom exception:", error.message);
|
|
this.letzte_prototyp.x = x_neu;
|
|
this.letzte_prototyp.y = y_neu;
|
|
this.refresh();
|
|
}
|
|
};
|
|
// Zeichnen aufrufen
|
|
draw();
|
|
},
|
|
},
|
|
|
|
mounted() {
|
|
var c = document.getElementById("c");
|
|
var ctx = c.getContext("2d");
|
|
this.canvas = c;
|
|
this.vueCanvas = ctx;
|
|
this.aktueller_prototyp = 0;
|
|
|
|
this.lade();
|
|
this.update_anzahl_datenpunkte(this.anzahl_datenpunkte);
|
|
this.update_anzahl_prototypen(this.anzahl_prototypen);
|
|
|
|
document.onreadystatechange = () => {
|
|
if (document.readyState == "complete") {
|
|
this.refresh();
|
|
this.zeichne_hintergrund();
|
|
this.zeichne_prototypen(false);
|
|
this.zeichne_datenpunkte(false, true);
|
|
console.log("Page completed with image and files!");
|
|
// fetch to next page or some code
|
|
|
|
var coll = document.getElementsByClassName("collapsible");
|
|
var i;
|
|
|
|
for (i = 0; i < coll.length; i++) {
|
|
coll[i].addEventListener("click", function () {
|
|
this.classList.toggle("active");
|
|
var content = this.nextElementSibling;
|
|
|
|
if (content.style.maxHeight) {
|
|
content.style.maxHeight = null;
|
|
} else {
|
|
content.style.maxHeight = content.scrollHeight + "px";
|
|
let content0 = document.getElementById("content0");
|
|
let content1 = document.getElementById("content1");
|
|
if (content == content1) {
|
|
console.log("gefunden");
|
|
content0.style.maxHeight =
|
|
content0.scrollHeight + content.scrollHeight + "px";
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
},
|
|
};
|
|
|
|
//------------------------------------------------------------
|
|
</script>
|
|
|
|
|
|
<style>
|
|
#app {
|
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-align: center;
|
|
color: #2c3e50;
|
|
margin-top: 60px;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
}
|
|
|
|
/* Create two equal columns that sits next to each other */
|
|
.column {
|
|
flex: 50%;
|
|
padding: 10px;
|
|
/* border: solid black 1px;
|
|
/*height: 300px; /* Should be removed. Only for demonstration */
|
|
}
|
|
|
|
.collapsible {
|
|
background-color: #777;
|
|
color: white;
|
|
cursor: pointer;
|
|
padding: 18px;
|
|
width: 100%;
|
|
border: none;
|
|
text-align: left;
|
|
outline: none;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.active,
|
|
.collapsible:hover {
|
|
background-color: #555;
|
|
}
|
|
|
|
.collapsible:after {
|
|
content: "\002B";
|
|
color: white;
|
|
font-weight: bold;
|
|
float: right;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.active:after {
|
|
content: "\2212";
|
|
}
|
|
|
|
.content {
|
|
padding: 0 18px;
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.2s ease-out;
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
font-weight: 400;
|
|
color: #212529;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
background-color: transparent;
|
|
border: 1px solid transparent;
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
border-radius: 0.25rem;
|
|
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
|
|
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
}
|
|
|
|
.btn:not(:disabled):not(.disabled) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-primary {
|
|
color: #fff;
|
|
background-color: #007bff;
|
|
border-color: #007bff;
|
|
}
|
|
</style>
|
|
|