Beispiel Linien ziehen

Programm im Editor öffnen

Quellcode ohne Kommentar

let x1, y1;

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

function draw() {
  if (mouseIsPressed) {
    const strichstaerke = random(7);
    const strichfarbe = random(255);
    strokeWeight(strichstaerke);
    stroke(strichfarbe);
    const x2 = mouseX + random(-10, 10);
    const y2 = mouseY + random(-10, 10);
    line(x1, y1, x2 , y2);
  }
}

function mousePressed() {
  x1 = mouseX;
  y1 = mouseY;
}

function keyPressed(){
  background(240);
}

Quellcode mit Kommentar

// Zwei Werte, die mit x1 und y1 bezeichnet werden,
// diese stehen für den Startpunkt der Linie:
let x1, y1;

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

function draw() {
  // Wenn die Maustaste gedrückt ist...
  if (mouseIsPressed) {
    // Zufallswerte für die Strichstärke und die Strichfarbe setzen:
    const strichstaerke = random(7);
    const strichfarbe = random(255);
    strokeWeight(strichstaerke);
    stroke(strichfarbe);
    
    // Die Koordinaten für den Endpunkt der Linie berechen.
    // Die hängen ab von der aktuellen Mausposition und einer Zufallszahl zwischen -10 und 10
    const x2 = mouseX + random(-10, 10);
    const y2 = mouseY + random(-10, 10);

    // Line ziehen:
    line(x1, y1, x2 , y2);
  }
}

// Wenn die Maustaste gedrückt wurde,
// neuen Startpunkt der Linie ziehen:
function mousePressed() {
  x1 = mouseX;
  y1 = mouseY;
}

// Wenn irgendeine Taste gedrückt wurde,
// Programmfenster mit grau füllen:
function keyPressed(){
  background(240);
}