Version 0.1

Programm im Editor öffnen

Quellcode ohne Kommentar

let strichStaerkeWaehler;
let farbWaehler;

function setup() {
  createCanvas(400, 300);
  background(240);
  
  createElement("label", "Strichstärke: ");
  strichStaerkeWaehler = createSlider(1, 10, 3);
  createElement("br");

  createElement("label", "Farbe: ");
  farbWaehler = createColorPicker('#2196F3');
}

function draw() {
  if (mouseIsPressed) {
    let farbe = farbWaehler.color();
    stroke(farbe);
    let strichStaerke = strichStaerkeWaehler.value();
    strokeWeight(strichStaerke);

    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}

function keyPressed() {
  if (key == "x") {
    background(240);
  }
  if (key == "s") {
    saveCanvas('zeichnung', 'png');
  }
}

Quellcode mit Kommentar

// Die Variablen für die Kontroll-Elemente zur Bestimmung der Strichstärke
// und der Farbe:
let strichStaerkeWaehler;
let farbWaehler;

function setup() {
  createCanvas(400, 300);
  background(240);
  
  // Beschriftung des Strichstärke-Wählers:
  createElement("label", "Strichstärke: ");
  // Erzeugung des Strichstärke-Wählers:
  strichStaerkeWaehler = createSlider(1, 10, 3);
  // Neue Zeile (br = break = Zeilenumbruch):
  createElement("br");
  
  // Beschriftung des Farb-Wählers:
  createElement("label", "Farbe: ");
  // Erzeugung des Farb-Wählers:
  farbWaehler = createColorPicker('#2196F3');
}

function draw() {
  if (mouseIsPressed) {
    // Aktuelle Farbe des Wählers ermitteln:
    farbe = farbWaehler.color();
    // Farbe festlegen:
    stroke(farbe);
    // Aktuellen Wert des Strichstärke-Wählers ermitteln:
    strichStaerke = strichStaerkeWaehler.value();
    // Strichstärke festlegen:
    strokeWeight(strichStaerke);
 
    // Malen...
    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}

// Wenn eine Taste gedrückt wurde...
function keyPressed() {
  // ... und die Taste "x" war...
  if (key == "x") {
    // ... Bild löschen
    background(240);
  }
  // ...Wenn die Taste "s" war..
  if (key == "s") {
    // ... Bild speichern
    saveCanvas('zeichnung', 'png');
  }
}