Navigation: [[:p:ki:fische1|🐟 Teil 1]] - [[:p:ki:fische2|🐟 Teil 2]] - [[:p:ki:fische3|🐟 Teil 3]] - [[:p:ki:fische4|🐟 Teil 4]] - [[:p:ki:fische_ki|🐟 Zusatzkapitel]] {{gem/mgr}}{{ gem/pageinfo}} ====== 🐟 Künstliche Intelligenz für echte Fische 2 ====== 🎯 In dieser Reihe erfährst du, wie eine künstliche Intelligenz automatisiert Daten auswertet und beurteilt. Dazu begibst du dich auf raue See. \\ ~~INTOC~~ \\ [{{ :p:pasted:histogram1.png?350px|Seltsames Histogramm((eigene Darstellung, [[https://creativecommons.org/publicdomain/zero/1.0/deed.de|CC0 1.0]])) }}] ===== -#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 Threshold (rote Linie) wird vom Apparat als Lodde angesehen, alles rechts davon als Hering. Gemäss nebenstehenden Histogramm arbeitet der Apparat mit einem Threshold 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. \\ ===== - Versuch mit einer Messgrösse ====== == ✍ 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. - Wie gut kann dein Fischsortierapparat jetzt Hering von Lodde unterscheiden? Prüfe mit dem roten Threshold, welches 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 Thesholds 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}} \\ ===== - Eine zweite Messgrösse muss her! ====== ⚠️ Wie du gesehen hast, brauchst du für eine brauchbare Klassifikation eine gute Datengrundlage. Ohne repräsentative Datengrundlage wird jeder noch so "intelligente" Apparat versagen. 😭 Leider lassen sich in unserem Beispiel Hering und Lodde nicht mit einer Messgrösse (der Länge) genügend voneinander unterscheiden. 💡 Aber vielleicht lassen sich Hering von Lodde mithilfe von mehreren Messgrössen besser unterscheiden als mit nur einer. Du nimmst daher erst einmal eine zweite Messgrösse hinzu. Auf eine dritte, vierte usw. verzichtest du vorerst, um das Ganze nicht zu kompliziert zu machen. == ✍ 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.++++ \\ ===== - Du zeichnest deinen eigenen Klassifikator ===== ⚠️ 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. 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! == ✍ 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. - 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}} - 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}} \\ ===== - Fortsetzung folgt... ====== 🤔 Aber wie genau sieht nun eine Linie aus, welche Heringe von Lodde möglichst gut trennt? Und wie gross ist der Fehler, der dabei entsteht? 👩‍🦰 Wie es mit Sigrún und dem Fischsortierapparat weitergeht, erfährst du im [[:p:ki:fische3|🐟 Teil 3]] \\ === Eigene Notizen === {{gem/quill#65532da2fbdc7ab2}}