Glanz: Die Seite wurde neu angelegt: „{{T}} {| align=center {{:D-Tab}} '''p5.js''' # JavaScript # Creative Coding # Processing # Programmieren # Algorithmus # Variable # Funktion # Schleife # Bedingte Anweisung # Canvas # Koordinatensystem # Debugging # Interaktion # Datenvisualisierung # Generative Kunst |} {{BR}} = p5.js (Programmieren lernen) = {{BR}} = Einleitung = zentriert '''Hinwe…“

2026-04-26T05:19:13Z

Die Seite wurde neu angelegt: „{{T}} {| align=center {{:D-Tab}} '''p5.js''' # JavaScript # Creative Coding # Processing # Programmieren # Algorithmus # Variable # Funktion # Schleife # Bedingte Anweisung # Canvas # Koordinatensystem # Debugging # Interaktion # Datenvisualisierung # Generative Kunst |} {{BR}} = p5.js (Programmieren lernen) = {{BR}} = Einleitung = 500px|rahmenlos|zentriert '''Hinwe…“

Neue Seite

{{T}}
{| align=center
{{:D-Tab}}
'''[[p5.js]]'''
# [[JavaScript]]
# [[Creative Coding]]
# [[Processing]]
# [[Programmieren]]
# [[Algorithmus]]
# [[Variable]]
# [[Funktion]]
# [[Schleife]]
# [[Bedingte Anweisung]]
# [[Canvas]]
# [[Koordinatensystem]]
# [[Debugging]]
# [[Interaktion]]
# [[Datenvisualisierung]]
# [[Generative Kunst]]
|}
{{BR}}
= p5.js (Programmieren lernen) =

{{BR}}
= Einleitung =

[[Datei:P5js Logo.svg|500px|rahmenlos|zentriert]]

'''Hinweis''': In diesem aiMOOC wird die Eingabe „ps.js“ als [[p5.js]] verstanden. [[p5.js]] ist eine freie [[JavaScript]]-[[Bibliothek]], mit der Du [[Programmieren]] besonders anschaulich lernen kannst. Der Schwerpunkt liegt auf [[Creative Coding]], also auf dem kreativen Einsatz von [[Code]], um Bilder, Animationen, Interaktionen, Simulationen, kleine Spiele, Datenvisualisierungen oder audiovisuelle Experimente zu gestalten. [[p5.js]] eignet sich deshalb besonders gut für Schule, Ausbildung und Studium, weil Du sofort im [[Webbrowser]] sichtbare Ergebnisse erzeugst.

Mit [[p5.js]] lernst Du zentrale Grundlagen der [[Informatik]]: [[Variable|Variablen]], [[Funktion|Funktionen]], [[Algorithmus|Algorithmen]], [[Schleife|Schleifen]], [[Bedingte Anweisung|Bedingungen]], [[Koordinatensystem|Koordinatensysteme]], [[Ereignis|Ereignisse]], [[Objektorientierte Programmierung|objektorientiertes Denken]], [[Debugging]] und [[Modularisierung]]. Gleichzeitig arbeitest Du mit gestalterischen Fragen: Wie entstehen Formen? Wie beeinflussen Farben eine Wirkung? Wie reagiert ein Programm auf Maus, Tastatur oder Zufall? Wie lässt sich Bewegung programmieren?

{{#ev:youtube| https://www.youtube.com/watch?v=8j0UDiN7my4 |500|center}}

{{BR}}
== Was ist p5.js? ==

[[p5.js]] ist eine [[JavaScript]]-Bibliothek für [[Creative Coding]]. Eine [[Bibliothek]] stellt fertige [[Funktion|Funktionen]] bereit, damit Du nicht alles selbst von Grund auf programmieren musst. Bei [[p5.js]] betrifft das vor allem das Zeichnen auf einer digitalen Zeichenfläche, die häufig als [[Canvas]] bezeichnet wird. Du kannst Linien, Kreise, Rechtecke, Texte, Farben, Bilder, Klänge und interaktive Elemente verwenden.

Der Name [[p5.js]] steht in der Tradition von [[Processing]]. [[Processing]] wurde entwickelt, um Menschen aus Kunst, Design, Bildung und Medien einen einfachen Zugang zum Programmieren zu ermöglichen. [[p5.js]] überträgt diese Idee in den [[Webbrowser]] und nutzt dafür [[JavaScript]], [[HTML]] und häufig auch [[CSS]].

[[Datei:Processing 2021 logo.svg|300px|rahmenlos|zentriert]]

{{BR}}
== Warum eignet sich p5.js zum Programmierenlernen? ==

[[p5.js]] ist besonders lernfreundlich, weil Programmierkonzepte sofort sichtbar werden. Wenn Du eine [[Variable]] veränderst, kann sich die Position eines Kreises ändern. Wenn Du eine [[Schleife]] verwendest, entstehen Muster. Wenn Du eine [[Bedingte Anweisung]] formulierst, reagiert Dein Programm unterschiedlich auf Eingaben. Dadurch wird [[Abstraktion]] greifbar.

Ein weiterer Vorteil ist der schnelle Einstieg. Du kannst im [[p5.js Web Editor]] direkt im [[Webbrowser]] programmieren. Dadurch brauchst Du am Anfang keine komplizierte Entwicklungsumgebung. Du schreibst Deinen Code, startest das Programm und siehst sofort das Ergebnis. Fehler werden im Editor oder in der [[Konsole]] sichtbar, wodurch Du [[Debugging]] üben kannst.

{{BR}}
== Die Grundstruktur eines p5.js-Programms ==

Ein einfaches [[p5.js]]-Programm besteht häufig aus zwei wichtigen [[Funktion|Funktionen]]: '''setup''' und '''draw'''. Die Funktion '''setup''' wird einmal zu Beginn ausgeführt. Dort richtest Du zum Beispiel die Zeichenfläche ein. Die Funktion '''draw''' wird danach immer wieder ausgeführt. Dadurch entstehen Animationen.

<syntaxhighlight lang="javascript">
function setup() {
createCanvas(400, 400);
background(240);
}

function draw() {
circle(mouseX, mouseY, 50);
}
</syntaxhighlight>

In diesem Beispiel wird eine Zeichenfläche erstellt. Danach zeichnet das Programm immer wieder einen Kreis an die aktuelle Mausposition. Die Werte '''mouseX''' und '''mouseY''' sind eingebaute [[Variable|Variablen]] von [[p5.js]]. Sie speichern die aktuelle Position der Maus im [[Koordinatensystem]] der Zeichenfläche.

{{BR}}
== Das Koordinatensystem verstehen ==

Die Zeichenfläche in [[p5.js]] verwendet ein [[Koordinatensystem]]. Der Punkt oben links hat die Koordinaten '''0''' und '''0'''. Die x-Achse verläuft nach rechts, die y-Achse nach unten. Das ist anders als in vielen mathematischen Darstellungen, bei denen die y-Achse nach oben zeigt. Dieses Wissen ist wichtig, wenn Du Formen gezielt platzieren, Animationen planen oder Bewegungen berechnen möchtest.

Ein Kreis kann zum Beispiel mit einer x-Position, einer y-Position und einem Durchmesser beschrieben werden. Wenn Du die x-Position in jedem Durchlauf von '''draw''' erhöhst, bewegt sich der Kreis nach rechts. Wenn Du die y-Position erhöhst, bewegt er sich nach unten. Aus solchen einfachen Veränderungen entstehen Animationen.

{{BR}}
== Formen, Farben und Gestaltung ==

Mit [[p5.js]] kannst Du geometrische Grundformen erzeugen. Dazu gehören [[Punkt|Punkte]], [[Linie|Linien]], [[Dreieck|Dreiecke]], [[Rechteck|Rechtecke]], [[Ellipse|Ellipsen]] und [[Kreis|Kreise]]. Diese Formen sind die Bausteine für komplexere Bilder. Farben werden häufig durch Zahlenwerte beschrieben, etwa für Rot, Grün und Blau. Dieses Modell nennt man [[RGB-Farbraum]].

<syntaxhighlight lang="javascript">
function setup() {
createCanvas(500, 300);
background(220);
fill(255, 120, 80);
stroke(30);
rect(80, 70, 160, 100);
circle(330, 120, 90);
}
</syntaxhighlight>

Hier lernst Du, dass Gestaltung und Programmierung zusammenhängen. Eine Form ist nicht nur ein Bildobjekt, sondern auch eine strukturierte Anweisung an den Computer: Wo soll sie erscheinen? Welche Größe soll sie haben? Welche Farbe soll sie tragen? Soll sie eine Kontur besitzen?

{{BR}}
== Variablen als Gedächtnis eines Programms ==

Eine [[Variable]] ist ein benannter Speicherplatz. Sie kann zum Beispiel eine Position, eine Geschwindigkeit, eine Farbe oder einen Punktestand enthalten. Wenn Du programmieren lernst, sind [[Variable|Variablen]] besonders wichtig, weil Programme ohne Speicher kaum flexibel reagieren können.

<syntaxhighlight lang="javascript">
let x = 50;

function setup() {
createCanvas(400, 200);
}

function draw() {
background(240);
circle(x, 100, 40);
x = x + 1;
}
</syntaxhighlight>

Die [[Variable]] '''x''' beginnt mit dem Wert '''50'''. In jedem Durchlauf wird ein Kreis an der x-Position gezeichnet. Danach wird '''x''' um eins erhöht. Dadurch wandert der Kreis nach rechts. Dieses Beispiel zeigt, wie aus einer einfachen Wertveränderung eine Bewegung entsteht.

{{BR}}
== Bedingungen: Programme entscheiden lassen ==

Eine [[Bedingte Anweisung]] ermöglicht Entscheidungen. Ein Programm kann prüfen, ob etwas zutrifft, und dann unterschiedlich reagieren. In [[p5.js]] kann das zum Beispiel bedeuten: Wenn die Maus auf der linken Seite ist, soll der Hintergrund hell sein. Wenn die Maus auf der rechten Seite ist, soll der Hintergrund dunkel sein.

<syntaxhighlight lang="javascript">
function setup() {
createCanvas(400, 200);
}

function draw() {
if (mouseX < 200) {
background(230);
} else {
background(80);
}
circle(mouseX, mouseY, 40);
}
</syntaxhighlight>

Bedingungen sind ein Kernkonzept der [[Informatik]]. Sie kommen in Spielen, Apps, Webseiten, Robotik, Simulationen und Datenverarbeitung vor. Mit [[p5.js]] kannst Du sie visuell und interaktiv ausprobieren.

{{BR}}
== Schleifen: Wiederholung als Gestaltungsmittel ==

Eine [[Schleife]] wiederholt Anweisungen. In [[p5.js]] lassen sich damit Muster, Raster, Ornamente, Animationen oder Datenbilder erzeugen. Statt hundert Kreise einzeln zu schreiben, formulierst Du eine Regel. Der Computer führt diese Regel wiederholt aus.

<syntaxhighlight lang="javascript">
function setup() {
createCanvas(500, 200);
background(245);
for (let x = 40; x < 480; x = x + 40) {
circle(x, 100, 25);
}
}
</syntaxhighlight>

Dieses Beispiel zeichnet viele Kreise in regelmäßigen Abständen. Du erkennst daran einen wichtigen Gedanken des Programmierens: Ein guter [[Algorithmus]] beschreibt nicht jedes Ergebnis einzeln, sondern die Regel, nach der Ergebnisse entstehen.

{{BR}}
== Funktionen: Code ordnen und wiederverwenden ==

Eine [[Funktion]] fasst Anweisungen zusammen. Dadurch wird ein Programm übersichtlicher. Wenn Du eine eigene Funktion schreibst, kannst Du eine Aufgabe benennen und wiederverwenden. Das ist ein Schritt zur [[Modularisierung]].

<syntaxhighlight lang="javascript">
function setup() {
createCanvas(400, 300);
}

function draw() {
background(240);
zeichneGesicht(200, 150);
}

function zeichneGesicht(x, y) {
circle(x, y, 120);
circle(x - 25, y - 20, 15);
circle(x + 25, y - 20, 15);
arc(x, y + 15, 60, 40, 0, PI);
}
</syntaxhighlight>

Die eigene Funktion '''zeichneGesicht''' macht den Code verständlicher. Du kannst später weitere Werte übergeben, zum Beispiel Größe, Farbe oder Stimmung. So entstehen flexible Bausteine für größere Projekte.

{{BR}}
== Interaktion: Maus, Tastatur und Ereignisse ==

[[Interaktion]] bedeutet, dass ein Programm auf Eingaben reagiert. In [[p5.js]] kannst Du die Mausposition verwenden, Mausklicks erkennen oder Tastatureingaben auswerten. Dadurch entstehen einfache Zeichenprogramme, Spiele, Simulationen oder Lernanwendungen.

Ein [[Ereignis]] ist etwas, das während der Laufzeit passiert: ein Klick, ein Tastendruck, eine Bewegung, ein geladener Klang oder ein berührter Bildschirm. In [[p5.js]] kannst Du spezielle Ereignisfunktionen nutzen, um darauf zu reagieren.

<syntaxhighlight lang="javascript">
let farbwert = 200;

function setup() {
createCanvas(400, 250);
}

function draw() {
background(farbwert);
circle(200, 125, 80);
}

function mousePressed() {
farbwert = 120;
}
</syntaxhighlight>

Wenn Du mit der Maus klickst, ändert sich der Hintergrund. Dieses einfache Beispiel zeigt das Prinzip vieler interaktiver Programme: Eine Eingabe verändert einen Zustand, und der veränderte Zustand verändert die Ausgabe.

{{BR}}
== Zufall und generative Gestaltung ==

[[Zufall]] ist in [[p5.js]] ein wichtiges Gestaltungsmittel. Mit zufälligen Werten kannst Du Bilder erzeugen, die bei jedem Start anders aussehen. Das führt zur [[Generative Kunst|generativen Kunst]]. Dabei legt der Mensch Regeln fest, während der Computer viele mögliche Ergebnisse erzeugt.

<syntaxhighlight lang="javascript">
function setup() {
createCanvas(500, 300);
background(250);
for (let i = 0; i < 80; i = i + 1) {
let x = random(width);
let y = random(height);
let d = random(10, 50);
circle(x, y, d);
}
}
</syntaxhighlight>

Hier entscheidet der Zufall über Position und Größe der Kreise. Trotzdem ist das Ergebnis nicht völlig beliebig, denn Du bestimmst die Regeln: Anzahl, Bereich, Form und mögliche Größen. Genau darin liegt der Reiz von [[Creative Coding]].

{{BR}}
== Debugging: Fehler finden und verstehen ==

[[Debugging]] bedeutet, Fehler im Programm zu finden, zu verstehen und zu beheben. Fehler sind beim Programmieren normal. Sie zeigen Dir, an welcher Stelle Dein Denken, Deine Schreibweise oder Deine Programmstruktur noch nicht zum gewünschten Ergebnis passt.

Typische Fehler beim Einstieg in [[p5.js]] sind fehlende Klammern, falsch geschriebene Funktionsnamen, verwechselte Groß- und Kleinschreibung, nicht definierte [[Variable|Variablen]] oder falsche Koordinaten. Ein wichtiger Lernschritt besteht darin, Fehlermeldungen nicht als Scheitern zu sehen, sondern als Hinweise.

Hilfreiche Strategien sind: Lies die Fehlermeldung genau. Prüfe die Zeile, die genannt wird. Suche auch in den Zeilen davor. Vereinfache Dein Programm. Gib Zwischenwerte in der [[Konsole]] aus. Verändere immer nur eine Sache auf einmal. Dokumentiere, was Du geändert hast.

{{BR}}
== Projektideen mit p5.js ==

Mit [[p5.js]] kannst Du sehr unterschiedliche Projekte umsetzen. Für den Einstieg eignen sich kleine Projekte, die ein klares Ziel haben und trotzdem Raum für Gestaltung lassen. Beispiele sind ein digitales Namensschild, ein interaktives Farbenspiel, ein einfacher Ball, ein Zeichenprogramm, ein Muster-Generator, eine Wettervisualisierung, ein Mini-Spiel, eine Simulation von Teilchen oder eine Klangreaktion.

Für fortgeschrittene Lernende kann [[p5.js]] mit [[HTML]], [[CSS]], [[Web Audio API]], [[Webcam]], [[Sensor|Sensoren]], [[Datenvisualisierung]], [[Maschinelles Lernen]] oder [[WebGL]] verbunden werden. Dadurch wird aus einem einfachen Zeichenprogramm eine vielseitige Umgebung für digitale Medienprojekte.

{{BR}}
== Kompetenzen, die Du in diesem Kurs entwickelst ==

# [[Algorithmisches Denken]]: Du formulierst klare Schrittfolgen und Regeln, die ein Computer ausführen kann.
# [[Problemlösen]]: Du zerlegst ein größeres Projekt in kleinere Teilprobleme.
# [[Kreativität]]: Du nutzt Code als Werkzeug für Gestaltung, Ausdruck und Experiment.
# [[Medienkompetenz]]: Du verstehst, wie interaktive digitale Medien technisch entstehen.
# [[Fehlerkultur]]: Du lernst, Fehler systematisch zu untersuchen und produktiv zu nutzen.
# [[Projektarbeit]]: Du planst, entwickelst, testest und präsentierst eigene digitale Produkte.

{{BR}}
= Interaktive Aufgaben =

{{BR}}
== Quiz: Teste Dein Wissen ==

{{MC}}

'''Wofür wird p5.js besonders häufig eingesetzt?'''
(Kreatives Programmieren mit JavaScript)
(!Textverarbeitung ohne Internet)
(!Tabellenkalkulation im Betriebssystem)
(!Datenbankverwaltung ohne Code)

'''Welche Funktion wird in einem typischen p5.js-Programm einmal zu Beginn ausgeführt?'''
(setup)
(!draw)
(!mouseX)
(!background)

'''Welche Funktion wird in p5.js normalerweise fortlaufend wiederholt?'''
(draw)
(!setup)
(!createCanvas)
(!fill)

'''Was beschreibt der Begriff Canvas im Kontext von p5.js?'''
(Eine digitale Zeichenfläche)
(!Eine externe Festplatte)
(!Ein Passwortspeicher)
(!Eine Programmiersprache)

'''Welche Programmiersprache nutzt p5.js?'''
(JavaScript)
(!Python)
(!C)
(!Ruby)

'''Was speichert die Variable mouseX in p5.js?'''
(Die horizontale Mausposition)
(!Die Hintergrundfarbe)
(!Die Kreisgröße)
(!Die Tastaturhöhe)

'''Was bewirkt eine Schleife beim Programmieren?'''
(Sie wiederholt Anweisungen)
(!Sie löscht automatisch Fehler)
(!Sie beendet jedes Programm)
(!Sie ersetzt alle Variablen)

'''Was ist Debugging?'''
(Fehler im Programm finden und beheben)
(!Bilder automatisch vergrößern)
(!Programme ohne Test veröffentlichen)
(!Eine Datei komprimieren)

'''Was ermöglicht eine bedingte Anweisung?'''
(Eine Entscheidung im Programm)
(!Eine zufällige Installation)
(!Eine feste Bildschirmgröße)
(!Eine automatische Übersetzung)

'''Warum ist p5.js für Anfängerinnen und Anfänger geeignet?'''
(Weil Code schnell sichtbare Ergebnisse erzeugt)
(!Weil man keine Logik verstehen muss)
(!Weil es nur auf Spezialcomputern läuft)
(!Weil es keine Fehler geben kann)

{{E}}
<br>

{{BR}}
== Memory ==

<div class="memo-quiz">
{|
|-
| setup || Startfunktion
|-
| draw || Wiederholfunktion
|-
| Canvas || Zeichenfläche
|-
| Variable || Speicherwert
|-
| Bedingung || Entscheidung
|-
| Schleife || Wiederholung
|-
| Debugging || Fehlersuche
|}
{{E}}
<br>

{{BR}}
== Drag and Drop ==

<div class="lueckentext-quiz">

{| class="wikitable"
! Ordne die richtigen Begriffe zu.
! Thema
|-
| '''setup'''
| Einmaliger Programmstart
|-
| '''draw'''
| Fortlaufende Programmausführung
|-
| '''Canvas'''
| Digitale Zeichenfläche
|-
| '''Variable'''
| Veränderbarer Speicherwert
|-
| '''Bedingung'''
| Entscheidung im Programm
|-
| '''Schleife'''
| Wiederholung von Anweisungen
|-
| '''Debugging'''
| Systematische Fehlersuche
|}
{{E}}

<br>
<br />

{{BR}}
== Kreuzworträtsel ==

<div class="kreuzwort-quiz">
{|
|-
| Canvas || Wie heißt die digitale Zeichenfläche in p5.js?
|-
| Variable || Wie nennt man einen benannten Speicherwert?
|-
| Schleife || Welches Konzept wiederholt Anweisungen?
|-
| Funktion || Wie nennt man einen wiederverwendbaren Codeblock?
|-
| Maus || Welches Eingabegerät liefert mouseX und mouseY?
|-
| Debugging || Wie nennt man die systematische Fehlersuche?
|}
{{E}}
<br>

{{BR}}
== LearningApps ==

<iframe> https://learningapps.org/index.php?s=p5.js+Programmieren+lernen </iframe>

{{BR}}
== Lückentext ==

<quiz display=simple>
{'''Vervollständige den Text.'''<br>
|type="{}"}
p5.js ist eine { JavaScript } Bibliothek für kreatives Programmieren im Web. Eine digitale Zeichenfläche wird häufig { Canvas } genannt. Die Funktion { setup } wird in einem typischen p5.js-Programm einmal zu Beginn ausgeführt. Die Funktion { draw } wird fortlaufend wiederholt und eignet sich deshalb für Animationen. Eine { Variable } speichert einen Wert, der sich während des Programms verändern kann. Eine { Bedingung } ermöglicht es einem Programm, zwischen verschiedenen Handlungen zu entscheiden. Eine { Schleife } wiederholt Anweisungen und hilft beim Erzeugen von Mustern. Beim { Debugging } suchst und behebst Du Fehler im Code. Mit { mouseX } kann die horizontale Mausposition genutzt werden. Creative Coding verbindet { Gestaltung } mit Programmierung.
</quiz>

<br>

{{BR}}
= Offene Aufgaben =

{{BR}}
=== Leicht ===

# [[Erstes p5.js-Bild]]: Erstelle ein digitales Bild aus mindestens fünf geometrischen Formen. Beschreibe anschließend, welche Funktionen Du verwendet hast und welche Koordinaten besonders wichtig waren.
# [[Farben erkunden]]: Programmiere drei Varianten desselben Motivs mit unterschiedlichen Farben. Vergleiche, wie sich die Wirkung durch den [[RGB-Farbraum]] verändert.
# [[Maus-Kreis]]: Erstelle ein Programm, bei dem ein Kreis der Maus folgt. Ergänze eine kurze Erklärung zu '''mouseX''' und '''mouseY'''.
# [[Fehler-Tagebuch]]: Baue absichtlich drei kleine Fehler in einen p5.js-Sketch ein, behebe sie und notiere, welche Fehlermeldungen oder Beobachtungen Dir geholfen haben.

{{BR}}
=== Standard ===

# [[Interaktives Plakat]]: Gestalte ein digitales Plakat, das auf Mausbewegungen oder Mausklicks reagiert. Achte auf eine klare gestalterische Aussage.
# [[Muster-Generator]]: Entwickle mit einer [[Schleife]] ein Muster aus Formen. Erkläre, welche Regel Dein Muster erzeugt.
# [[Mini-Animation]]: Programmiere eine animierte Figur oder ein bewegtes Objekt. Verwende mindestens eine [[Variable]] für Position oder Geschwindigkeit.
# [[Entscheidungsprogramm]]: Erstelle einen Sketch, der mit einer [[Bedingte Anweisung|Bedingung]] auf verschiedene Mausbereiche reagiert. Beschreibe, warum Bedingungen für interaktive Programme wichtig sind.

{{BR}}
=== Schwer ===

# [[Generative Kunst]]: Entwickle ein generatives Kunstwerk, das bei jedem Start anders aussieht. Begründe, welche Rolle [[Zufall]] und Regeln in Deinem Projekt spielen.
# [[Einfaches Spiel]]: Programmiere ein kleines Reaktionsspiel mit Punktestand, Bewegung und einer Gewinn- oder Verlustbedingung.
# [[Datenvisualisierung mit p5.js]]: Wähle eine kleine Datensammlung, zum Beispiel Temperaturen, Lieblingsfächer oder Umfragewerte, und visualisiere sie mit Formen, Farben oder Größen.
# [[Projektpräsentation]]: Plane, entwickle und präsentiere ein eigenes p5.js-Projekt. Dokumentiere Ziel, Entwurf, wichtigste Codebestandteile, Probleme, Lösungen und mögliche Erweiterungen.

{{:Offene Aufgabe - MOOC erstellen}}

{{BR}}
= Lernkontrolle =

# [[Code erklären]]: Erkläre an einem selbst gewählten p5.js-Sketch, wie '''setup''', '''draw''', [[Variable|Variablen]] und [[Funktion|Funktionen]] zusammenwirken.
# [[Algorithmus übertragen]]: Beschreibe einen Alltagsvorgang als [[Algorithmus]] und übertrage das Prinzip anschließend auf eine p5.js-Animation.
# [[Fehleranalyse]]: Du siehst ein Programm, bei dem ein Kreis nicht an der erwarteten Stelle erscheint. Entwickle eine Strategie, mit der Du mögliche Ursachen systematisch überprüfst.
# [[Gestaltung begründen]]: Vergleiche zwei interaktive p5.js-Bilder. Beurteile, wie Farben, Bewegung, Eingaben und Formen die Wirkung verändern.
# [[Projekt verbessern]]: Nimm ein einfaches p5.js-Programm und entwickle drei sinnvolle Erweiterungen. Begründe, welche Erweiterung den größten Lerngewinn bietet.
# [[Transfer auf Webseiten]]: Erkläre, wie p5.js mit [[HTML]], [[CSS]] und [[JavaScript]] zusammenhängt und warum dieses Wissen auch für andere Webprojekte nützlich ist.
# [[Ethik digitaler Gestaltung]]: Diskutiere, welche Verantwortung Programmierende haben, wenn interaktive Medien Menschen beeinflussen, Daten nutzen oder Aufmerksamkeit lenken.

<br>
<br>

{{BR}}
= OERs zum Thema =

<iframe> https://de.m.wikipedia.org/wiki/Creative_Coding </iframe>

<br>

<iframe> https://de.m.wikipedia.org/wiki/JavaScript </iframe>

<br>

<iframe> https://de.m.wikipedia.org/wiki/Processing </iframe>

<br>

{{BR}}
= Links =

{| align=center
{{:D-Tab}}
'''[[p5.js]]'''
# [[JavaScript]]
# [[Creative Coding]]
# [[Processing]]
# [[Programmieren]]
# [[Algorithmus]]
# [[Variable]]
# [[Funktion]]
# [[Schleife]]
# [[Bedingte Anweisung]]
# [[Canvas]]
# [[Koordinatensystem]]
# [[Debugging]]
# [[Interaktion]]
# [[Datenvisualisierung]]
# [[Generative Kunst]]
|}

[[Kategorie:Informatik]]
[[Kategorie:Programmieren]]
[[Kategorie:JavaScript]]
[[Kategorie:Creative Coding]]
[[Kategorie:Medienbildung]]
[[Kategorie:Kunst]]
[[Kategorie:Digitale Bildung]]
[[Kategorie:Sekundarstufe]]
[[Kategorie:Studium]]

{{BR}}
= aiMOOC-Projekte =
{{TM}}
[[Kategorie:AI_MOOC]] [[Kategorie:GPT aiMOOC]]

P5.js - Versionsgeschichte