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();
}
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();
}
}
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
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js" integrity="sha512-N4kV7GkNv7QR7RX9YF/olywyIgIwNvfEe2nZtfyj73HdjCUkAfOBDbcuJ/cTaN04JKRnw1YG1wnUyNKMsNgg3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>