如何制作带细分的椭圆网格

Question

我在 p5.js 中创建了一个带有细分的圆（函数 CircleSubDivs），现在想要生成一个充满这些的网格。 理想情况下，如果瓷砖的宽度和高度不相同，或者如果要通过鼠标位置控制瓷砖的数量，椭圆将灵活移动，则椭圆也会不成比例。 这是我的灵感

到目前为止，这是我的代码：

 // let colors = [ // "#F48668 ", // "#5D2E8C", // "#F7F7F7" // ]; function CircleSubDivs(x, y, size) { let amount = 13; let r = 360 / amount; for (let j = 0; j < 10; j++) { for (let i = 0; i < amount; i++) { fill(random(255)); let s = map(j, 0, 8, width, 100); arc(width / 2, height / 2, s, s, radians(r * i), radians(r * (i + 1))); } } } function setup() { createCanvas(500, 500); frameRate(1); } function draw() { background("#0F0F0F"); noStroke(); let tilesX = 3; let tilesY = 2; let tileW = width / tilesX; let tileH = height / tilesY; for (let x = 0; x < tilesX; x++) { for (let y = 0; y < tilesY; y++) { CircleSubDivs(x * tileW, y * tileH, tileW, tileH); } } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>

如您所见，我创建了一个网格并尝试在其中存储我的椭圆函数，但在我运行它时它只显示一个椭圆。 我真的很感激一些帮助:)

Answer 1

您的函数参数未使用，因此该函数每次都做同样的事情。

你可能会尝试这样的事情：

 function drawSubdividedCircle(x, y, size, segments=13, layers=10) { const r = 360 / segments; for (let i = 0; i < segments; i++) { for (let j = 0; j < layers; j++) { fill(random(255)); const s = map(j, 0, layers, size, 0); arc( x + size / 2, y + size / 2, s, s, radians(r * i), radians(r * (i + 1)) ); } } } function setup() { createCanvas(500, 500); frameRate(1); } function draw() { background("#0F0F0F"); noStroke(); const tilesX = 3; const tilesY = 2; const tileSize = width / tilesX; for (let x = 0; x < tilesX; x++) { for (let y = 0; y < tilesY; y++) { drawSubdividedCircle(x * tileSize, y * tileSize, tileSize); } } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>