Hagamos arte generativo que podamos exportar a SVG y PNG

Digamos que eres diseñador. Fresco. Lo contrataron para realizar un trabajo de diseño para una conferencia. Todo tipo de cosas. Sitio web. Horarios impresos. Grandes carteles para las habitaciones. Diapositivas previas al avance. Tu dilo.

Entonces se le ocurre una estética para todo: una vibra de diseño que lo une todo y lo hace sentir cohesivo. Sin embargo, cada uso será único y diferente. Genial, partamos de ahí.

Estás trasteando con tu software de diseño y la estética que se te ocurre son estos rectángulos superpuestos en un patrón aleatorio con una paleta de colores particular limitada que crees que puede funcionar para todos los materiales.

Oye, seguro. Ese es un patrón de fondo divertido. Puedes colocar cuadros blancos encima para configurar el tipo o lo que sea, esta es solo la estética de fondo general que puedes usar ampliamente.

Pero no es muy aleatorio cuando está en el software de diseño, ¿verdad? Supongo que podrías descubrir cómo programar el software. Pero somos gente de la web, así que pongámonos manos a la obra. Apoyémonos en JavaScript y SVG para comenzar.

Podríamos definir nuestra paleta de colores programáticamente como:

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

Luego escribe una función que simplemente haga un montón de rectángulos aleatorios basados ​​en un valor mínimo y máximo que le des:

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}"       token interpolation"${rand(200) + 20}"       token interpolation"${rand(200) + 20}"        opacity="0.8${rand(10)}"        fill="${colorPalette[rand(5)]}"      /    `;  }  return rects;};

Podrías llamar a esa función y colocar todos esos rectángulos en una svgy obtener una bonita obra de arte generativa.

¡Ahora tu trabajo es fácil! Para crear otros nuevos, ejecuta el código una y otra vez y obtiene un buen SVG para usar en lo que necesite.

Digamos que su cliente le pide parte de esta obra de arte para usarla como fondo en otras cosas en las que también está trabajando. ¡Necesitan un fondo con diferentes dimensiones! ¡En una relación de aspecto diferente! ¡Lo necesitan ahora mismo!

El hecho de que estemos haciendo esto en el navegador es tremendamente útil aquí. La ventana del navegador se puede cambiar de tamaño fácilmente. Vaya , lo sé. Entonces, ajustemos el tamaño del SVG principal a toda la ventana gráfica. Este es el SVG que llama a esa función para crear todos los rectángulos aleatorios aquí:

const makeSVG = () = {  const w = document.body.offsetWidth;  const h = document.body.offsetHeight;  const svg = `svgtoken interpolation"${w}"token interpolation"${h}"    ${makeRects(w, h)}  /svg`;  return svg;};

Entonces, si hacemos esto en el navegador, obtendremos un resultado SVG ancho y achaparrado si el navegador es súper ancho y achaparrado:

Pero, ¿cómo sacamos eso del navegador y lo convertimos en un archivo SVG real? Bueno, probablemente haya formas de hacerlo en plataformas nativas, pero simplemente busqué en Google y encontré un fragmento de código que funcionó. Tomo el SVG como una cadena, lo coloco en una URL de datos como hrefen un enlace y hago clic falso en ese enlace. Lo hago con solo hacer clic en un botón.

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);});

¡Pero lo que necesito es como PNG!

…cries your client. Fair enough. Not everyone has software that can view and deal with SVG. You could just take a screenshot of the page. And, honestly, that might be a good way to go. I have a high pixel density display and those screenshots turn out great.

But now that we’ve built a downloader machine for the SVG, we might as well make it work for PNG too. This time my Googling led to FileSaver.js. If I have a canvas, I can toBlob that thing and save it to a file. And I can turn my svg into a canvas via canvg.

So, when we call our function to make the SVG, we’ll just paint it to a canvas, which will automatically be the same size as the SVG, which we’ve sized to cover the viewport.

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

We can call that setup function whenever, so might as well make a button for it, too, and call it when the browser window resizes. Here it is in action:

And here’s the final thing:

It could be a lot smarter. It could decide how many rectangles to draw based on the viewport volume, for example. I just think it’s very neat to essentially build an art-generating machine for making design assets, particularly to solve real-world client problems.

This idea was totally taken from a peek I had at a tool some actual designers built like this. Theirs was way cooler and had even more options, and I know who they built it for was very happy with it because that’s who showed it to me. I reached out to that designer but they were too busy to take on a writing gig like this.