Javascript 如何使用p5js和matterjs绘制 pyramid 形状的圆

我不熟悉matter.js，但下面的代码使用嵌套的for循环来创建一个三角形，使用圆形来模拟台球架的配置:

let numBalls = [1, 2, 3, 4, 5]; // Per column
let ballsMax = 5;
let lenDisparity = 0;
let counter = 0;

// Build by column
function circleGrid(l, t, diameter, hgap, vgap) {
  var x;
  var y; 
  for (let j = 0; j < numBalls.length; j++) {
  for (let k = 0; k < numBalls[counter]; k++) {   
      x = l + j*vgap;
      y = t + k*hgap;
      lenDisparity = ballsMax - numBalls[counter];
      if (lenDisparity > 0) {
        y += lenDisparity*hgap/2;
      }    
      fill(random(255),random(255),random(255));
      circle(x,y,diameter);
    }
    counter++;
  }
}

function setup() {
  createCanvas(400, 400);
  circleGrid(60,60,28,30,30);
}

function draw() {
}

CircleGridByColAndRow个

下面的源代码演示了按列构建网格与按行构建网格的区别:

let numBalls = [1, 2, 3, 4, 5]; 
let ballsMax = 5;
let lenDisparity = 0;

function circleGridByCol(l, t, diameter, hgap, vgap) {
  var x;
  var y; 
  counter = 0;
  for (let j = 0; j < numBalls.length; j++) {
  for (let k = 0; k < numBalls[counter]; k++) {   
      x = l + j*vgap;
      y = t + k*hgap;
      lenDisparity = ballsMax - numBalls[counter];
      if (lenDisparity > 0) {
        y += lenDisparity*hgap/2;
      }    
      fill(random(255),random(255),random(255));
      circle(x,y,diameter);
    }
    counter++;
  }
}

function circleGridByRow(l, t, diameter, hgap, vgap) {
  var x;
  var y; 
  counter = 0;
  for (let k = 0; k < numBalls.length; k++) {
  for (let j = 0; j < numBalls[counter]; j++) {   
      x = l + j*vgap;
      y = t + k*hgap;
      lenDisparity = ballsMax - numBalls[counter];
      if (lenDisparity > 0) {
        x += lenDisparity*vgap/2;
      }    
      fill(random(255),random(255),random(255));
      circle(x,y,diameter);
    }
    counter++;
  }
}

function setup() {
  createCanvas(600, 250);
  circleGridByCol(60,60,28,30,30);
  circleGridByRow(250,60,28,30,30);
}

function draw() {
}