p5js Kurs: Lektion 2: Kreise malen, Mausposition nutzen

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.







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 neben dem Mauszeiger malen.
2.3 Ärgere die Benutzer:innen Deines Programms, indem Du den Pinsel spiegelverkehrt malen lässt.







Navigation

Übersicht

Vorherige Lektion

Nächste Lektion