 # Fill an imagined ellipse with dots

Hi, what I would like to do is fill an imagined ellipse (x, y, w, h) with tiny dots whose size is specified by “dotSize” of the “drawHead” function. But I struggle coming up a way to fit dots inside an ellipse (so the number of dots in the horizontal axis gradually increases and is maximized in the middle of the vertical axis and then decreases gradually). Does anybody know an efficient way to do this?

``````function setup() {
createCanvas(400, 300);
background(150);
noLoop();
}

function draw() {
noStroke();
fill(255, 150);
drawHead(5, width/2, height/2 -40, 40, 80);
}

function drawHead(dotSize, x, y, w, h){
var startY = y - h/2;
var startX = x - w/2;
var endY = startY + h;
var endX = startX + w;

for (var yPos = startY; yPos < endY; yPos += dotSize) {
//var xCount = 1/(startY + w/2) * yPos;

for (var i = 0; i < xCount; i += 1) {
var xPos = x - xCount/2*dotSize;
ellipse(xPos, yPos, dotSize, dotSize);
}
}

}
``````

You are essentially filling a circle

What’s the formula for a circle?

Hi @Chrisir, I pass usual parameters of the circle (x, y, w, h) to my function. I would like to combine this information with the size of dots to fill this imagined circle with dots.

To find a position inside circle A to draw smaller circle B use cos and sin

https://processing.org/tutorials/trig/

Hi @Chrisir,

Thank you for your help. Based on your advice, I created a function to fill the only upper right of the ellipse. I check if the x position of the tiny dot exceeds the imaginary boundary of the ellipse each time to place dots in the horizontal direction (and then to the vertical direction as well), but my function isn’t working. Could you help me with this? ``````function setup() {
createCanvas(400, 300);
noLoop();
}
function draw() {
background(150);
noStroke();
fill(255, 150);
drawQuarter(5, width/2, height/2 -40, 40, 80);
}
function drawQuarter(dotSize, cx, cy, w, h){
translate(cx, cy);

var theta = Math.atan(0);
for (var y = 0; y <= h/2 * sin(theta); y += dotSize) {
for (var x = 0; x <= w/2 * cos(theta); x += dotSize) {
ellipse(x, y, dotSize, dotSize);
theta = Math.atan(y/x);
}
}
}
``````