Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- p:ki:fische2 [2026/04/20 15:05] – [2. Versuch mit einer Messgrösse] Ralf Kretzschmar
+++ p:ki:fische2 [2026/04/20 16:26] (aktuell) – [4. Du zeichnest deinen eigenen Klassifikator] Ralf Kretzschmar
@@ Zeile 12: / Zeile 12: @@
 ===== -#1 Was bisher geschah... =====
-👩‍🦰 Du hilfst Sigrún beim Bau eines Fischsortierapparats. Dafür hattest du die Längen (in cm) von 50 Hering und 50 Lodde vermessen und nebenstehendes Histogramm erstellt. Alles links vom Grenzwert (rote Linie) wird vom Apparat als Lodde angesehen, alles rechts davon als Hering. Gemäss nebenstehenden Histogramm arbeitet der Apparat mit einem Grenzwert zwischen 20 cm und 25 cm fehlerfrei.
+👩‍🦰 Du hilfst Sigrún beim Bau eines Fischsortierapparats. Dafür hattest du die Längen (in cm) von 50 Heringen und 50 Lodden vermessen und das nebenstehende Histogramm erstellt. Alles links vom Grenzwert (rote Linie) wird vom Apparat als Lodde angesehen, alles rechts davon als Hering. Gemäss nebenstehendem Histogramm arbeitet der Apparat mit einem Grenzwert zwischen 20 cm und 25 cm fehlerfrei.
 😭 Natürlich ist das zu schön, um wahr zu sein. Wie du bemerkt hattest, fehlen kleine Heringe im Histogramm!
-💡 Daher fragst du Sigrún noch einmal um 50 Hering und 50 Lodde an, welche sie dir prompt zukommen lässt.
+💡 Daher fragst du Sigrún noch einmal um 50 Heringe und 50 Lodden an, welche sie dir prompt zukommen lässt.
 \\
@@ Zeile 23: / Zeile 23: @@
 <WRAP center round box >
 == ✍ Auftrag ==
-Für das untenstehende Histogramm hast du bereits dein altes Histogramm aus dem letzten Kapitel mit den zusätzlichen 50 Heringen und 50 Lodde ergänzt (jetzt sind 200 Fische darin). Nun sieht das Histogramm ungefähr so aus, wie man das erwarten würde.
+Für das untenstehende Histogramm hast du bereits dein altes Histogramm aus dem letzten Kapitel mit den zusätzlichen 50 Heringen und 50 Lodden ergänzt (jetzt sind 200 Fische darin). Nun sieht das Histogramm ungefähr so aus, wie man das erwarten würde.
-  - Wie gut kann dein Fischsortierapparat jetzt Hering von Lodde unterscheiden? Prüfe mit dem roten Grenzwert, welches der kleinste Fehler ist, den du erreichen kannst. Trage das Resultat ins Textfeld ein. {{gem/match?0=N4IgTgpg5hAeAOIBcIB0AqALABgyANCAGYA2AhlAM7IgCWBIALnIzSAL5A#840f939eb679c2df}}
+  - Wie gut kann dein Fischsortierapparat jetzt Hering von Lodde unterscheiden? Prüfe mit dem roten Grenzwert, welcher der kleinste Fehler ist, den du erreichen kannst. Trage das Resultat ins Textfeld ein. {{gem/match?0=N4IgTgpg5hAeAOIBcIB0AqALABgyANCAGYA2AhlAM7IgCWBIALnIzSAL5A#840f939eb679c2df}}
-  - Worauf musst du bei der Auswahl der Beispiele bzw. Fische achten, wenn du verschiedene Dinge (hier Fische) mit Grenzwerten in Klassen unterteilen möchtest? Vergleiche dazu das obenstehende mit dem untenstehenden Histogramm. Halte deine Einsicht im Textfeld fest. Vergleiche danach deine Antwort mit der Musterlösung.{{gem/plain?0=N4XyA#0170bd536d248cf6}}++Musterlösung|\\ \\ Die Beispiele müssen alle Varianten aller Klassen beinhalten. Z.B. ein Fischsortierapparat, der nur für grosse Fische optimiert wird, wird bei kleinen Fischen versagen.++
+  - Worauf musst du bei der Auswahl der Beispiele bzw. Fische achten, wenn du verschiedene Dinge (hier Fische) mit Grenzwerten in Klassen unterteilen möchtest? Vergleiche dazu das Obenstehende mit dem untenstehenden Histogramm. Halte deine Einsicht im Textfeld fest. Vergleiche danach deine Antwort mit der Musterlösung.{{gem/plain?0=N4XyA#0170bd536d248cf6}}++Musterlösung|\\ \\ Die Beispiele müssen alle Varianten aller Klassen beinhalten. Z.B. ein Fischsortierapparat, der nur für grosse Fische optimiert wird, wird bei kleinen Fischen versagen.++
 {{exorciser/jspg?javascript=%2F%2F%20%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%0A%2F%2F%20CONSTANTS%20AND%20GLOBAL%20VARIABLES%0A%2F%2F%20%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%0A%0A%0Aconst%20INTERVAL%20%3D%20%5B0%2C%205%2C%2010%2C%2015%2C%2020%2C%2025%2C%2030%2C%2035%2C%2040%5D%3B%0Aconst%20HERING%20%3D%20%5B0%2C%202%2C%208%2C%2018%2C%2024%2C%2022%2C%2019%2C%206%2C%201%5D%3B%0Aconst%20LODDE%20%3D%20%5B5%2C%2019%2C%2033%2C%2031%2C%2010%2C%202%2C%200%2C%200%2C%200%5D%3B%0Aconst%20NUMBER%20%3D%20%5B0%2C%2010%2C%2020%2C%2030%2C%2040%5D%3B%0Aconst%20X_SHIFT%20%3D%2070%3B%0Aconst%20Y_SHIFT%20%3D%2040%3B%0Aconst%20GRAPH_WIDTH%20%3D%20270%3B%0Aconst%20GRAPH_HEIGHT%20%3D%2080%3B%0Aconst%20FONT_SIZE%20%3D%2015%3B%0Aconst%20COLUMN_WIDTH%20%3D%20%28GRAPH_WIDTH%20%2F%20INTERVAL.length%20-%206%29%20%2F%202%3B%0A%0A%0A%0A%2F%2F%20%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%0A%2F%2F%20FUNCTIONS%0A%2F%2F%20%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%0A%0A%0A%2F%2F%0A%2F%2F%20draw%20histogram%0A%2F%2F%0Afunction%20drawGraph%28%29%20%7B%0A%09textAlign%28CENTER%29%3B%0A%09for%20%28i%20%3D%200%3B%20i%20%3C%20INTERVAL.length%3B%20i%20%3D%20i%20%2B%201%29%20%7B%0A%09%09noStroke%28%29%3B%0A%09%09fill%28%27green%27%29%3B%0A%09%09rect%28X_SHIFT%20%2B%20i%20%2a%20GRAPH_WIDTH%20%2F%20INTERVAL.length%20%2B%202%2C%20Y_SHIFT%20%2B%20GRAPH_HEIGHT%20-%20LODDE%5Bi%5D%20%2a%20GRAPH_HEIGHT%20%2F%20NUMBER%5BNUMBER.length%20-%201%5D%2C%20COLUMN_WIDTH%2C%20LODDE%5Bi%5D%20%2a%20GRAPH_HEIGHT%20%2F%20NUMBER%5BNUMBER.length%20-%201%5D%29%3B%0A%09%09fill%28%27blue%27%29%3B%0A%09%09rect%28X_SHIFT%20%2B%20i%20%2a%20GRAPH_WIDTH%20%2F%20INTERVAL.length%20%2B%20COLUMN_WIDTH%20%2B%204%2C%20Y_SHIFT%20%2B%20GRAPH_HEIGHT%20-%20HERING%5Bi%5D%20%2a%20GRAPH_HEIGHT%20%2F%20NUMBER%5BNUMBER.length%20-%201%5D%2C%20COLUMN_WIDTH%2C%20HERING%5Bi%5D%20%2a%20GRAPH_HEIGHT%20%2F%20NUMBER%5BNUMBER.length%20-%201%5D%29%3B%0A%09%09strokeWeight%281%29%3B%0A%09%09stroke%28%22black%22%29%3B%0A%09%09line%28X_SHIFT%2C%20Y_SHIFT%2C%20X_SHIFT%2C%20Y_SHIFT%20%2B%20GRAPH_HEIGHT%29%3B%0A%09%09line%28X_SHIFT%2C%20Y_SHIFT%20%2B%20GRAPH_HEIGHT%2C%20X_SHIFT%20%2B%20GRAPH_WIDTH%2C%20Y_SHIFT%20%2B%20GRAPH_HEIGHT%29%3B%0A%09%09line%28X_SHIFT%20%2B%20i%20%2a%20GRAPH_WIDTH%20%2F%20INTERVAL.length%2C%20Y_SHIFT%20%2B%20GRAPH_HEIGHT%2C%20X_SHIFT%20%2B%20i%20%2a%20GRAPH_WIDTH%20%2F%20INTERVAL.length%2C%20Y_SHIFT%20%2B%20GRAPH_HEIGHT%20%2B%20FONT_SIZE%20%2F%203%29%3B%0A%09%09noStroke%28%29%3B%0A%09%09fill%28%27black%27%29%3B%0A%09%09text%28INTERVAL%5Bi%5D%2C%20X_SHIFT%20%2B%20%28i%20%2B%200.5%29%20%2a%20GRAPH_WIDTH%20%2F%20INTERVAL.length%2C%20Y_SHIFT%20%2B%20GRAPH_HEIGHT%20%2B%20FONT_SIZE%29%3B%0A%09%7D%0A%09strokeWeight%281%29%3B%0A%09stroke%28%22black%22%29%3B%0A%09line%28X_SHIFT%20%2B%20GRAPH_WIDTH%2C%20Y_SHIFT%20%2B%20GRAPH_HEIGHT%2C%20X_SHIFT%20%2B%20GRAPH_WIDTH%2C%20Y_SHIFT%20%2B%20GRAPH_HEIGHT%20%2B%20FONT_SIZE%20%2F%203%29%3B%0A%09textAlign%28RIGHT%29%3B%0A%09for%20%28j%20%3D%200%3B%20j%20%3C%20NUMBER.length%3B%20j%20%3D%20j%20%2B%201%29%20%7B%0A%09%09strokeWeight%281%29%3B%0A%09%09stroke%28%22black%22%29%3B%0A%09%09line%28X_SHIFT%20-%20FONT_SIZE%20%2F%203%2C%20Y_SHIFT%20%2B%20GRAPH_HEIGHT%20-%20j%20%2a%20GRAPH_HEIGHT%20%2F%20%28NUMBER.length%20-%201%29%2C%20X_SHIFT%2C%20Y_SHIFT%20%2B%20GRAPH_HEIGHT%20-%20j%20%2a%20GRAPH_HEIGHT%20%2F%20%28NUMBER.length%20-%201%29%29%3B%0A%09%09noStroke%28%29%3B%0A%09%09fill%28%27black%27%29%3B%0A%09%09text%28NUMBER%5Bj%5D%2C%20X_SHIFT%20-%202%20%2a%20FONT_SIZE%20%2F%203%2C%20Y_SHIFT%20%2B%20GRAPH_HEIGHT%20%2B%20FONT_SIZE%20%2F%203%20-%20j%20%2a%20GRAPH_HEIGHT%20%2F%20%28NUMBER.length%20-%201%29%29%3B%0A%09%7D%0A%7D%0A%0A%0A%2F%2F%0A%2F%2F%20add%20labels%20to%20histogram%0A%2F%2F%0Afunction%20addTextLabels%28%29%20%7B%0A%09textAlign%28CENTER%29%3B%0A%09fill%28%22green%22%29%3B%0A%09text%28%22Lodde%22%2C%20X_SHIFT%20%2B%20GRAPH_WIDTH%20%2F%204%2C%20Y_SHIFT%20-%20FONT_SIZE%29%3B%0A%09fill%28%22blue%22%29%3B%0A%09text%28%22Hering%22%2C%20X_SHIFT%20%2B%203%20%2a%20GRAPH_WIDTH%20%2F%204%2C%20Y_SHIFT%20-%20FONT_SIZE%29%3B%0A%09fill%28%22black%22%29%3B%0A%09text%28%22Messgr%C3%B6ssenintervalle%22%2C%20X_SHIFT%20%2B%20GRAPH_WIDTH%20%2F%202%2C%20Y_SHIFT%20%2B%20GRAPH_HEIGHT%20%2B%203%20%2a%20FONT_SIZE%29%3B%0A%09rotate%28-HALF_PI%29%3B%0A%09text%28%22Anzahl%20Fische%22%2C%20-%28Y_SHIFT%20%2B%20GRAPH_HEIGHT%20%2F%202%29%2C%20X_SHIFT%20-%203%20%2a%20FONT_SIZE%29%3B%0A%09rotate%28HALF_PI%29%3B%0A%7D%0A%0A%0A%2F%2F%0A%2F%2F%20control%20mouse%20interaction%0A%2F%2F%0A%0Afunction%20addMouseInteraction%28%29%20%7B%0A%09let%20wrong%20%3D%200%3B%0A%09if%20%28mouseX%20%3E%20X_SHIFT%20%26%26%20mouseX%20%3C%20X_SHIFT%20%2B%20GRAPH_WIDTH%29%20%7B%0A%09%09mousePosition%20%3D%20Math.round%28%28mouseX%20-%20X_SHIFT%29%20%2F%20%28GRAPH_WIDTH%20%2F%20INTERVAL.length%29%29%3B%0A%09%09strokeWeight%283%29%3B%0A%09%09stroke%28%22red%22%29%3B%0A%09%09line%28X_SHIFT%20%2B%20mousePosition%20%2a%20GRAPH_WIDTH%20%2F%20INTERVAL.length%2C%20Y_SHIFT%20%2B%20GRAPH_HEIGHT%2C%20X_SHIFT%20%2B%20mousePosition%20%2a%20GRAPH_WIDTH%20%2F%20INTERVAL.length%2C%20Y_SHIFT%20%2B%202%20%2a%20FONT_SIZE%20%2F%203%29%3B%0A%0A%09%09for%20%28h%20%3D%200%3B%20h%20%3C%20mousePosition%3B%20h%2B%2B%29%20%7B%0A%09%09%09wrong%20%3D%20wrong%20%2B%20HERING%5Bh%5D%3B%0A%09%09%7D%0A%09%09for%20%28l%20%3D%20LODDE.length%20-%201%3B%20l%20%3E%3D%20mousePosition%3B%20l--%29%20%7B%0A%09%09%09wrong%20%3D%20wrong%20%2B%20LODDE%5Bl%5D%3B%0A%09%09%7D%0A%09%09noStroke%28%29%3B%0A%09%09fill%28%22red%22%29%3B%0A%09%09textAlign%28CENTER%29%3B%0A%09%09text%28wrong%2C%20X_SHIFT%20%2B%20mousePosition%20%2a%20GRAPH_WIDTH%20%2F%20INTERVAL.length%2C%20Y_SHIFT%20%2B%20FONT_SIZE%20%2F%203%29%3B%0A%09%7D%0A%7D%0A%0A%0A%0A%2F%2F%20%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%0A%2F%2F%20MAIN%20PROGRAM%0A%2F%2F%20%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%0A%0A%0A%2F%2F%0A%2F%2F%20p5.js%20setup%28%29%0A%2F%2F%0Afunction%20setup%28%29%20%7B%0A%09createCanvas%28360%2C%20180%29%3B%0A%09textSize%28FONT_SIZE%29%3B%0A%7D%0A%0A%0A%2F%2F%0A%2F%2F%20p5.js%20draw%28%29%0A%2F%2F%0Afunction%20draw%28%29%20%7B%0A%09background%28%22white%22%29%3B%0A%09addTextLabels%28%29%3B%0A%09drawGraph%28%29%3B%0A%09addMouseInteraction%28%29%3B%0A%7D&css=canvas%20%7B%0A%09border%3A%201px%20solid%20silver%3B%0A%7D&html=%3Cscript%20src%3D%27https%3A%2F%2Fapp.exorciser.ch%2Flib%2Fp5.js%27%3E%3C%2Fscript%3E&height=360px#Histogram2}}
 </WRAP>
@@ Zeile 41: / Zeile 41: @@
 == ✍ Auftrag ==
   - Überlege dir ergänzend zur Fischlänge eine zusätzliche Messgrösse, welche dein Fischsortierapparat messen soll. Die Messgrösse sollte jedoch möglichst einfach zu messen sein. Kreative Lösungen sind durchaus erwünscht. Welche Messgrösse möchtest du verwenden und wie kann diese gemessen werden? Welche Messgrössen schlagen die anderen in deiner Klasse vor?{{gem/plain?0=N4XyA#d30dbfdcb7b73921}}
-++++Lösungsinspiration|Möglich wären z.B. Gewicht (wobei das vermutlich sehr ähnlich wie die Fischlänge wäre), Lichtreflexivität (Fisch mit Lampe beleuchten und die Helligkeit des reflektierten Lichts messen) etc.++++
+++++Lösungsinspiration|Möglich wären z. B. Gewicht (wobei das vermutlich sehr ähnlich wie die Fischlänge wäre), Lichtreflexivität (Fisch mit Lampe beleuchten und die Helligkeit des reflektierten Lichts messen) etc.++++
 </WRAP>
@@ Zeile 49: / Zeile 49: @@
 ⚠️ Ein Fischsortierapparat, der Hering und Lodde unterscheiden soll, braucht gut gewählte Messgrössen als Entscheidungsgrundlage. Wenn die Fischsorten aufgrund der Messgrössen nicht oder nur schlecht voneinander getrennt werden können, wird jeder noch so "intelligente" Apparat versagen.
-{{ :p:pasted:inputfeaturespace.png?176|}}📐✏️ Da du nun von jedem Fisch zwei Messgrössen hast, trägst du die Fische nicht mehr in ein Histogramm, sondern in ein Punktediagramm ein. Dazu werden wie in der Abbildung rechts auf einem Blatt zwei Achsen eingezeichnet. Jede Achse entspricht einer Messgrösse. Von jedem Fisch werden die beiden Messgrössen gemessen und der Fisch gemäss seinen Messwerten im Punktediagramm eingetragen.
+{{ :p:pasted:inputfeaturespace.png?176|}}📐✏️ Da du nun von jedem Fisch zwei Messgrössen hast, trägst du die Fische nicht mehr in ein Histogramm, sondern in ein Punktediagramm ein. Dazu werden wie in der Abbildung rechts auf einem Blatt zwei Achsen eingezeichnet. Jede Achse entspricht einer Messgrösse. Von jedem Fisch werden die beiden Messgrössen gemessen und der Fisch wird gemäss seinen Messwerten im Punktediagramm eingetragen.
 Für den nächsten Auftrag hast du bereits zufällig je 12 Heringe und 12 Lodde ausgewählt, vermessen und in das untenstehende Punktediagramm eingetragen - die Heringe als blaue ''x'', die Lodde als grüne ''◯''.
-🙂 Sieht gar nicht so schlecht aus, auf den ersten Blick lassen sich die zwei Fischsorten fast überall gut voneinander trennen, du hast vernünftige Messgrössen gewählt!
+🙂 Sieht gar nicht so schlecht aus. Auf den ersten Blick lassen sich die zwei Fischsorten fast überall gut voneinander trennen, du hast vernünftige Messgrössen gewählt!
 <WRAP center round box >
 == ✍ Auftrag ==
-  - Wenn du mit der Maus in die Grafik unten, links klickst, kannst du eine rote Linie / Kurve zeichnen. Mit dem Button ''▶Run'' kannst du die Linie wieder löschen. Versuche eine Linie / Kurve zu zeichnen, welche Hering von Lodde möglichst gut trennt.\\ ⚠️ iPad: Auf iPads undbedingt zum Zeichnen auf den {{20250606-115743.png}}-Button klicken (macht die Anzeige bildschirmgross, das verhindert, dass sich beim Zeichnen die Webseite mitbewegt).
+  - Wenn du mit der Maus in die Grafik unten, links klickst, kannst du eine rote Linie / Kurve zeichnen. Mit dem Button ''▶Run'' kannst du die Linie wieder löschen. Versuche, eine Linie / Kurve zu zeichnen, welche Hering von Lodde möglichst gut trennt.\\ ⚠️ iPad: Auf iPads unbedingt zum Zeichnen auf den {{20250606-115743.png}}-Button klicken (macht die Anzeige bildschirmgross, das verhindert, dass sich beim Zeichnen die Webseite mitbewegt).
   - Wenn du mit deiner Linie zufrieden bist, so klicke auf den Button. Es erscheint rechts eine neue Grafik mit 24 weiteren, zufällig ausgewählten Fischen.
-  - In der linken Grafik hast du deine Linie um die Fische herum gezeichnet - die Fische in der linken Grafik nennen wir deshalb "Trainingsfische". In der rechten Grafik siehst du, wie gut deine Linie bezüglich den weiteren Fischen abschneidet - die Fische in der rechten Grafik nennen wir deshalb "Validationsfische". Halte im Textfeld fest, wie viele Trainingsfische und wie viele Validationsfische du mit deiner Linie falsch klassifizierst hast. {{gem/plain?0=N4XyA#ab24b6a53e67c5b3}}
+  - In der linken Grafik hast du deine Linie um die Fische herum gezeichnet - die Fische in der linken Grafik nennen wir deshalb "Trainingsfische". In der rechten Grafik siehst du, wie gut deine Linie bezüglich der weiteren Fische abschneidet - die Fische in der rechten Grafik nennen wir deshalb "Validationsfische". Halte im Textfeld fest, wie viele Trainingsfische und wie viele Validationsfische du mit deiner Linie falsch klassifiziert hast. {{gem/plain?0=N4XyA#ab24b6a53e67c5b3}}
   - Klicke auf ''▶Run'' und zeichne nun eine Linie, welche die Trainings- UND die Validationsfische möglichst gut klassifiziert. Halte wiederum fest, wie viele Trainings- und wie viele Validationsfische falsch zugeordnet werden. {{gem/plain?0=N4XyA#f895b2f0dc7e3236}}
 {{exorciser/jspg?javascript=%2F%2F%20%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%0A%2F%2F%20CONSTANTS%20AND%20GLOBAL%20VARIABLES%0A%2F%2F%20%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%0A%0A%0A%2F%2F%20constants%0Aconst%20DATA_RANGE%20%3D%2010%3B%0Aconst%20DATA_WINDOW_SIZE%20%3D%20200%3B%0Aconst%20DATA_SCALE%20%3D%20Math.round%28DATA_WINDOW_SIZE%20%2F%20DATA_RANGE%29%3B%0Aconst%20SYMBOL_SIZE%20%3D%204%3B%0Aconst%20BUTTON_WIDTH%20%3D%20150%3B%0Aconst%20BUTTON_HEIGHT%20%3D%2050%3B%0A%0A%2F%2F%20training%20data%0Aconst%20TRAIN_INPUT%20%3D%20%5B%0A%09%5B2.5%2C%206.0%5D%2C%0A%09%5B3.5%2C%201.5%5D%2C%0A%09%5B3.5%2C%204.0%5D%2C%0A%09%5B4.0%2C%206.0%5D%2C%0A%09%5B4.0%2C%207.0%5D%2C%0A%09%5B4.5%2C%203.0%5D%2C%0A%09%5B5.0%2C%205.0%5D%2C%0A%09%5B5.5%2C%206.0%5D%2C%0A%09%5B6.5%2C%203.0%5D%2C%0A%09%5B7.0%2C%205.5%5D%2C%0A%09%5B7.5%2C%204.0%5D%2C%0A%09%5B8.5%2C%205.5%5D%2C%0A%09%5B1.5%2C%203.0%5D%2C%0A%09%5B1.5%2C%204.5%5D%2C%0A%09%5B1.5%2C%207.0%5D%2C%0A%09%5B2.0%2C%201.5%5D%2C%0A%09%5B3.0%2C%203.0%5D%2C%0A%09%5B3.0%2C%205.5%5D%2C%0A%09%5B3.0%2C%206.5%5D%2C%0A%09%5B4.0%2C%208.5%5D%2C%0A%09%5B4.5%2C%206.5%5D%2C%0A%09%5B6.5%2C%207.5%5D%2C%0A%09%5B8.0%2C%206.5%5D%2C%0A%09%5B8.0%2C%208.5%5D%0A%5D%3B%0Aconst%20TRAIN_LABEL%20%3D%20%5B0%2C%200%2C%200%2C%200%2C%200%2C%200%2C%200%2C%200%2C%200%2C%200%2C%200%2C%200%2C%201%2C%201%2C%201%2C%201%2C%201%2C%201%2C%201%2C%201%2C%201%2C%201%2C%201%2C%201%5D%3B%0A%0A%2F%2F%20validation%20data%0Aconst%20VALID_INPUT%20%3D%20%5B%0A%09%5B2.5%2C%207.0%5D%2C%0A%09%5B3.5%2C%201.0%5D%2C%0A%09%5B3.5%2C%207.0%5D%2C%0A%09%5B4.0%2C%203.5%5D%2C%0A%09%5B4.5%2C%206.5%5D%2C%0A%09%5B4.5%2C%202.5%5D%2C%0A%09%5B4.5%2C%205.0%5D%2C%0A%09%5B6.0%2C%202.5%5D%2C%0A%09%5B6.0%2C%204.5%5D%2C%0A%09%5B6.5%2C%205.5%5D%2C%0A%09%5B7.5%2C%204.5%5D%2C%0A%09%5B8.5%2C%205.0%5D%2C%0A%09%5B1.5%2C%205.0%5D%2C%0A%09%5B1.5%2C%206.5%5D%2C%0A%09%5B2.0%2C%201.5%5D%2C%0A%09%5B2.5%2C%203.5%5D%2C%0A%09%5B2.5%2C%206.0%5D%2C%0A%09%5B3.5%2C%206.0%5D%2C%0A%09%5B4.0%2C%208.0%5D%2C%0A%09%5B4.0%2C%207.0%5D%2C%0A%09%5B5.5%2C%208.5%5D%2C%0A%09%5B6.5%2C%207.0%5D%2C%0A%09%5B7.5%2C%208.5%5D%2C%0A%09%5B8.5%2C%207.0%5D%0A%5D%3B%0Aconst%20VALID_LABEL%20%3D%20%5B0%2C%200%2C%200%2C%200%2C%200%2C%200%2C%200%2C%200%2C%200%2C%200%2C%200%2C%200%2C%201%2C%201%2C%201%2C%201%2C%201%2C%201%2C%201%2C%201%2C%201%2C%201%2C%201%2C%201%5D%3B%0A%0A%2F%2F%20variables%0Alet%20showValid%20%3D%20false%3B%0Alet%20trainBuffer%2C%20validBuffer%2C%20decisionBuffer%2C%20buttonBuffer%3B%0A%0A%0A%0A%2F%2F%20%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%0A%2F%2F%20FUNCTIONS%0A%2F%2F%20%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%0A%0A%0A%2F%2F%0A%2F%2F%20draw%20data%20in%20graphic%20buffer%0A%2F%2F%0Afunction%20drawDataInBuffer%28inputData%2C%20outputData%2C%20buffer%29%20%7B%0A%09buffer.noFill%28%29%3B%0A%09buffer.strokeWeight%28SYMBOL_SIZE%20%2F%202%29%3B%0A%09buffer.rect%280%2C%200%2C%20DATA_WINDOW_SIZE%2C%20DATA_WINDOW_SIZE%29%3B%0A%09for%20%28i%20%3D%200%3B%20i%20%3C%20inputData.length%3B%20i%2B%2B%29%20%7B%0A%09%09if%20%28outputData%5Bi%5D%20%3D%3D%3D%201%29%20%7B%0A%09%09%09%2F%2F%20green%20circle%20for%20output%20label%20%3D%3D%3D%201%0A%09%09%09buffer.stroke%28%22green%22%29%3B%0A%09%09%09buffer.circle%28DATA_SCALE%20%2a%20inputData%5Bi%5D%5B0%5D%2C%20DATA_SCALE%20%2a%20%2810%20-%20inputData%5Bi%5D%5B1%5D%29%2C%202%20%2a%20SYMBOL_SIZE%29%3B%0A%09%09%7D%20else%20%7B%0A%09%09%09%2F%2F%20blue%20cross%20for%20output%20label%20%3D%3D%3D%200%0A%09%09%09buffer.stroke%28%22blue%22%29%3B%0A%09%09%09buffer.line%28DATA_SCALE%20%2a%20inputData%5Bi%5D%5B0%5D%20%2B%20SYMBOL_SIZE%2C%20DATA_SCALE%20%2a%20%2810%20-%20inputData%5Bi%5D%5B1%5D%29%20%2B%20SYMBOL_SIZE%2C%20DATA_SCALE%20%2a%20inputData%5Bi%5D%5B0%5D%20-%20SYMBOL_SIZE%2C%20DATA_SCALE%20%2a%20%2810%20-%20inputData%5Bi%5D%5B1%5D%29%20-%20SYMBOL_SIZE%29%3B%0A%09%09%09buffer.line%28DATA_SCALE%20%2a%20inputData%5Bi%5D%5B0%5D%20%2B%20SYMBOL_SIZE%2C%20DATA_SCALE%20%2a%20%2810%20-%20inputData%5Bi%5D%5B1%5D%29%20-%20SYMBOL_SIZE%2C%20DATA_SCALE%20%2a%20inputData%5Bi%5D%5B0%5D%20-%20SYMBOL_SIZE%2C%20DATA_SCALE%20%2a%20%2810%20-%20inputData%5Bi%5D%5B1%5D%29%20%2B%20SYMBOL_SIZE%29%3B%0A%09%09%7D%0A%09%7D%0A%7D%0A%0A%0A%2F%2F%0A%2F%2F%20draw%20buffer%20in%20graphic%20buffer%0A%2F%2F%0Afunction%20drawButtonInBuffer%28buffer%29%20%7B%0A%09%2F%2F%20create%20button%20rectangle%0A%09buffer.stroke%28%22black%22%29%3B%0A%09buffer.strokeWeight%281%29%3B%0A%09buffer.fill%28240%2C%20240%2C%20240%29%3B%0A%09buffer.rect%28DATA_WINDOW_SIZE%20%2F%202%20-%20BUTTON_WIDTH%20%2F%202%2C%20DATA_WINDOW_SIZE%20%2F%202%20-%20BUTTON_HEIGHT%20%2F%202%2C%20BUTTON_WIDTH%2C%20BUTTON_HEIGHT%2C%2010%29%3B%0A%09%2F%2F%20label%20button%0A%09buffer.textSize%28SYMBOL_SIZE%20%2a%204%29%3B%0A%09buffer.textAlign%28CENTER%2C%20CENTER%29%3B%0A%09buffer.noStroke%28%29%3B%0A%09buffer.fill%28%22black%22%29%3B%0A%09buffer.text%28%221.%20Zeichne%20links%5Cn2.%20Klicke%20hier%22%2C%20DATA_WINDOW_SIZE%20%2F%202%2C%20DATA_WINDOW_SIZE%20%2F%202%29%3B%0A%7D%0A%0A%0A%2F%2F%0A%2F%2F%20update%20buffer%20in%20graphic%20buffer%0A%2F%2F%0Afunction%20updateButton%28buffer%29%20%7B%0A%09if%20%28mouseX%20%3E%3D%203%20%2a%20DATA_WINDOW_SIZE%20%2F%202%20-%20BUTTON_WIDTH%20%2F%202%20%26%26%20mouseX%20%3C%3D%203%20%2a%20DATA_WINDOW_SIZE%20%2F%202%20%2B%20BUTTON_WIDTH%20%2F%202%20%26%26%20mouseY%20%3E%3D%20DATA_WINDOW_SIZE%20%2F%202%20-%20BUTTON_HEIGHT%20%2F%202%20%26%26%20mouseY%20%3C%3D%20DATA_WINDOW_SIZE%20%2F%202%20%2B%20BUTTON_HEIGHT%20%2F%202%29%20%7B%0A%09%09%2F%2F%20create%20button%20rectangle%0A%09%09buffer.stroke%28%22black%22%29%3B%0A%09%09buffer.strokeWeight%281%29%3B%0A%09%09buffer.fill%28220%2C%20220%2C%20220%29%3B%0A%09%09buffer.rect%28DATA_WINDOW_SIZE%20%2F%202%20-%20BUTTON_WIDTH%20%2F%202%2C%20DATA_WINDOW_SIZE%20%2F%202%20-%20BUTTON_HEIGHT%20%2F%202%2C%20BUTTON_WIDTH%2C%20BUTTON_HEIGHT%2C%2010%29%3B%0A%09%09%2F%2F%20label%20button%0A%09%09buffer.textSize%28SYMBOL_SIZE%20%2a%204%29%3B%0A%09%09buffer.textAlign%28CENTER%2C%20CENTER%29%3B%0A%09%09buffer.noStroke%28%29%3B%0A%09%09buffer.fill%28%22black%22%29%3B%0A%09%09buffer.text%28%221.%20Zeichne%20links%5Cn2.%20Klicke%20hier%22%2C%20DATA_WINDOW_SIZE%20%2F%202%2C%20DATA_WINDOW_SIZE%20%2F%202%29%3B%0A%09%09if%20%28mouseIsPressed%29%20%7B%0A%09%09%09showValid%20%3D%20true%3B%0A%09%09%7D%0A%09%7D%20else%20%7B%0A%09%09drawButtonInBuffer%28buffer%29%3B%0A%09%7D%0A%7D%0A%0A%0A%0A%2F%2F%20%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%0A%2F%2F%20MAIN%20PROGRAM%0A%2F%2F%20%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%2a%0A%0A%0A%2F%2F%0A%2F%2F%20p5.js%20setup%28%29%0A%2F%2F%0Afunction%20setup%28%29%20%7B%0A%09%2F%2F%20create%20canvas%20for%20traning%20and%20validation%20feature%20space%0A%09createCanvas%282%20%2a%20DATA_WINDOW_SIZE%2C%20DATA_WINDOW_SIZE%29%3B%0A%09%2F%2F%20set%20text%20properties%0A%09noStroke%28%29%3B%0A%09textSize%28SYMBOL_SIZE%20%2a%204%29%3B%0A%09%2F%2F%20create%20all%20buffers%0A%09trainBuffer%20%3D%20createGraphics%28DATA_WINDOW_SIZE%2C%20DATA_WINDOW_SIZE%29%3B%0A%09validBuffer%20%3D%20createGraphics%28DATA_WINDOW_SIZE%2C%20DATA_WINDOW_SIZE%29%3B%0A%09decisionBuffer%20%3D%20createGraphics%28DATA_WINDOW_SIZE%2C%20DATA_WINDOW_SIZE%29%3B%0A%09buttonBuffer%20%3D%20createGraphics%28DATA_WINDOW_SIZE%2C%20DATA_WINDOW_SIZE%29%3B%0A%09%2F%2F%20draw%20training%20and%20validation%20data%0A%09drawDataInBuffer%28TRAIN_INPUT%2C%20TRAIN_LABEL%2C%20trainBuffer%29%3B%0A%09drawDataInBuffer%28VALID_INPUT%2C%20VALID_LABEL%2C%20validBuffer%29%3B%0A%09%2F%2F%20set%20decision%20boundary%20properties%0A%09decisionBuffer.strokeWeight%282%29%3B%0A%09decisionBuffer.stroke%28%22red%22%29%3B%0A%09%2F%2F%20create%20button%0A%09drawButtonInBuffer%28buttonBuffer%29%3B%0A%7D%0A%0A%0A%2F%2F%0A%2F%2F%20p5.js%20draw%28%29%0A%2F%2F%0Afunction%20draw%28%29%20%7B%0A%09%2F%2F%20clear%20everything%0A%09background%28%22white%22%29%3B%0A%09%2F%2F%20if%20mouse%20is%20pressed%20draw%20decision%20boundary%20in%20buffer%0A%09if%20%28mouseIsPressed%20%26%26%20mouseX%20%3E%200%20%26%26%20mouseX%20%3C%20DATA_WINDOW_SIZE%20%26%26%20mouseY%20%3E%200%20%26%26%20mouseY%20%3C%20DATA_WINDOW_SIZE%29%20%7B%0A%09%09decisionBuffer.line%28pmouseX%2C%20pmouseY%2C%20mouseX%2C%20mouseY%29%3B%0A%09%7D%0A%09%2F%2F%20draw%20all%20buffers%0A%09image%28trainBuffer%2C%200%2C%200%29%3B%0A%09image%28decisionBuffer%2C%200%2C%200%29%3B%0A%09if%20%28showValid%29%20%7B%0A%09%09image%28validBuffer%2C%20DATA_WINDOW_SIZE%2C%200%29%3B%0A%09%09image%28decisionBuffer%2C%20DATA_WINDOW_SIZE%2C%200%29%3B%0A%09%09text%28%22Training%22%2C%202%20%2a%20SYMBOL_SIZE%2C%206%20%2a%20SYMBOL_SIZE%29%3B%0A%09%09text%28%22Validation%22%2C%20DATA_WINDOW_SIZE%20%2B%202%20%2a%20SYMBOL_SIZE%2C%206%20%2a%20SYMBOL_SIZE%29%3B%0A%09%7D%20else%20%7B%0A%09%09updateButton%28buttonBuffer%29%3B%0A%09%09image%28buttonBuffer%2C%20DATA_WINDOW_SIZE%2C%200%29%3B%0A%09%7D%0A%7D&css=undefined&html=%3Cscript%20src%3D%22https%3A%2F%2Fapp.exorciser.ch%2Flib%2Fp5.js%22%3E%3C%2Fscript%3E&height=360px#DecisionBoundary}}