PointGrid TransformedWorld

Generative Grafik

Diese generativen Bilder sind mit einem Algorithmus erstellt worden, der nur eine Länge von 30 Zeilen hat. In meiner Phantasie sind es Perspektiven von Landschaften im virtuellen Raum. Hell und Dunkel wird nur durch die Dichte von schwazen punkten auf weißer Fläche definiert. Auf der Basis von einer Kette an rechenintensiven Operationen entstehen so poetische generative Grafiken. Der Computer muss ein wenig leiden wenn er eine Abbildung entwickelt.

Testen Sie den Live-Prototyp hier:
https://editor.p5js.org/matthias-jaeger-net/present/v-QZJe0xU

• 

• 

• 

• 

• 

• 

Generierte Landschaften
Kommentierter Code:

/**
 * PointGridTransformedWorld
 * Autor: Matthias Jäger
 * Datum: 11-04-2020
 */

/** Füllt eine Zelle mit Punkten */
function shade(x, y, s, d) {
  // x: x Koordinate
  // y: y Koordinate
  // s: Skalierung = Breite der Rasterzelle
  // d: Dichte = Anzahl der zufälligen Punkte
  // Setzt den Punkt an der linken oberen Ecke an
  // Versatz um halbe Breite an X- und Y-Achse.
  // Raster bleibt dennoch erhalten
  for (let i = 0; i < d; i++)
    point(x + random(-s * 0.5, s * 0.5), y + random(-s * 0.5, s * 0.5));
}

// HELPER FUNCTIONS
/** Einzelne Zelle im Raster */
function cell(x, y, s, f) {
  // x: x Koordinate
  // y: y Koordinate
  // s: Skalierung = Breite der Rasterzelle
  // f: Zufälliger Faktor
  // Zufälliger Breite – kann größer als s werden
  const rs = s * 0.5 * floor(random(0, f));
  // Zufälliger Dichte an Punkten
  const rf = random(f * 1, f * 10);
  // Eine Füllung mit Punkten für diese Zelle 
  shade(x, y, rs, rf);  
}

//** Erzeugt einen Raster mit Zellen */
function grid(d, s, f) {
  // d: Dichte = Anzahl der Spalten/Zeilen
  // s: Skalierung = Breite der Rasterzelle
  // f: Zufälliger Faktor
  // Für alle Spalten und Zeilen wird eine Zelle erzeugt
  for (let i = 0; i < d; i++)
    for (let j = 0; j < d; j++)
      cell(i * s, j * s, s, f);
}

// MAIN PROGRAM FUNCTION
//** setup wird automatisch von p5 aufgerufen */
function setup() {
  // Beginn der Komposition
  // Erzeugt einen quadratischen 3D <canvas>
  createCanvas(800, 800, WEBGL);
  // Grundierung mit weißer Farbe
  background(255.0);
  // Kompensation: Die WEBGL-Koordinaten sind zentriert
  translate(-400.0, -400.0, -200.0);
  // Zeichnung in die Blickebene drehen
  rotateX(HALF_PI);
  // Aughöhe setzen: Negative Werte wirken nach "oben"
  translate(0.0, 0.0, -400.0);
  // Computer mach 40 mal das selbe...
  for (let i = 0; i < 40; i++) {
    // Öffne eine neue Transformations-Matrix
    // Somit betrifft die Verschiebung jedes einzelne Raster seperat
    push();
    // Geringfügige zufällige Drehung des Horizonts
    rotateY(random(-0.1, 0.1));
    // Verschiebe jedes einzelne Raster zufällig vertikal
    translate(100.0, 0.0, random(-350.0, 150.0));
    // Zufällige Dichte und Größe des Rasters, wie der Zellen
    let d = floor(random(3.0, 10.0));
    // Finaler Aufruf mit allen daten an das Raster
    grid(d, (width / d), floor(random(i)));
    // Transformation Ende
    pop();
  }
  // Ende der Komposition
}

Mehr Projekte von Matthias Jäger finden Sie hier.