• Parametric Design
• 2D
• Input

Input

Bisher haben wir unsere Parameter immer manuell erstellt oder haben Funktionen wie random() genutzt. In dieser nächsten Einheit werden wir uns verscheidene Eingabeverfahren anschauen, um die Parameter unserer Design zu verändern, während diese gezeichnet werden.

Formulare

Der einfachste Input ist ein Textfeld:

let textField; 

function setup() {
  createCanvas(400, 400);
  textField = createInput('my name'); // default value
  textField.position(0, 400); // position of the input
  textField.size(100); // size of input
}

function draw() {
  background(255);
  text(textField.value(), 20, 20);
}

Dieser Input liefert uns immer einen Textwert (auch wenn das den meisten p5js-Funktionen egal ist, ob es eine Zahl oder Text ist). Wenn man den Wert in eine tatsächliche Zahl umwandeln will: parseInt(textField.value()) oder parseFloat(textField.value())

Manchmal möchte man nicht den Wert direkt nutzen, sondern sobald der Wert sich verändet sollen andere Einstellungen vorgenommen werden:

let myAge = 0;

function setup() {
  createCanvas(400, 400);
  let textField = createInput(myAge);
  textField.position(0, 400); // position of the input
  textField.size(100); // size of input
  textField.input(inputChange);
}

function inputChange() {
  // notice "this.value()" to access the current value
  myAge = parseInt(this.value()) * 365;
}

function draw() {
  background(255);
  text('Age in days: ' + myAge, 20, 20);
}

Das Textfeld muss nicht innerhalb der Zeichenfläche liegen. Es ist ein ganz normales HTML-Element und unabhängig von unserer Zeichenfläche. Wenn wir später unsere Zeichenfläche z.B. als Bild exportieren, wird das Textfeld auch nicht mitexportiert.

Wenn wir das input-Event an eine Funktion schicken, können wir den aktuellen Wert dieses Elements durch this.value() abrufen.

Man kann so viele Textfelder hinzufügen wie man möchtet. Neben Textfeldern gibt es auch noch andere Formularfelder:

• Button
• Checkbox
• Dropdown list
• Radio-Button
• Color Picker

Unter den Links gibt es in der Dokumentation weitere Informationen.

Slider

Ein weiteres Eingabeelement, welches ich an dieser Stelle noch zeigen will, ist der Slider. Wir können es genau wie die anderen Eingabefelder erstellen:

let slider; 

function setup() {
  createCanvas(400, 400);
  slider = createSlider(0, 200, 50, 10);
  slider.position(0, 400);
  slider.size(100);
}

function draw() {
  background(255);
  circle(200, 200, slider.value());
}

Maus

Wir können die aktuelle Position der Maus wie folgt abgreifen:

function draw() {
  point(mouseX, mouseY);
}

Mit der Maus können wir auch Events auslösen, wodurch Funktionen aufgerufen werden, die wir in unserem Code definieren können:

let counter = 0;
function mouseClicked() {
  counter += 1;
}

Andere Maus-Events: mouseMoved, mouseDragged, mousePressed, mouseReleased, mouseClicked, doubleClicked, mouseWheel, weitere Details hierzu gibt es in der Dokumentation.

Beispiele

Im folgenden Beispiel zeichnen wir einfach einen Kreis an der Position wo sich die Maus aktuell befindet. Weil wir den Hintergrund über background mit einer leicht transparenten Farbe überzeichnen, kann man die letzten Kreise noch sehen und es entsteht der Effekt eines Schweifs (wenn man die Maus langsam bewegt):

/lectures/2d/input/mousesimple/sketch.jsView on GitHub

Im nächsten Beispiel machen wir etwas ähnliches, hierzu überzeichnen wir aber nicht den Hintergrund, sonder fügen die aktuelle Position unserer Maus einem Array hinzu. Damit das Array nicht unendlich groß wird, nutzen wir die Funktion slice um immer die letzten 20 Elemente unseres Array zu extrahieren und diese dann als neues Array weiterzunutzen.

/lectures/2d/input/mouse/sketch.jsView on GitHub

Tastatur

Die Tastatur wird ähnlich wie die Maus gehandhabt. Die Tastatur ist besonders praktisch wenn man dadurch ein Event auslösen möchte, um z.B. den aktuellen Zustand als Bild zu exportieren (siehe nächster Abschnitt) oder eine Variable zu verändern:

let counter = 0;
function keyPressed() {
  counter += 1;
}

Wenn man unterschiedliche Abläufe ausführen möchte, abhängig davon welche Taste gedrückt wird, gibt es die globale Variable keyCode. In keyCode ist die ID (Zahl) der zuletzt gedrückten Taste gespeichert. Damit man sich nicht alle Nummern merken muss, hat p5js ein paar Shortcuts, wie z.B. LEFT_ARROW und RIGHT_ARROW. Diese Shortcuts sind einfach auch globale Variablen, welche mit der Zahl der zugehörigen Taste gefüllt sind, sodass wir uns die für diese häufig genutzten Tasten nicht merken müssen:

let counter = 0;
function keyPressed() {
  if (keyCode === LEFT_ARROW) {
    counter -= 1;
  } else if (keyCode === RIGHT_ARROW) {
    counter += 1;
  } else {
    console.log(keyCode);
  }
}

Wenn man sich nicht sicher ist, welcher Taste welchen Code hat, kann man sich den Code auch in der Konsole der Developer Tools einfach ausgeben lassen: console.log(keyCode);.

Auch innerhalb unserer Draw-Schleife können wir herausfinden, ob gerade eine Taste gedrükct wird: keyIsPressed:

function draw() {
  if (keyIsPressed === true) {
    background(255);
  } else {
    background(0);
  }
}

Wenn man die Tastatureingabe nutzt, muss man in der Regel immer erst einmal auf die Seite klicken, damit diese die Tastatur-Events erhält. Dies eine Sicherheitsmaßnahme, damit nicht irgendwelche Webseiten einfach eure Tastaturaktivitäten abgreifen können. Das nächste Beispiel ist eine etwas alberne Demonstration. Clickt auf den schwarzen Canvas und fangt an wild auf eure Tastatur einzutippen:

/lectures/2d/input/keycolors/sketch.jsView on GitHub

GUI

Unter den Bonus-Seiten gibt es eine Einführung in das GUI-Plugin.

Inspiration: Fractals

Hier ist das selbe Beispiel aus dem letzten Abschnitt, aber nun sind alle Variablen durch Slider ersetzt worden, sodass man die Funktionsweise der Fraktale schnell durch iteratives Experimentieren untersuchen kann. Besonders der vierte und fünfte Slider generieren interessante Ergebnisse.

/lectures/2d/input/fractals/sketch.jsView on GitHub

Zurück zum Anfang