Abstraktion geometischer Formen in p5.js

Isabel Dobner | 05.2023.

Co-Autor(en): Jennifer Brodt

Zufällige Abstaktion geometrischer Formen

Ziel der Übung

In dieser Übung wirst du einfache abstrahierte geometrischen Formen in einem Canvas programmieren. Zunächst erstellst du die gewünschten geometrischen Formen, welche dann in einer Schleife vervielfältigt werden. Dabei werden sie mit verschiedenen Farben, Strichstärken, Strichlücken und Positionen versehen. Durch Klicken der Maus wird eine neue Variante des Musters erzeugt, und mit der Taste "s" kannst du das Muster speichern.

Beispiel Bild von einem Möglichen Muster

p5.js

Für diese Übung wird die JavaScript-Bibliothek p5.js verwendet. Du kannst den Online-Editor nutzen, um dein Muster zu programmieren. Alternativ kannst du die Bibliothek auch in deine eigene Website integrieren oder mit einem beliebigen Quellcode-Editor bearbeiten.

Die Farbpalette laden

Die preload() Funktion wird verwendet, um die CSV-Datei mit den Farbpaletten im Voraus zu laden. Die loadTable() Funktion wird verwendet, um die CSV-Datei zu laden und in der Variablen "table" zu speichern.

function preload() {
  table = loadTable("colors.csv", "csv", "header");
}

Die setLineDash() Funktion wird verwendet, um gestrichelte Linien zu erstellen. Diese Funktion nimmt eine Liste von Zahlen als Argument entgegen, die die Längen der Striche und der Lücken zwischen ihnen repräsentieren. Die drawingContext.setLineDash() Funktion wird mit dieser Liste als Argument aufgerufen.

function setLineDash(list) { 
 drawingContext.setLineDash(list);
}

Canvas erstellen

Als nächstes folgt setup()-Funktion. Diese Funktion initialisiert die Canvas und setzt die Hintergrundfarbe mit background(69); auf grau fest. Alternativ können diese auch mit einer Farbe aus einer zufällig gewählten Palette verknüpft werden. Um jedoch nicht genau die gleiche Farbe aus der Palette zu übernehmen, wird die Farbe leicht angepasst und abgewandelt, indem die RGB-Werte um 0,5 erhöht werden.

let col = floor(random(5));
        r = table.get(palette, col * 3);
        g = table.get(palette, col * 3 + 1,5);
        b = table.get(palette, col * 3 + 2,5); 

background(r, g, b);

noFill() wird verwendet, um sicherzustellen, dass alle Formen nur durch eine Linie dargestellt werden. Die Canvas wird mit let width1 = windowWidth; let height1 = windowHeight; auf die Breite und Höhe des Fenster eingestellt. Zwei Zufallswerte werden für die Variablen random1 und random2 generiert, diese werden verwendet um die Ausrichtung der Linien auf dem Canvas zu bestimmen.

Die Funktion createCanvas() wird verwendet, um die Leinwand zu erstellen, die dann in der Variablen canv gespeichert wird. Die Funktion mousePressed() wird auf der Variable canv aufgerufen, was bedeutet, dass die Leinwand jedes Mal zurückgesetzt wird und sich die Grafik ändert, wenn der Benutzer darauf klickt.

function setup() {
  let width1 = windowWidth;
  let height1 = windowHeight;
  let canv = createCanvas(width1, height1);
  noFill();
  strokeCap(SQUARE);
  let random1 = width1/5;
  let random2 = width1/2; 
  canv.mousePressed(setup); 
  let palette = floor(random(676)); 
  background(69);

Das Programm wählt eine von 676 Farbpaletten der CSV-Datei heraus und speichert diese unter der Variable "palette".

Die floor() Funktion rundet die zufällige Zahl auf die nächste ganze Zahl ab, die dann als Index für die Farbpalette verwendet wird.

let palette = floor(random(676));

Erstellen der Schleifen

Die erste Schleife wird verwendet, um die Linien zu zeichnen. Für jede Iteration der Schleife wird eine zufällige Startposition für die Linie generiert, indem die Funktion random() verwendet wird. random() nimmt zwei Argumente an, die den minimalen und maximalen Wertebereich für die Zufallszahl darstellen.

Die Funktion setLineDash() wird aufgerufen, um eine gestrichelte Linie zu erstellen. Die Funktion strokeWeight() wird verwendet, um die Strichstärke der Linie auf einen zufälligen Wert zu setzen.

Die Funktion line() wird dann aufgerufen, um die Linie von der Startposition bis zum unteren Rand der Leinwand zu zeichnen.

Schließlich wird die Linie um einen zufälligen Winkel mit der Funktion rotate() gedreht.

for(i = 0; i < 20; i++){
  //Linie
  let position = random(random1,random2);
  setLineDash([random([1], [100]), random([1], [100])]);  
  strokeWeight(random([1], [100]));
  line(position, 0, position, height*4);
  rotate(random(0.025));

Die Variable "col" wird verwendet, um eine der fünf Farben in der Palette auszuwählen.

Dann werden die RGB-Werte für die ausgewählte Farbe mithilfe der Funktion get() abgerufen und den Variablen r, g und b zugewiesen.

Schließlich wird die Funktion stroke() verwendet, um die Strichfarbe der Linie auf die ausgewählte Farbe zu setzen.

Wählen der Farben

let col = floor(random(5));
        r = table.get(palette, col * 3);
        g = table.get(palette, col * 3 + 1);
        b = table.get(palette, col * 3 + 2); 
    
    stroke(r, g, b, 170);    
  }

Weitere Schleifen und Formen

Die zweite Schleife wird verwendet, um die Kreise zu zeichnen. Für jede Iteration der Schleife wird eine gestrichelte Linie mit der setLineDash() Funktion erstellt. Die Strichbreite des Kreises wird mit der strokeWeight() Funktion auf einen zufälligen Wert gesetzt. Die versatz-Variabel wird verwendet, um eine zufällige Verschiebung für den Kreis zu generieren. Dann wird die circle() Funktion aufgerufen, um den Kreis mit dem spezifizierten Strichgewicht und der Verschiebung zu zeichnen.

for(i = 0; i < 48; i++){
   //circle
  setLineDash([random([1], [100]), random([1], [100])]);  
  strokeWeight(random([1], [200]));
  let versatz= random(50);
  circle(850+versatz ,50+versatz ,550+versatz );

Innerhalb der schleife wird eine zufällige Farbpalette auf die gleiche Weise wie im ersten Loop ausgewählt. Die Strichfarbe des Kreises wird mit der stroke() Funktion auf die ausgewählte Farbe gesetzt. Zusätzlich kann die Deckkraft der Farbe festgelegt werden, um bei Bedarf die Farben der Striche zu überlagern und zu mischen.

let palette = floor(random(676));
  let col = floor(random(5));
        r = table.get(palette, col * 3);
        g = table.get(palette, col * 3 + 1);
        b = table.get(palette, col * 3 + 2); 
    
    stroke(r, g, b, 170); 
  }

Das Bild speichern

keyTyped() speichert das Bild als JPG-Datei, wenn die Taste "s" gedrückt wird.

function keyTyped() { //mit der taste "s" wird das bild gespeichert
  if (key === "s") {
    save("myCanvas.jpg");
  }
}

In diesem Code wird P5.js verwendet, um abstrakte Grafiken zu erstellen, die jedes Mal anders aussehen.

Dieses Tutorial soll als leitfaden verwendet werden. Das heißt, nun bist du an der Reihe, experimentiere mit den Parametern, Einstellungen und Formen, um die Grafik nach deinem Wunsch anzupassen.