<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8"> <!--utf-8 fuer Umlaute-->
        <link rel="stylesheet" href="style.css">
		<link rel="icon" href="Medien/icon.svg">
        <title>SpeculativeAI</title>
    </head>
    <body>
	
			<!--
			Jede <section> ist Eine Seite. Dadurch kann man den Blog einfacher
			navgieren und unteranderem auch ein "scroll-snap" implementieren.
			Das heisst, beim scrollen snapt sich das Fenster an jede Sektion perfekt an.
			Platziert wurden die Texte, Bilder und Videos via Flex-Box.
			-->
	
		<main id="scroll_main">
			<section id="page1" class="scroll_snap_item"> <!-- Teaser-Seite -->
				<div class="zentriert">
				
					<div class="header"> <!--Navigation-->
						<a href="#page2">Dokumentation</a>
						<a href="#page3">Funktion</a>
						<a href="#page4">Künstler</a>
					</div>
				
					<div>
						<h1>SpeculativeAI</h1> <!--Ueberschrift-->
						<p>Kommunikation zwischen 2 KI-Sytemen mit hilfe von Licht- und Schallsignalen</p>
					</div>
				
					<div>
						<img class="Bild1" src="Medien/BLS1.jpg" alt="Titlelbild">
						<!-- Quelle: https://www.birkschmithuesen.com/_speculativeAI -->
					</div>
				</div>
			</section>
			
			<section id="page2" class="scroll_snap_item"> <!-- Was  sollte man wissen (1/2) -->
				<div class="container">	
				
					<div class="item1">
						<img class="Bild2" src="Medien/BL2.jpg" alt="Licht-Object"> <!--Selbst erstellte Bilder-->
						<p>
							Kugelförmiges Lichtobjekt mit 95m Led-Schlauch, 
							Mikrofon und Mikroprozessor der die Schallsignale verarbeitet.
						</p>
					</div>
				
					<div id="video1"> <!--eingebettetes Video vom Kuenstler seiner Website-->
						<iframe title="vimeo-player" src="https://player.vimeo.com/video/366300020?h=d61127ab15" width="640" height="360" frameborder="0" alt="Dokumentation-Video" allowfullscreen></iframe>
						<!-- Quelle: https://www.birkschmithuesen.com/_speculativeAI --> 
					</div>
				
					<div class="item2">
						<img class="Bild2" src="Medien/BS1.jpg" alt="sound-Object"> <!--Selbst erstellte Bilder-->
						<p>
							Objekt dass mit einer Kamera die Lichtsignale auffängt 
							und in aukustische Signale verarbeitet und über die Lautsprecher abspielt
						</p>
					</div>
				</div>	
			</section>
			
			<section id="page3" class="scroll_snap_item"> <!-- Was  sollte man wissen (2/2) -->
				<div class="container2">
					
					<div class="video2">
						<video controls alt="Lichtobjekt">
							<source src="Medien/BL5.mp4" type="video/mp4"> <!--Selbst erstellte Videos-->
						</video>
					</div>
					
					<div class="video2">
						<video controls alt="Empfaenger">
							<source src="Medien/VS1.mp4" type="video/mp4"> <!--Selbst erstellte Videos-->
						</video>
					</div>
					
					<div>
						<p>
							Die SpeculativeAI Serie ist ein von Birk Schmithüsen erschaffenes Kunstwerk,
							worin 2 verschiedene Kugeln mithilfe von Licht- und Schallsignalen untereinander
							kommunizieren. Dies wird durch ein Neuronales Netzwerk ermöglicht, das über eine
							Kamera "visuelle Botschaften" von seinem Gegenüber empfängt. Diese werden daraufhin
							zu einem "multideminsionalen Sound" umgewandelt, woraufhin diese wieder von der ersten
							Kugel von einem Mikrofon wahrgenommen werden.<br>
							Die zwei Systeme verstehen sich also gegenseitig, interpretieren die Signale des anderen
							und geben gezielte, empathische Antworten.
						</p>
					</div>
				</div>
			</section>
			
			<section id="page4" class="scroll_snap_item"> <!-- Aufgabe c,d und e-->
				<div class="container3">
					
					<div>
						<h1>Birk Schmithüsen</h1>
						<p id="title2">Andere Werke:</p>
						<p>ClimateSculptures</p>
						<p>SystemFailed</p>
						<p>KlangNetz</p>
						<p>Persoenlichkeitsmonitor</p>
						<a href="https://www.birkschmithuesen.com/_works" target="_blank">https://www.birkschmithuesen.com/_works</a>
					</div>
					<div>
						<img class="Bild3" src="Medien/Birk_Schmithuesen.jpg" alt="Creator">
						<!--Quelle: https://www.birkschmithuesen.com/-->
					</div>
				</div>
			</section>
		</main>
		
		<div id="back_to_top"> <!-- Einfache Navigation um an den Anfang zu gelangen -->
			<a href="#page1">
				<img src="Medien/Pfeil.svg" alt="Seitenanfang" width="75" height="75">
			</a>
		</div>
    </body>
</html>