Lass uns generative Kunst machen, die wir als SVG und PNG exportieren können

Nehmen wir an, Sie sind ein Designer. Cool. Sie wurden beauftragt, Designarbeiten für eine Konferenz zu erstellen. Alles Mögliche. Website. Gedruckte Zeitpläne. Große Poster für die Räume. Preroll-Folien. Sie nennen es.

Man überlegt sich eine Ästhetik für das Ganze – einen Design-Vibe, der alles zusammenhält und es stimmig wirken lässt. Doch jede Anwendung wird einzigartig und anders sein. Cool, da fangen wir an.

Man hantiert in seiner Design-Software herum, und die Ästhetik, die man sich ausdenkt, sind diese überlappenden Rechtecke in einem zufälligen Muster mit einer bestimmten, begrenzten Farbpalette, von der man denkt, dass sie für alle Materialien funktionieren kann.

Hey, sicher. Das ist ein lustiges Hintergrundmuster. Man kann weiße Kästen darüber legen, um Text oder was auch immer zu platzieren, das ist nur die allgemeine Hintergrundästhetik, die man breit einsetzen kann.

Aber es ist nicht sehr zufällig, wenn es in der Design-Software ist, oder? Ich nehme an, man könnte herausfinden, wie man die Software skriptet. Aber wir sind Web-Leute, also machen wir es auf die Web-Art. Fangen wir mit JavaScript und SVG an.

Wir könnten unsere Farbpalette programmatisch definieren, wie

const colorPalette = ["#9B2E69", "#D93750", "#E2724F", "#F3DC7B", "#4E9397"];

Dann schreiben wir eine Funktion, die einfach eine Menge zufälliger Rechtecke basierend auf einem Minimum- und Maximumwert erstellt, den man ihr gibt

const rand = (max) => {
  return Math.floor(Math.random() * max);
};

const makeRects = (maxX, maxY) => {
  let rects = "";
  for (let i = 0; i < 100; i++) {
    rects += `
      <rect
        x="${rand(maxX + 50) - 50}"
        y="${rand(maxY + 50) - 50}"
        width="${rand(200) + 20}"
        height="${rand(200) + 20}"
        opacity="0.8${rand(10)}"
        fill="${colorPalette[rand(5)]}"
      />
    `;
  }
  return rects;
};

Man könnte diese Funktion aufrufen und all diese Rechtecke in ein <svg> packen und schöne generative Kunstwerke erhalten.

Jetzt ist deine Arbeit einfach! Um neue zu erstellen, führst du den Code immer wieder aus und erhältst dann schönes SVG, das du für alles Mögliche verwenden kannst.

Nehmen wir an, dein Kunde bittet dich um einige dieser Kunstwerke als Hintergründe für andere Dinge, an denen er gerade arbeitet. Er braucht einen Hintergrund mit anderen Abmessungen! Mit einem anderen Seitenverhältnis! Er braucht ihn sofort!

Die Tatsache, dass wir das im Browser machen, ist hier äußerst hilfreich. Das Browserfenster lässt sich leicht vergrößern und verkleinern. *Wow*, ich weiß. Also lassen wir das übergeordnete SVG auf das gesamte Viewport-Fenster skalieren. Das ist das SVG, das diese Funktion aufruft, um all die zufälligen Rechtecke hier zu erstellen

const makeSVG = () => {
  const w = document.body.offsetWidth;
  const h = document.body.offsetHeight;
  const svg = `<svg width="${w}" height="${h}">
    ${makeRects(w, h)}
  </svg>`;
  return svg;
};

Wenn wir das also im Browser machen, erhalten wir ein breites und flaches SVG-Ergebnis, wenn der Browser super breit und flach ist

Aber wie bekommen wir das aus dem Browser und in eine tatsächliche SVG-Datei? Nun, es gibt wahrscheinlich native Möglichkeiten, das zu tun, aber ich habe mich einfach durch Googeln herausgearbeitet und einen Code-Schnipsel gefunden, der den Trick gemacht hat. Ich nehme das SVG als String, packe es in eine Data-URL als href eines Links und klicke diesen Link gefälscht an. Das mache ich beim Klicken auf einen Button.

function download(filename, text) {
  var pom = document.createElement("a");
  pom.setAttribute(
    "href",
    "data:text/plain;charset=utf-8," + encodeURIComponent(text)
  );
  pom.setAttribute("download", filename);

  if (document.createEvent) {
    var event = document.createEvent("MouseEvents");
    event.initEvent("click", true, true);
    pom.dispatchEvent(event);
  } else {
    pom.click();
  }
}

const downloadSvgButton = document.querySelector("#download-svg-button");
downloadSvgButton.addEventListener("click", () => {
  download("art.svg", window.globalSVGStore);
});

Aber ich brauche es als PNG!

...weint dein Kunde. Ist ja auch verständlich. Nicht jeder hat Software, die SVG anzeigen und damit umgehen kann. Man könnte einfach einen Screenshot der Seite machen. Und ehrlich gesagt, das könnte eine gute Vorgehensweise sein. Ich habe ein hochauflösendes Display und diese Screenshots sehen toll aus.

Aber jetzt, wo wir eine Download-Maschine für das SVG gebaut haben, könnten wir sie auch für PNG zum Laufen bringen. Diesmal hat mein Googeln zu FileSaver.js geführt. Wenn ich ein <canvas> habe, kann ich dieses Ding toBlob und in eine Datei speichern. Und ich kann mein <svg> über canvg in ein <canvas> umwandeln.

Wenn wir also unsere Funktion zum Erstellen des SVG aufrufen, malen wir es einfach auf ein Canvas, das automatisch die gleiche Größe wie das SVG hat, das wir so skaliert haben, dass es den Viewport abdeckt.

const setup = () => {
  const v = canvg.Canvg.fromString(ctx, makeSVG());
  v.start();
};

Wir können diese Setup-Funktion jederzeit aufrufen, also machen wir dafür auch einen Button und rufen sie auf, wenn das Browserfenster vergrößert wird. Hier ist es in Aktion

Und hier ist das Endergebnis

Es könnte viel intelligenter sein. Es könnte zum Beispiel entscheiden, wie viele Rechtecke basierend auf dem Viewport-Volumen gezeichnet werden sollen. Ich finde es einfach sehr raffiniert, im Wesentlichen eine Kunst-generierende Maschine zu bauen, um Design-Assets zu erstellen, insbesondere um reale Kundenprobleme zu lösen.

Diese Idee wurde komplett von einem Einblick in ein Tool übernommen, das einige echte Designer so gebaut haben. Ihr Werk war weitaus cooler und hatte noch mehr Optionen, und ich weiß, dass derjenige, für den sie es gebaut haben, sehr zufrieden damit war, denn er hat es mir gezeigt. Ich habe mich an diesen Designer gewandt, aber er war zu beschäftigt, um eine Schreibaufgabe wie diese anzunehmen.