<div class="ui-container">
  <div>
    <input type="range" id="r" min="10" max="100" value="50" step="1">
    <label for="r">半径</label>
  </div>
</div>

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #292a33;
  overflow: hidden;
}
.ui-container {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 1;
  color: #f0f0f0;
}

let r;

function setup() {
  createCanvas(windowWidth, windowHeight);

  document.getElementById("r").oninput = (event) => {
    r = event.currentTarget.valueAsNumber;
  };

  r = 50;
}

function draw() {
  clear();
  circle(width / 2, height / 2, r * 2);
}