Lausanne, avril 2023

Version: 1.0

Voici un mini-programme en javascript qui permet de générer une forme aléatoire exportable en format .svg. Les sliders permettent d’agir sur le nombre de points d’ancrage et les valeurs maximales appliquées aux fonctions « Math.random » en javascript.

Cette version n’est qu’un premier pour me remettre dans le bain et poser les fondations de l’interface de contrôle contenant entre-autres les sliders.

Nombre de points :

Valeur maximale de l’axe X :

400

Valeur maximale de l’axe Y :

400

Code

Dans cet exemple, le code suivant à été intégré à l'article directement dans l'éditeur WordPress sous la forme d'un bloc html. En ce qui concerne la css, qui peut-être déroutante à mettre en place, en particulier pour les sliders, un article est à suivre.

<div class="flex-gui">


    <div id="random-svg-container">
    <!--shape will apear here-->
    </div>
    <!--wordpress separator as im trying to use the block editor-->
    <hr class="wp-block-separator has-alpha-channel-opacity invisible small-step">

    <div class="gui">
        <div class="slider-box">

            <div class="slider-container">
                <label for="num-points-slider">Nombre de points :</label>
                <input type="range" id="num-points-slider" class="my-slider" min="3" max="50" value="6">
                <span id="num-points-value">6</span>
            </div>

            <div class="slider-container">
                <label for="max-x-slider">Valeur maximale de l'axe X :</label>
                <input type="range" id="max-x-slider" class="my-slider" min="300" max="800" value="400">
                <span id="max-x-value">400</span>
            </div>

            <div class="slider-container">
                <label for="max-y-slider">Valeur maximale de l'axe Y :</label>
                <input type="range" id="max-y-slider" class="my-slider" min="300" max="800" value="400">
                <span id="max-y-value">400</span>
            </div>
    
        </div>



        <button id="regenerate-btn">Regénérer</button>

        <button id="download-btn">Télécharger le SVG</button>
    </div>
</div>

<script>
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("viewBox", "0 0 540 540");
document.getElementById("random-svg-container").appendChild(svg);

var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("fill", "#2E2E2D");
svg.appendChild(path);

var numPointsSlider = document.getElementById("num-points-slider");
var numPointsValue = document.getElementById("num-points-value");
var maxXSlider = document.getElementById("max-x-slider");
var maxXValue = document.getElementById("max-x-value");
var maxYSlider = document.getElementById("max-y-slider");
var maxYValue = document.getElementById("max-y-value");

numPointsSlider.addEventListener("input", function() {
  numPointsValue.textContent = numPointsSlider.value;
  path.setAttribute("d", generateBlobPath());
});

maxXSlider.addEventListener("input", function() {
  maxXValue.textContent = maxXSlider.value;
  path.setAttribute("d", generateBlobPath());
});

maxYSlider.addEventListener("input", function() {
  maxYValue.textContent = maxYSlider.value;
  path.setAttribute("d", generateBlobPath());
});

var regenerateBtn = document.getElementById("regenerate-btn");
regenerateBtn.addEventListener("click", function() {
  path.setAttribute("d", generateBlobPath());
});

function generateBlobPath() {
  var path = "M";
  var numPoints = numPointsSlider.value;
  var maxX = maxXSlider.value;
  var maxY = maxYSlider.value;
  var points = [];

  for (var i = 0; i < numPoints; i++) {
    var x = Math.floor(Math.random() * maxX);
    var y = Math.floor(Math.random() * maxY);
    points.push({ x: x, y: y });
  }

  path += points[0].x + "," + points[0].y;
  for (var i = 1; i < numPoints; i++) {
    var nextIndex = (i + 1) % numPoints;
    var x = (points[i].x + points[nextIndex].x) / 2;
    var y = (points[i].y + points[nextIndex].y) / 2;
    path += "Q" + points[i].x + "," + points[i].y + " " + x + "," + y;
  }

  path += "Z";

  path += points[0].x + "," + points[0].y;

  return path;
}

path.setAttribute("d", generateBlobPath());

var downloadBtn = document.getElementById("download-btn");
downloadBtn.addEventListener("click", function() {
  var svgData = new XMLSerializer().serializeToString(svg);
  var svgBlob = new Blob([svgData], {type: "image/svg+xml;charset=utf-8"});
  var svgUrl = URL.createObjectURL(svgBlob);
  var downloadLink = document.createElement("a");
  downloadLink.href = svgUrl;
  downloadLink.download = "blob.svg";
  downloadLink.click();
});


</script>

HTML

WIP – SVG Generator 1.0

Code