Zufälliges Generieren von SVG-Formen

Sagen wir, wir wollten den Radius eines Kreises kontinuierlich zufällig verändern. Wir könnten mit reinem CSS einen zufälligen Look vortäuschen, aber lassen Sie uns für echte Pseudo-Zufallszahlen in JavaScript entscheiden.

Wir sprechen hier von SVG, also ist hier unser Basiskreis

<svg viewBox="0 0 100 100">
  <circle id="circle" cx="50" cy="50" r="50" />
</svg>

Eine kleine JavaScript-Funktion, um zufällige ganze Zahlen für uns innerhalb eines Bereichs zu generieren

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

Um diesen Radius jede Sekunde zufällig zu machen, könnten wir tun

var circle = document.querySelector("#circle");
setInterval(function() {
  circle.setAttribute("r", getRandomInt(5, 50));
}, 1000);
Just for kicks, we could have it transition to the new size in the browsers that support it:

circle {
  transition: r 0.2s;
}

Siehe die Demo.

Alle SVG-Formen sind im Wesentlichen aus Zahlen aufgebaut, was bedeutet, dass alle davon zum Zufallisieren offen sind.

Stell dir eine Form mit einer zufällig aussehenden gezackten Unterseite wie diese vor

Das ist wahrscheinlich normalerweise ein(gerade Linien), aber es ist fast genauso einfach zu zeichnen wie ein, was es übergangsfähig macht (in Chrome). Machen wir das also. So könnte dieser Pfad aussehen

<path d="M-4,-4 L1004,-4 L1004,100 L940,161 L617,186 L555,122 L306,179 L17,177 L-4,100 L-4,-4 Z"></path>

Einige dieser Punkte sind fest und die restlichen Punkte werden zufällig gemacht. Hier ist ein Diagramm

Unsere Aufgabe ist es nun, diese Zufallszahlen zu generieren, sie dann zu einem String zusammenzufügen und diesen String dann im DOM zu ersetzen (das d-Attribut des <path>).

Denke daran, dass wir bereits eine Funktion zum Generieren von Zufallszahlen haben: getRandomInt(). Hier ist ein vereinfachtes Konzept

var a = getRandomInt(1, 100);
var b = getRandomInt(1, 100);
var c = getRandomInt(1, 100);

var newString = `${a} ${b} ${c}`;

Der Trick besteht darin, sie im exakten Format zu generieren und anzuordnen, das für die Pfadsyntax benötigt wird. Es ist nicht schwer, es ist nur viel Zahlen-Generierung und dergleichen. Ich werde das Ganze hier ablegen

var csstricks = {

  init: function() {
    csstricks.randomizeBackgrounds();
  },

  generateRandomPoints: function(minSpread, maxSpread) {
    let points = {};
    points.a = `${getRandomInt(800, 1000)},${getRandomInt(minSpread, maxSpread)}`;
    points.b = `${getRandomInt(600, 800)},${getRandomInt(minSpread, maxSpread)}`;
    points.c = `${getRandomInt(400, 600)},${getRandomInt(minSpread, maxSpread)}`;
    points.d = `${getRandomInt(200, 400)},${getRandomInt(minSpread, maxSpread)}`;
    points.e = `${getRandomInt(0, 200)},${getRandomInt(minSpread, maxSpread)}`;
    return points;
  },

  randomizeHeader: function() {
    let newPoints = csstricks.generateRandomPoints(120, 190);
    let downFacingPoints = `M-4,-4 L1004,-4 L1004,100 L${newPoints.a} L${newPoints.b} L${newPoints.c} L${newPoints.d} L${newPoints.e} L-4,100 L-4,-4 Z`;
    $("#jagged-top").attr("d", downFacingPoints);
  },

  randomizeBackgrounds: function() {
    csstricks.randomizeHeader();
    setInterval(function() {
      csstricks.randomizeHeader();
    }, 2000);
  },

};

csstricks.init();

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

Es ist zur besseren Organisation in kleinere Funktionen unterteilt. In der endgültigen Version habe ich auch eine performantere Version von setInterval eingefügt.

Hier ist die endgültige Demo

Siehe den Pen
CSS-Tricks Header von Chris Coyier (@chriscoyier)
auf CodePen.

Erwähnenswert: SVG ist nicht wirklich "hardwarebeschleunigt" wie manche Webgrafiken. Wenn du zum Beispiel die Transformations- oder Opazitätseigenschaften eines Elements animierst, musst du dir keine übermäßigen Gedanken über die Leistung machen, da diese an den Grafikprozessor (GPU) des Computers übertragen werden, sofern verfügbar. Kein Glück mit SVG hier beim Ändern dieser Pfaddaten. Du könntest in dieser Demo in Chrome ziemlich intensive Speicher- und CPU-Auslastung sehen, aufgrund des CSS-Übergangs, den wir angewendet haben. Ohne den Übergang (nur das sofortige Ändern der Form) sollte die Leistung in keinem Browser ein großes Problem darstellen.

Viel Spaß beim Zufallisieren!