Projektarbeit Prompten

Aufgabeninhalte

Aufgabenstellung

  • Projektziel ist ein Aufsatz zum Thema „Prompten“
  • Umfang min. 2 DIN-A4 Seiten
    • 1. Teil: Aufsatz
    • 2. Teil: Erweiterter Code als Nachweis der Umsetzung
  • Für den Aufsatz selbst darf KEINE KI-verwendet werden – für die Aufgabenstellung hingegen schon.

Gegeben ist folgender Code

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Canvas Partikel Demo</title>
  <style>
    html, body { margin: 0; height: 100%; background: #fff; }
    canvas { display: block; width: 100vw; height: 100vh; }
  </style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');

function resize() {
  const dpr = window.devicePixelRatio || 1;
  canvas.width  = Math.floor(window.innerWidth * dpr);
  canvas.height = Math.floor(window.innerHeight * dpr);
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}
window.addEventListener('resize', resize);
resize();

const particles = Array.from({ length: 80 }, () => ({
  x: Math.random() * window.innerWidth,
  y: Math.random() * window.innerHeight,
  vx: (Math.random() - 0.5) * 1.2,
  vy: (Math.random() - 0.5) * 1.2,
  r: 2 + Math.random() * 2
}));

let mouse = { x: -9999, y: -9999 };
canvas.addEventListener('mousemove', e => {
  const rect = canvas.getBoundingClientRect();
  mouse.x = e.clientX - rect.left;
  mouse.y = e.clientY - rect.top;
});
canvas.addEventListener('mouseleave', () => { mouse.x = -9999; mouse.y = -9999; });

function step() {
  ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);

  for (const p of particles) {
    p.x += p.vx; p.y += p.vy;
    if (p.x < 0 || p.x > window.innerWidth)  p.vx *= -1;
    if (p.y < 0 || p.y > window.innerHeight) p.vy *= -1;

    const dx = p.x - mouse.x, dy = p.y - mouse.y;
    const d2 = dx*dx + dy*dy;
    if (d2 < 150*150) {
      const d = Math.sqrt(d2) || 1;
      p.vx += dx / d * 0.05;
      p.vy += dy / d * 0.05;
    }

    ctx.beginPath();
    ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
    ctx.fill();
  }

  for (let i = 0; i < particles.length; i++) {
    for (let j = i + 1; j < particles.length; j++) {
      const a = particles[i], b = particles[j];
      const dx = a.x - b.x, dy = a.y - b.y;
      const d2 = dx*dx + dy*dy;
      if (d2 < 120*120) {
        ctx.globalAlpha = 1 - Math.sqrt(d2) / 120;
        ctx.beginPath();
        ctx.moveTo(a.x, a.y);
        ctx.lineTo(b.x, b.y);
        ctx.stroke();
        ctx.globalAlpha = 1;
      }
    }
  }

  requestAnimationFrame(step);
}
step();
</script>
</body>
</html>

Aufgaben im Detail

Kopieren Sie den oben gezeigten Code in eine neue Datei index.html und öffnen Sie sie im Browser. Die Demo zeigt Partikel, die sich bewegen, Linien zwischen nahe liegenden Punkten ziehen und auf die Maus reagieren.

1) Erweiterung der Demo

Erweitern Sie die Demo mit Hilfe eines KI Assistenten Ihrer Wahl. Wählen Sie mindestens eine Erweiterung:

  • Klick fügt neue Partikel hinzu
  • Taste G schaltet Schwerkraft ein oder aus
  • Partikel erhalten Farben, die sich langsam ändern
  • Taste P hält die Animation an, Taste P setzt fort.
  • FPS Anzeige – Zeige die aktuelle Bildrate oben rechts
  • Dynamische Partikelzahl – Eingabe mit Plus erhöht die Anzahl, Eingabe mit Minus verringert sie (Zähler oben links zeigt die aktuelle Zahl)
  • Auswahl und Ziehen – Mausklick wählt den nächsten Partikel, Halten zieht ihn mit.
  • Formen wechseln – Taste F schaltet die Partikel zwischen Kreis, Quadrat und Dreieck.
  • Mausmagnet umschalten – Taste M schaltet zwischen Anziehung und Abstoßung.

Abgabehinweis: Markieren Sie Ihre eigenen Änderungen im Code mit kurzen Kommentaren.

2) Prompt Journal

Dokumentieren Sie mindestens 6 Versuche. Nutzen Sie dieses Format:

  • Ziel:
  • Prompt Wortlaut:
  • Tool und Version:
  • Kurzfassung der Antwort:
  • Ergebnis im Code oder Text:
  • Bewertung der KI in Schulnoten von 1 bis 6 mit kurzer Begründung:
  • Lernnotiz für mich:

Bitte arbeiten Sie ergebnisorientiert. Verzichten Sie auf Prompts, die um innere Gedankenschritte des Modells bitten. Konzentrieren Sie sich auf klare Anweisungen und überprüfbare Ergebnisse.

3) Kurzreflexion

  • 150 bis 250 Wörter. Vorschlag für Leitfragen:
    • Was probiere ich beim nächsten Mal zuerst?
    • Welche Prompt Muster haben bei Code gut funktioniert?
    • Welche Formulierungen waren zu vage?
    • Wie habe ich Fehler eingegrenzt?

Hilfsmittel

  • Die Verwendung von LLM-Modellen wie ChatGPT ist für das Coding erlaubt und erwünscht
  • Für das Schreiben des Aufsatzes darf keine KI verwendet werden