如何更改 p5.js 中绘制椭圆的半径？

Question

我一直在学习如何使用 p5.js 库，但在制作简单草图时卡住了。代码的目标是有一个滑块来改变绘制的椭圆的半径。滑块在增加值时起作用，但在减小值时，绘制的最大椭圆会覆盖较小的椭圆。这是有道理的，因为不断绘制椭圆。但是有没有办法让只有 1 个椭圆并用滑块改变它的半径？

这是我设法拼凑起来的糟糕代码。 JS:

var spr;
var slider;
function setup() {
  createCanvas(500,500);
  background(51);
  spr = new Sphere();
  slider = createSlider(0, width, 1);
  slider.position(6, 6);
  slider.style('width','500px');
}

function draw() {
  var val = slider.value();
  spr.show(val);
}

function Sphere() {
  this.x = width/2;
  this.y = height/2;

  this.show = function(val){
    noStroke();
    fill(100,0,250);
    ellipse(this.x, this.y, val, val);
  }
}

Here is a picture of how it looks like in the browser.

在提问之前，我曾搜索过答案但没有找到。这可能真的很简单，我只是错过了一些非常重要的事情。

Answer 1

您永远不会清除旧框架，因此您绘制的所有内容都会保留在屏幕上。这就是为什么你最大的画总是盖住你的小画。

要清除旧屏幕，只需在 draw() 函数的第一行添加对 background() 函数的调用。

可以在 the reference 中找到更多信息。

如何更改 p5.js 中绘制椭圆的半径？

How to change radius of drawn ellipse in p5.js?

javascript

p5.js