Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| Beide Seiten der vorigen RevisionVorhergehende Überarbeitung | |
| p:ki:machinelearning4 [2024/04/22 10:00] – [1.3 Lernen der Gewichte] Ralf Kretzschmar | p:ki:machinelearning4 [2024/05/02 08:57] (aktuell) – Tscherter, Vincent |
|---|
| - Markiere diesen Auftrag als "Erledigt!". | - Markiere diesen Auftrag als "Erledigt!". |
| |
| {{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%20X_CANVAS_SIZE%20%3D%20500%3B%0Aconst%20Y_CANVAS_SIZE%20%3D%20220%3B%0Aconst%20TEXT_SIZE%20%3D%2018%3B%0Aconst%20SEQUENCE_LENGTH%20%3D%2020%3B%0A%0A%0A%2F%2F%20global%20variables%0Alet%20button%2C%20isButtonStart%3B%0Alet%20counter%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%20FOR%20VISUALISATION%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%20input%0A%2F%2F%0Afunction%20drawInput%28color%29%20%7B%0A%09%2F%2F%20input%20labels%0A%09noStroke%28%29%3B%0A%09fill%28color%29%3B%0A%09text%28%22x%22%2C%2010%2C%2060%29%3B%0A%09text%28%221%22%2C%2010%20%2B%209%2C%2060%20%2B%206%29%3B%0A%09text%28%22x%22%2C%2010%2C%20120%29%3B%0A%09text%28%222%22%2C%2010%20%2B%209%2C%20120%20%2B%206%29%3B%0A%09%2F%2F%20label%0A%09text%28%22x%22%2C%2010%2C%20190%29%3B%0A%09text%28%22h%22%2C%2010%20%2B%2010%2C%20190%20%2B%206%29%3B%0A%09%2F%2F%20lines%0A%09stroke%28color%29%3B%0A%09strokeWeight%282%29%3B%0A%09line%2830%2C%2060%2C%2050%2C%2060%29%3B%0A%09line%2830%2C%20120%2C%2050%2C%20120%29%3B%0A%7D%0A%0A%0A%2F%2F%0A%2F%2F%20draw%20input%20layer%0A%2F%2F%0Afunction%20drawInputLayer%28color%29%20%7B%0A%09%2F%2F%20circles%0A%09stroke%28color%29%3B%0A%09strokeWeight%282%29%3B%0A%09noFill%28%29%3B%0A%09circle%2870%2C%2060%2C%2040%29%3B%0A%09circle%2870%2C%20120%2C%2040%29%3B%0A%7D%0A%0A%0A%2F%2F%0A%2F%2F%20draw%20weight%20layer%201%0A%2F%2F%0Afunction%20drawWeightLayer1%28color%29%20%7B%0A%09%2F%2F%20lines%0A%09stroke%28color%29%3B%0A%09strokeWeight%282%29%3B%0A%09line%2890%2C%2060%2C%20130%2C%2030%29%3B%0A%09line%2890%2C%2060%2C%20130%2C%2090%29%3B%0A%09line%2890%2C%2060%2C%20130%2C%20150%29%3B%0A%09line%2890%2C%20120%2C%20130%2C%2030%29%3B%0A%09line%2890%2C%20120%2C%20130%2C%2090%29%3B%0A%09line%2890%2C%20120%2C%20130%2C%20150%29%3B%0A%09%2F%2F%20label%0A%09noStroke%28%29%3B%0A%09fill%28color%29%3B%0A%09text%28%22v%22%2C%20100%2C%20190%29%3B%0A%09text%28%22hi%22%2C%20100%20%2B%2010%2C%20190%20%2B%206%29%3B%0A%7D%0A%0A%0A%2F%2F%0A%2F%2F%20draw%20hidden%20layer%0A%2F%2F%0Afunction%20drawHiddenLayer%28color%29%20%7B%0A%09%2F%2F%20circles%0A%09stroke%28color%29%3B%0A%09strokeWeight%282%29%3B%0A%09noFill%28%29%3B%0A%09circle%28150%2C%2030%2C%2040%29%3B%0A%09circle%28150%2C%2090%2C%2040%29%3B%0A%09circle%28150%2C%20150%2C%2040%29%3B%0A%09%2F%2F%20label%0A%09noStroke%28%29%3B%0A%09fill%28color%29%3B%0A%09text%28%22%CF%86%22%2C%20150%2C%20190%29%3B%0A%09text%28%22i%22%2C%20150%20%2B%20TEXT_SIZE%20%2F%202%2C%20190%20%2B%20TEXT_SIZE%20%2F%203%29%3B%0A%7D%0A%0A%0A%2F%2F%0A%2F%2F%20draw%20weight%20layer%202%0A%2F%2F%0Afunction%20drawWeightLayer2%28color%29%20%7B%0A%09%2F%2F%20lines%0A%09stroke%28color%29%3B%0A%09strokeWeight%282%29%3B%0A%09line%28170%2C%2030%2C%20210%2C%2060%29%3B%0A%09line%28170%2C%2090%2C%20210%2C%2060%29%3B%0A%09line%28170%2C%20150%2C%20210%2C%2060%29%3B%0A%09line%28170%2C%2030%2C%20210%2C%20120%29%3B%0A%09line%28170%2C%2090%2C%20210%2C%20120%29%3B%0A%09line%28170%2C%20150%2C%20210%2C%20120%29%3B%0A%09%2F%2F%20label%0A%09noStroke%28%29%3B%0A%09fill%28color%29%3B%0A%09text%28%22w%22%2C%20190%2C%20190%29%3B%0A%09text%28%22ij%22%2C%20190%20%2B%2010%2C%20190%20%2B%206%29%3B%0A%7D%0A%0A%0A%2F%2F%0A%2F%2F%20draw%20output%20layer%0A%2F%2F%0Afunction%20drawOutputLayer%28color%29%20%7B%0A%09%2F%2F%20circles%0A%09stroke%28color%29%3B%0A%09strokeWeight%282%29%3B%0A%09noFill%28%29%3B%0A%09circle%28230%2C%2060%2C%2040%29%3B%0A%09circle%28230%2C%20120%2C%2040%29%3B%0A%09%2F%2F%20label%0A%09noStroke%28%29%3B%0A%09fill%28color%29%3B%0A%09text%28%22%F0%9D%9C%91%22%2C%20230%2C%20190%29%3B%0A%09text%28%22j%22%2C%20230%20%2B%209%2C%20190%20%2B%206%29%3B%0A%7D%0A%0A%2F%2F%0A%2F%2F%20draw%20output%20values%0A%2F%2F%0Afunction%20drawOutput%28color%29%20%7B%0A%09%2F%2F%20output%20labels%0A%09noStroke%28%29%3B%0A%09fill%28color%29%3B%0A%09text%28%22y%22%2C%20280%2C%2060%29%3B%0A%09text%28%221%22%2C%20280%20%2B%209%2C%2060%20%2B%206%29%3B%0A%09text%28%22y%22%2C%20280%2C%20120%29%3B%0A%09text%28%222%22%2C%20280%20%2B%209%2C%20120%20%2B%206%29%3B%0A%09%2F%2F%20label%0A%09text%28%22y%22%2C%20280%2C%20190%29%3B%0A%09text%28%22j%22%2C%20280%20%2B%208%2C%20190%20%2B%206%29%3B%0A%09%2F%2F%20lines%0A%09stroke%28color%29%3B%0A%09strokeWeight%282%29%3B%0A%09line%28250%2C%2060%2C%20270%2C%2060%29%3B%0A%09line%28250%2C%20120%2C%20270%2C%20120%29%3B%0A%7D%0A%0A%0A%2F%2F%0A%2F%2F%20draw%20error%0A%2F%2F%0Afunction%20drawError%28color%29%20%7B%0A%09%2F%2F%20desired%20output%20labels%0A%09noStroke%28%29%3B%0A%09fill%28color%29%3B%0A%09text%28%22d%22%2C%20360%2C%2060%29%3B%0A%09text%28%221%22%2C%20360%20%2B%2010%2C%2060%20%2B%206%29%3B%0A%09text%28%22d%22%2C%20360%2C%20120%29%3B%0A%09text%28%222%22%2C%20360%20%2B%2010%2C%20120%20%2B%206%29%3B%0A%09%2F%2F%20label%0A%09text%28%22d%22%2C%20360%2C%20190%29%3B%0A%09text%28%22j%22%2C%20360%20%2B%209%2C%20190%20%2B%206%29%3B%0A%09%2F%2F%20error%20text%0A%09text%28%22Fehler%22%2C%20325%2C%2090%29%0A%09%2F%2F%20lines%0A%09stroke%28color%29%3B%0A%09strokeWeight%282%29%3B%0A%09fill%28color%29%3B%0A%09line%28310%2C%2060%2C%20340%2C%2060%29%3B%0A%09line%28310%2C%20120%2C%20340%2C%20120%29%3B%0A%09triangle%28310%2C%2060%2C%20316%2C%2057%2C%20316%2C%2063%29%3B%0A%09triangle%28340%2C%2060%2C%20334%2C%2057%2C%20334%2C%2063%29%3B%0A%09triangle%28310%2C%20120%2C%20316%2C%20117%2C%20316%2C%20123%29%3B%0A%09triangle%28340%2C%20120%2C%20334%2C%20117%2C%20334%2C%20123%29%3B%0A%7D%0A%0A%0A%2F%2F%0A%2F%2F%20let%20button%20start%20and%20stop%20animation%0A%2F%2F%0Afunction%20toggleButton%28%29%20%7B%0A%09if%20%28isButtonStart%29%20%7B%0A%09%09console.clear%28%29%3B%0A%09%09isButtonStart%20%3D%20false%3B%0A%09%09button.html%28%22Start%22%29%3B%0A%09%09button.style%28%22border-color%22%2C%20%22green%22%29%3B%0A%09%09button.style%28%22background%22%2C%20%22lightgreen%22%29%3B%0A%09%09frameRate%280%29%3B%0A%09%7D%20else%20%7B%0A%09%09frameRate%281%29%3B%0A%09%09isButtonStart%20%3D%20true%3B%0A%09%09button.html%28%22Stop%22%29%3B%0A%09%09button.style%28%22border-color%22%2C%20%22red%22%29%3B%0A%09%09button.style%28%22background%22%2C%20%22orange%22%29%3B%0A%09%09counter%20%3D%201%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%20%0A%09createCanvas%28X_CANVAS_SIZE%2C%20Y_CANVAS_SIZE%29%3B%0A%0A%09%2F%2F%20counter%0A%09counter%20%3D%200%3B%0A%0A%09%2F%2F%20create%20button%0A%09isButtonStart%20%3D%20false%3B%0A%09button%20%3D%20createButton%28%22Start%22%29%3B%0A%09button.size%2880%2C%2030%29%3B%0A%09button.position%28410%2C%2020%29%3B%0A%09%2F%2F%20cosmetics%0A%09button.style%28%22font-size%22%2C%20%2220px%22%29%3B%0A%09button.style%28%22border-radius%22%2C%20%2220px%22%29%3B%0A%09button.style%28%22color%22%2C%20%22black%22%29%3B%0A%09button.style%28%22border-color%22%2C%20%22green%22%29%3B%0A%09button.style%28%22background%22%2C%20%22lightgreen%22%29%3B%0A%09%2F%2F%20add%20button%20functionality%0A%09button.mouseClicked%28toggleButton%29%3B%0A%0A%09%2F%2F%20set%20text%20properties%0A%09textSize%28TEXT_SIZE%29%3B%0A%09textAlign%28CENTER%2C%20CENTER%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%0A%09%2F%2F%20wait%20for%20start%0A%09if%20%28counter%20%3D%3D%3D%200%29%20%7B%0A%09%09frameRate%280%29%3B%0A%09%7D%0A%09%2F%2F%20speed%20control%0A%09if%20%28counter%20%3D%3D%3D%206%29%20%7B%0A%09%09frameRate%280.5%29%3B%0A%09%7D%0A%09if%20%28counter%20%3D%3D%3D%207%29%20%7B%0A%09%09frameRate%280.25%29%3B%0A%09%7D%0A%09if%20%28counter%20%3D%3D%3D%208%29%20%7B%0A%09%09frameRate%281%29%3B%0A%09%7D%0A%09%2F%2F%20stop%20animation%0A%09if%20%28counter%20%3D%3D%3D%2020%29%20%7B%0A%09%09toggleButton%28%29%3B%0A%09%7D%0A%0A%09%2F%2F%20color%20animation%0A%09if%20%28counter%20%3D%3D%3D%201%29%20%7B%0A%09%09console.log%28%22Vorw%C3%A4rtsschritt%3A%20x%20-%3E%20y%22%29%3B%0A%09%09drawInput%28%22cyan%22%29%3B%0A%09%09drawInputLayer%28%22cyan%22%29%3B%0A%09%7D%20else%20%7B%0A%09%09drawInput%28%22black%22%29%3B%0A%09%09drawInputLayer%28%22black%22%29%3B%0A%09%7D%0A%09if%20%28counter%20%3D%3D%3D%202%29%20%7B%0A%09%09drawWeightLayer1%28%22cyan%22%29%3B%0A%09%7D%20else%20if%20%28counter%20%3D%3D%3D%2014%20%7C%7C%20counter%20%3D%3D%3D%2016%29%20%7B%0A%09%09drawWeightLayer1%28%22red%22%29%3B%0A%09%7D%20else%20if%20%28counter%20%3D%3D%3D%2015%29%20%7B%0A%09%09drawWeightLayer1%28%22yellow%22%29%3B%0A%09%7D%20else%20%7B%0A%09%09drawWeightLayer1%28%22black%22%29%3B%0A%09%7D%0A%09if%20%28counter%20%3D%3D%3D%203%29%20%7B%0A%09%09drawHiddenLayer%28%22cyan%22%29%3B%0A%09%7D%20else%20if%20%28counter%20%3D%3D%3D%2013%29%20%7B%0A%09%09drawHiddenLayer%28%22red%22%29%3B%0A%09%7D%20else%20%7B%0A%09%09drawHiddenLayer%28%22black%22%29%3B%0A%09%7D%0A%09if%20%28counter%20%3D%3D%3D%204%29%20%7B%0A%09%09drawWeightLayer2%28%22cyan%22%29%3B%0A%09%7D%20else%20if%20%28counter%20%3D%3D%3D%2010%20%7C%7C%20counter%20%3D%3D%3D%2012%29%20%7B%0A%09%09drawWeightLayer2%28%22red%22%29%3B%0A%09%7D%20else%20if%20%28counter%20%3D%3D%3D%2011%29%20%7B%0A%09%09drawWeightLayer2%28%22yellow%22%29%3B%0A%09%7D%20else%20%7B%0A%09%09drawWeightLayer2%28%22black%22%29%3B%0A%09%7D%0A%09if%20%28counter%20%3D%3D%3D%205%29%20%7B%0A%09%09drawOutputLayer%28%22cyan%22%29%3B%0A%09%7D%20else%20if%20%28counter%20%3D%3D%3D%209%29%20%7B%0A%09%09drawOutputLayer%28%22red%22%29%3B%0A%09%7D%20else%20%7B%0A%09%09drawOutputLayer%28%22black%22%29%3B%0A%09%7D%0A%09if%20%28counter%20%3D%3D%3D%206%29%20%7B%0A%09%09drawOutput%28%22cyan%22%29%3B%0A%09%7D%20else%20if%20%28counter%20%3D%3D%3D%207%20%7C%7C%20counter%20%3D%3D%3D%208%29%20%7B%0A%09%09if%20%28counter%20%3D%3D%3D%208%29%20%7B%0A%09%09%09console.log%28%22R%C3%BCckw%C3%A4rtsschritt%3A%20Passe%20Gewichte%20an%22%29%3B%0A%09%09%7D%0A%09%09drawOutput%28%22red%22%29%3B%0A%09%7D%20else%20%7B%0A%09%09drawOutput%28%22black%22%29%3B%0A%09%7D%0A%09if%20%28counter%20%3D%3D%3D%207%29%20%7B%0A%09%09console.log%28%22Berechne%20Fehler%22%29%3B%0A%09%09drawError%28%22red%22%29%3B%0A%09%7D%0A%0A%09%2F%2F%20increase%20counter%0A%09counter%20%3D%20counter%20%2B%201%3B%0A%7D&css=undefined&html=%3Cscript%20src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fp5%22%3E%3C%2Fscript%3E&height=400px#MulilayerPerceptron}} | {{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%20X_CANVAS_SIZE%20%3D%20500%3B%0Aconst%20Y_CANVAS_SIZE%20%3D%20220%3B%0Aconst%20TEXT_SIZE%20%3D%2018%3B%0Aconst%20SEQUENCE_LENGTH%20%3D%2020%3B%0A%0A%0A%2F%2F%20global%20variables%0Alet%20button%2C%20isButtonStart%3B%0Alet%20counter%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%20FOR%20VISUALISATION%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%20input%0A%2F%2F%0Afunction%20drawInput%28color%29%20%7B%0A%09%2F%2F%20input%20labels%0A%09noStroke%28%29%3B%0A%09fill%28color%29%3B%0A%09text%28%22x%22%2C%2010%2C%2060%29%3B%0A%09text%28%221%22%2C%2010%20%2B%209%2C%2060%20%2B%206%29%3B%0A%09text%28%22x%22%2C%2010%2C%20120%29%3B%0A%09text%28%222%22%2C%2010%20%2B%209%2C%20120%20%2B%206%29%3B%0A%09%2F%2F%20label%0A%09text%28%22x%22%2C%2010%2C%20190%29%3B%0A%09text%28%22h%22%2C%2010%20%2B%2010%2C%20190%20%2B%206%29%3B%0A%09%2F%2F%20lines%0A%09stroke%28color%29%3B%0A%09strokeWeight%282%29%3B%0A%09line%2830%2C%2060%2C%2050%2C%2060%29%3B%0A%09line%2830%2C%20120%2C%2050%2C%20120%29%3B%0A%7D%0A%0A%0A%2F%2F%0A%2F%2F%20draw%20input%20layer%0A%2F%2F%0Afunction%20drawInputLayer%28color%29%20%7B%0A%09%2F%2F%20circles%0A%09stroke%28color%29%3B%0A%09strokeWeight%282%29%3B%0A%09noFill%28%29%3B%0A%09circle%2870%2C%2060%2C%2040%29%3B%0A%09circle%2870%2C%20120%2C%2040%29%3B%0A%7D%0A%0A%0A%2F%2F%0A%2F%2F%20draw%20weight%20layer%201%0A%2F%2F%0Afunction%20drawWeightLayer1%28color%29%20%7B%0A%09%2F%2F%20lines%0A%09stroke%28color%29%3B%0A%09strokeWeight%282%29%3B%0A%09line%2890%2C%2060%2C%20130%2C%2030%29%3B%0A%09line%2890%2C%2060%2C%20130%2C%2090%29%3B%0A%09line%2890%2C%2060%2C%20130%2C%20150%29%3B%0A%09line%2890%2C%20120%2C%20130%2C%2030%29%3B%0A%09line%2890%2C%20120%2C%20130%2C%2090%29%3B%0A%09line%2890%2C%20120%2C%20130%2C%20150%29%3B%0A%09%2F%2F%20label%0A%09noStroke%28%29%3B%0A%09fill%28color%29%3B%0A%09text%28%22v%22%2C%20100%2C%20190%29%3B%0A%09text%28%22hi%22%2C%20100%20%2B%2010%2C%20190%20%2B%206%29%3B%0A%7D%0A%0A%0A%2F%2F%0A%2F%2F%20draw%20hidden%20layer%0A%2F%2F%0Afunction%20drawHiddenLayer%28color%29%20%7B%0A%09%2F%2F%20circles%0A%09stroke%28color%29%3B%0A%09strokeWeight%282%29%3B%0A%09noFill%28%29%3B%0A%09circle%28150%2C%2030%2C%2040%29%3B%0A%09circle%28150%2C%2090%2C%2040%29%3B%0A%09circle%28150%2C%20150%2C%2040%29%3B%0A%09%2F%2F%20label%0A%09noStroke%28%29%3B%0A%09fill%28color%29%3B%0A%09text%28%22%CF%86%22%2C%20150%2C%20190%29%3B%0A%09text%28%22i%22%2C%20150%20%2B%20TEXT_SIZE%20%2F%202%2C%20190%20%2B%20TEXT_SIZE%20%2F%203%29%3B%0A%7D%0A%0A%0A%2F%2F%0A%2F%2F%20draw%20weight%20layer%202%0A%2F%2F%0Afunction%20drawWeightLayer2%28color%29%20%7B%0A%09%2F%2F%20lines%0A%09stroke%28color%29%3B%0A%09strokeWeight%282%29%3B%0A%09line%28170%2C%2030%2C%20210%2C%2060%29%3B%0A%09line%28170%2C%2090%2C%20210%2C%2060%29%3B%0A%09line%28170%2C%20150%2C%20210%2C%2060%29%3B%0A%09line%28170%2C%2030%2C%20210%2C%20120%29%3B%0A%09line%28170%2C%2090%2C%20210%2C%20120%29%3B%0A%09line%28170%2C%20150%2C%20210%2C%20120%29%3B%0A%09%2F%2F%20label%0A%09noStroke%28%29%3B%0A%09fill%28color%29%3B%0A%09text%28%22w%22%2C%20190%2C%20190%29%3B%0A%09text%28%22ij%22%2C%20190%20%2B%2010%2C%20190%20%2B%206%29%3B%0A%7D%0A%0A%0A%2F%2F%0A%2F%2F%20draw%20output%20layer%0A%2F%2F%0Afunction%20drawOutputLayer%28color%29%20%7B%0A%09%2F%2F%20circles%0A%09stroke%28color%29%3B%0A%09strokeWeight%282%29%3B%0A%09noFill%28%29%3B%0A%09circle%28230%2C%2060%2C%2040%29%3B%0A%09circle%28230%2C%20120%2C%2040%29%3B%0A%09%2F%2F%20label%0A%09noStroke%28%29%3B%0A%09fill%28color%29%3B%0A%09text%28%22%F0%9D%9C%91%22%2C%20230%2C%20190%29%3B%0A%09text%28%22j%22%2C%20230%20%2B%209%2C%20190%20%2B%206%29%3B%0A%7D%0A%0A%2F%2F%0A%2F%2F%20draw%20output%20values%0A%2F%2F%0Afunction%20drawOutput%28color%29%20%7B%0A%09%2F%2F%20output%20labels%0A%09noStroke%28%29%3B%0A%09fill%28color%29%3B%0A%09text%28%22y%22%2C%20280%2C%2060%29%3B%0A%09text%28%221%22%2C%20280%20%2B%209%2C%2060%20%2B%206%29%3B%0A%09text%28%22y%22%2C%20280%2C%20120%29%3B%0A%09text%28%222%22%2C%20280%20%2B%209%2C%20120%20%2B%206%29%3B%0A%09%2F%2F%20label%0A%09text%28%22y%22%2C%20280%2C%20190%29%3B%0A%09text%28%22j%22%2C%20280%20%2B%208%2C%20190%20%2B%206%29%3B%0A%09%2F%2F%20lines%0A%09stroke%28color%29%3B%0A%09strokeWeight%282%29%3B%0A%09line%28250%2C%2060%2C%20270%2C%2060%29%3B%0A%09line%28250%2C%20120%2C%20270%2C%20120%29%3B%0A%7D%0A%0A%0A%2F%2F%0A%2F%2F%20draw%20error%0A%2F%2F%0Afunction%20drawError%28color%29%20%7B%0A%09%2F%2F%20desired%20output%20labels%0A%09noStroke%28%29%3B%0A%09fill%28color%29%3B%0A%09text%28%22d%22%2C%20360%2C%2060%29%3B%0A%09text%28%221%22%2C%20360%20%2B%2010%2C%2060%20%2B%206%29%3B%0A%09text%28%22d%22%2C%20360%2C%20120%29%3B%0A%09text%28%222%22%2C%20360%20%2B%2010%2C%20120%20%2B%206%29%3B%0A%09%2F%2F%20label%0A%09text%28%22d%22%2C%20360%2C%20190%29%3B%0A%09text%28%22j%22%2C%20360%20%2B%209%2C%20190%20%2B%206%29%3B%0A%09%2F%2F%20error%20text%0A%09text%28%22Fehler%22%2C%20325%2C%2090%29%0A%09%2F%2F%20lines%0A%09stroke%28color%29%3B%0A%09strokeWeight%282%29%3B%0A%09fill%28color%29%3B%0A%09line%28310%2C%2060%2C%20340%2C%2060%29%3B%0A%09line%28310%2C%20120%2C%20340%2C%20120%29%3B%0A%09triangle%28310%2C%2060%2C%20316%2C%2057%2C%20316%2C%2063%29%3B%0A%09triangle%28340%2C%2060%2C%20334%2C%2057%2C%20334%2C%2063%29%3B%0A%09triangle%28310%2C%20120%2C%20316%2C%20117%2C%20316%2C%20123%29%3B%0A%09triangle%28340%2C%20120%2C%20334%2C%20117%2C%20334%2C%20123%29%3B%0A%7D%0A%0A%0A%2F%2F%0A%2F%2F%20let%20button%20start%20and%20stop%20animation%0A%2F%2F%0Afunction%20toggleButton%28%29%20%7B%0A%09if%20%28isButtonStart%29%20%7B%0A%09%09console.clear%28%29%3B%0A%09%09isButtonStart%20%3D%20false%3B%0A%09%09button.html%28%22Start%22%29%3B%0A%09%09button.style%28%22border-color%22%2C%20%22green%22%29%3B%0A%09%09button.style%28%22background%22%2C%20%22lightgreen%22%29%3B%0A%09%09frameRate%280%29%3B%0A%09%7D%20else%20%7B%0A%09%09frameRate%281%29%3B%0A%09%09isButtonStart%20%3D%20true%3B%0A%09%09button.html%28%22Stop%22%29%3B%0A%09%09button.style%28%22border-color%22%2C%20%22red%22%29%3B%0A%09%09button.style%28%22background%22%2C%20%22orange%22%29%3B%0A%09%09counter%20%3D%201%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%20%0A%09createCanvas%28X_CANVAS_SIZE%2C%20Y_CANVAS_SIZE%29%3B%0A%0A%09%2F%2F%20counter%0A%09counter%20%3D%200%3B%0A%0A%09%2F%2F%20create%20button%0A%09isButtonStart%20%3D%20false%3B%0A%09button%20%3D%20createButton%28%22Start%22%29%3B%0A%09button.size%2880%2C%2030%29%3B%0A%09button.position%28410%2C%2020%29%3B%0A%09%2F%2F%20cosmetics%0A%09button.style%28%22font-size%22%2C%20%2220px%22%29%3B%0A%09button.style%28%22border-radius%22%2C%20%2220px%22%29%3B%0A%09button.style%28%22color%22%2C%20%22black%22%29%3B%0A%09button.style%28%22border-color%22%2C%20%22green%22%29%3B%0A%09button.style%28%22background%22%2C%20%22lightgreen%22%29%3B%0A%09%2F%2F%20add%20button%20functionality%0A%09button.mouseClicked%28toggleButton%29%3B%0A%0A%09%2F%2F%20set%20text%20properties%0A%09textSize%28TEXT_SIZE%29%3B%0A%09textAlign%28CENTER%2C%20CENTER%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%0A%09%2F%2F%20wait%20for%20start%0A%09if%20%28counter%20%3D%3D%3D%200%29%20%7B%0A%09%09frameRate%280%29%3B%0A%09%7D%0A%09%2F%2F%20speed%20control%0A%09if%20%28counter%20%3D%3D%3D%206%29%20%7B%0A%09%09frameRate%280.5%29%3B%0A%09%7D%0A%09if%20%28counter%20%3D%3D%3D%207%29%20%7B%0A%09%09frameRate%280.25%29%3B%0A%09%7D%0A%09if%20%28counter%20%3D%3D%3D%208%29%20%7B%0A%09%09frameRate%281%29%3B%0A%09%7D%0A%09%2F%2F%20stop%20animation%0A%09if%20%28counter%20%3D%3D%3D%2020%29%20%7B%0A%09%09toggleButton%28%29%3B%0A%09%7D%0A%0A%09%2F%2F%20color%20animation%0A%09if%20%28counter%20%3D%3D%3D%201%29%20%7B%0A%09%09console.log%28%22Vorw%C3%A4rtsschritt%3A%20x%20-%3E%20y%22%29%3B%0A%09%09drawInput%28%22cyan%22%29%3B%0A%09%09drawInputLayer%28%22cyan%22%29%3B%0A%09%7D%20else%20%7B%0A%09%09drawInput%28%22black%22%29%3B%0A%09%09drawInputLayer%28%22black%22%29%3B%0A%09%7D%0A%09if%20%28counter%20%3D%3D%3D%202%29%20%7B%0A%09%09drawWeightLayer1%28%22cyan%22%29%3B%0A%09%7D%20else%20if%20%28counter%20%3D%3D%3D%2014%20%7C%7C%20counter%20%3D%3D%3D%2016%29%20%7B%0A%09%09drawWeightLayer1%28%22red%22%29%3B%0A%09%7D%20else%20if%20%28counter%20%3D%3D%3D%2015%29%20%7B%0A%09%09drawWeightLayer1%28%22yellow%22%29%3B%0A%09%7D%20else%20%7B%0A%09%09drawWeightLayer1%28%22black%22%29%3B%0A%09%7D%0A%09if%20%28counter%20%3D%3D%3D%203%29%20%7B%0A%09%09drawHiddenLayer%28%22cyan%22%29%3B%0A%09%7D%20else%20if%20%28counter%20%3D%3D%3D%2013%29%20%7B%0A%09%09drawHiddenLayer%28%22red%22%29%3B%0A%09%7D%20else%20%7B%0A%09%09drawHiddenLayer%28%22black%22%29%3B%0A%09%7D%0A%09if%20%28counter%20%3D%3D%3D%204%29%20%7B%0A%09%09drawWeightLayer2%28%22cyan%22%29%3B%0A%09%7D%20else%20if%20%28counter%20%3D%3D%3D%2010%20%7C%7C%20counter%20%3D%3D%3D%2012%29%20%7B%0A%09%09drawWeightLayer2%28%22red%22%29%3B%0A%09%7D%20else%20if%20%28counter%20%3D%3D%3D%2011%29%20%7B%0A%09%09drawWeightLayer2%28%22yellow%22%29%3B%0A%09%7D%20else%20%7B%0A%09%09drawWeightLayer2%28%22black%22%29%3B%0A%09%7D%0A%09if%20%28counter%20%3D%3D%3D%205%29%20%7B%0A%09%09drawOutputLayer%28%22cyan%22%29%3B%0A%09%7D%20else%20if%20%28counter%20%3D%3D%3D%209%29%20%7B%0A%09%09drawOutputLayer%28%22red%22%29%3B%0A%09%7D%20else%20%7B%0A%09%09drawOutputLayer%28%22black%22%29%3B%0A%09%7D%0A%09if%20%28counter%20%3D%3D%3D%206%29%20%7B%0A%09%09drawOutput%28%22cyan%22%29%3B%0A%09%7D%20else%20if%20%28counter%20%3D%3D%3D%207%20%7C%7C%20counter%20%3D%3D%3D%208%29%20%7B%0A%09%09if%20%28counter%20%3D%3D%3D%208%29%20%7B%0A%09%09%09console.log%28%22R%C3%BCckw%C3%A4rtsschritt%3A%20Passe%20Gewichte%20an%22%29%3B%0A%09%09%7D%0A%09%09drawOutput%28%22red%22%29%3B%0A%09%7D%20else%20%7B%0A%09%09drawOutput%28%22black%22%29%3B%0A%09%7D%0A%09if%20%28counter%20%3D%3D%3D%207%29%20%7B%0A%09%09console.log%28%22Berechne%20Fehler%22%29%3B%0A%09%09drawError%28%22red%22%29%3B%0A%09%7D%0A%0A%09%2F%2F%20increase%20counter%0A%09counter%20%3D%20counter%20%2B%201%3B%0A%7D&css=undefined&html=%3Cscript%20src%3D%22https%3A%2F%2Fapp.exorciser.ch%2Flib%2Fp5.js%22%3E%3C%2Fscript%3E&height=400px#MulilayerPerceptron}} |
| |
| </WRAP> | </WRAP> |
