Gray Burst

Ich habe dieses nette kleine graue Burst-Ding gemacht. Es ist nichts Besonderes, besonders im Vergleich zur unglaublichen Kreativität auf CodePen, aber ich dachte, ich könnte einige der Dinge, die darin passieren, zu Lernzwecken dokumentieren.

Es ist SVG

SVG hat <line x1 y1 x2 y2>, also dachte ich, es wäre einfach, es für diesen Burst-Look zu verwenden. x1 y1 ist immer die Mitte und x2 y2 werden zufällig generiert. Die Kopfrechnung für die Platzierung von Linien ist ziemlich einfach, da viewBox="0 0 100 100" verwendet wird. Sie könnten sogar -50 -50 100 100 bevorzugen, damit die Koordinate 0 0 in der Mitte liegt.

Zufallszahlen

const getRandomInt = (min, max) => {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

Es ist schön, eine solche Funktion zur Generierung von Kunstwerken zur Verfügung zu haben. Ich verwende sie nicht nur für die Linienpositionierung, sondern auch für die Strichbreite und Deckkraft der Grautöne.

Ich habe diese Funktion so oft verwendet, dass ich denke, JavaScript sollte eine Hilfs-Mathematikfunktion haben, die so klar ist.

Das Generieren von HTML mit Template-Literalen ist so einfach

Das ist für mich sehr gut lesbar

let newLines;
for (let i = 0; i < NUM_LINES; i++) {
  newLines += `
  <line 
    x1="50"
    y1="50"
    x2="${getRandomInt(10, 90)}"
    y2="${getRandomInt(10, 90)}"
    stroke="rgba(0, 0, 0, 0.${getRandomInt(0, 25)})"
    stroke-linecap="round"
    stroke-width="${getRandomInt(1, 2)}"
  />`;
}

svg.insertAdjacentHTML("afterbegin", newLines);

Interaktivität in Form von Klick zum Neuerstellen

Wenn es eine einzige Funktion gibt, um das Zeichnen des Kunstwerks zu starten, ist Klick zum Neuerstellen so einfach wie

doArt();

window.addEventListener("click", doArt);

Abrundung

Ich finde es mit stroke-linecap="round" wesentlich ansprechender. Es ist schön, dass wir das mit Linienenden in SVG machen können.

Die Koordinaten der Linien bewegen sich nicht – es ist nur eine CSS-Transformation

Ich habe das gerade auf die Linien angewendet

line {
  transform-origin: center;
  animation: do 4s infinite alternate;
}
line:nth-child(6n) {
  animation-delay: -1s;
}
line:nth-child(6n + 1) {
  animation-delay: -2s;
}
line:nth-child(6n + 2) {
  animation-delay: -3s;
}
line:nth-child(6n + 3) {
  animation-delay: -4s;
}
line:nth-child(6n + 4) {
  animation-delay: -5s;
}

@keyframes do {
  100% {
    transform: scale(0.69);
  }
}

Es mag so aussehen, als würden die Linien nur länger/kürzer werden, aber eigentlich ist es die ganze Linie, die mit scale() schrumpft. Das dünner werden der Linien bemerkt man kaum, da sie viel länger als breit sind.

Beachten Sie die negativen Animationsverzögerungen. Das dient dazu, die Animationen zu staffeln, damit sie etwas zufällig wirken, aber trotzdem alle zur gleichen Zeit beginnen.

Was könnte noch getan werden?

• Farbgebung könnte cool sein. Vielleicht sogar ansprechend?
• Ich mag die Idee, Ästhetiken zu gruppieren. Wenn man beispielsweise alle Strichstärken zwischen 1-10 zufällig macht, wirkt es fast zu zufällig, aber wenn man zwischen Gruppen von 1-2, 2-4 oder 8-10 zufällig wählt, wirken die Ästhetiken überlegter. Ebenso bei der Farbgebung – völlig zufällige Farben sind zu zufällig. Es wäre interessanter, Zufälligkeit innerhalb strengerer Parameter zu sehen.
• Mehr Bewegung. Rotation? Bewegung über die Seite? Mehr Bursts?
• Vor allem ist es immer Spaß, mit mehr Parametern direkt auf der Demo spielen zu können. dat.GUI ist immer toll dafür.