Nombre de points : 6

Radius : 400

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.

Les tracés ont l'interdiction de se croiser, ce qui permet de ne générer que des formes fermées.

To do

-> trouver un moyen d'adoucir/supprimer l'angle qui se dessine à l'origine du tracé.
-> calculer les points en partant du centre

Code

<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="radius-slider">Radius :</label>
                <input type="range" id="radius-slider" class="my-slider" min="100" max="250" value="100">
                <span id="radius-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>


        <hr class="wp-block-separator has-alpha-channel-opacity invisible small-step">
        <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", "#F9A11B");
svg.appendChild(path);

var numPointsSlider = document.getElementById("num-points-slider");
var numPointsValue = document.getElementById("num-points-value");
var radiusSlider = document.getElementById("radius-slider");
var radiusValue = document.getElementById("radius-value");

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

radiusSlider.addEventListener("input", function() {
  radiusValue.textContent = radiusSlider.value;
  path.setAttribute("d", generateCirclePath());
});

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

function generateCirclePath() {
  var path = "M";
  var numPoints = numPointsSlider.value;
  var radius = radiusSlider.value;
  var centerX = 270;
  var centerY = 270;
  var points = [];

  for (var i = 0; i < numPoints; i++) {
    var angle = (360 / numPoints) * i;
    var x = centerX + radius * Math.cos((angle * Math.PI) / 180) + (Math.random() - 0.5) * radius / 2;
    var y = centerY + radius * Math.sin((angle * Math.PI) / 180) + (Math.random() - 0.5) * radius / 2;
    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";
  return path;
}

// Initial generation of the circle path
path.setAttribute("d", generateCirclePath());

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 Blob Generator 1.0

To do

Code