Fill an imagined ellipse with dots

p5.js Coding Questions
1

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?

Thank you in advance for your help!

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);
    }
  }
   
}
2

You are essentially filling a circle

What’s the formula for a circle?

3

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.

4

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

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

5

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?

image

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);
      }
    } 
}
6

Did you read the trigonometry tutorial I provided the link for?

Please make a for loop for the angle and one for the radius and then figure out the points using cos and sin