Javascript 在每次输入后添加1个圆/矩形，而不是在JS中一次添加全部20个

我希望我的程序根据用户每次输入后输入的内容添加1个圆形或矩形，而不是javascript中的所有20个，但我希望最大值为20个。我在代码中找不到任何方法，有人能帮我吗？我应该改变什么，我是JS新手。我设法使它们在创建时不会重叠，但无法找到一种方法使它们一一重叠。每次用户写入“圈”并按“提交”时，矩形中应显示一个相同的圈，下次应显示另外一个圈

var squares =[];

function setup() {
  createCanvas(420, 465);background('white');
  
  input = createInput();
  input.position(20, 65);

  button = createButton('submit');
  button.position(input.x + input.width, 65);
  button.mousePressed(greet);

  greeting = createElement('h2', 'circle or rectangle?');
  greeting.position(20, 5);

  textAlign(CENTER);
  textSize(50);
  
  function greet() {
  var name = input.value();
  if(name=='circle'){
    for(var i=0;i<20;i++){
    
    var circle = {
      x: random(30, 420),
      y: random (70, 465),
      r: random(5,50),
    };
    var overlapping=false;
    
    for(var j=0; j<circles.length;j++){
      var o=circles[j];
      var d= dist(circle.x,circle.y, o.x,o.y);
      
      if(d<circle.r+o.r){
        overlapping=true;
     break; } 
    }
    
    if(!overlapping){
    circles.push(circle);}
    
    for(var i=0; i<circles.length;i++){
      
      noStroke();
      fill(random(0,255),random(0,255),random(0,255),150);
      ellipse(circles[i].x,circles[i].y,circles[i].r*2);
    }
  }
    }
    else if(name=='rectangle'){
      for(var i=0;i<20;i++){
    
    var square = {
      x: random(30,420),
      y: random (70,465),
      x2: random(5,100),
      y2: random(5,100),
    };
    var overlapping2=false;
    
    for(var j=0; j<squares.length;j++){
      var o2=squares[j];
      var d2= dist(square.x,square.y, o2.x,o2.y);
      
      if(d2<square.x2+o2.x2){
        overlapping2=true;
     break; } 
      if(d2<square.y2+o2.y2){
        overlapping2=true;
     break; } 
    }    
    if(!overlapping2){
    squares.push(square);}
    
    for(var i=0; i<squares.length;i++){
      
      noStroke();
      fill(random(0,255),random(0,255),random(0,255),150);
      rect(squares[i].x,squares[i].y,squares[i].x2,squares[i].y2);
    }
  }     
    }
    else if(name=='reset'){
      const context = canvas.getContext('2d');
      context.clearRect(0, 0, canvas.width, canvas.height);
    }
    else{};
    
  input.value('');  
}
function draw() {
}

var squares=[]；
函数设置（）{
createCanvas（420465）；背景（“白色”）；
输入=createInput（）；
输入位置（20,65）；
按钮=创建按钮（“提交”）；
按钮位置（input.x+input.width，65）；
按钮。鼠标按下（问候）；
greeting=createElement（'h2'、'圆形或矩形？'）；
问候。位置（20,5）；
文本对齐（中心）；
文本大小（50）；
函数{
var name=input.value（）；
如果（名称=='circle'）{
for（var i=0；i正如我看到的，当用户输入圆或三角形时，您正在for循环中创建它们，该循环将一直运行到for（var i=0；i）的20
，您不可以简单地删除for（var i=0；i）的