如何制作帶細分的橢圓網格

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>