p5.js在一定区域内随机生成小球

在p5.js编辑器的‘sketch.js’文件中输入下列代码，则可实现生成一定数量的小球并在区域内部弹来弹去。

/**
*P5JS实现反弹小球
*/
var canvasWidth = 400;  // 定义画布宽度为400
var canvasHeight = 400;  // 定义画布高度为400
let x = [];  // 小球在画布中的初始x坐标
let y = [];  // 小球在画布中的初始y坐标
var dx = []; // 小球在画布中运动沿x轴方向的分速度
var dy = [];  // 小球在画布中运动沿y轴方向的分速度
let i = 0;//第i个小球
let c = []//小球颜色
function setup() {
  createCanvas(canvasWidth, canvasHeight);  // 创建画布
  for(let i=0; i<10; i++){//初始化十个圆心横坐标
    x[i] = random(50,350)
  }
  for(let i=0; i<10; i++){//初始化十个圆心纵坐标
    y[i] = random(50,350)
  }
  for(let i=0; i<10; i++){//初始化十个圆颜色
    c[i] = color(random(0,255), random(0,255), 0)
  }
  for(let i=0; i<10; i++){//初始化十个圆横向速度
    dx[i] = random(2,3)
  }
  for(let i=0; i<10; i++){//初始化十个圆纵向速度
    dy[i] = random(3,4)
  }
  
}


function draw() {
  background(220); // 清空背景板
  for(let j=0; j<6; j++){   //更改j的大小从而更改小球数量
    createBall(j)
  }
}

function createBall(i){
  
  fill(c[i]);
  noStroke();//去除边线r
  ellipse(x[i] = x[i]+dx[i],y[i] = y[i]+dy[i],80);  // 绘制小球，小球在x和y轴的运动速度分别为dx和dy
  // 如果小球超出画布进行反弹，即速度改为其相反数（x轴大于画布宽度或小于0，y轴大于高度或小于0）
  if(x[i]>370||x[i]<30)dx[i] = dx[i]*(-1);  
  if(y[i]>370||y[i]<30)dy[i] = dy[i]*(-1);
}