P5*JS Sublime Setup

From Digipool-Wiki
Revision as of 13:03, 27 May 2018 by WikiSysop (Talk | contribs) (Tipps)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

P5js-setup-sublime-text-syntax.jpg

Grundlagen

Das P5 Projekt beruht auf der Idee, den Einstig in die Programmierung an Kunsthochschulen zu vereinfachen. Hierzu wurde zunächst Processing entwickelt, dass auch ausgehend von der Leetspeak Schreibweise Proce55ing mit P55 abgekürzt wurde. Processing ist eine Java Library und ist vorwiegend zum Programmierung von Programmen für Desktop Computer geeignet. P5*JS ist eine Library für JavaScript, die es ermöglich die vereinfachten "Werkzeuge", die Processing für Java zur Verfügung stellt auf Internetseite mit JavaScript zu nutzen. Da es auch allen Plattformen Internetbrowser gibt, ist es auf diese Weise möglich Programme zu schreiben, die sich auf jedem Gerät leicht öffnen lassen.


Installation

  1. Gehe auf die P5*JS Homepage und lade dir dort das komplette Paket runter - LINK
  2. Endzippe das Paket und lege die p5 Ordner unter Dateien ab.
  3. Lade und installiere die kostenlose Software Sublime Text - www.sublimetext.com
  4. Sehr hilfreich ist es zusätzlich das Syntax-Highlighting Paket für Sublime Text als Zip-Datei (Button oben rechts: Clown or Download) runter zu laden - LINK
  5. Das Paket bitte entpacken und schlicht in "p5.js" umbenennen.
  6. Starte Sublime und klicke unter PREFERENCES auf BROWSE PACKAGES
  7. Es öffnet sich ein Ordner, in dem sich bereits viele Pakete für Sublime befinden. Kopiere den P5 Ordner via Drag and Drop hier rein.
  8. In Sublime kannst Du jetzt unter VIEW / SYNTAX p5 anwählen. In deinem Code werden nun alle p5 Befehle eingefärbt, wenn Du sie richtig schreibst.
  9. Öffne (bzw installiere) Safarie zum betrachten der localen P5*JS Projekte.
  10. Mache den Menüpunkt ENTWICKLER sichtbar, indem du unter EINSTELLUNGEN / ERWEITERT unten den Harken setzt.
  11. Unter dem nun sichtbaren Menüpunkt ENTWICKLER vor den folgenden Punkten den Harken setzen:
    • LOKALE DATEIEINSCHRÄNKUNGEN DEAKTIVIEREN
    • WebRTC / Medienaufzeichnung auf unsicheren Sites erlauben


Workflow

  1. Navigiere zu deinem p5 Ordner auf deiner Festpallte
  2. Kopier den Ordner "empty-example" und gebe dem neuen Ordner den Namen deines Projektes
  3. Öffne die Datei "intex.html" mit Safari. Am Anfang erscheine eine leere Seite
  4. Öffne die Datei "sketch.js" mit Sublime-Text (Stelle sicher, das bei ANSICHT / SYNTAX "p5" angewählt ist)
  5. Ändere den Code in Sublime und speichere die Änderung mit Command+S ab
  6. Lade die Seite via reload Command+R neu in Safari, um die Änderungen zu betrachten


Tipps

  • Wenn Du in Safari unter ENTWICKLER / JAVASCRIBT CONSOLE EINBLENDEN aktivierst, erscheint unten im Fenster, das dir, falls Fehler vorhanden sind, Fehlermeldungen anzeigt, dir sehr hilfreich sein können.
  • Prettify Auto Format Plugin - Press CTRL/CMD + SHIFT + H - LINK