p5js Kurs: Lektion 2: Kreise malen, Mausposition nutzen

18. April 2021
|In p5js, p5js Kurs 2021
|By Pit Noack

Beispielprogramme dieser Lektion

Konfettiparty

Konfettipinsel

1. Das erste Programm: Konfettiparty

Unten seht ihr unser erstes p5.js Programm mit dem schönen Namen Konfettiparty. Es füllt ein 300×300 Pixel großes Feld mit in allen Farben eingefärbten Kreisen. Mit einem Klick in das Fenster löscht ihr sämtliche „Konfettischnipsel“ und das ganze geht von vorne los.


Programm im Editor öffnen


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

function draw() {
  let rot = random(255);
  let gruen = random(255);
  let blau = random(255);
  
  fill(rot, gruen, blau);
  
  let x = random(width);
  let y = random(height);
    
  ellipse(x, y, 10);
}

function mousePressed() {
  background(240);
}

Zeile 2: Erzeugt Programmfenster mit 300×300 Pixeln
Zeile 3: Füllt das Programmfenster in hellgrau
Zeilen 7-9: Erzeugt zufällige Werte zwischen 0 und 255 für rot, gruen und blau
Zeile 11: Setzt die Füllfarbe auf die eben ermittelten Zufallswerte
Zeilen 13 und 14: Erzeugt zufällige Werte zwischen 0 und der Breite (width) und Höhe (height) des Programmfensters
Zeile 16: Zeichnet einen Kreis mit dem Durchmesser 10 an die eben ermittelte, zufällige Position
Zeilen 19-21: Füllt den Hintergrund hellgrau, wenn die Maustaste gedrückt wurde







Übungsaufgaben

1.1 Verändere den Durchmesser der Konfettischnipsel auf 20 statt 10 Pixel.
1.2 Gib den Konfettischnipseln zufällige Größen zwischen 0 und 100.
1.3 Gib den Konfettischnipseln zufällige Größen zwischen 10 und 50.


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

function draw() {
  let rot = random(255);
  let gruen = random(255);
  let blau = random(255);
  
  fill(rot, gruen, blau);
  
  let x = random(width);
  let y = random(height);
    
  ellipse(x, y, 20);
}

function mousePressed() {
  background(240);
}

Zeile 16: Das dritte Argument von ellipse() steuert den Durchmesser.



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

function draw() {
  let rot = random(255);
  let gruen = random(255);
  let blau = random(255);
  
  fill(rot, gruen, blau);
  
  let x = random(width);
  let y = random(height);

  let d = random(100);
    
  ellipse(x, y, d);
}

function mousePressed() {
  background(240);
}

Zeile 16:  let d = random(100) ermittelt einen zufälligen wert zwischen 0 und 100 und speichert diesen unter d.
Zeile 18: ellipse(x, y, d) setzt den Wert d an der entsprechenden Stelle ein.



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

function draw() {
  let rot = random(255);
  let gruen = random(255);
  let blau = random(255);
  
  fill(rot, gruen, blau);
  
  let x = random(width);
  let y = random(height);

  let d = random(10, 50);
    
  ellipse(x, y, d);
}

function mousePressed() {
  background(240);
}

Die Lösung gleicht jener von Aufgabe 1.2 – allerdings ermittelt hier in Zeile 16 die Funktion random() keine Zahl zwischen 0 und 100, sondern eine zwischen 10 und 50.







2. Das Programm Konfettipinsel

Das zweite Beispielprogramm ist eine Variante der Konfettiparty. Jetzt werden die Kreise nicht zufällig über die Bildfläche verteilt. Stattdessen hast Du die Möglichkeit, mit dem Mauszeiger wie mit einem Konfettipinsel zu malen. Probiere das Aus! Ein Druck auf eine beliebige Taste auf der Computertastatur löscht das Bild, und Du kannst von vorne anfangen zu malen. Anmerkung: Falls Du diese Seite auf dem Handy anschaust, probiere das Programm lieber hier.


Programm im Editor öffnen


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

function draw() {
  
  if (mouseIsPressed) {
    let rot = random(255);
    let gruen = random(255);
    let blau = random(255);

    fill(rot, gruen, blau);

    ellipse(mouseX, mouseY, 10);
  }
  
}

function keyPressed() {
  background(240);
}

Zeile 8: Wenn der Mauszeiger gedrückt ist:
Zeile 9-11: Ermittelt zufällige Werte zwischen 0 und 255 für rot, gruen und blau
Zeile 13: Setzt die Füllfarbe auf die eben ermittelten Zufallswerte
Zeile 15: Zeichnet einen Kreis mit Durchmesser 10 an die Position des Mauszeiger

Zeilen 20-22: Füllt den Hintergrund mit hellgrau, wenn irgendeine Taste gedrückt wurde







Übungsaufgaben

2.1 Sorge dafür, dass bei jedem Tastendruck das Programmfenster mit einer zufälligen Farbe gefüllt wird.
2.2 Lass den Pinsel immer 20 Pixel links neben dem Mauszeiger malen.
2.3 Ärgere die Benutzer:innen Deines Programms, indem Du den Pinsel spiegelverkehrt malen lässt.


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

function draw() {

  if (mouseIsPressed) {
    let rot = random(255);
    let gruen = random(255);
    let blau = random(255);

    fill(rot, gruen, blau);

    ellipse(mouseX, mouseY, 10);
  }

}

function keyPressed() {
  let rot = random(255);
  let gruen = random(255);
  let blau = random(255);
  background(rot, gruen, blau);
}

Die Zeilen 21-23 ermitteln (wie schon zuvor für die Füllfarbe) zufällige Werte für rot, gruen und blau.
In Zeile 24 werden diese Werte an die Funktion background() übergeben.



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

function draw() {

  if (mouseIsPressed) {
    let rot = random(255);
    let gruen = random(255);
    let blau = random(255);

    fill(rot, gruen, blau);

    ellipse(mouseX-20, mouseY, 10);
  }

}

function keyPressed() {
  background(240);
}





						




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

function draw() {

  if (mouseIsPressed) {
    let rot = random(255);
    let gruen = random(255);
    let blau = random(255);

    fill(rot, gruen, blau);

    ellipse(width-mouseX, height-mouseY, 10);
  }

}

function keyPressed() {
  background(240);
}







						































Navigation


Übersicht


Vorherige Lektion


Nächste Lektion




Dieser Kurs wurde entwickelt mit freundlicher Unterstützung und Kooperation in Workshops mit der Lernoase im Freizeitheim Vahrenwald in Hannover.

Alle Materialien stehen unter der Lizenz CC BY-NC-SA 4.0 mit Namensnennung „Pit Noack“.