In diesem Video zeige ich euch wie ihr neue Projekte anlegt. Hierfür öffnet ihr das Repo
was ihr euch von GitHub heruntergeladen habt: "learning-parametric-design". Hier findet ihr
dann zwei Ordner. Einmal den "code" Ordner und einmal den "lectures" Ordner. Im "lectures" Ordner
findet ihr alle Inhalte wie sie auf der Webseite oder den Videos zu sehen sind. Unter "code" könnt
ihr dann eure eigenen Projekte anlegen. Für die 2D-Beispiel Apps kopiert ihr euch einfach
den "exampel" Ordner, fügt den dann in "code" wieder ein und benennt das ganze dann noch um,
sodass ihr das Ganze später auch entsprechend wiederfindet. Achtet beim Umbenennen darauf,
dass ihr keine Leerzeichen oder sonstigen Sonderzeichen benutzt. Da dies später
möglicherweise nicht im Browser dann korrekt geöffnet werden kann. Wenn wir dann in den
Ordner reingehen, sehen wir, dass hier zwei Dateien drin enthalten sind. Die "index.html"
Datei enthält die Angaben für den Browser, das zum einen die p5js Library geladen werden soll,
dann noch eine zusätzliche Erweiterung, die es uns später erlauben wird SVGs zu exportieren und
dann der wichtigste Teil die skech.js Datei. Das ist nämlich die Datei wo unser eigentlicher Code
liegt, mit dem wir unsere generativen Grafiken generieren werden. Und die öffnen wir jetzt auch.
Die skech.js Datei und hier finden wir jetzt die eigentlichen Kommandos die wir sozusagen
an den Browser schicken, um unsere Grafiken zu generieren. Damit wir uns das Ganze im Browser
anzeigen lassen können, können wir hier auf die index.html Datei nochmal gehen, klicken dann
unten in Visual Studio Code auf "go live", dass ist die Erweiterung die wir uns im vorherigen
Schritt installiert haben und dann sollte sich bei euch im Browser ein neues Tab öffnen,
mit dem entsprechenden Beispiel. Manchmal kann es sein, dass sich der sketch nicht sofort öffnet,
weil ihr zum Beispiel nicht auf die index.html Datei geklickt habt. Dann öffnet sich in der Regel
eine Seite wo ihr ganz viele Ordner darauf seht. Das ist im Grunde die Ordnerstruktur
wie ihr sie in eurem Repo habt. Dann müsst ihr euch einfach so lange durchklicken bis ihr die
entsprechende index.html Datei gefunden habt. Das schöne an der "live-server" Erweiterung ist,
dass wenn wir jetzt anfangen unsere skech.js Dateien zu bearbeiten, dass das System
automatisch merkt wenn wir speichern und dann die Website entsprechend neulädt. Was ich jetzt hier
zum Beispiel gerade gemacht habe, ist einfach die Hintergrundfarbe geändert und in dem Moment wo ich
auf speichern klicke, wird hier auf der rechten Seite die Webseite automatisch aktualisiert.