Circle radius not being sized correctly

Question

my script isn't working. It was supposed to create random circles all touching the bottom of the canvas, with their radius shrinking each circle by the number of circles.

Here is the code:

for (var i = 0; i < NUM_CIRCLES; i++){
   var circle = new Circle(radius);
   circle.setPosition(CENTER_X,CENTER_Y);
   circle.setColor(color);
   add(circle);
    
   radius /= i;
   CENTER_Y = getHeight() - radius;
   color = Randomizer.nextColor();
}

user_17164813 · Answer

Ok so here is the full code:

var NUM_CIRCLES = 30;
var BIG_RADIUS = 180;
var color = Randomizer.nextColor();
var radius = BIG_RADIUS;
var CENTER_X = getWidth() / 2;
var CENTER_Y = getHeight() - radius;

function start(){
    for (var i = 0; i < NUM_CIRCLES; i++){
        var circle = new Circle(radius);
        circle.setPosition(CENTER_X,CENTER_Y);
        circle.setColor(color);
        add(circle);
    
        radius /= i;
        CENTER_Y = getHeight() - radius;
        color = Randomizer.nextColor();
    }
}

user_11645980 · Answer

as far as i understand you are trying to produce circles from bigger to smaller reducing radius of them by number of circles

to achive that do eachReduce = radius / numberofcircles and use it as eachReduce constant to reduce each circle by that number to achieve bigger to smaller size till zero take a look at below example

let numofcir = 10,
    radius = 80,
    reduceEachBy = radius / numofcir,
    offset = radius / 2

function setup() {
  createCanvas(640, 360);
  noLoop()
}

function draw() {
  background(0)
  stroke(255)
  noFill()

  for(let i=0;i < numofcir;i++){
    // in p5 ellipse creates circle by x and y radius
    ellipse(offset + (i * offset),150,radius,radius)
    radius -= reduceEachBy
  }
}

Circle radius not being sized correctly

2 Answers