Close Menu
About

sonoya.com ist ein mash up Blog mit vielen Digital Lifestyle Beiträgen rund um Apple Mac, iOS, Android, Linux, Raspberry Pi und Web Services.

p5.js Anleitungen

Visual Studio Code für p5.js einrichten: Einfacher Workflow für Templates und Snippets

4 Mins Read
p5js

Wenn Du regelmäßig mit p5.js arbeitest, weißt Du, wie wichtig eine gut organisierte Umgebung ist, um schnell neue Projekte zu starten und wiederkehrende Codeschnipsel (Snippets) effizient nutzen zu können. In diesem Beitrag zeigen wir Dir, wie Du Visual Studio Code (VS Code) so einrichtest, dass Du mit einem Klick neue p5.js-Projekte erstellen kannst – inklusive aller benötigten Dateien – und wie Du Snippets für häufig verwendeten Code einrichtest.

Warum ist das wichtig?

Mit einem durchdachten Workflow kannst Du viel Zeit sparen und Dich besser auf das kreative Coden konzentrieren. Ob Du ein erfahrener p5.js-Entwickler bist oder gerade erst beginnst, diese Anleitung hilft Dir, schnell und strukturiert loszulegen. Perfekt, wenn Du oft mit Animations-Experimenten, Interaktionsdesigns oder Visualisierungen arbeitest.

Voraussetzungen

Bevor wir loslegen, solltest Du folgende Dinge haben:

  1. Visual Studio Code: Hier herunterladen.
  2. Node.js und npm: Falls Du p5.js später per npm nutzen willst, kannst Du Node.js hier installieren.
  3. p5.js-Bibliothek: Entweder als lokale Dateien oder direkt per CDN einbinden.
  4. Grundlegende Kenntnisse in HTML, CSS und JavaScript – keine Sorge, wir halten es einfach!

Schritt-für-Schritt-Anleitung

1. Visual Studio Code installieren und vorbereiten

  1. Lade Visual Studio Code von der offiziellen Website herunter und installiere es.
  2. Installiere folgende Erweiterungen:
    • Live Server: Für die Vorschau Deiner p5.js-Sketches im Browser.
    • JavaScript (ES6) Snippets: Für allgemeine JavaScript-Hilfen.
    • Optional: Prettier für automatisches Formatieren des Codes.

2. Projektstruktur und Vorlagendateien erstellen

Damit Du nicht jedes Mal manuell HTML-, CSS- und JS-Dateien anlegen musst, erstellen wir eine Vorlage:

  1. Ein Template-Projekt erstellen:
    • Lege einen Ordner an, z. B. p5js-template.
    • Erstelle darin folgende Dateien:
      • index.html: Enthält das Grundgerüst für Dein Projekt.
      • sketch.js: Hier kommt Dein p5.js-Code rein.
      • Optional: style.css: Für eigenes Styling.
  2. Beispielinhalt für die Dateien:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>p5.js Sketch</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <script src="sketch.js"></script>
</body>
</html>

sketch.js:

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

function draw() {
  background(220);
}

style.css:

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

3. Ein neues Projekt basierend auf dem Template erstellen

  1. Speichere den p5js-template-Ordner an einem sicheren Ort.
  2. Um ein neues Projekt zu starten:
    • Kopiere den gesamten Ordner an den gewünschten Ort.
    • Benenne ihn nach Deinem neuen Projekt, z. B. my-new-sketch.

4. Snippets für wiederkehrenden Code erstellen

Um Deinen Workflow weiter zu optimieren, richten wir eigene Snippets in VS Code ein.

  1. Öffne in VS Code die Befehlspalette (Strg+Shift+P) und wähle Benutzersnippets: Konfiguration auswählen.
  2. Wähle javascript.json aus, um Snippets für JavaScript zu erstellen.
  3. Füge die folgenden Snippets hinzu:

Beispiel-Snippet: setup und draw automatisch einfügen

{
  "p5 Setup and Draw": {
    "prefix": "p5setup",
    "body": [
      "function setup() {",
      "  createCanvas(${1:400}, ${2:400});",
      "}",
      "",
      "function draw() {",
      "  background(${3:220});",
      "}"
    ],
    "description": "Erstellt setup und draw Funktionen für p5.js"
  }
}

Beispiel-Snippet: createShape

{
  "p5 Create Shape": {
    "prefix": "p5shape",
    "body": [
      "beginShape();",
      "vertex(${1:50}, ${2:50});",
      "vertex(${3:100}, ${4:50});",
      "vertex(${5:100}, ${6:100});",
      "endShape(CLOSE);"
    ],
    "description": "Erstellt eine benutzerdefinierte Form mit beginShape() und vertex()"
  }
}

Jetzt kannst Du in Deinem Code p5setup oder p5shape eintippen und die Snippets schnell einfügen lassen.

5. Live Server für schnelle Vorschau nutzen

  1. Öffne das Projekt in VS Code.
  2. Rechtsklicke auf die index.html und wähle Open with Live Server. Dein Browser öffnet sich mit dem Sketch.
  3. Änderungen in Deinem Code werden automatisch aktualisiert.

Fazit

Mit dieser Anleitung hast Du jetzt einen optimierten Workflow für p5.js in VS Code und Du kannst auf den einfachen aber auch etwas aufwändiger zu bediendenden p5.js online Editor verzichten. Templates sorgen dafür, dass Du schnell startklar bist, und Snippets sparen Dir Zeit bei wiederkehrendem Code. So kannst Du Dich voll und ganz auf das kreative Programmieren konzentrieren – statt ständig die gleichen Grundlagen neu aufzubauen.

Share.

Ähnliche Artikel