Categories
Generative Gestaltung

Reise nach Kiuwq [Part 2]

Fußmarsch

Langsam und mit Bedacht suchte Peter Fiver seinen Weg durch die Wälder von Kiuwq. Vor langer Zeit – nach dem Ereignis – waren alle Dörfer und auch die Stadt selbst von Menschen verlassen worden. Er sah auf seinen Chronometer. Es war schon nachmittags und die Sonne kam nur spärlich aus den Wolken. Durch die Vegetation konnte er die ehemaligen Wohnquartiere entdecken. War da ein Geräusch? Sind andere Menschen hier? Mit Sicherheit. Er hatte in der Nacht Lichter gesehen. Peter nahm seine Foto-Kamera aus der wasserfesten Ledertasche. Er legte einen grobkörnigen Film in den Fotoapparat und begann Bilder aufzunehmen. Was für ein seltsamer Auftrag das war. Er hatte ja schon viele gefährliche Dinge erledigt, aber diese Sache war etwas Besonderes für ihn.

Walk Slowly and carefully Peter Fiver made his way through the forests of Kiuwq. A long time ago – after the event – all villages and the city itself had been abandoned by people. He looked at his chronometer. It was already in the afternoon and the sun came out of the clouds only sparsely. Through the vegetation, he was able to discover the former residential quarters. Was there a noise? Are other people here? Certainly. He had seen lights at night. Peter took his photo camera out of the waterproof leather case. He put a coarse-grained film in the camera and started taking pictures. What a strange job that was. He had already done a lot of dangerous things, but this was something special for him.

Fotografien aus den Vororten um Kiuwq

Code – Reise nach Kiuwq

Peter Fivers Reise nach Kiuwq ist ein Zusammenspiel von Phantasie, Sprache und Code. Alle gezeigten Bilder sind das Resultat einer Kette an Anweisungen in JavaScript. Für Matthias Jäger stehen sie aber im Kontext einer poetischen Geschichte über eine geometrische Welt. Er veröffentlicht deshalb Processing Code, Bilder und Stimmungstexte zusammen.

Probieren Sie das Programm hier selbst aus:
https://editor.p5js.org/matthias-jaeger-net/present/EhTPNAz7P

/**
 * Reise nach Kiuwq – Part 2
 * Author: Matthias Jäger
 * Date: 2020-04-11
 */

/** TEXTURES */
// ---------------------------------------------------------------------- //

/** Returns a p5.graphicbuffer filled with an amount of black points */
function dotsTexture(w, h, a) {
  const tex = createGraphics(w, h);
  for (let i = 0; i < a; i++)
    tex.point(random(w), random(h));
  return tex;
}

/** Returns a p5.graphicbuffer filled with a random grid with black points */
function dotGridTexture(w, h, a) {
  const tex = createGraphics(w, h);
  const s = w / a;
  tex.noFill();
  for (let i = 0; i < w; i += s)
    for (let j = 0; j < h; j += s)
      if (random(0, 1) > 0.4) tex.image(dotsTexture(s, s, random(10 * a)), i, j);
  return tex;
}

/** Returns a p5.graphicbuffer with a grid of squares based on factor a */
function gridTexture(w, h, a) {
  const tex = createGraphics(w, h);
  const s = w / a;
  tex.noFill();
  for (let i = 0; i < w; i += s)
    for (let j = 0; j < h; j += s)
      if (random(0, 1) > 0.4) tex.rect(i, j, s, s);
  return tex;
}

/** Returns a p5.graphicbuffer with an ammount of horizontal lines */
function linesTexture(w, h, a) {
  const tex = createGraphics(w, h);
  for (let i = 0; i < a; i++) {
    const x1 = 0;
    const y1 = random(h);
    const x2 = w;
    const y2 = y1;
    tex.stroke(0, 120);
    tex.line(x1, y1, x2, y2);
  }
  return tex;
}

/** OBJECTS IN THE SCENE */
// ---------------------------------------------------------------------- //

/** Three large images together */
function groundPlane(w, h, d) {
  image(dotGridTexture(w, h, d), -w * 0.5, -h * 0.5);
  image(dotGridTexture(w, h, d * 2), -w * 0.5, -h * 0.5);
  image(linesTexture(w, h, d), -w * 0.5, -h * 0.5);
}

/** Renders a textured box */
function building(x, y, w, d, h) {
  push();
  texture(gridTexture(200, 200, random(8, 30)));
  translate(x, y, h * 0.5);
  box(w, d, h);
  pop();
}

/** Renders another textured box */
function buildingDirty(x, y, w, d, h) {
  push();
  texture(gridTexture(400, 400, random(8, 30)));
  translate(x, y, h * 0.5);
  box(w, d, h);
  pop();
}

/** Renders a randomly textured box */
function buildingRandomTexture(x, y, w, d, h) {
  const textures = [
    dotsTexture(200, 200, 9000),
    dotsTexture(200, 200, 1000),
    dotsTexture(400, 400, 9000),
    dotsTexture(100, 100, 500),
    dotGridTexture(w, h, 2),
    dotGridTexture(w, h, 4),
    dotGridTexture(w, h, 8),
  ];
  push();
  texture(random(textures));
  translate(x, y, h * 0.5);
  box(w, d, h);
  pop();
}

/** Renders a randomly textured spher */
function tree(x, y, d) {
  push();
  texture(dotsTexture(200, 200, d * 40));
  translate(x, y, d + d * 0.1);
  sphere(d);
  pop();
}

/** MOVING THE OBJECTS */
// ---------------------------------------------------------------------- //

function randomTranslateBuilding(s, u, v, w) {
  building(random(-s, s), random(-s, s), u, v, w);
}

function randomTranslateTextureBuilding(s, u, v, w) {
  buildingRandomTexture(random(-s, s), random(-s, s), u, v, w);
}

function randomTranslateDirtyBuilding(s, u, v, w) {
  buildingDirty(random(-s, s), random(-s, s), u, v, w);
}

function randomTranslateTree(s, d) {
  tree(random(-s, s), random(-s, s), d);
}

/** MAIN PROGRAM FUNCTION */
// ---------------------------------------------------------------------- //

function setup() {

  // Set a square drawing area with the 3D renderer
  createCanvas(800, 800, WEBGL);
  // White ground
  background(255);
  // No lines, textures only
  noStroke();

  // Sky shader (before camera)
  image(dotsTexture(width, height * 0.5, 10000), -400, -400);
  image(dotsTexture(width, height * 0.24, 6000), -400, -400);

  // Camera position (x, y, z), Focal point (x, y, z) UP dircetion (x, y, z)
  camera(0, 800, 30, 0, 0, 0, 0, 1, 0);

  // Architectural Elements
  // – Ground plane image stack
  groundPlane(width * 2, height * 2, 20);

  // – Ortho buildings 
  for (let i = 0; i < 15; i++)
    randomTranslateBuilding(400, random(10, 200),
      random(10, 200), random(50, 200));

  // - Towers 
  for (let i = 0; i < 20; i++)
    randomTranslateBuilding(400, random(10, 20), random(10, 20), random(100, 300));

  // - Random buildings
  for (let i = 0; i < 8; i++) {
    push();
    rotate(random(TAU));
    randomTranslateTextureBuilding(500, random(110, 200),
      random(140, 200), random(30, 200)
    );
    pop();
  }

  // - Rotated random buildings
  for (let i = 0; i < 3; i++) {
    push();
    rotate(random(TAU));
    randomTranslateDirtyBuilding(400, random(110, 200),
      random(140, 200), random(200, 400));
    pop();
  }

  // - Trees
  for (let i = 0; i < 900; i++)
    randomTranslateTree(800, random(5, 30));

  // End of composition
  save("Reise-nach-Kiuwq-part-2.jpg");
}