p5.js-WebEditor

Der Inline-Editor, den du auf dieser Seite findest ist hilfreich, um programmieren zu üben. Wenn du aber eigene Programme schreiben und speichern möchtest, ist er eher ungeeignet. Praktischer ist der p5.js-WebEditor. In diesem Kapitel lernst du, wie du ein p5.js-Programm im p5.js-WebEditor zum Laufen bringen, dieses dort speichern und wieder laden kannst.

1)

Öffne den p5.js-WebEditor, indem du auf den folgenden Link mit der rechten Maustaste klickst und dann 'Link in neuem Tab öffnen' mit der linken Maustaste anklickst.

https://editor.p5js.org/

2)

Kopiere den folgenden Quellcode, indem du im Quellcode-Fenster oben rechts auf das Symbol für das Clipboard (Zwischenablage) klickst. Du kannst den Quellcode auch kopieren, indem du diesen mit der Maus markierst, dann mit der rechten Maustaste auf die Markierung klickst und dann 'Kopieren' anklickst.

  var n = 0;

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

  function draw() {
    background(240); 
    n = n + .01;
    var r = noise(n) * width;  
    ellipse(200, 200, r, r);
  }

3)

Wechsle auf den p5.js-WebEditor, indem du auf den entsprechenden Tab in deinem Internet-Browser klickst.

4)

Klicke mit der linken Maustaste in das Editor-Fenster, wo im Moment folgender Code steht:

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

    function draw() { 
      background(220);
    }

Drücke dann die Taste Strg und gleichzeitig die Taste A. Damit markierst du den gesamten Text.

5)

Drücke die Taste Strgund gleichzeitig die Taste V. Jetzt sollte der kopierte Code eingefügt werden.

6)

Klicke auf das Symbol Programm starten (ein rosarotes Dreieck in einem grauen Kreis). Jetzt sollte der Kreis auftauchen und sich bewegen.

7)

Auf die gleiche Weise kannst du andere Beispielprogramme in den p5.js-WebEditor einfügen. Oder du schreibst deine eigenen Programme.

8)

Wenn du deine Programme sichern und später wieder laden möchtest, kannst du beim p5.js-WebEditor ein Benutzerkonto anlegen.

Das Konto bekommst du kostenlos.

Klicke dazu oben rechts auf Sign up, gib einen User-Namen, eine E-Mail-Adresse und ein Passwort ein und klicke auf Sign Up. Das Benutzerkonto wird dann angelegt.

Um dich beim p5.js-WebEditor anzumelden, klicke auf Log In und dann nochmals auf Log In, nachdem du deinen Benutzernamen und dein Passwort eingegeben hast.

9)

Ein Programm kannst du sichern, indem du auf File > Save klickst.

10)

Ein Programm kannst du laden, indem du auf File > Load klickst.

11)

Beispiele kannst du laden, indem du auf File > Examples klickst und kurz wartest, bis diese geladen sind. Klicke dann auf ein Beispiel und starte das Programm mit einem Klick auf den Start-Button.

Viel Spass!