How to make a grid of ellipses with subdivisions

Question

I have created a circle with subdivisions (function CircleSubDivs) in p5.js and now want to generate a grid filled with those. Ideally the ellipse would also be disproportionate if the width and height of a tile is not the same, or if the amount of tiles were to be controlled by the mouse position the ellipse would move flexibly. This was my inspiration

This is my code so far:

 // 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>

As you can see I have created a grid and tried to store my function for the ellipse with divisions in there, but it just shows me one single ellipse when I run it. I would really appreciate some help:)

Answer 1

Your parameters to your function are unused, so the function does the same thing every time.

You might try something like:

 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>