Creative Coding - Setup

Um mit dem Programmieren anzufangen benötigen Sie ein Programm mit dem Sie Code schreiben können. Sie können jedes Programm benutzen das Text-Dateien bearbeiten und abspeichern kann. Diese Programme nennt man Texteditoren, oder kurz Editor.

In diesem Kurs benutzen Sie VSCodium oder Visual Studio Code. Die beiden sind fast identisch, Sie brauchen nur eins von beiden. Die aktuelle Version erhalten Sie auf der jeweiligen Website:

• https://vscodium.com/ - Open Source Community-Projekt mit deaktivierter Telemetrie (sprich: weniger Tracking). Die relevanten Setup-Downloads sind: VSCodium-x64-1.72.2.22289.msi für Windows, VSCodium.x64.1.72.2.22289.dmg für MacOS mit Intel-Prozessor oder VSCodium.arm64.1.72.2.22289.dmg für MacOS mit M1/M2 Prozessor.
• https://code.visualstudio.com/ - Das ist das ursprüngliche Original-Projekt, es enthält unbekannte Bestandteile und Telemetrie. Es ist verbreiteter.

Erweiterungen

Nach dem Setup benötigen Sie noch Erweiterungen für den Kurs. Erweiterungen kann man aus dem Programm heraus installieren, dazu verwendet man auf der linken Seite den Knopf mit den vier Quadraten (“Erweiterungen”)

p5canvas

In der Seitenleiste “Erweiterungen” (siehe Screenshot, Knopf 1️⃣), kann man per Text nach der gewünschten Erweiterung suchen. p5canvas dürfte nur ein Ergebnis vom Autor “garrit” oder “Garrit Schaap” liefern. Dieses installieren Sie bitte.

p5canvas zeigt eine Live-Vorschau von dem was wir programmieren. Sobald der Code fehlerfrei ist, aktualisiert sich das Fenster auf der rechten Seite des Bildschirms automatisch. Diese erweiterung wurde von Garrit Schaap speziell für diesen Kurs erstellt. Am unteren Rand Ihres Editors erscheint ein Button (siehe Pfeil), und dieser öffnet das Vorschaufenster.

Prettier

Prettier vom Autor “esbenp” oder “Prettier” formatiert unseren Code automatisch. Das heißt er ist immer richtig eingerückt und gut lesbar. Wenn Sie möchten können Sie nach und nach die Einstellungen an eigene Vorlieben anpassen.

Um Prettier richtig zu nutzen, müssen Sie nach der Installation noch zwei Einstellungen ändern. Dazu gehen Sie wieder in die Einstellungen und suchen nach der Einstellung Format on save und setzen dort einen Haken.

Als nächstes suchst du nach der Einstellung Default Formatter. Diese steht bei Ihnen vermutlich auf “None”, wähle hier Prettier bzw. esbenp.prettier aus.

Live Server

Live Server vom Autor “ritwickdey” oder “Ritwick Dey” startet einen Webserver auf Ihrem Computer, das ist für spätere, fortgeschrittene Aufgaben notwendig, weil in der Vorschau in VSCode/Codium zum Beispiel kein Sound funktionieren würde.

Stylebook

Stylebook vom Autor “garrit” oder “Garrit Schaap” ermöglicht es, “stylebook” Dateien anzuzeigen, dies ist ein Experiment, das wir später im Semester anfangen, wenn wir über CSS reden.

Ein Arbeits-Ordner

Sie brauchen einen gut auffindbaren Ort auf Ihrem Computer, in dem Sie für G1C arbeiten werden. Sicherlich geht Ihnen das für andere Kurse genau so, es bietet sich also an einen Ordner für das Studium zu haben, in dem man sich nach Kursen organisiert. Ein unverbindliches Beispiel:

In G1C werden wir an einer Handvoll kleinen Sachen und ein einer etwas größeren Sache arbeiten, diese wären sinnvollerweise dann Unter-Ordner von G1C.

Jetzt sind Sie bereit, um mit dem Kurs zu starten.

Weiterführendes (optional)

Wer möchte, kann sich hier tiefer in VSCodium / VS Code einarbeiten. Sie werden viel Zeit in diesem Tool verbringen, es lohnt sich also.

• Eine grundlegende Einführung in das User-Interface (deutsch, 17 Minuten): https://www.youtube.com/watch?v=eXFiKu3GRZE VSCode/VSCodium ist keine Rocket-Science, und Sie werden ihn bedienen können. Dennoch ist eine kleine Einführung manchmal hilfreich.
• 25 fortgeschrittene Tipps (englisch, 11 Minuten): https://www.youtube.com/watch?v=ifTF3ags0XI Viele von diesen Tipps sind für CC1 nicht wichtig oder sogar gar nicht anwendbar. Falls Sie mit anderen Programmiersprachen bereits arbeiten, ist hier aber sicher ‘was für Sie dabei!

---