Punktsymmetrische Muster in p5.js

Alexandra Asmus | 05.2022.

Co-Autor(en): Fiona Linnenlüke, Aleksandra Stojcic

Punktsymmetrische Muster aus variablen Formen und Farben

Inhalt des Tutorials

In diesem Tutorial programmierst du mithilfe des p5.js Editors ein punktsymmetrisches Muster, welches aus mindestens ein- bis maximal zwölfseitigen Formen besteht. Die Formen werden in verschiedenen Farben dargestellt, um am Ende ein farbenfrohes Muster zu erhalten.

Schritt 1: Voreinstellungen definieren

Wenn wir den p5.js Editor öffnen, wird folgender Anfangscode angezeigt:

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

function draw() {
  background(220);
}

Zunächst werden wir uns function setup() genauer anschauen und darin wichtige Voreinstellungen definieren.

Die Funktion setup() wird einmalig beim Programmstart aufgerufen. Hier werden Umgebungseigenschaften, wie Bildschirmgröße und Hintergrundfarbe definiert.

Für unser Tutorial ändern wir die Werte für createCanvas auf (720,720) um und haben somit eine Bildschirmgröße von 720 pixel in Breite und Höhe.

Mit noFill() werden die Formen in ihrer Farbe nicht ausgefüllt dargestellt.

Als Hintergrundfarbe benötigen wir weiß und geben somit background(255) in unserem Code ein.

Mit strokeWeight definieren wir die Stärke des Strichs, in der die Formen dargestellt werden. Diese ist in diesem Fall variabel. Wir verwenden im Beispiel strokeWeight(2). Je höher die Zahl ,umso Stärker der Strich.

Außerdem fügen wir den 'use strict'-Mode ein, um einige gängige Fehler beim Coden zu vermeiden, da diese in Form von Errors angezeigt bzw. ungewollte Features geblockt werden.

'use strict';

function setup() {
  createCanvas(720, 720);
  noFill();
  background(255);
  strokeWeight(2);
}

Schritt 2: Eine Form zeichnen

In diesem Schritt befinden wir uns in der Funktion draw(), die schon zu Beginn im Editor vorhanden ist. Diese wird direkt nach setup() aufgerufen und sorgt dafür, dass die in dem Block enthaltenen Codezeilen kontinuierlich ausgeführt werden.

Wir starten mit einer if-else-Anweisung. Hierbei wird eine Bedingung gesetzt, wenn diese wahr ist, wird der Code zwischen den darauffolgenden geschweiften Klammern ausgeführt. Das Schreiben eines else-Blocks ist dabei optional und bei uns nicht unbedingt notwendig.

In die Klammern nach 'if' fügen wir nun unsere Bedingung ein, dass die linke Maustaste gedrückt sein soll, um die Anweisungen durchzuführen.

function draw() {
if (mouseIsPressed && mouseButton == LEFT) {
}
}

In die darauffolgenden geschweiften Klammern werden an Anfang und Ende die Funktionen push() und pop() eingebettet, um mehr Kontrolle zu erreichen.

Anschließend wird die Anfangsposition mithilfe von translate() deklariert. Für unser Tutorial brauchen wir die Mitte unseres Canvas, um die Punktsymmetrie zu gewährleisten und schreiben in die Klammern die Informationen width/2, und height/2.

Als nächstes definieren wir eine neue Variable Radius, mit der wir die Richtung der gezeichneten Formen bestimmen können.

Wenn der Radius > 0 groß ist, dann zeigt ein Dreieck nach links, wenn der Radius < 0 groß ist, dann zeigt ein Dreieck nach rechts.

Der Radius und damit auch die Form werden größer, je weiter man sich von der Mitte mit der gedrückten Maus entfernt.

function draw() {
  if (mouseIsPressed && mouseButton == LEFT) {
    push();
    translate(width / 2, height / 2);
    var radius = mouseX - width / 2;
   var seitenzahl = 3;
    var angle = TAU / seitenzahl; // tau = 2*PI
    pop();
  }
}

Im weiteren schreiben wir noch die Variablen Seitenzahl und angle, um die gewünschte Form, bzw. die Seitenzahl der Form, zu definieren. Hierfür deklarieren wir ein Dreieck.

Nun schreiben wir eine Funktion, die es ermöglicht, die Formen zu zeichnen. Dafür benötigen wir beginShape() und endShape().

Dazwischen betten wir eine for-Schleife ein, die nützlich ist, um einen Codeabschnitt mehrmals auszuführen.

Mithilfe von Sinus und Cosinus und dieser mathematischen Formel, ist es uns nun möglich die Formen zu zeichnen.

function draw() {
  if (mouseIsPressed && mouseButton == LEFT) {
    push();
    translate(width / 2, height / 2);
    var radius = mouseX - width / 2;
    var seitenzahl = 3;
    var angle = TAU / seitenzahl; // tau = 2*PI

    beginShape();
    for (var i = 0; i <= seitenzahl; i++) {
      var x = cos(angle * i) * radius;
      var y = sin(angle * i) * radius;
      vertex(x, y);
    }
    endShape();
 
    pop();
  }
}

Schritt 3: Formart variabel machen

Da eine einzige Form etwas langweilig erscheinen kann, ändern wir in diesem Schritt die Variabel Seitenzahl um.

Somit muss diese nicht mehr manuell verändert werden, sondern wird durch die Position des Mauszeigers in der y-Achse gesteuert. Je tiefer der Mauszeiger, desto mehr Seiten hat die Form. Mit dieser Einstellung ist es möglich, mindestens ein- bis maximal zwölfseitige Formen zu erzeugen.

var seitenzahl = int(map(mouseY + 100, 0, height, 2, 10));

Schritt 4: Farbe der Formen definieren

Da unsere Striche bis jetzt keine Farbe zugeordnet bekommen haben und im vordefinierten schwarz dargestellt werden, ist es nun an der Zeit, unser Muster farbenfroher zu gestalten.

Hierfür ergeben sich drei verschiedene Möglichkeiten.

Variante 1:

Nach der for-Schleife in der Funktion draw() fügen wir folgenden Codeschnipsel ein. Dieser ermöglicht uns, je nach Richtung der gedrückten Maus, die Farbe zu ändern.

let farbe= map(mouseX, 0, width, 0, 255);
      stroke(farbe, 100, 100);

Variante 2:

Mit Veränderung des stroke(farbe,100,100) lassen sich verschiedene Farbpaletten definieren.

Gut zu wissen und besonders wichtig ist, dass standardmäßig der RGB-Farbraum eingestellt ist, was bedeutet, dass nur der Rotton mit der Maus in X-Achse variiert werden kann.

In diesem Beispiel ändern wir die stroke()-Werte in (farbe,100,400) um.

Variante 3:

An dieser Stelle wird es besonders bunt. Das gelingt uns, indem wir den Farbraum ändern.

In der Funktion setup() legen wir den HSB-Farbraum mit colorMode(HSB) fest.

Mit nur dieser Einstellung können wir Muster durch die Postition der Maus erstellen.

function setup() {
 (...)
  colorMode(HSB);
}

Schritt 5: Zusatz

Am Ende des Tutorials können wir nun, wenn gewollt, noch eine zusätzliche Funktion einbetten, um die Anzahl der gleichzeitig generierten Formen zu ändern.

Das geschieht, indem wir zwei for-Schleifen hinzufügen: die äußere gibt die Spalten an und die innere for-Schleife, füllt die Zeile mit Formen.

Diese beiden Schleifen binden die erste mit ein.

for(let j = 1; j<=anzahl; j++) {
      for(var k = 1; k<=anzahl ;k++) {
        push();
        translate(width - j*(width/(anzahl+1)), height - k*(height/(anzahl+1)));
        beginShape();
        for (var i = 0; i <= seitenzahl; i++) { //alte for-schleife
          var x = sin(angle * i) * radius;
          var y = cos(angle * i) * radius;
          vertex(x, y);
        }

        stroke(farbe, 100, 400);
        endShape();
        pop();
      }
    }
  }
}