implement.html

<!DOCTYPE HTML>
<!--
	Massively by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
	<head>
		<title>MarioSpass by Elias und Loris</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="assets/css/main.css" />
		<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
	</head>
	<body class="is-preload">

		<!-- Wrapper -->
			<div id="wrapper">

				<!-- Header -->
					<header id="header">
						
					</header>

				<!-- Nav -->
				
					<nav id="nav">
						<ul class="links">
							<li ><a href="index.html">Einleitung</a></li>
							<li><a href="firststeps.html">Erste Schritte</a></li>
							<li class="active"><a href="implement.html">Implementieren</a></li>
							<li><a href="final.html">Finales Produkt</a></li>
						</ul>
						<ul class="icons">
							<li><a href="https://github.com/Misterz1x/Praktikantentage/tree/main" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
						</ul>
					</nav>

				<!-- Main -->
					<div id="main">

						<!-- Post -->
							<section class="post">
								<header class="major">
									
									<h1>Programmieren / Implementieren<br />
									</h1>
									
								</header>
								<div class="image main"><img src="images/implementieren1.png" alt="" /></div>


  <p>
    Jetzt kommen wir zum praktischen Teil! Öffnet bitte die vorbereitete Datei: <strong>Camarioown_EUERNAME.py</strong>. Ihr könnt die Datei auch gleich umbenennen und euren Namen einsetzen.
  </p>

  <p>
    In der Datei findet ihr bereits einige vorgefertigte Funktionen. Besonders wichtig ist diese hier:
  </p>

  <code>while pyboy.tick():</code>
  
  <p>
    Diese Schleife bildet den <strong>Herzschlag</strong> eures Spiels. Solange der Emulator <code>pyboy</code> tickt, läuft das Spiel und ihr könnt darauf zugreifen.
  </p>

  <p>
    Innerhalb dieser Schleife findet ihr eine Tabelle mit den sogenannten <strong>Keypoints</strong> – also die erkannten Körperpunkte. Diese Daten sind entscheidend, um eure eigene Steuerungslogik für Mario zu schreiben.
  </p>

  <p>
    Starten wir mit dem Aktivieren der Kamera. Fügt folgenden Code bitte <strong>außerhalb</strong> der while-Schleife ein:
  </p>

   <div class="code-container">
		<button class="copy-btn" onclick="copyCode('code9')">📋 Kopieren</button>
		<pre><code id="code9">cap = cv2.VideoCapture(0)</code></pre>
   </div>
  
  <p>
    Um die Kamera später auch wieder zu deaktivieren und Ressourcen freizugeben, fügt diesen Code <strong>innerhalb, am Ende</strong> der while-Schleife ein:
  </p>
  <p><strong>Wichtig:</strong> Wenn ihr das daheim ausprobieren wollt und ihr mehrere Kameras angeschlossen habt, müsst ihr den Wert innerhalb von <strong>VideoCapture</strong>
   verändern! Um den richtigen Wert zu finden, geht auf Einstellungen --> Bluetooth und Geräte --> Kameras und analysiert dieses Feld. Die <strong>erste</strong> Position wird 
   im <strong>VideoCapture </strong>als 0 angegeben. Wenn eure korrekte Kamera in dem Fall an der 3ten Stelle in dieser Anzeige aufscheint müsst ihr also <strong>VideoCapture(2)</strong>
   schreiben. 
</p>

  <div class="code-container">
		<button class="copy-btn" onclick="copyCode('code10')">📋 Kopieren</button>
<pre><code id="code10">
annotated = results[0].plot()
cv2.imshow("Pose Input", annotated)
if cv2.waitKey(1) & 0xFF == ord('q'):
	break
</code></pre>
   </div>


<p>Um die Kamera und auch das Spiel zu öffnen drückt einfach den Befehl "Run Python file" in Visual Studio Code</p>
<p><strong>Wichtig: </strong> Ihr könnt das Spiel (und die Kamera) mit der Taste <strong>"q"</strong> beenden! </p>
<div class="image main"><img src="images/implementieren3.png" alt="" /></div>
								<div class="checklist">
									<div class="check-item">
										<input type="checkbox" id="task1">
										<label for="task1">Kamera kann geöffnet werden</label>
									</div>
									<div class="check-item">
										<input type="checkbox" id="task2">
										<label for="task2">Kamera kann geschlossen werden</label>
									</div>
								</div>




  <h2>Eigene Bewegungsabläufe programmieren</h2>
  <p>
    Jetzt wird’s kreativ: Ihr könnt eigene Bewegungsfunktionen erstellen, die auf eure Körperhaltung reagieren!
  </p>

  <p>
    Außerhalb der while-Schleife findet ihr z. B. die Funktion <code>is_left_really_left</code>. Sie erkennt, ob eure linke Hand weit genug links vom Ellbogen ist.
  </p>
  <img src="images/implementieren2.png" alt="" />
  <p>
    Was macht die Funktion genau? Der Begriff <code>def</code> steht in Python für die Definition einer Funktion. In den Klammern übergeben wir zwei Werte – das sind unsere Keypoints. Keypoints sind einfach gesagt Koordinatenpaare: ein <strong>x</strong>- und ein <strong>y</strong>-Wert, die beschreiben, wo sich ein Körperteil im Bild befindet. Python zählt bei 0, also ist <code>[0]</code> die x-Koordinate und <code>[1]</code> die y-Koordinate.
  </p>

  <p>
    In der Funktion wird die horizontale und vertikale Distanz der Punkte berechnet – also <code>dx</code> und <code>dy</code>. Dann prüfen wir: Ist die Hand z. B. mindestens 50 Pixel weiter links als der Ellbogen (<code>dx > 50</code>) und befindet sie sich ungefähr auf der gleichen Höhe (<code>dy &lt; 40</code>)? Nur dann wird die Funktion <code>True</code> zurückgeben.
  </p>



  <p>
    So verhindert ihr, dass bei kleinen oder ungenauen Bewegungen schon Aktionen ausgelöst werden. Natürlich könnt ihr die Werte <code>dx</code> und <code>dy</code> selbst anpassen – je nachdem, wie sensibel eure Steuerung reagieren soll.
  </p>

  <p>
    Wichtig: Achtet auf das Vorzeichen der Werte! Je nachdem, ob ihr linke oder rechte Körperteile vergleicht, kann ein Wert auch negativ werden. Hier unten ein Beispiel für die rechte Seite:


<pre>  <code>def is_right_really_right(keyp1, keyp2):
    dx = keyp1[0] - keyp2[0]
    dy = abs(keyp2[1] - keyp1[1])
    return dx > 50 and dy < 40</code></pre>  
</p>



  <h3>Testen eurer Funktionen</h3>
  <p>
    In der <code>while</code>-Schleife findet ihr nun drei Aufrufe, die Mario steuern:
  </p>

<pre> <code>
move_left = is_left_really_left(left_elbow, left_wrist)
move_right = is_right_really_right(right_elbow, right_wrist)
jump_up = is_up_really_up(right_elbow, right_wrist) or is_up_really_up(left_elbow, left_wrist)
  </code></pre>

  <p>
    Hier könnt ihr jetzt eure eigenen Keypoints einsetzen. Zum Beispiel:
  </p>

  <code>
move_left = is_left_really_left(left_ankle, left_knee)
  </code>

  <p>
    Probiert einfach aus, was sich gut anfühlt – und habt Spaß beim Experimentieren mit eurer Bewegungserkennung!
  </p>

  								<div class="checklist">
									<div class="check-item">
										<input type="checkbox" id="task3">
										<label for="task3">Es wurde eine eigene Steuerung für eine Bewegung nach links erstellt</label>
									</div>
									<div class="check-item">
										<input type="checkbox" id="task4">
										<label for="task4">Es wurde eine eigene Steuerung für eine Bewegung nach rechts erstellt</label>
									</div>
									<div class="check-item">
										<input type="checkbox" id="task5">
										<label for="task5">Es wurde eine eigene Steuerung für einen Sprung erstellt</label>
									</div>
								</div>
								<div id="mario-container">
								<img id="mario-image" src="images/happymario.png" alt="Happy Mario">
								</div>


</body>
</html>

							</section>

							<footer>
								<ul class="actions" style="display: flex; justify-content: center;">
									<li>
										<a href="#header" class="button icon solid solo fa-arrow-up scrolly"></a>
									</li>
								</ul>
							</footer>

					</div>



				<!-- Footer -->
					<footer id="footer">
						
					</footer>

				<!-- Copyright -->
					<div id="copyright">
						<ul><li>Ja - hooooo</li></ul>
					</div>

			</div>

		<!-- Scripts -->
			<script src="assets/js/jquery.min.js"></script>
			<script src="assets/js/jquery.scrollex.min.js"></script>
			<script src="assets/js/jquery.scrolly.min.js"></script>
			<script src="assets/js/browser.min.js"></script>
			<script src="assets/js/breakpoints.min.js"></script>
			<script src="assets/js/util.js"></script>
			<script src="assets/js/main.js"></script>
			<script src="assets/js/copy.js"></script>
			

			<script>
				const checkbox1 = document.getElementById('task1');
				const checkbox2 = document.getElementById('task2');
				const checkbox3 = document.getElementById('task3');
				const checkbox4 = document.getElementById('task4');
				const checkbox5 = document.getElementById('task5');
				
				const mario = document.getElementById('mario-container');

				function checkMario() {
					if (checkbox1.checked && checkbox2.checked && checkbox3.checked && checkbox4.checked && checkbox5.checked) {
					mario.style.display = 'block';
					} else {
					mario.style.display = 'none';
					}
				}

				checkbox1.addEventListener('change', checkMario);
				checkbox2.addEventListener('change', checkMario);
				checkbox3.addEventListener('change', checkMario);
				checkbox4.addEventListener('change', checkMario);
				checkbox5.addEventListener('change', checkMario);



			</script>

	</body>
</html>