Wie kann ich in p5.js per Mausklick jedes Mal einen anderen Buchstaben anzeigen lassen?

Das ist zur Zeit mein Code:

function setup() {
  createCanvas(700, 700,);
  background(20);
  frameRate(7);
}

function draw() {
  translate(width / 2, height / 2);
  rotate(mouseX, mouseY);
  noFill();
  stroke(255);
  textFont("Helvetica");
  textSize(400);
  textAlign(CENTER, CENTER);
  text("D", 0, 0);
}

function mousePressed() {
  setup();
}

Ich bin eigentlich zufrieden damit. Er ist sehr einfach. Ich würde nur gerne per Mausklick jedes Mal einen anderen Buchstaben anzeigen lassen.

Ich habe es schon geschafft, dass der Sketch per Mausklick von vorne anfängt, aber jetzt würde ich noch gerne mehrere Buchstaben haben. Sprich, dass ich eine Variable oder Array erstelle. Ich weiß nicht ganz, was ich da dann brauche und dort soll das ganze Alphabet zur Auswahl stehen und per Mausklick bekomme ich dann jedes Mal einen anderen Buchstaben zu sehen (aber immer nur einen).

Answer 1

[regex9]

Man kann alle Buchstaben, die zur Auswahl stehen sollen, entweder in einem Array sammeln oder in einem String. Anschließend muss man nur eine zufällige Zahl im entsprechenden Intervall 0 <= x < Zeichenanzahl generieren. Diese zeigt die Position des Zeichens im Array/String, welches herausgezogen werden soll.

function getRandomLetter() {
  const letters = "abcdefghijklmnopqrstuvwxyz";
  const randomIndex = Math.floor(Math.random() * letters.length);
  return letters[randomIndex];
}

Um Mausklicks zu registrieren und auf sie zu reagieren, kannst du die mouseClicked-Funktion definieren. In ihr wird ein neues Zufallszeichen ermittelt und an eine globale Variable gegeben, die an die text-Funktion übermittelt wird. Es ist also vergleichbar mit dem Beispiel aus der verlinkten Dokumentation (s. value-Variable).